Titanium Alloy Tutorial

Transcription

1 Crossplatform Programming Titanium Alloy Tutorial Parma

2 Create a new project Create a new project by selecting File New Project Select Alloy on the left section of the wizard and choose Mobile App Project Default Alloy Project 2015 Parma

3 Create a new project We ll add 2 tabs to our app Create files taboneview.xml and tabtwoview.xml for the tab views in app/views <Alloy> <Tab id='first_tab' title='tab 1' icon="ks_nav_views.png"> <Window title='tab view one' class='container'> <Label>I am Window 1</Label> <Button id='open_button'>open Child Window</Button> </Window> </Tab> </Alloy> <Alloy> <Tab id='second_tab' title='tab 2' icon="ks_nav_ui.png"> <Window title='tab view two' class='container'> <TableView id='contactstable'></tableview> </Window> </Tab> </Alloy> taboneview.xml code tabtwoview.xml code 2015 Parma

4 Defining a Tab Each element of the view requires an id so that the controller can access it Images are taken from app/images directory The view includes a Tab with a nested Window including a button We ll now define the first tab s child window Create file taboneviewchild.xml in app/views <Alloy> <Window id="first_tab_child_window" title='tab view one child' class='container'> </Window> </Alloy> 2015 Parma

5 Setting the style The style properties for a view have to be specified in a file having the same name of the view file and.tss extension (e.g., the style for index.xml view must be specified in index.tss file) Style files have to be placed in app/styles directory You can also define a file named app.tss to include all the styles that have to be applied to every element in the app Create such a file and add the following code ".container": { backgroundcolor:"white" Now, every element having class container will have a white background, regardless of the file where it has been defined If you want to specify the position of taboneview s button, you can create taboneview.tss file and set its layout as: "#open_button": { position: 'absolute', top: '20px' 2015 Parma

6 Defining a TabGroup Now that the tab views are ready, we ll build the tab group to contain them in index.xml To specify the views to be included, use the Require element <Alloy> </Alloy> <TabGroup> <Require src="taboneview" /> <Require src="tabtwoview" /> </TabGroup> The tabs code can of course be included directly in index.xml file, but the use of Require elements makes the code more modular since the functionality for each component is separated into a specific controller file 2015 Parma

7 Defining controllers Now you can implement the controllers in app/controllers index.js is the controller for the view defined in index.html You can create the controller for taboneview view in file taboneview.js and add a function executed when the user presses the button $.open_button.addeventlistener('click', function(e) { var tabviewonechildcontroller = Alloy.createController('tabOneViewChild'); tabviewonechildcontroller.openmainwindow($.first_tab); ); The code refers to a function defined in taboneviewchild.js which takes a Tab as param and opens a window in it. Such a function is exported with openmainwindow name The event listener $.open_button is called when the user presses the button having id open_button (the $. notation allows you to access elements by id) Alloy.createController( ID ) returns the controller for the view whose id is passed as a parameter 2015 Parma

8 Defining controllers We ll now define openmainwindow method Create app/controllers/taboneviewchild.js file and add the following content function openmainwindow(tab){ tab.open($.first_tab_child_window); exports.openmainwindow = openmainwindow; The code defines a function which takes a Tab as parameter and opens a window in it (the type Tab is required to be able to call method open for the parameter) The function is exported with name openmainwindow 2015 Parma

9 Adding a map We ll now add a map and a text field to look for locations to taboneviewchild by editing taboneview.xml as follows <Alloy> <Window id="first_tab_child_window" title='tab view one child' class='container'> <Require src="addressfield" id="addressfield" /> <Require src="map" id="map" /> </Window> </Alloy> The code requires two additional views to: display a map (map.xml) search for an address and center the map on it (addressfield.xml) In the following we define the required views 2015 Parma

10 Specifying the map module The map is not part of Titanium, so we need to use a proper module named Ti.Map (we will add it to the project in 4 slides) Create file app/views/map.xml and add the following code <Alloy> <View id="map" ns="ti.map" > <Require src="annotation" title="annotation" /> </View> </Alloy> All UI components specified in the views are prefixed with Titanium.UI for convenience. However, to use a component not part of the Titanium.UI namespace, you need to use the ns attribute Ti.Map will be used to interact with the map The map view requires a view, named annotation, which represents a labeled point of interest (POI) the user can click Create file app/views/annotation.xml and add the following code <Alloy> <Annotation id="annotation" /> </Alloy> Create app/views/addressfield.xml file and add the following code <Alloy> <View class="addressfield"> <TextField id="textfield" hinttext="enter an address" /> <Button id="searchbutton" title="search" /> </View> </Alloy> 2015 Parma

11 We ll now define the style for the required views Setting map s views style Create file app/styles/map.tss and add the following code "#map" : { maptype : 'Ti.Map.STANDARD_TYPE', top : '50dp', animate : true, regionfit : true, userlocation : true, region : { latitude : Alloy.Globals.LATITUDE_BASE, longitude : Alloy.Globals.LONGITUDE_BASE, latitudedelta : 0.1, longitudedelta : 0.1 Map s properties are described in 2 slides Create file app/styles/annotation.tss and add the following code "Annotation" : { animate : true, pincolor : Titanium.Map.ANNOTATION_RED 2015 Parma

12 Setting map s views style Create file app/styles/addressfield.tss and add the following code "TextField" : { height : '40dp', top : '5dp', left : '5dp', right : '150dp', style : Ti.UI.INPUT_BORDERSTYLE_ROUNDED, backgroundcolor : '#fff', paddingleft : '5dp' "Button" : { font : { fontsize : '20dp', fontweight : 'bold', top : '5dp', height : '40dp', width : '150dp', right : '5dp' ".addressfield" : { backgroundcolor : '#E0E0E0', height : '50dp', top : Parma

13 Map attributes Map attributes maptype indicates what type of map should be displayed (possible values are: Ti.Map.STANDARD_TYPE, Ti.Map.SATELLITE_TYPE and Ti.Map.HYBRID_TYPE) animate is a boolean that indicates whether or not map actions, like opening and adding annotations, should be animated regionfit is a boolean that indicates if the map should attempt to fit the region (MapView) in the visible view userlocation is a boolean that indicates if the map should show the user's current device location as a pin on the map region is an object that contains the 4 properties defining the visible area of the MapView latitude and longitude represent the center of the map and are set based on the two variables defined in alloy.js file The same latitude and longitude of a region can be represented with a different level of zoom via the latitudedelta and longitudedelta properties (they respectively represent the latitude north and south, and the longitude east and west, from the center of the map that will be visible) the smaller the delta values, the closer the zoom on the map 2015 Parma

14 Adding the map module to the project To display a map, it is necessary to add the ti.map module Open tiapp.xml and click on + on the modules side Choose ti.map module and add it To use the module, you need to specify it by adding to alloy.js file the following code Alloy.Globals.LATITUDE_BASE = ; Alloy.Globals.LONGITUDE_BASE = 10.3; if (OS_IOS OS_ANDROID) { Ti.Map = require('ti.map'); The first ad second line define two variables that will represent the center of the map The if block specifies that Ti.Map calls refer to ti.map module (the if condition is due to the fact that the map module is just available for ios and Android platforms) the ns attribute of map.xml file refers to this 2015 Parma

15 Geocoding To geocode the addresses provided by the user, you can use a script provided by Appcelerator in the Alloy Samples page ( namely geo.js, and store it in app/lib Define the controllers for the new views Create file app/controllers/addressfield.js and add the following code var geo = require('geo'); $.searchbutton.addeventlistener('click', function(e) { ); $.textfield.blur(); geo.forwardgeocode($.textfield.value, function(geodata) { ); $.trigger('addannotation', {geodata: geodata); searchbutton click event listener executes a function called forwardgeocode from geo.js which computes the latitude and longitude corresponding to the address the user provided; its second parameter is a callback to be executed upon correct coordinates retrieval Parma

16 Adding map controller Create file app/controllers/map.js and add the following code var annotations = new Array(); exports.addannotation = function(geodata) { var annotation = Alloy.createController('annotation', { title : geodata.title, latitude : geodata.coords.latitude, longitude : geodata.coords.longitude ); annotations.push(annotation); $.map.addannotation(annotation.getview()); $.map.setlocation({ latitude : geodata.coords.latitude, longitude : geodata.coords.longitude, latitudedelta : 1, longitudedelta : 1 ); ; 2015 Parma

17 Editing controllers Add a function to taboneviewchild controller so that when the user presses searchbutton, and its callback executes, function addannotation defined in map controller is called ($.map.addannotation) $.addressfield.on('addannotation', function(e) { $.map.addannotation(e.geodata); ); searchbutton callback calls forwardgeocode function defined in geo.js which takes, as second parameter, a callback triggering function addannotation since such a function is not defined in taboneviewchild controller, the code we add uses the on method to call addannotation function defined in map.js addannotation function adds a pin in the location searched by the user to do so, you need to define the Annotation controller var args = arguments[0] {; $.annotation.title = args.title ''; $.annotation.latitude = args.latitude Alloy.Globals.LATITUDE_BASE; $.annotation.longitude = args.longitude Alloy.Globals.LONGITUDE_BASE; The OR means that each variable can assume the value passed as a parameter when the controller is created, or a default value The controller for a new annotation is created by addannotation method in map.js (see previous slide) 2015 Parma

18 Events management Events can be used to provide interactions between different controllers Ti.App.addEventListener("app:clickedAnnotation", function(evt) { var indexofclickedelement; for(var i = 0; i < annotations.length; i++) { var currentannotationtitle = annotations[i].getview().title; We can modify map.js so that, when a user clicks on a pin on the map, such a pin is removed upon confirm Add an array for the annotations in map.js Each time an annotation is added to the map from function addannotation in map.js, also add it to the array Add an event listener for the clicked pin and ask the user if he/she wants to remove the pin We also have to modify annotation controller to fire an event when the user clicks the annotation itself $.annotation.addeventlistener('click', function(e) { Ti.App.fireEvent("app:clickedAnnotation", { title : e.source.title ); ); ); if(currentannotationtitle == evt.title) { // The index of the clicked annotation in the array indexofclickedelement = i; var removepinalert = Titanium.UI.createAlertDialog({ message: 'Remove pin?', buttonnames: ['Confirm', 'Cancel'] ); removepinalert.addeventlistener('click', function(e) { // Clicked cancel, first check is for iphone, second for android if (e.cancel === e.index e.cancel === true) { return; switch (e.index) { case 0: { annotations.splice(indexofclickedelement, 1); $.map.removeannotation(evt.title); break; case 1: { removepinalert.hide(); break; default: break; ); removepinalert.show(); break; // exit from for cycle 2015 Parma

19 Contacts management var addressbookdisallowed = function() { alert("cannot access address book"); ; Alloy can access native APIs such as the phone contacts We can display in tabtwoview a table listing all contacts Also, we can add a listener to the table so that, when the user clicks a row, an alert displaying the information of the contacts is presented $.contactstable.addeventlistener("click", function(e) { var contactdetails = e.source.title + "\n"; for(var temp in e.source.phone) { var temp_numbers = e.source.phone[temp]; for(var k=0;k<temp_numbers.length; k++) { var temp_num = temp_numbers[k]; temp_num = temp_num.replace(/[^\d.]/g, ""); contactdetails += temp_num + "\n"; alert("clicked " + contactdetails); ); if (Ti.Contacts.contactsAuthorization == Ti.Contacts.AUTHORIZATION_AUTHORIZED) { rendercontacts(); else if (Ti.Contacts.contactsAuthorization == Ti.Contacts.AUTHORIZATION_UNKNOWN) { Ti.Contacts.requestAuthorization(function(e) { if (e.success) { rendercontacts(); else { addressbookdisallowed(); ); else { addressbookdisallowed(); var data = []; function rendercontacts() { var contacts = Ti.Contacts.getAllPeople(); data = []; for (var i = 0; i < contacts.length; i++) { var title = contacts[i].fullname; var phone = contacts[i].phone; if (!title title.length === 0) { title = "(no name)"; data.push({ title : title, phone : phone ); $.contactstable.setdata(data); 2015 Parma

20 Final result 2015 Parma