Creating Alloy Widgets

  • View
    6.943

  • Download
    2

Embed Size (px)

DESCRIPTION

Create Alloy widgets using Titanium Appcelerator.

Transcript

  • 1.ALLOY WIDGETSImproving code re-use through a library of bespoke UIcomponents. TiConf.euMartin Hudson, Jonti Hudson February 2013

2. WHAT IS A WIDGET?A self-contained bespoke UI component thatholds all the logic associated with its use. 3. WHAT IS A WIDGET?A self-contained bespoke UI component thatholds all the logic associated with its use. Create a re-usable library across multipleprojects 4. WHAT IS A WIDGET?A self-contained bespoke UI component thatholds all the logic associated with its use. Create a re-usable library across multipleprojects Create components that manage cross-platform differences (e.g. a table edit / deletecomponent) 5. WHAT IS A WIDGET?A self-contained bespoke UI component thatholds all the logic associated with its use. Create a re-usable library across multipleprojects Create components that manage cross-platform differences (e.g. a table edit / deletecomponent) Improve readability of code 6. WHAT IS A WIDGET?A self-contained bespoke UI component thatholds all the logic associated with its use. Create a re-usable library across multipleprojects Create components that manage cross-platform differences (e.g. a table edit / deletecomponent) Improve readability of code Improve reliability due to re-use of testedcomponents. 7. WHAT IS A WIDGET?App Widget Multiple widgets in the same window... 8. WHAT IS A WIDGET?AppWidget ... or multiple instances of the same widget 9. A CUSTOM TABLE VIEW WIDGETAn example of building a cross-platform widget that encapsulates commonfunctionality but utilises platform specic behaviour. 10. CREATING A WIDGETTo create a new widget, right click the project name in the Titanium Studioproject view... and select New Alloy Widget. 11. CREATING A WIDGETTo create a new widget, right click the project name in the Titanium Studioproject view... and select New Alloy Widget.Use a Reverse domain naming convention to ensure widget names are notreplicated when you share widgets with others. 12. WIDGET FILE STRUCTUREA widgets folder is created with Controllers, Styles and Views sub-directories.Note the absence of Models this is because the main app should handledata storage 13. USING A WIDGETIn the main app, we will call the newly created widget using the Require tag.App index.xmlWidget widget.xmlsrc="co.mobiledatasystems.customEditableTable"id="table1"> 14. USING A WIDGETIn the main app, we will call the newly created widget using the Require tag.App index.xmlWidget widget.xmlsrc="co.mobiledatasystems.customEditableTable"id="table1"> Note we specify that we want a widget and reference the name of our newwidget. Alloy knows where to nd it. 15. USING A WIDGETIn the main app, we will call the newly created widget using the Require tag.App index.xmlWidget widget.xmlsrc="co.mobiledatasystems.customEditableTable"id="table1"> In the widget, we specify the UI components we want to expose. In our case it is only a TableView. 16. STYLINGApp index.tssWidget widget.tss".container": { backgroundColor:"white"},"#table1": { left: 10dp, right: 10dp, top: 20dp, bottom:80dp},"#btnEdit": { bottom:10dp, left:20dp, right:20dp, height:45dp}We have referenced our instance of thewidget table1 in index.xml 17. STYLING App index.tssWidget widget.tss ".container": {backgroundColor:"white" }, "#table1": {left: 10dp,right: 10dp,top: 40dp,bottom:80dp }, "#btnEdit": {bottom:10dp,left:20dp,right:20dp,height:45dp }Note, where possible, do all the styling ofwidget components in the main app. Thisensures maximum re-usability across projects. 18. CONTROLLERS - INITIALISE App index.tss Widget widget.js//copy the arguments passed in to the widget via. ".container": {the xml and tss parametersbackgroundColor:"white" }, var _args = arguments[0] || {}; "#table1": { var editable = null;left: 10dp,right: 10dp,if(OS_ANDROID){top: 40dp,editable = false;bottom:80dp }; },//get each element set in the widgets xml or tss "#btnEdit": {parametersbottom:10dp,left:20dp,Ti.API.info(JSON.stringify(_args));right:20dp,height:45dp //iterate round all the parameters we have passed }infor (var key in _args) {if (_args.hasOwnProperty(key)) {In the widgets controller we can //checks key is a direct property of _args, notaccess all the parameters passed in somewhere down the object treeusing the arguments[] array.if(OS_ANDROID){ switch (key){ 19. CONTROLLERS - INITIALISE App index.tss Widget widget.js//copy the arguments passed in to the widget via. ".container": {the xml and tss parametersbackgroundColor:"white" }, var _args = arguments[0] || {}; "#table1": { var editable = null;left: 10dp,right: 10dp,if(OS_ANDROID){top: 40dp,editable = false;bottom:80dp }; },//get each element set in the widgets xml or tss "#btnEdit": {parametersbottom:10dp,left:20dp,Ti.API.info(JSON.stringify(_args));right:20dp,height:45dp //iterate round all the parameters we have passed }infor (var key in _args) {if (_args.hasOwnProperty(key)) {In the widgets controller we can //checks key is a direct property of _args, notaccess all the parameters passed in somewhere down the object treeusing the arguments[] array.if(OS_ANDROID){ switch (key){ 20. CONTROLLERS - INITIALISE App index.tss Widget widget.js //iterate round all the parameters we have passed ".container": { inbackgroundColor:"white" }, for (var key in _args) { "#table1": { if (_args.hasOwnProperty(key)) {left: 10dp,right: 10dp, //checks key is a direct property of _args, nottop: 40dp, somewhere down the object treebottom:80dp }, if(OS_ANDROID){ "#btnEdit": {switch (key){bottom:10dp, case editing:left:20dp, editable = _args[key];right:20dp, break;height:45dp case moving: break; //android } doesnt recognise this property default:We can read each parameter passed in } $.table[key] = _args[key];and process them appropriately. In our } else { $.table[key] = _args[key];example editable and moving are };};iOS specic. We will set a local };variable in the case of Android. 21. CONTROLLERS - INITIALISE App index.tss Widget widget.js //iterate round all the parameters we have passed ".container": { inbackgroundColor:"white" }, for (var key in _args) { "#table1": { if (_args.hasOwnProperty(key)) {left: 10dp,right: 10dp, //checks key is a direct property of _args, nottop: 40dp, somewhere down the object treebottom:80dp }, if(OS_ANDROID){ "#btnEdit": {switch (key){bottom:10dp, case editing:left:20dp, editable = _args[key];right:20dp, break;height:45dp case moving: break; //android } doesnt recognise this property default:We can read each parameter passed in } $.table[key] = _args[key];and process them appropriately. In our } else { $.table[key] = _args[key];example editable and moving are };};iOS specic. We will set a local };variable in the case of Android. 22. CONTROLLERS CALLING FUNCTIONS App index.jsWidget widget.js$.index.open(); //custom method we expose to set the tablesdatavar editMode = false; exports.setData = function(rows /*Ti.UI.Row*/){ $.table.setData(rows);//create some data to put in the table};var rows = [];for(var i=0;i