1 / 23

Basic mobile user interfaceS

Basic mobile user interfaceS. http://www.flickr.com/photos/ourcage/8343799386/. Titanium user interfaces. Each "window" is like a web page Within the window, you can lay out controls Several options for the layout Generally nice to avoid platform-specific code E.g., pixel distances.

meena
Download Presentation

Basic mobile user interfaceS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basic mobile user interfaceS http://www.flickr.com/photos/ourcage/8343799386/

  2. Titanium user interfaces • Each "window" is like a web page • Within the window, you can lay out controls • Several options for the layout • Generally nice to avoid platform-specific code • E.g., pixel distances

  3. Demo of creating a Hello World,Walkthrough of app structure

  4. Generic file layout in Titanium • Classic Titanium layout • Platform-independent code is in JS files • Platform-specific content is in subfolders • Newer Titanium layout • Subfolders for XML & JSON files

  5. Minimalist UI var win = Ti.UI.createWindow({ title : 'Very basic app', backgroundColor: '#FFFFFF' // you need to set a bg color }); varlbl = Ti.UI.createLabel({ text : 'Hello World', // you need to specify the text content color: '#000000' }); win.add(lbl); win.open();

  6. Minimalist UI

  7. Labels, text inputs, and buttons • Functions • Ti.UI.createLabel({text:""}) • Ti.UI.createTextField({value:"", autocapitalization:TEXT_AUTOCAPITALIZATION_WORDS, autocorrect:true, keyboardType:Titanium.UI.KEYBOARD_NUMBER_PAD}) • Ti.UI.createTextArea({value:""}) • Ti.UI.createButton({title:""}) • Handy parameters • borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED • color: '#3333ff', backgroundColor:'#f0f0f0' • top: 10, left: 10, width: 200, height: 40 • font:{fontSize:12, fontWeight:'bold'}

  8. Example UI (with hardcoded positions) var win = Ti.UI.createWindow({ title : 'Very basic app', backgroundColor : '#FFFFFF' }); varlbl = Ti.UI.createLabel({ text : 'Your age:', color : '#000000', top : 10, left : 10 }); win.add(lbl); var txt = Ti.UI.createTextField({ // or TextArea to create a multi-line input value : '82', keyboardType : Titanium.UI.KEYBOARD_NUMBER_PAD, top : 10, left : 80 }); win.add(txt); win.open();

  9. Example UI (with hardcoded positions) Hmmm. Position needs fine tuning!

  10. The problem of varying devices • Mobile devices are wildly different • Size (horizontal & vertical) • Font sizes (pixels per character) • Hardcoded positions will break easily • Density pixel distances (e.g., '10dp') were an attempt to fix this (1 device independent pixel == 1 physical pixel on a 160 dpi screen), but even this is not fully adequate across different platforms.

  11. Views: Creating a more robust layout • Windows have a layout • Windows can contain views • Which in turn have layouts • So you can create a nested hierarchy of views, each with its own tidy little layout • You can design your screen to automatically space controls out, regardless of their size

  12. Views available to you • Absolute (aka "Composite") • Hardcoded positions, widths, height • Vertical • Controls are displayed top to bottom • Horizontal • Controls are displayed left to right • Table • Controls are displayed in rows and columns

  13. Horizontal layout var win = Ti.UI.createWindow({ title : 'Very basic app', backgroundColor : '#FFFFFF', layout: 'horizontal' }); varlbl = Ti.UI.createLabel({ text : 'Your age:', color : '#000000', width: Ti.UI.SIZE // this says, make it as wide as its content's size (auto-size) }); win.add(lbl); var txt = Ti.UI.createTextField({ value : '82', keyboardType : Titanium.UI.KEYBOARD_NUMBER_PAD, width: Ti.UI.SIZE // or you could specify a specific width (in pixels) – usually not good }); win.add(txt); // horizontal layout automatically slides this text field up to the preceding element's side win.open();

  14. Horizontal layout You can set the left propertyof the text field here to give ita little bit of spacing.

  15. Vertical layout var win = Ti.UI.createWindow({ title : 'Very basic app', backgroundColor : '#FFFFFF', layout: 'vertical' }); varlbl = Ti.UI.createLabel({ text : 'Your age:', color : '#000000', height: Ti.UI.SIZE // or you could use a hard-coded value (not a good idea) /* and you can use left: 0 to align left, or right: 0 to align right */ }); win.add(lbl); var txt = Ti.UI.createTextField({ value : '82', keyboardType : Titanium.UI.KEYBOARD_NUMBER_PAD, height: Ti.UI.SIZE // or Ti.UI.FILL would mean "take up whatever space is available" }); win.add(txt); win.open();

  16. Vertical layout Can set the text field's top to give a little space.

  17. Another option: Table View • Each table is a collection of rows • Within each row, you can use… • Composite layout • Vertical layout • Horizontal layout

  18. A TableView example (Part 1) var win = Ti.UI.createWindow({ title : 'Very basic app', backgroundColor : '#FFFFFF', layout : 'vertical' }); varlbl = Ti.UI.createLabel({ text : 'Some OSU Courses', color : '#FFFFFF', backgroundColor : '#c34500', // notice that you can set properties much like with CSS… just use camelcase fontWeight : 'bold', height : Ti.UI.SIZE, width : '100%', // here we want this label to spread all the way across the screen textAlign : 'center' // and we center our text content inside the label }); win.add(lbl); var courses = [ {id : 'CS361', title : 'Software Engineering I' }, {id : 'CS494',title : 'Web Development'}, {id : 'CS496',title : 'Cloud and Mobile Development'} ];

  19. A TableViewexample (Part 2) varrows = []; for (vari = 0; i < courses.length; i++) { var row = Ti.UI.createTableViewRow({ layout : 'horizontal' }); // FYI, there's also a terser way to do this (with just a row title) when you only need a single string per row row.add(Ti.UI.createLabel({ height : Ti.UI.SIZE, width : Ti.UI.SIZE, text : courses[i].id, color : '#000000' })); row.add(Ti.UI.createLabel({ height : Ti.UI.SIZE, width : Ti.UI.SIZE, text : courses[i].title, color : '#000000', left: '5dp' })); rows.push(row); } vartableView = Titanium.UI.createTableView({ data : rows, backgroundColor: '#FFFFFF' }); win.add(tableView); win.open();

  20. A quick walk through the new declarative app framework

  21. Regarding the declarative framework • Goal is to structure apps similar to mobile web • Declare app structure with tags (like HTML) • Declare data structure (model) with JSON • Declare app behavior with JS • The material of this lecture still applies! • All the concepts (window/view/layout) still apply • All the imperative (non-declarative) code still applies. • Declarative is optional: you can mix declarative & imperative • Imperative is necessary for creating UIs dynamically.

  22. Downsides of the new framework • Recently out of beta • Several tags don't seem to work reliably yet • Several tags have odd structure • Debugging is extraordinarily painful • Need to use command-line to use “fastdev” build—emulator reloads nearly completely on every build • Expect substantial improvements over time

More Related