Your SlideShare is downloading. ×
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
HIT3328 - Chapter0701 - Dialogs, Tabs and Lists
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HIT3328 - Chapter0701 - Dialogs, Tabs and Lists

432

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
432
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HIT3328 / HIT8328 Software Development forMobile DevicesDr. Rajesh Vasa, 20111Twitter: @rvasaBlog: http://rvasa.blogspot.comLecture 07Dialogs, Tabs andLists
  • 2. R. Vasa, 20122Lecture Overview•A short Detour into Design Patterns•Dialogs•Tabbed Layouts•Enhancing Lists
  • 3. R. Vasa, 20123Design Patterns•A general reusable solution to a commonlyoccurring problem in software design•Typically cover,•Algorithm strategy•Computational design•Execution•Implementation strategy•Structural design
  • 4. R. Vasa, 20124API designers use thesepatterns•API designers use a number of thesepatterns•If you can recognise the patterns used -- itwill help you,•learn the API faster & use it better•understand the underlying problem thatmotivated designers to choose the pattern•Improve your own code by adapting thepattern (assuming the pattern used by APIdesigner is good)
  • 5. R. Vasa, 20125API Design - Android Example•Android API designers built their SDKaround the Method Chaining and Builderpattern in many instances•What are they? Why have they used it?
  • 6. R. Vasa, 20126Quick Concept Clarification•Before we go into the pattern in depth•We need to know the following:•Mutable Vs Immutable objects•Command-Query Separation Principle•Fluent Interfaces
  • 7. R. Vasa, 20127Mutable vs Immutable Objects•In Object oriented languages -- someobjects are designed to be immutable•That is, once created -- they are constants•In Java -- Strings are immutable•Constant (immutable) offer better memoryallocation strategies•However, if we change these objects toooften -- then we pay a high price
  • 8. R. Vasa, 20128Immutable Vs Mutable Objects•In Java, if we perform a large number ofstring modifications•It is better to use StringBuffer•StringBuffer is Mutable (can be changed)•During design (over years) we discoveredthat mutable objects should have certaindesign properties•But -- our thinking was boxed!!!!
  • 9. R. Vasa, 20129Command - Query SeparationPrinciple•Good Object Oriented design should ensurethat a method is either a command or aquery•Simply put,•getName() -- Query -- Should not changestate•setName() -- Command -- Can change state•Methods that perform both are consideredpoor practiceThis principle boxed our thinking (to some extentThis principle boxed our thinking (to some extent)
  • 10. R. Vasa, 20121Command - Query SeparationPrinciple•Consequences of this principle,•“set” Methods should not return (i.e. void)•This principle has influenced quite a largepool of API code (Java, .NET and others)•Side-effect,•We end up writing a large number of setmethods•Often one per line
  • 11. R. Vasa, 20121Command-Query Principle AtWorkprivate void makeNormalOrder(Customer customer){Order o1 = new Order();customer.addOrder(o1);OrderLine line1 = new OrderLine(6, Product.find("TAL"));o1.addLine(line1);OrderLine line2 = new OrderLine(5, Product.find("HPK"));o1.addLine(line2);OrderLine line3 = new OrderLine(3, Product.find("LGV"));o1.addLine(line3);line2.setSkippable(true);o1.setRush(true);}Commands and Queries are clearly separatedCommands and Queries are clearly separatedExample from:http://martinfowler.com/bliki/FluentInterface.html
  • 12. R. Vasa, 20121Command-Query Principle AtWorkprivate void makeNormalOrder(Customer customer){Order o1 = new Order();customer.addOrder(o1);OrderLine line1 = new OrderLine(6, Product.find("TAL"));o1.addLine(line1);OrderLine line2 = new OrderLine(5, Product.find("HPK"));o1.addLine(line2);OrderLine line3 = new OrderLine(3, Product.find("LGV"));o1.addLine(line3);line2.setSkippable(true);o1.setRush(true);}Example from:http://martinfowler.com/bliki/FluentInterface.htmlCode is needlessly messy, long and convolutedCode is needlessly messy, long and convoluted
  • 13. R. Vasa, 20121Fluent Interface•The concept is that we should write codethat is better to read•That is, it communicates the intent muchmore clearly
  • 14. R. Vasa, 20121Fluent Interfaces Exampleprivate void makeFluentOrder(Customer customer){customer.newOrder().with(6, "TAL").with(5, "HPK").skippable().with(3, "LGV").priorityRush();}Example from:http://martinfowler.com/bliki/FluentInterface.htmlEasier to read -- but is C-Q still followed?Easier to read -- but is C-Q still followed?Commands change state and return --but intent of the principle is not reallyviolatedCommands change state and return --but intent of the principle is not reallyviolated
  • 15. R. Vasa, 20121Fluent Interfaces & C-QPrincipleprivate void makeFluentOrder(Customer customer){customer.newOrder().with(6, "TAL").with(5, "HPK").skippable().with(3, "LGV").priorityRush();}Example from:http://martinfowler.com/bliki/FluentInterface.htmlwith() methods [commands]update and return the orderobjectwith() methods [commands]update and return the orderobjectpublic Order with(int i, String string)public Order with(int i, String string)
  • 16. R. Vasa, 20121Method Chaining Patternprivate void makeFluentOrder(Customer customer){customer.newOrder().with(6, "TAL").with(5, "HPK").skippable().with(3, "LGV").priorityRush();}Method Chaining Pattern - Objectis mutated and returned backMethod Chaining Pattern - Objectis mutated and returned back
  • 17. R. Vasa, 20121Back to Android API Design•Android SDK designers are influenced bythese ideas around fluent interfaces andmethod chaining•They combine it with the Builder Pattern tohelp construct layouts and views•This pattern is highlighted in the examplesthat follow ....
  • 18. R. Vasa, 20121Lecture Roadmap - Where arewe?•A short Detour into Design Patterns•Dialogs•Tabbed Layouts•Enhancing Lists
  • 19. R. Vasa, 20121Dialogs• How long have I been alive?Date Dialog Alert Dialog
  • 20. R. Vasa, 20122Dialogs are flexibleDate Dialog(SDK Provided)Custom AlertDialogTitle and Icon
  • 21. R. Vasa, 20122Dialogs are flexibleDate Dialog(SDK Provided)Custom AlertDialogTitle and IconMessage
  • 22. R. Vasa, 20122Dialogs are flexibleDate Dialog(SDK Provided)Custom AlertDialogTitle and IconMessageControlButtons
  • 23. R. Vasa, 20122Dialogs are useful for errormessagesCustom AlertDialogIdeal for simple error messages
  • 24. R. Vasa, 20122Date Picker Dialogprivate MutableDateTime mdt = newMutableDateTime(1990,1,1,10,10,0,0);Mutable Date Time from Joda Time library (seesample code)We can set a default date value for the dialog
  • 25. R. Vasa, 20122Short Problem - UsabilityQuestion•In this context, what should be the defaultdate shown?20 years ago CurrentShould it be something else? -- Is it important?
  • 26. R. Vasa, 20122Constructing Custom AlterDialogsThis code uses a built-in icon,but can be any appropriatedrawableThis code uses a built-in icon,but can be any appropriatedrawableSeehttp://androiddrawableexplorer.appspot.com/for a full list of built-in drawable resourcesand their names
  • 27. R. Vasa, 20122Constructing Custom AlterDialogsWe can set buttons(positive/negative/neutral)We can set buttons(positive/negative/neutral)
  • 28. R. Vasa, 20122Constructing Custom AlterDialogsButton ClickimplementationButton Clickimplementation
  • 29. R. Vasa, 20122Deconstructing the Patterns inUseDialog Builder - Inner ClassDialog Builder - Inner ClassMethod Chaining PatternMethod Chaining Pattern
  • 30. R. Vasa, 20123Showing a Dialogpublic void onBackPressed(){showDialog(EXIT_DIALOG);}This is a methodprovided by theActivity classThis is a methodprovided by theActivity classWe have to providethese constants forthe call-backWe have to providethese constants forthe call-back
  • 31. R. Vasa, 20123Dialogs are Constructed viaCall-Backspublic void onBackPressed(){showDialog(EXIT_DIALOG);}Triggersthe callbackThis isdisplayed tothe userThis isdisplayed tothe user
  • 32. R. Vasa, 20123Why go through so muchtrouble?public void onBackPressed(){showDialog(EXIT_DIALOG);}Because dialogs needs aparent Activity for life cyclemanagementBecause dialogs needs aparent Activity for life cyclemanagementOffersseparation ofconcernsOffersseparation ofconcerns
  • 33. R. Vasa, 20123Lecture Roadmap - Where arewe?•A short Detour into Design Patterns•Dialogs•Tabbed Layouts•Enhancing Lists
  • 34. R. Vasa, 20123Tabbed Layouts
  • 35. R. Vasa, 20123Tabbed Layouts - ConceptsTab Host (container)
  • 36. R. Vasa, 20123Tabbed Layouts - ConceptsTab WidgetTab Host (container)
  • 37. R. Vasa, 20123Tabbed Layouts - ConceptsTab Host (container)Tab WidgetFrame Layout is used toswitch the visible contentfor a tab
  • 38. R. Vasa, 20123Layout of a Tabbed App.bHost contains the TabWidget and the FrameLayo
  • 39. R. Vasa, 20123Layout of a Tabbed App.Two views inthe framelayout toswitch aroundTwo views inthe framelayout toswitch around
  • 40. R. Vasa, 20124Wiring up the ActivityMethod chaining usedMethod chaining used
  • 41. R. Vasa, 20124Wiring up the ActivityTabSpecpopulates the tabwidgetTabSpecpopulates the tabwidget
  • 42. R. Vasa, 20124Tabs need multiple iconresourcesSelected Icon Unselected IconWe have to provide both icons to improve look & feelWe have to provide both icons to improve look & feel
  • 43. R. Vasa, 20124Working with Multiple IconsState information is provided as a drawable resourceState information is provided as a drawable resourceNote: XML file isplaced in thedrawable folder
  • 44. R. Vasa, 20124Using Icon State InformationIcon selection is managedby SDK (via convention)Icon selection is managedby SDK (via convention)
  • 45. R. Vasa, 20124Tabs can load differentactivities•If a tab needs to start a new activity,•We need to start it with Intents
  • 46. R. Vasa, 20124Tabs can load differentactivitiesIntent is reused in this example --because this method copies thevalue internallyIntent is reused in this example --because this method copies thevalue internallyMethod Chaining used hereMethod Chaining used here
  • 47. R. Vasa, 20124Lecture Roadmap - Where arewe?•A short Detour into Design Patterns•Dialogs•Tabbed Layouts•Enhancing Lists
  • 48. R. Vasa, 20124Enhancing ListsLatitude / LongitudeExampleDrop downshowingmatching optionsDrop downshowingmatching options
  • 49. R. Vasa, 20124Recall: Lists get data via anAdapterListViewData SourceAdapter
  • 50. R. Vasa, 20125We can tie an adapter to EditText ViewData Adapter set for AutoCompleteTextView
  • 51. R. Vasa, 20125Listening to SelectioncityView.addTextChangedListener(this);public class LatLongActivity extends Activity implements TextWatcher
  • 52. R. Vasa, 20125Listening to SelectioncityView.addTextChangedListener(this);public class LatLongActivity extends Activity implements TextWatcher
  • 53. R. Vasa, 20125Lecture Roadmap - Where arewe?•A short Detour into Design Patterns•Dialogs•Tabbed Layouts•Enhancing Lists (with images)
  • 54. R. Vasa, 20125Lists with ImagesLatitude / LongitudeExampleMelbourne & Sydney havespecial images. Rest usesame iconMelbourne & Sydney havespecial images. Rest usesame icon
  • 55. R. Vasa, 20125Custom List RowWe can specify acustom layout for rowsin a listWe can specify acustom layout for rowsin a list
  • 56. R. Vasa, 20125Custom List RowLayout provides thedefault icon to show foreach row itemLayout provides thedefault icon to show foreach row item
  • 57. R. Vasa, 20125We provide a custom rowadapter•The standard adapter will display using apre-defined (SDK provided) layout•We have to override this behaviour with ourown “row” rendering functionality// use custom row adaptersetListAdapter(new RowIconAdapter());public class LatLongActivity extends ListActivityNote: See Sample Code for details
  • 58. R. Vasa, 20125Custom Row Adapterclass RowIconAdapter extends ArrayAdapter<String>{public RowIconAdapter(){super(LatLongActivity.this, R.layout.listrow, R.id.row_label, cityNames);}public View getView(int pos, View cView, ViewGroup parent){View row = super.getView(pos, cView, parent); // DEFAULT ROWImageView icon = (ImageView) row.findViewById(R.id.row_icon);String city = cityNames[pos];if (city.startsWith("Melb"))icon.setImageResource(R.drawable.melbourne);else if (city.startsWith("Syd"))icon.setImageResource(R.drawable.sydney);elseicon.setImageResource(R.drawable.location);return row;}}
  • 59. R. Vasa, 20125A Few List View Related IssuesAs we scroll down, we get morecities
  • 60. R. Vasa, 20126A Few List View Related IssuesView objects on Rows notshown are destroyed as wescroll up/downView objects on Rows notshown are destroyed as wescroll up/downOnly 7rows(views) arekept inRAM
  • 61. R. Vasa, 20126A Few List View Related IssuesView objects on Rows not shownare destroyed as we scrollup/downView objects on Rows not shownare destroyed as we scrollup/downDesign Tip: Make sure that rowsare constructed as quickly aspossibleDesign Tip: Make sure that rowsare constructed as quickly aspossible
  • 62. R. Vasa, 20126Lecture Roadmap - Where arewe?•A short Detour into Design Patterns•Dialogs•Tabbed Layouts•Enhancing Lists

×