We
all know how bothersome multi-platform mobile app formatting can get.
Each platform is unique and exhibits different features, capabilities
and behaviour. But then, multi-platform apps are truly “in” today. So –
YOU – as the developer, need to find solutions to develop the best
cross-formatted apps, without exhausting all your resources on
developing for just a couple of platforms at one time.
Fortunately
for you, there are some really great multi-platform developer tools in
the market today, using which you can easily achieve your aim. Here is
an Appcelerator dev tool for cross-formatting mobile applications. You
can find the platform tutorials in this Appcelerator link .
The
Titanium Development Platform from Appcelerator, which incidentally has
a formidable fan following in Twitter, aids the development of native
mobile, tablet and desktop apps via web programming languages such as
HTML, PHP, JavaScript, Ruby and Python. It now powers over a 1,000
native apps per month. The best thing about Titanium is that if gives
users easy access to over 300 APIs and location information.
Additionally,
Appcelerator also offers customizable metrics for actions and events.
Apps can be totally hardware-based and all app data can be stored either
in the cloud or on the device.
Developers
of mobile applications know exactly how difficult and frustrating app
coding can sometimes get. The problem intensifies further while writing
code for multi-platform mobile applications. Each mobile platform, such
as Windows Mobile, BlackBerry, Palm, iPhone, iPad and so on, has its own
set of features. If designing across diverse devices is a challenge, it
is even more so for those who create applications which should be
portable across multiple platforms. How can you develop and design for
such varied device platforms?
Here, I explain how to design a enterprise mobile app screens in easier way across all the devices.
Start off by dividing the screen into number of views
- First view contains company logo with a border.
- Second View contains application name and the simple description of the application.
- Third view contains the buttons.
- The last view is the bottom view be careful here I am not numbering this view as four, named it as bottom view because across all the devices it should appear in the bottom of the screen.
Code:
Step 1: To create a window
Var window = Titanium.UI.createWindow();
Step 2: To create first view
Var FirstView = Ti.UI.createView({width:Ti.UI.FILL,height: ‘ 20%‘});
Var border = Ti.UI.createView({width:Ti.UI.FILL,height:’2%’});
Step 3: To create the logo image view
Var LogoImage = Ti.UI.CreateImageView(Image:’path of the image’;Width:Ti.UI.FILL,Height:’18%’});FirstView.add(LogoImage);FirstView.add(border);Window.add(FirstView);
Step 4: To create second view
Var SecondView = Ti.UI.createView({width:Ti.UI.FILL,height: ‘ 30%‘});
Step 5: To create sub views of second view
Var
appicationName = Ti.UI.createLabel({Title:’Innovapptive Substituition
Manager’});Var applicationtag = Ti.UI.createLabel({Title:’write the data
from the screen’,
Top:’10dp’});
SecondView.add(applicationname);
SecondView.add(applicaationtag);
Window.add(SecondView);
Step 6: To create third view
Var ThirdView = Ti.UI.createView({width:Ti.UI.FILL,height: ‘ 40%‘});
Step 7: To create sub views of third view
Var demoButton = Ti.UI.createButton({title:’DemoApplication’});
Var setupButton = Ti.UI.createButton({title:’Setup Connection’,Top:’15dp’});
ThirdView.add(demoButton);ThidView.add(setupButton);
Window.add(ThirdView);
Step 8: To create bottom view
Var bottomBorder = Ti.UI.createView({width:Ti.UI.FILL,height:’10dp’,Bottom:’2dp’});Window.add(bottomBorder);
new window().open();
Copy
the source code into your work space run the application in any device
and see the screen look and feel is same as above screen .
“If your actions inspire others to dream more, learn more, do more and become more, you are a leader.”
Previous Article
