User interface

Course Outline

Exercise -1

Include platform specific resources at build time

Solution

1) Create a TestPlatform.js with following code and save it in Assets/Android

    Ti.API.info("called from Android specific library');

2) Create a TestPlatform.js with following code and save it in Assets/MobileWeb

    Ti.API.info("called from Android specific library');

3) Preview applicatioon in Android / Mobile  Web and confirm if platform specific files are getting loaded

Exercise -1.1

Test the position behavior of UI elements 

Solution

1. Create a new Titanium Mobile project.
2. Create a gridlines.js file containing the code. (shared with you)
3. In app.js, remove all of the existing code. Declare a window, require the grid line module, and draw gridlines every 20 points, following the example code as shown
4. var grid = require('gridlines');
5. grid.drawgrid(20,win);
6. Implement the positioning code (as given in Detailed Code below) shown in the example labeled "Positioning" above. This will draw red, blue, yellow, and green boxes at various positions on the screen.
7. Build and run the project. Count the gridlines to confirm that elements were placed as described in this chapter.
8. Adjust the positioning properties of the various boxes to test positioning rules.
9. Try setting the window's layout property to vertical or horizontal to see the effect on the lines and boxes. Adjust the code so that the boxes are visible.

Detailed Code

var win=Ti.UI.createWindow({});

var redview = Ti.UI.createView({

    top:20,

left:20,

    width:10,

    height:10,

    backgroundColor:"red"

});

win.add(redview);

var yellowview = Ti.UI.createView({

    bottom:100,

right:100,

    width:10,

    height:10,

    backgroundColor:"yellow"

});

win.add(yellowview);

var blueview = Ti.UI.createView({

center: {x: 160, y: 240},

width:50,

height:50,

backgroundColor:"blue"

});

win.add(blueview);

var greenview = Ti.UI.createView({

    top:-20,

    width:10,

    height:10,

    backgroundColor:"green"

});

win.add(greenview);

win.open();

Exercise - 3

Achieve above results using ALLOY

Exercise - 3.1

Try to vertically and horizonatlly align elements


Solution

<Window layout="vertical>

<View baclgroundcolor="green" height="20" width="20"></View>
<View baclgroundcolor="red" height="20" width="20"></View>
<View baclgroundcolor="blue" height="20" width="20"></View>

</Window>

 INTERNATIONALIZATION

Internationalize your app using replaceable strings

Avoid hardcoding ! Go for localized string

Exercise - 4

Use localized string for Dialog Messages

Solution

1> Create folder i18n under same level of “app” folder

2> create “strings.xml” under language directory

3> var str1 = L('welcome_message');

var str2 = Ti.Locale.getString('welcome_message');

Ti.API.info ('WELCOME MESSAGE FROM LOCALIZED STRING'+str1+'-'+str2);

Exercise - 5

Handle missing Key in localization

Solution

var str1 = L('WelcomeMessage', 'Nothing available');

Exercise - 6

Assign title to titanium UI objects using localization

Solution

var label = Ti.UI.createLabel({

titleid: 'welcome_message'

});

Exercise - 7

Replace values in a local string

Solution

var formatted = String.format(L('format_test'),'Infy');

var formatted = String.format(L('ordered'), 'Infy', 'Murthy');




 

Exercise - 8

Internationalize App Name

Solution

Exercise - 9

 Create a button and make it to Listen to an event . Click the button and make sure event listener is working

Solution

Write following code in controller
function doSomething(e) {
Ti.API.info('The '+e.type+' event happened');
}

 $.mybutton.addEventListener('click', doSomething);

Exercise - 10

 Create a button and make it to Listen to an event

Solution

 $.mybutton.fireEvent('click');

Exercise - 11

 Pass data with event and retrieve same in listener

Solution

 $.mybutton.fireEvent('click', {kitchen: 'sink'})

 $.mybutton.addEventListener('click', function(e){
        Ti.APP.info('The value of kitchen is '+e.kitchen);
});