Dynamic Styles with Widgets and Alloy 1.2

Presentation I did to NYC TItanium Meetup on 24th Sep 2013. An introduction to Alloy, demo of TSS and how to use it, and implementing dynamic TSS styling using my own Widget and Alloy 1.2

Transcript

1. Alloy Jason Kneen Style Wednesday, 25 September 13
2. "CPVU
   NF http://twitter/jasonkneen http://github.com/jasonkneen http://jasonified.com http://bouncingfish.com App Developer, Titanium “Titan” Wednesday, 25 September 13
3. •Models (data) •Views (ui) •Controllers (logic) Introduction to Alloy MVC Framework Wednesday, 25 September 13
4. •Views as XML (<TableView id=”myTable”/>) •Layout as TSS (CSS-like) •Logic as js (controllers, libraries) •Data as models (SQL, Collections etc) •Widgets! Introduction to Alloy MVC Framework Wednesday, 25 September 13
5. The following 4 slides are shamelessly “borrowed” from Fokke Zandbergen :) Wednesday, 25 September 13
6. Alloy vs “Classic” var window = Ti.UI.createWindow({ backgroundColor: “white” }); var label = Ti.UI.createLabel({ color: “black” }); label.addEventListener(“click”, function() { require(“windowTwo”); } ); window.add(label); window.open(); Wednesday, 25 September 13
7. <Alloy> <Window> <Label onClick=”open”>Hello World</Label> </Window> </Alloy> “Window”: { backgroundColor: “white” } “Label”: { color: “black” } function open() { require(“windowTwo”); } $.index.open(); views/index.xml controllers/index.js styles/index.tss Alloy vs “Classic” Wednesday, 25 September 13
8. <Alloy> <Window> <Label platform=”ios” formFactor=”tablet”>Hi!</Label> </Window> </Alloy> “Window[platform=ios]”:{ backgroundColor: “white” } “Label[formFactor=tablet]”:{ color: “black” } if (ENV_TEST) { alert(“Bye!”); } $.index.open(); views/index.xml controllers/android/index.js styles/index.tss Alloy Conditional Code Wednesday, 25 September 13
9. <Alloy> <Window> <Label class=”text”>Hello</Label> <Label class=”text” id=”world”>World</Label> </Window> </Alloy> views/index.xml “.text”:{ shadowColor: “#000” } “#world”:{ color: “green” } $.world.text = “DMC13” $.index.open(); controllers/index.js styles/index.tss Alloy Classes & IDs Wednesday, 25 September 13
10. Moving from Ti Classic to Alloy •Understand Common JS principles •Understand underlying Ti SDK •Easy to be hidden from the “magic” •Don’t touch Resources! •You *can* mix Ti Classic with Alloy Wednesday, 25 September 13
11. Alloy Advantages •Separate UI from Logic •Pre-complied, no overhead •Only includes the code you need •CommonJS based •Backbone, Underscore etc built-in Wednesday, 25 September 13
12. Dynamic Styles in Alloy Wednesday, 25 September 13
13. • Styles are specified TSS • Styles are pre-compiled • What if you want to change at run-time? Dynamic Styles in Alloy The problem Wednesday, 25 September 13
14. •Manually, use Classic Ti •Use an Alloy Widget •In Alloy 1.2, use Dynamic Styles Dynamic Styles in Alloy Solutions Wednesday, 25 September 13
15. Classic Ti Wednesday, 25 September 13
16. • Mix Classic Ti with Alloy - it works • Not fitting with the MVC model • Difficult to debug / understand Dynamic Styles in Alloy Use Classic Titanium $.labelName.color = “red”; $.labelName.applyProperties(... Wednesday, 25 September 13
17. Dynamic TSS Widget Wednesday, 25 September 13
18. Wednesday, 25 September 13
19. • Originally designed to handle Orientation layout changes • Drop into an existing Window/View • Add TSS “sub-styles" • Download from github.com/jasonkneen Dynamic Styles in Alloy Use a Dynamic TSS Widget! Wednesday, 25 September 13
20. Alloy 1.2 Dynamic Styles Wednesday, 25 September 13
21. • Introduced in 1.2 • Create run-time classes or, • Use TSS and add, remove, reset classes on-the-fly (my preference) Dynamic TSS in Alloy Using 1.2 and above Wednesday, 25 September 13
22. • $.addClass($.label1, “big”); • $.removeClass($.label1, “big”); • $.resetClass($.label1); Dynamic TSS in Alloy Using 1.2 and above Wednesday, 25 September 13
23. Demo Wednesday, 25 September 13
24. Thank you! Wednesday, 25 September 13