Designing techniques in Titanium

by admin, November 4, 2014

oX00R

When using titanium to build mobile apps developer must mainly focused on designing the GUI.For that you have two options
Using Alloy framework which is I recommend most and using app.js method

 

Alloy framework
for ref: http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Framework

From my point of view alloy is a framework that follows the standard mvc model which helps us to build apps to a standard and much more cleaner and faster way

Alloy
Model (containing the data models such as sql lite database objects and so on (js))
View (GUI part of the screen in a form of xml)
Controller (Part that controls the GUI and where we write coding part (js))

Provides another additional set of files for design tss which does the styling part

App.js
Every thing under one java script file

What ever the framework you use the designing methods you need to follow is same

Working with views,scrollable,buttons,text-fields,imageview

Main part of designing as I see is the proper alignment and scale(height and width)
We have two options we can declare the height and width in pixels or by screen percentage which is I suggest the most
For alignment we can make use of top,bottom,left right properties and align the objects for best appearance

Using views to make the GUI better

View can be used as a holder of many objects like(buttons,text fields).From my experience rather than just declaring fields I felt that pretty good to handle and design
Note:
<View width=”100″ height=”100″>
<ImageView ….. width=”100%” height=”100%”/>
</View>
Here maximum scale of image view will take 100px for width and height not the size of the whole screen

Use of Id’s

When designing GUI their might be times that wee need to color things change backgrounds after the screens starts so for that we need
to make use of id’s

eg:
<Alloy>
<Window>
<View height=’100%’ width=’100%’  backgroundColor=”green” id=”viewN” top=”0″  >
…..
</View>
</Window>
</Alloy>

so from the controller side js file we can call the setBackgroundColor function and change the color when ever is required
$.viewN.setBackgroundColor(“Red”);

Next Big thing

Titanium is cross platform which supports android and ios from one code basis so when designing there are some situations that we needs to use two different coding
steps like one code for android one for ios.
For when this situation comes across we can select the platform and limitations can be performed

eg:

<Picker id=”picker” top=”10″  selectionIndicator=”true”    platform=”android”  width=”95%” height=”50″  >
<PickerColumn id=”column1″ selectedRow=”0″  >
<PickerRow title=”Select an Event name” />
</PickerColumn>
</Picker>

So now when executed this picker will only be appearing from an android device.
Or we can get the device from the js code and design accordingly as well.

Designing Example:

eg

index.xml
Place 4 images under assest folder)

<Alloy>
<Window class=”container” backgroundColor=”white”>
<View width=”33%” height=”33%”  top=”0″ left=”0″>
<ImageView image=”/1.jpg”></ImageView>
</View>

<View width=”33%” height=”33%”  top=”0″ right=”0″>
<ImageView image=”/2.jpg”></ImageView>
</View>

<View width=”33%” height=”33%” top=”33%” center=”0″>
<ImageView image=”/3.jpg”></ImageView>
</View>

<View width=”33%” height=”33%” bottom=”0″ left=”0″>
<ImageView image=”/4.jpg”></ImageView>
</View>

<View width=”33%” height=”33%”  bottom=”0″ right=”0″>
<ImageView image=”/5.jpg”></ImageView>
</View>
</Window>
</Alloy>

 

Icons used

icons-390