API Development

Titanium Tip: Secret Way to Add New Features to Titanium

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 – next meetup is Sep 14, 2017. This is the first in a series of tips Brenton plans to do for cross-platform native mobile app developers using Axway Titanium.

Time to step up your game with these hidden Titanium features!

There are all kinds of cool things that you can do with Axway Titanium and Alloy once you start using it a bit. One thing that just got a whole lot easier with a recent update to Alloy is the ability to hook into Alloy’s use of Babel (a JavaScript compiler). There are TONS of Babel plugins and presets out there, and it is also fairly easy to write your own.


NOTE: This feature does require using Alloy 1.10+. At the time of this publication, that version is not yet included in the Appcelerator bundle but can be installed using: npm install -g alloy@1.10.3


UPDATE: I’ve changed the JavaScript code for alloy.jmk to use ES5 code. You can use ES6+ code in alloy.jmk (and other Node.js scripts) if you are using Node.js 6.x+

To get things started lets try using Babel to do something that Babel is pretty popular for…

Adding ES2016/ES2017 support to your app

Say, for example, you wanted to use ES6/ES2016/ES2017 in your code today. Full ES6 support is coming soon to Titanium but you can get started using it today with these easy steps:

UPDATE: The latest versions of Titanium and Alloy fully support ES6. Future versions of Studio will add ES6 support to LiveView

  1. Create a file called alloy.jmk in your app directory (if that file doesn’t already exist).
  2. Add the following code to alloy.jmk:

    
    var sourceMapper = require('./sourceMapper');
    var paths = require('global-paths');
    var projectDirectory;
    var logger;
    
    function resolver(moduleName) {
        return require(require('resolve').sync(moduleName, {
            basedir: projectDirectory,
            paths:   paths(),
        }));
    }
    
    task('pre:load', (event, alloyLogger) => {
        logger = alloyLogger;
        projectDirectory = event.dir.project;
    
        sourceMapper.OPTIONS_OUTPUT.presets = sourceMapper.OPTIONS_OUTPUT.presets || [];
        sourceMapper.OPTIONS_OUTPUT.presets.push(resolver('babel-preset-env'));
    
    });
    
  3. In the root of your project, run: npm install babel-preset-env
  4. Run your project and enjoy!


Well, that was easy! Let’s try something a little more interesting…

Allowing controller arguments to be used as parameters to child views/controllers.

So say now you want to do something like this in your controller xml:


<Alloy>
    <Label id="label" text="$.args.title" />
</Alloy>

Which generates JavaScript similar to this:


$.__views.label = Ti.UI.createLabel({ id: "label", text: "$.args.title" });

But what you REALLY want is code like this:


$.__views.label = Ti.UI.createLabel({ id: "label", text: $.args.title});

Sooo… we go back to our alloy.jmk file and add this call:


    sourceMapper.OPTIONS_OUTPUT.presets.push({
        plugins: [
            [ resolver('babel-plugin-titanium-controller-args') ],
        ],
    });

We also add this plugin to our project: npm install babel-plugin-titanium-controller-args

BAM!

The babel plugin: titanium-controller-args (written by yours truly) converts the string literals in your parameters that start with “$.args.” and converts them to variables.

Our generated code now looks like we wanted it to:


$.__views.label = Ti.UI.createLabel({ id: "label", text: $.args.title});

Now you can pass in the title to your controller with code like this:


var myController = Alloy.createController("index", { title: "This is so awesome!" });

You may have noticed that we wrapped our plugin in a preset object. We need to do this for now but keep your eyes on this feature: (https://jira.appcelerator.org/browse/TIMOB-24980) because once it is implemented, this whole process will get even easier!!

But wait! There’s more!!

Ideas are now materializing in your head. But can I do _____? Why yes! You can!

What if I want to remove all the console statements out of my code?

You can add this plugin! https://www.npmjs.com/package/babel-plugin-transform-remove-console

If you need more ideas, take a look at some of the Babel plugins already written or better yet, try writing one of your own! The source code for babel-plugin-titanium-controller-args (try saying that 5 times real fast!) is located here: https://github.com/brentonhouse/babel-plugin-titanium-controller-args

OK. I’ve been Babel-ing on long enough…

Stay tuned for more exciting mobile development tips!