Modal Info View – CommonJS Titanium Mobile Development
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
iPhone
iPad
Mobile Web
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?
Post Your Comment Here