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

 

Download our Free E-Book and learn how the Product Mindset can benefit your mobile app. 

Through this guide, we want to give you, product owners, product managers, engineers, entrepreneurs and anybody looking to build great digital products, more insights into the importance of user-centric design and development and how to correctly achieve it.

How Product Mindset Can Save your Sinking App

You may also like:

Post Your Comment Here