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: and don’t forget to read the docs to have a better comprehension of what Titanium can do at:

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=""></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({
    var background = Titanium.UI.createView({
    var message = Titanium.UI.createLabel({
    var animationProperties = {delay: 1500, duration: 300, opacity: 0.1};
    if (Ti.Platform.osname == "iPhone OS") {
        animationProperties.transform = Ti.UI.create2DMatrix()
    infoWindow.animate(animationProperties, function(){ infoWindow.close(); });

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

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:


modal android resized 600


modal iphone resized 600


modal ipad resized 600

Mobile Web

modal mobileweb resized 600

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

cesar cavazos signature


Download our Free Whitepaper and learn more about why nearshore outsourcing in Mexico makes complete sense.

This “Nearshore Plus” model of software development offers Convenience at the core. 

  1. Cost-effective 
  2. Flexibility
  3. Time savings
  4. Talent
  5. Access to domain knowledge
  6. Meeting expectations
  7. Scale-up teams skills


Nearshore whitepaper / Why Mexico is the next frontier for software development?

You may also like:

Post Your Comment Here