Axway Appcelerator Blog

The Leading Resource for All Things Mobile

Titanium Tip:  Use Camels, Snakes, and Kababs in your Alloy XML

0 Flares 0 Flares ×

This guest post was written by Brenton House. Brenton is a Senior Mobile Architect for Shockoe with over 20 years experience in mobile, API, and web development. He is active in the Titanium community and has worked with clients across various industries, including broadcasting, advertising, retail, financial services, transportation, and publishing. You can find more from him on the Slack Titanium Channel, Medium and Twitter. He also hosts the Titanium Fort Worth Meetup group. This is part of a series of tips Brenton plans to do for cross-platform native mobile app developers using Axway Titanium.

More mobile development secrets revealed as the Titanium Tips continue…

In my last Titanium Tip, I showed you how you can add all kinds of fun stuff to your Axway Titanium application using the alloy.jmk build file. Well, this tip starts there and takes you somewhere you probably didn’t expect (or possible want) to find yourself. There are all kinds of things that Alloy can do that were just never exposed to developers. While the Axway team of engineers is heads-down adding cool, new, and useful features to Titanium and Alloy, yours truly, is always looking for (and finding) clever ways to add the “other features”.

NOTE: This tip uses ES6 code which assumes you are not on some old version of Node.js (you aren’t, are you?). Either install the current 8.x version of Node.js or just convert my examples to use ES5.

Before we begin, I must make a confession:

I have never been a fan of using PascalCase in my XML

There I said it.

Maybe it’s my OCD talking, but since I am using camelCase variables in my Axway Titanium JavaScript, I want to use camelCase in my Axway Titanium Alloy XML as well.

“Normal” PascalCase Alloy XML looks similar to this:

<Alloy>
    <Window id="mywindow">
        <Label />
         <View />
         <ScrollView />
     </Window>
 </Alloy>

With a little magic you could use camelCase tags, which would look something like this:

<alloy>
    <window id="mywindow">
        <label />
        <webView />
        <scrollView />
    </window>
</alloy>

Of course, when I do something crazy, I do it all-the-way crazy. With my tip, you are not limited to just camelCase. No, you could also use kabab-case:

<alloy>
    <window id="mywindow">
        <label />
        <web-view />
        <scroll-view />
    </window>
</alloy>

You could also fancy yourself using snake_case:

<alloy>
    <window id="mywindow">
        <label />
        <web_view />
        <scroll_view />
    </window>
</alloy>

Or if you are completely unbalanced and kind of crazy (I won’t tell anyone), you could mix and match…

<alloy>
    <Window id="mywindow">
        <label />
        <web_view />
        <scrollView />
    </Window>
</alloy>

Just make sure you finish what you start. If your opening tag is Window then make sure your closing tag is Window as well.

Hi Brenton! You are so cool! I am slightly crazy just like you and I want to know how to get this awesome functionality into my app??

So glad you asked.

Go to your alloy.jmk file that I’m sure you created and use every day after my last tip. Add the following to the declarations at the top of that file:


defaultParser.parse = _.wrap(defaultParser.parse, (func, node, state, parser) => { 
   node.nodeName = _.upperFirst(_.camelCase(node.nodeName));
   return func(node, state, parser);
});
utils.XML.getAlloyFromFile = filename => {
   const doc = utils.XML.parseFromFile(filename);
   const docRoot = doc.documentElement;
   // Make sure the markup has a top-level  tag
   if (docRoot.nodeName.toLowerCase() !==   constants.ROOT_NODE.toLowerCase()) {
      utils.die([ 
         'Invalid view file "' + filename + '".', 
         'All view markup must have a top-level  tag',
      ]);
   }
   return docRoot;
};

Now you can use any of the following in your Alloy XML:

PascalCase (Alloy default): ScrollView
camelCase: scrollView
snake_case: scroll_view
kabab-case: scroll-view

WARNING: Please use with adult supervision and don’t hurt yourself. Not responsible for sleepless nights from crazy ideas that this post may spark.

OK. Probably enough crazy for one post.

Stay tuned for more exciting mobile development tips!

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Bert G

    Great tip Brenton! I always hated the original case spec :)

  2. Hehe.

    Maybe I’m too old, but I like both, PascalCase and camelCase.
    Interesting post anyway.

Sign up for our blog!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×