Modal Info View – CommonJS Titanium Mobile Development

coding school Modal View

Hey guys!
After a long long time that I haven’t written any article I decided to start sharing little samples of code and videos from the latest technology I have learned: Appcelerator’s Titanium.
As a quick and simple review, Titanium is a framework to make native cross platform mobile and desktop applications based on JavaScript. Cool right? You can find all the necessary information to start creating iPhone/iPad/Android/MobileWeb Apps here:http://www.appcelerator.com/ and don’t forget to read the docs to have a better comprehension of what Titanium can do at: http://docs.appcelerator.com/

So let’s start with this little module based on Appcelerator KitchenSink app that what it really does is create a modal information popup, that you can use to show the user any kind of “alert” messages. This code has been tested on iPhone, iPad and Android with Ti SDK 2.0.1+.
At the moment I’m only including the chances to add some text. I’m going to add a couple of options to display and image and an native activity indicator.
Here is the modelview.js file:

/**
 * Modal Info View module - Titanium JS
 * @author César Cavazos - @cesarcvz
 * Based on:<a href="https://github.com/appcelerator/KitchenSink"> https://github.com/appcelerator/KitchenSink</a>
 */
/**
 * Open an infomation modal anywhere in hour app
 * @param {String} text
 * @param {Object} params
 */
exports.showInfo = function(text, params) {
        //TODO: Add params like images/icons
        params = (params) ? params : {};
    var infoWindow = Titanium.UI.createWindow({
        height:80,
        width:200,
        touchEnabled:false
    });
    var background = Titanium.UI.createView({
        height:80,
        width:200,
        backgroundColor:'#000',
        borderRadius:10,
        opacity:0.8,
        touchEnabled:false
    });
    infoWindow.add(background);
    var message = Titanium.UI.createLabel({
        text:text,
        color:'#fff',
        textAlign:'center',
        font:{fontSize:18,fontWeight:'bold'},
        height:Ti.UI.SIZE,
        width:Ti.UI.SIZE
    });
    infoWindow.add(message);
    infoWindow.open();
    var animationProperties = {delay: 1500, duration: 300, opacity: 0.1};
    if (Ti.Platform.osname == "iPhone OS") {
        animationProperties.transform = Ti.UI.create2DMatrix()
                                                     .translate(-200,200).scale(0);
    }
    infoWindow.animate(animationProperties, function(){ infoWindow.close(); });
};

To use this you only need to add these two lines to your code:

1
2
var Modal = require('modalview');
Modal.showInfo("This is an information modal view", { duration : 500 });

The first one can be added at the beginning of your file and the second one you should use it every time you need to send a modal information message. By default the duration of the modal is 300 ms but you can change it to whatever you need.

Here are some images:

Android

modal android resized 600

iPhone

modal iphone resized 600

iPad

modal ipad resized 600

Mobile Web

modal mobileweb resized 600

You can download the public gist from here: https://gist.github.com/2788549
What do you think that can be added to this little module to make it better?

cesar cavazos signature

Oscar Salas

Written by Oscar Salas

Oscar Salas is a B2B Digital Marketing Specialist with 5 years of experience, who has helped organizations to grow and expand through strategic brand development and marketing programs. Analytical thinker, cat lover, he enjoys to play the piano and listening to Led Zeppelin He's currently leading the iTexico Demand Gen strategies.

Explore iTexico, The Nearshore + Company 

Explore The Nearshore Services

Test

Recent Posts