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?