Top Banner
Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre
214

Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Jul 26, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Created by XMLmind XSL-FO Converter.

Mobile Softwares

Ekler, Péter Forstner, Bertalan

Kelényi, Imre

Page 2: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Created by XMLmind XSL-FO Converter.

Mobile Softwares írta Ekler, Péter, Forstner, Bertalan, és Kelényi, Imre

Publication date 2015 Szerzői jog © 2015 Ekler Péter, Forstner Bertalan, Kelényi Imre

Page 3: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

iii Created by XMLmind XSL-FO Converter.

Tartalom

Mobile Softwares ................................................................................................................................ 1 1. 1 Introducing properties of mobile software development .................................................... 1

1.1. Lecture 1 - Outline .................................................................................................... 1 1.2. MOTIVATION ......................................................................................................... 1 1.3. Why are mobile clients important? ........................................................................... 1 1.4. Limited hardware capabilities ................................................................................... 1 1.5. Consequences ........................................................................................................... 2 1.6. Within this part of the course... ................................................................................. 2 1.7. RESTRICTIONS OF MOBILE SOFTWARE DESIGN .......................................... 2 1.8. Always keep in mind...1/3 ........................................................................................ 2 1.9. Always keep in mind...2/3 ........................................................................................ 2 1.10. Always keep in mind...3/3 ...................................................................................... 3 1.11. Mobile computing capacity .................................................................................... 3 1.12. Get to know the palette! .......................................................................................... 3 1.13. ARCHITECTURE OF ENTERPRISE SYSTEMS ................................................ 4 1.14. Participants of mobile market ................................................................................. 4 1.15. Mobile phone's functions 1/2 .................................................................................. 4 1.16. Mobile phone's functions 2/2 .................................................................................. 5 1.17. Generic architecture diagram .................................................................................. 5 1.18. Architecture ............................................................................................................ 6 1.19. MVC: basics ........................................................................................................... 6 1.20. Model-View-Presenter ............................................................................................ 6 1.21. Model-View-ViewModel ....................................................................................... 7 1.22. Architecture of mobile applications ........................................................................ 8 1.23. COMMUNCATION ............................................................................................... 8 1.24. Communication ...................................................................................................... 8 1.25. Webservice implementation ................................................................................... 9 1.26. The REST body ...................................................................................................... 9 1.27. How server can reach the client .............................................................................. 9 1.28. DATA STORAGE ................................................................................................ 10 1.29. Data storage: where? ............................................................................................ 10 1.30. Sychronization with the server ............................................................................. 10 1.31. CONSEQUENCES OF LIMITED NETWORK ACCESS .................................. 10 1.32. The network can be down... .................................................................................. 10 1.33. Offline operation ................................................................................................... 11 1.34. Strategies of offline operation ............................................................................... 11 1.35. APPLICATION PUBLISHING ........................................................................... 12 1.36. Testing .................................................................................................................. 12 1.37. Technical documentation ...................................................................................... 12 1.38. Further documentation .......................................................................................... 13 1.39. Installation package and metadata ........................................................................ 13 1.40. SUMMARY ......................................................................................................... 13 1.41. Summary ............................................................................................................... 13 1.42. References ............................................................................................................ 13

2. 2 Introducing the Android mobile platform Android application components UI design ... 13 2.1. Lecture 2 - Outline .................................................................................................. 14 2.2. ANDROID PLATFORM INTRODUCTION ......................................................... 14 2.3. Genesis of Android ................................................................................................. 14 2.4. Open Handset Alliance ........................................................................................... 14 2.5. Android hardware requirements ............................................................................. 14 2.6. Android and Google integration ............................................................................. 15 2.7. Android versions ..................................................................................................... 15 2.8. Structure of Android platform ................................................................................ 15 2.9. Platform build-up 1/3 .............................................................................................. 16 2.10. Platform build-up 2/3 ............................................................................................ 16 2.11. Platform build-up 3/3 ............................................................................................ 17

Page 4: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

iv Created by XMLmind XSL-FO Converter.

2.12. Managed code ....................................................................................................... 17 2.13. APPLICATION COMPONENTS ........................................................................ 17 2.14. Applications .......................................................................................................... 17 2.15. Android Runtime 1/2 ............................................................................................ 17 2.16. Android Runtime 2/2 ............................................................................................ 18 2.17. Application rights ................................................................................................. 18 2.18. Application components ....................................................................................... 18 2.19. Android application structure 1/2 ......................................................................... 18 2.20. Android application structure 2/2 ......................................................................... 19 2.21. Activities ............................................................................................................... 19 2.22. Services ................................................................................................................. 19 2.23. Content providers ................................................................................................. 20 2.24. Broadcast receivers ............................................................................................... 20 2.25. Manifest file .......................................................................................................... 20 2.26. Application resources ........................................................................................... 20 2.27. "Back stack" ......................................................................................................... 20 2.28. Activity lifecycle .................................................................................................. 21 2.29. Activity states ....................................................................................................... 21 2.30. Activity lifecycle model ....................................................................................... 21 2.31. Activity lifecycle-callback .................................................................................... 22 2.32. Multitasking .......................................................................................................... 22 2.33. UI DESIGN .......................................................................................................... 23 2.34. Different screen sizes 1/2 ...................................................................................... 23 2.35. Different screen sizes 2/2 ...................................................................................... 23 2.36. Most imoprtant definitions 1/2 ............................................................................. 23 2.37. Most important definitions 2/2 ............................................................................. 24 2.38. General screen sizes .............................................................................................. 24 2.39. Runtime operation ................................................................................................ 25 2.40. Density independency ........................................................................................... 25 2.41. Most important factors .......................................................................................... 25 2.42. Designing user interfaces ...................................................................................... 25 2.43. User Interface resources ....................................................................................... 25 2.44. Some important layout .......................................................................................... 26 2.45. Pop-up windows ................................................................................................... 27 2.46. Menus ................................................................................................................... 28 2.47. Localization .......................................................................................................... 28 2.48. Creating styles ...................................................................................................... 28 2.49. Using themes ........................................................................................................ 29

3. 3 Communication between components, Resources, User Interface ................................... 29 3.1. Lecture 3 - Outline .................................................................................................. 29 3.2. COMMUNICATION BETWEEN COMPONENTS .............................................. 29 3.3. Communication between components .................................................................... 30 3.4. Intent ....................................................................................................................... 30 3.5. Intent delivery ......................................................................................................... 30 3.6. Intent object ............................................................................................................ 30 3.7. Usage of intents ...................................................................................................... 31 3.8. Explicit intents ........................................................................................................ 31 3.9. Returning of an activity .......................................................................................... 31 3.10. Intent Extras .......................................................................................................... 32 3.11. Implicit Intents ...................................................................................................... 32 3.12. Implicit Intent - Actions ........................................................................................ 32 3.13. Implicit Intent - Example ...................................................................................... 33 3.14. Intent resolution .................................................................................................... 33 3.15. Intent filter ............................................................................................................ 33 3.16. Intent resolution .................................................................................................... 34 3.17. Intent flags ............................................................................................................ 34 3.18. RESOURCES ....................................................................................................... 34 3.19. Resources .............................................................................................................. 34 3.20. Resource types ...................................................................................................... 34 3.21. Qualifiers .............................................................................................................. 35

Page 5: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

v Created by XMLmind XSL-FO Converter.

3.22. Example 1/2 .......................................................................................................... 35 3.23. Example 2/2 .......................................................................................................... 36 3.24. ADVANCED USER INTERFACE ...................................................................... 36 3.25. Android Fragment Framework ............................................................................. 36 3.26. Fragment and Activity .......................................................................................... 36 3.27. Fragment lifecycle ................................................................................................ 37 3.28. Different display sizes .......................................................................................... 38 3.29. UI Fragment .......................................................................................................... 39 3.30. UI Fragment .......................................................................................................... 39 3.31. Managing Fragments ............................................................................................ 39 3.32. FragmentTransaction ............................................................................................ 39 3.33. Communication .................................................................................................... 40 3.34. FragmentDialog .................................................................................................... 40 3.35. Fragment parameters ............................................................................................ 41 3.36. Fragments in older versions .................................................................................. 41 3.37. ViewPager ............................................................................................................ 41 3.38. FragmentPagerAdapter ......................................................................................... 42 3.39. PageTitleStrip and PageTabStrip .......................................................................... 43 3.40. ANIMATIONS ..................................................................................................... 43 3.41. Property Animation .............................................................................................. 44 3.42. Property Animation elements ............................................................................... 44 3.43. View animation ..................................................................................................... 44 3.44. Drawable animation .............................................................................................. 44 3.45. Summary ............................................................................................................... 45

4. 4 Persisting and binding data on Android platform, Broadcast Receiver Component ........ 45 4.1. Lecture 4 - Outline .................................................................................................. 45 4.2. PERSISTENT DATA STORAGE .......................................................................... 45 4.3. Persistent Data Storage ........................................................................................... 45 4.4. Shared Preferences ................................................................................................. 46 4.5. Using Shared Preferences - Write ........................................................................... 46 4.6. Using Shared Preferences - Read ............................................................................ 46 4.7. Internal and External Storage ................................................................................. 47 4.8. Internal Storage example ........................................................................................ 47 4.9. External Storage example ....................................................................................... 47 4.10. SQLite Database ................................................................................................... 48 4.11. SQLite Example 1/3 ............................................................................................. 48 4.12. SQLite Example 2/3 ............................................................................................. 48 4.13. SQLite Example 3/3 ............................................................................................. 49 4.14. Network Connection ............................................................................................. 49 4.15. CONTENT PROVIDER ....................................................................................... 49 4.16. Content Provider ................................................................................................... 49 4.17. Similar Conceptions ............................................................................................. 50 4.18. Example 1/3 .......................................................................................................... 50 4.19. Query data ............................................................................................................ 51 4.20. Query data ............................................................................................................ 51 4.21. Example 2/3 .......................................................................................................... 52 4.22. Insert and Modify ................................................................................................. 52 4.23. Example 3/3 .......................................................................................................... 53 4.24. Create Custom Provider 1/2 .................................................................................. 53 4.25. Create Custom Provider 2/1 .................................................................................. 53 4.26. DATA BINDING ................................................................................................. 54 4.27. Data Binding ......................................................................................................... 54 4.28. Example - ArrayAdapter ....................................................................................... 54 4.29. Another example 1/2 ............................................................................................ 54 4.30. Another example 2/2 ............................................................................................ 55 4.31. Example - Google autocomplete ........................................................................... 56 4.32. BROADCAST RECEIVER .................................................................................. 56 4.33. Broadcast Receiver ............................................................................................... 56 4.34. Registration ........................................................................................................... 57 4.35. Events ................................................................................................................... 57

Page 6: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

vi Created by XMLmind XSL-FO Converter.

4.36. Example - Monitoring calls .................................................................................. 57 4.37. Example - Registration of receivers ...................................................................... 58 4.38. Example - handle incoming calls .......................................................................... 58 4.39. Example - handle outgoing calls ........................................................................... 58 4.40. Example - screenshot ............................................................................................ 59 4.41. Summary ............................................................................................................... 60

5. 5 Network communication, Location based services, Service component .......................... 60 5.1. Lecture 5 - Outline .................................................................................................. 60 5.2. NETWORK COMMUNICATION ......................................................................... 61 5.3. Mobile network information ................................................................................... 61 5.4. Examples ................................................................................................................ 61 5.5. HTTP communication ............................................................................................ 61 5.6. HttpClient and DefaultHttpClient ........................................................................... 62 5.7. HttpGet ................................................................................................................... 62 5.8. Result of HTTP request .......................................................................................... 62 5.9. HttpEntity ............................................................................................................... 63 5.10. HTTP GET example ............................................................................................. 63 5.11. Modifying UI from another thread ....................................................................... 63 5.12. URL encoding ....................................................................................................... 64 5.13. HTTP POST ......................................................................................................... 64 5.14. HTTP POST example ........................................................................................... 64 5.15. HTTPS .................................................................................................................. 65 5.16. Processing responses ............................................................................................ 65 5.17. JSON .................................................................................................................... 65 5.18. Processing JSON .................................................................................................. 66 5.19. JSON example ...................................................................................................... 66 5.20. XML ..................................................................................................................... 67 5.21. Processing XML ................................................................................................... 67 5.22. XML example ....................................................................................................... 68 5.23. TCP/IP socket ....................................................................................................... 68 5.24. LOCATION BASED SERVICES ........................................................................ 68 5.25. Location based services ........................................................................................ 68 5.26. Current Position .................................................................................................... 68 5.27. Providers ............................................................................................................... 69 5.28. Examples .............................................................................................................. 69 5.29. ProximityAlert ...................................................................................................... 69 5.30. Geocoding ............................................................................................................. 70 5.31. Reverse Geocoding ............................................................................................... 70 5.32. MapView .............................................................................................................. 70 5.33. MapView screenshot ............................................................................................ 70 5.34. Creating MapView ............................................................................................... 71 5.35. MapView - Layout ................................................................................................ 71 5.36. MapView Overlays ............................................................................................... 72 5.37. Creating Overlay ................................................................................................... 72 5.38. SERVICES ........................................................................................................... 72 5.39. Service .................................................................................................................. 72 5.40. Service types ......................................................................................................... 73 5.41. Service lifecycle ................................................................................................... 73 5.42. Managing Services ............................................................................................... 74 5.43. Creating Service ................................................................................................... 74 5.44. Custom Service methods ...................................................................................... 75 5.45. Terminating services by Android OS ................................................................... 75 5.46. Service attributes 1/2 ............................................................................................ 75 5.47. Service attributes 2/2 ............................................................................................ 75 5.48. Service example .................................................................................................... 76 5.49. Summary ............................................................................................................... 76

6. 6 Introducing the iOS Mobile Platform, Developer Tools and Programming basics .......... 76 6.1. Lecture 6 - Outline .................................................................................................. 77 6.2. Devices running iOS ............................................................................................... 77 6.3. iOS the Operating System ...................................................................................... 77

Page 7: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

vii Created by XMLmind XSL-FO Converter.

6.4. Behind success ........................................................................................................ 78 6.5. Drawbacks .............................................................................................................. 78 6.6. Drawbacks .............................................................................................................. 78 6.7. The History of the iPhone ....................................................................................... 79 6.8. iOS versions from user perspective ........................................................................ 79 6.9. iOS versions from developer perspective ............................................................... 79 6.10. Hardware, common properties .............................................................................. 79 6.11. iPhone 5 interiors .................................................................................................. 80 6.12. UDID: Unique Device Identifier .......................................................................... 80 6.13. BASIC PROPERTIES .......................................................................................... 80 6.14. Relevant attributes ................................................................................................ 81 6.15. iOS multitasking ................................................................................................... 81 6.16. Notifications ......................................................................................................... 81 6.17. Sandbox model ..................................................................................................... 82 6.18. Isolated Storage 1/2 .............................................................................................. 82 6.19. Isolated Storage 2/2 .............................................................................................. 83 6.20. Application distribution ........................................................................................ 83 6.21. App Store .............................................................................................................. 84 6.22. TOOLS AND DEVELOPMENT CONCEPTS .................................................... 84 6.23. Application development ...................................................................................... 84 6.24. iOS development without Objective-C? ............................................................... 85 6.25. Official developer tools ........................................................................................ 85 6.26. Xcode the IDE ...................................................................................................... 86 6.27. iOS Simulator ....................................................................................................... 87 6.28. iOS applications .................................................................................................... 88 6.29. Framework ............................................................................................................ 88 6.30. Framework examples ............................................................................................ 88 6.31. Compiling/testing with iOS device ....................................................................... 89 6.32. Application development and iOS versions 1/2 .................................................... 89 6.33. Application development and iOS versions 2/2 .................................................... 89 6.34. iPad vs. iPhone ..................................................................................................... 90 6.35. Mac OS X vs. iOS development ........................................................................... 90 6.36. Architecture of the iOS applications ..................................................................... 90 6.37. Model View Controller ......................................................................................... 90 6.38. The MVC concept ................................................................................................ 91 6.39. iOS application base classes ................................................................................. 91 6.40. View ..................................................................................................................... 92 6.41. UIView examples ................................................................................................. 92 6.42. View hierarchy ..................................................................................................... 94 6.43. Controller .............................................................................................................. 94 6.44. View controller in details ...................................................................................... 95 6.45. View and ViewController in the source ................................................................ 95 6.46. Model .................................................................................................................... 95

7. 7 The Objective-C ............................................................................................................... 96 7.1. Lecture 7 - Outline .................................................................................................. 96 7.2. OBJECTIVE-C BASICS ........................................................................................ 96 7.3. Objective-C ............................................................................................................. 96 7.4. Primitive types, strings ........................................................................................... 97 7.5. Objects .................................................................................................................... 97 7.6. Method calling = Message sending ........................................................................ 98 7.7. Message sending: Java vs. Objective-C .................................................................. 98 7.8. Message sending ..................................................................................................... 98 7.9. The id type .............................................................................................................. 99 7.10. Classes - Class object ........................................................................................... 99 7.11. Classes - Instantiation ........................................................................................... 99 7.12. NSObject ............................................................................................................ 100 7.13. Defining classes .................................................................................................. 100 7.14. Method definition 1/2 ......................................................................................... 100 7.15. Method definition 2/2 ......................................................................................... 101 7.16. Dynamic binding ................................................................................................ 101

Page 8: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

viii Created by XMLmind XSL-FO Converter.

7.17. Classes - Instance variables ................................................................................ 102 7.18. Classes - Properties ............................................................................................. 102 7.19. Creating properties in 2 steps ............................................................................. 102 7.20. Property synthesizing ......................................................................................... 103 7.21. Inheritance1/2 ..................................................................................................... 103 7.22. Inheritance 2/2 .................................................................................................... 103 7.23. Example - Protocol implementation ................................................................... 104 7.24. Memory management ......................................................................................... 104 7.25. CONNECTION BETWEEN SOURCE CODE AND INTERFACE BUILDER 104 7.26. Repeat: Model View Controller .......................................................................... 104 7.27. Repeat: iOS application base classes .................................................................. 105 7.28. Repeat: View and ViewController in the source ................................................ 105 7.29. Connection between IB and source code ............................................................ 106 7.30. Defining and connecting IBOutlet ...................................................................... 106 7.31. Action methods ................................................................................................... 107 7.32. Action methods ................................................................................................... 107 7.33. Summary: action methods and outlets ................................................................ 107

8. 8 Developing iOS User Interface ...................................................................................... 108 8.1. Lecture 8 - Outline ................................................................................................ 108 8.2. APPLICATIONS WITH MULTIPLE VIEWS .................................................... 108 8.3. View controller ..................................................................................................... 108 8.4. View controller types ............................................................................................ 108 8.5. Tab bar controller ................................................................................................. 109 8.6. Tab bar controller example ................................................................................... 110 8.7. Navigation controller ............................................................................................ 111 8.8. Navigation controller example .............................................................................. 111 8.9. Split View Controller ............................................................................................ 112 8.10. Simple view controller ........................................................................................ 113 8.11. STORYBOARDS ............................................................................................... 113 8.12. Storyboard .......................................................................................................... 113 8.13. Structure of the Storyboard ................................................................................. 113 8.14. Tab bar controller in storyboard ......................................................................... 114 8.15. Navigation controller in storyboard .................................................................... 115 8.16. Prepare for a segue ............................................................................................. 116 8.17. Storyboard in the project .................................................................................... 116 8.18. TABLE VIEW .................................................................................................... 117 8.19. Table view .......................................................................................................... 117 8.20. Table view styles ................................................................................................ 118 8.21. Structure of the table view .................................................................................. 119 8.22. Table view types ................................................................................................. 120 8.23. The data source of the table view ....................................................................... 121 8.24. The behavior of the data source .......................................................................... 121 8.25. UITableViewDataSource .................................................................................... 121 8.26. Defining a table view in storyboard .................................................................... 122 8.27. Defining cell ....................................................................................................... 122 8.28. Static table view .................................................................................................. 123 8.29. UITableViewController ...................................................................................... 123

9. 9 iOS Services - From gesture recognition to Map Kit ..................................................... 124 9.1. Lecture 9 - Outline ................................................................................................ 124 9.2. GESTURE RECOGNITION ................................................................................ 124 9.3. Gesture recognizers .............................................................................................. 124 9.4. Gesture recognizer classes .................................................................................... 124 9.5. Example: handling swipe gesture ......................................................................... 125 9.6. Example:handling pinch gesture ........................................................................... 126 9.7. BLOCKS .............................................................................................................. 126 9.8. Block .................................................................................................................... 126 9.9. What can we do with blocks? ............................................................................... 126 9.10. Defining blocks ................................................................................................... 127 9.11. Examples for using of the blocks ........................................................................ 127 9.12. Blocks and variables ........................................................................................... 128

Page 9: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

ix Created by XMLmind XSL-FO Converter.

9.13. What is good in blocks? ...................................................................................... 128 9.14. GRAND CENTRAL DISPATCH ...................................................................... 128 9.15. Grand Central Dispatch (GCD) .......................................................................... 128 9.16. GCD .................................................................................................................... 129 9.17. What is GCD good for? ...................................................................................... 129 9.18. GCD APIs 1/2 ..................................................................................................... 129 9.19. GCD API-k 2/2 ................................................................................................... 130 9.20. Example: download image in separated thread .................................................. 130 9.21. ANIMATION ..................................................................................................... 130 9.22. Animations ......................................................................................................... 130 9.23. UIView animations: basics ................................................................................. 131 9.24. UIView animation .............................................................................................. 131 9.25. Defining animations ........................................................................................... 131 9.26. Example .............................................................................................................. 132 9.27. Animating view exchange .................................................................................. 133 9.28. Animation options .............................................................................................. 134 9.29. MAP KIT ............................................................................................................ 134 9.30. Map Kit ............................................................................................................... 134 9.31. Initializing the map ............................................................................................. 135 9.32. Annotations ......................................................................................................... 136 9.33. Defining annotation ............................................................................................ 137 9.34. Annotation .......................................................................................................... 137 9.35. Reverse geocoding .............................................................................................. 137

10. 10 Introduction to the Windows Phone platform ............................................................ 138 10.1. Lecture 10 - Outline ............................................................................................ 138 10.2. Introduction to Windows Phone programming ................................................... 138 10.3. History 1/2 .......................................................................................................... 138 10.4. History 2/2 .......................................................................................................... 139 10.5. Windows Phone 7 ............................................................................................... 140 10.6. Hardware requirements 1/2 ................................................................................. 141 10.7. Hardware requirements 2/2 ................................................................................. 142 10.8. Windows Phone 7 devices .................................................................................. 142 10.9. Drawbacks .......................................................................................................... 143 10.10. Advantages ....................................................................................................... 144 10.11. Windows Phone 8 - Apollo ............................................................................... 144 10.12. Microsoft design language ("Metro/Modern UI") ............................................ 144 10.13. Metro ................................................................................................................ 144 10.14. Iconographic vs. infographic UI ....................................................................... 145 10.15. Control elements ............................................................................................... 147 10.16. Examples .......................................................................................................... 147 10.17. Metro UI platforms ........................................................................................... 149 10.18. Software development for Windows Phone ..................................................... 150 10.19. .NET on one slide... .......................................................................................... 150 10.20. WP software technologies ................................................................................ 150 10.21. Silverlight ......................................................................................................... 151 10.22. WP - Why Silverlight? ...................................................................................... 151 10.23. XNA ................................................................................................................. 152 10.24. Structure of Silverlight WP applications .......................................................... 152 10.25. MVVM ............................................................................................................. 152 10.26. Development tools ............................................................................................ 153 10.27. Visual Studio .................................................................................................... 154 10.28. Expression Blend .............................................................................................. 155 10.29. Windows Phone Emulator ................................................................................ 155 10.30. App development and publication .................................................................... 156 10.31. App Hub Account ............................................................................................. 157 10.32. Windows Phone Marketplace ........................................................................... 157 10.33. XAP files .......................................................................................................... 158 10.34. XAML basics .................................................................................................... 158 10.35. XAML .............................................................................................................. 158 10.36. XAML example ................................................................................................ 159

Page 10: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

x Created by XMLmind XSL-FO Converter.

10.37. XAML processing ............................................................................................ 159 10.38. XAML basics .................................................................................................... 159 10.39. Property value assignment ................................................................................ 160 10.40. XAML vs. C# ................................................................................................... 160 10.41. XAML basics - Content property ..................................................................... 160 10.42. Code-behind ..................................................................................................... 161 10.43. Example: code-behind ...................................................................................... 161 10.44. Connection between code-behind and XAML .................................................. 161 10.45. Up and downsides of XAML ............................................................................ 162 10.46. HELLO WINDOWS PHONE .......................................................................... 162 10.47. Project structure ................................................................................................ 162 10.48. HelloWP main page .......................................................................................... 162

11. 11 Developing Windows Phone User Interface .............................................................. 163 11.1. Lecture 11 - Outline ............................................................................................ 163 11.2. Silverlight object tree .......................................................................................... 164 11.3. Dependency Property ......................................................................................... 164 11.4. Dependency Property (DP) ................................................................................. 164 11.5. Defining a Dependency Property 1/2 .................................................................. 165 11.6. Defining a Dependency Property 2/2 .................................................................. 165 11.7. DP value resolution ............................................................................................ 165 11.8. Value change notification ................................................................................... 166 11.9. Attached Property ............................................................................................... 166 11.10. User interface development .............................................................................. 167 11.11. WP application base classes ............................................................................. 167 11.12. Basic UI classes ................................................................................................ 167 11.13. Control component examples ........................................................................... 168 11.14. Elements of the user interface ........................................................................... 169 11.15. Layout handling ................................................................................................ 169 11.16. Layout - StackPanel .......................................................................................... 170 11.17. Layout - Grid 1/3 .............................................................................................. 170 11.18. Layout - Grid 2/3 .............................................................................................. 171 11.19. Layout - Grid 3/3 .............................................................................................. 172 11.20. ContentControl ................................................................................................. 172 11.21. Button ............................................................................................................... 173 11.22. ItemsControl ..................................................................................................... 173 11.23. ListBox ............................................................................................................. 173 11.24. Showing and receiving text .............................................................................. 174 11.25. ApplicationBar .................................................................................................. 174 11.26. ApplicationBar example ................................................................................... 175 11.27. Icons, pictures in the project ............................................................................. 175 11.28. Windows Phone Toolkit ................................................................................... 175 11.29. Windows Phone Toolkit ................................................................................... 175 11.30. Toolkit example ................................................................................................ 176 11.31. Resources .......................................................................................................... 176 11.32. Resources .......................................................................................................... 176 11.33. Resource example ............................................................................................. 177 11.34. System resources .............................................................................................. 177 11.35. Playing audio .................................................................................................... 178 11.36. Playing audio .................................................................................................... 178

12. 12 Build Data-Driven Apps with Windows Phone ......................................................... 178 12.1. Lecture 12 - Outline ............................................................................................ 178 12.2. Navigation .......................................................................................................... 178 12.3. Reminder: Basic UI classes ................................................................................ 178 12.4. Pages ................................................................................................................... 179 12.5. Navigation .......................................................................................................... 179 12.6. NavigationService .............................................................................................. 180 12.7. Passing data to pages .......................................................................................... 180 12.8. Even more navigation ......................................................................................... 181 12.9. Animating page transition ................................................................................... 181 12.10. Transition example ........................................................................................... 182

Page 11: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

xi Created by XMLmind XSL-FO Converter.

12.11. Data Binding ..................................................................................................... 182 12.12. Data Binding ..................................................................................................... 182 12.13. Setting the data source ...................................................................................... 183 12.14. Data source example with Source property ...................................................... 183 12.15. DataContext 1/2 ................................................................................................ 183 12.16. DataContext 2/2 ................................................................................................ 183 12.17. Change notification ........................................................................................... 184 12.18. Change notification example ............................................................................ 184 12.19. Direction of the data binding ............................................................................ 184 12.20. ObservableCollection T ........................................................................... 185 12.21. Data Templates ................................................................................................. 185 12.22. Data Templates ................................................................................................. 185 12.23. ListBox data binding ........................................................................................ 185 12.24. Example: ListBox + data binding ..................................................................... 186 12.25. Presentation of a List element ........................................................................... 186 12.26. MVVM ............................................................................................................. 186 12.27. MVVM architecture ......................................................................................... 186 12.28. MVVM ............................................................................................................. 187 12.29. Advantages of MVVM ..................................................................................... 187 12.30. Relation of View and ViewModel .................................................................... 188 12.31. ICommand ........................................................................................................ 188 12.32. Command example ........................................................................................... 188 12.33. MVVM Light Toolkit ....................................................................................... 189

13. 13 Advanced Windows Phone Development .................................................................. 189 13.1. Lecture 13 - Outline ............................................................................................ 189 13.2. Launcher / Chooser Task .................................................................................... 189 13.3. Launcher / Chooser Task .................................................................................... 189 13.4. Using Tasks ........................................................................................................ 189 13.5. Launchers ........................................................................................................... 190 13.6. Launcher examples ............................................................................................. 190 13.7. Choosers ............................................................................................................. 191 13.8. Chooser example ................................................................................................ 191 13.9. Launcher/Chooser on the emulator ..................................................................... 191 13.10. Live Tiles .......................................................................................................... 192 13.11. Live Tiles .......................................................................................................... 192 13.12. Structure of a Tile ............................................................................................. 193 13.13. Setting data of Tiles .......................................................................................... 193 13.14. Tiles: ShellTile ................................................................................................. 194 13.15. Refreshing the Application Tile ........................................................................ 194 13.16. Creating a secondary Tile ................................................................................. 195 13.17. Methods for refreshing Tiles ............................................................................. 195 13.18. ShellTileSchedule ............................................................................................. 195 13.19. Panorama and Pivot Control ............................................................................. 195 13.20. Panorama Control ............................................................................................. 195 13.21. Structure of Panorama Control ......................................................................... 196 13.22. Panorama Control example ............................................................................... 197 13.23. Some Panorama Control advice ........................................................................ 198 13.24. Pivot Control .................................................................................................... 198 13.25. Structure of Pivot Control ................................................................................. 199 13.26. Pivot Control example ...................................................................................... 199 13.27. Application lifecycle ......................................................................................... 200 13.28. Application lifecycle ......................................................................................... 200 13.29. Application lifecycle ......................................................................................... 200 13.30. Page events ....................................................................................................... 201 13.31. Tombstoning ..................................................................................................... 201 13.32. Example: usage of State at tombstoning ........................................................... 201 13.33. Isolated Storage ................................................................................................ 202 13.34. Data storage on the device ................................................................................ 202 13.35. File handling basics .......................................................................................... 202

Page 12: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre
Page 13: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

1 Created by XMLmind XSL-FO Converter.

Mobile Softwares

1. 1 Introducing properties of mobile software development

1.1. Lecture 1 - Outline

• Motivation

• Restrictions of mobile software design

• Architecture of enterprise systems

• Communication

• Data storage

• Consequences of limited network access

• Application publishing

• Summary

1.2. MOTIVATION

1.3. Why are mobile clients important?

• Several years ago, it was not important at all!

• Today's enterprise applications

• Build on some kind of server side solution

• The thick client on the mobile side gives special interface to access the code at server side

• Often supporting temporary offline

1.4. Limited hardware capabilities

• Low computing performance

• Limited RAM

• Small permanent storage

• Small sized display with low resolution

• High data transfer price

• Lower network speed with higher latency

• Unreliable network connection

Page 14: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

2 Created by XMLmind XSL-FO Converter.

• Limited energy resources

1.5. Consequences

• Mobile devices are different

• Hardware

• Capacity

• Connectivity

• Energy consumption considerations

• User context

• Limitations and opportunities

1.6. Within this part of the course...

• Learn the different

• Design patterns,

• UI techniques,

• Operating system services

• that help designing and developing efficient, reponsive, ergonomic, useful applications for the different

mobile platforms

1.7. RESTRICTIONS OF MOBILE SOFTWARE DESIGN

1.8. Always keep in mind...1/3

• Users need quick and responsive applications

• On mobile, users can't extend the hardware for the sake of software

• Software ergonomy has greater importance

• Device should be portable Small screen

• Various input and output on the very same platform

• Touchscreen, trackball, ITU-T 12-keypad, qwerty,Can be changed run-time

• Portrait and landscape modes

• Multiple screens

• Scalable UI: Own or built-in graphic elements

1.9. Always keep in mind...2/3

• Put efficient code into the hardware!

Page 15: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

3 Created by XMLmind XSL-FO Converter.

• Memory leak?

• Even the gc needs resources

• Temp files on the storage

• Profiling

1.10. Always keep in mind...3/3

• Limited connectivity

• What if there's no connection?

• What if it stops working?

• What if network speed is slow, with huge latency? (e.g. video)

• It has its own cost

• Data transfer, call, SMS, MMS...

• Does the user know about that?

• Data cache, seldom update/upgrade...

1.11. Mobile computing capacity

• Calculating to a given length

• Differences are in order of magnitude between desktop and mobile processors

1.12. Get to know the palette!

Page 16: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

4 Created by XMLmind XSL-FO Converter.

1.13. ARCHITECTURE OF ENTERPRISE SYSTEMS

1.14. Participants of mobile market

• Network providers

• Builds up and maintains the mobile network, makes possible to communicate between phones

• E.g. T-Mobile, Telenor, Vodafone

• Service providers

• Provides various services to mobile phones or network's customers

• Voice-transfer: presently provided by the network operator, but increasingly splitting up: VMNO (Virtual

Mobile Network Operator)

• E.g. Skype, Google, application developers, etc.

• Mobile phone manufacturers

• E.g. Nokia, Sony-Ericsson, Samsung, HTC, Apple

• Customers

1.15. Mobile phone's functions 1/2

• What are the functions of a present-day modern mobile device?

Page 17: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

5 Created by XMLmind XSL-FO Converter.

• Communication (voice, e-mail, sms, etc.)

• Organizer functions (calendar, note)

• Web browsing

• Game

• Music/video playback

• Navigation

• Paying, authenticating

1.16. Mobile phone's functions 2/2

• Some extreme use-cases

• Controlling a robot (IR, Bluetooth, WLAN etc.)

• Observation via network (built-in microphone and camera)

• Mobile client for any network based application (e.g. Gmail mobile, blogs)

1.17. Generic architecture diagram

Page 18: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

6 Created by XMLmind XSL-FO Converter.

1.18. Architecture

• Middleware

• Usually a web application

• SOAP, REST

• Its role and weight differs from application to application

• Mobile client

• We are now regarding the thick clients

• Small and mid size

• Patterns differ from the desktop

• A variant of MVC (for example, the M-V-VM)

1.19. MVC: basics

• View: Displaying User Interface, representing data, interaction

• iOS: UIView, WP: UIElement

• Model: Providing and saving data

• Controller has no connection towards the view

• Limited and hard to use

1.20. Model-View-Presenter

Page 19: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

7 Created by XMLmind XSL-FO Converter.

• Android, iOS

• View can access the model via the controller

• The controller is aware of the view, it can directly modify its contents if some change occurs

1.21. Model-View-ViewModel

Page 20: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

8 Created by XMLmind XSL-FO Converter.

• Silverlight, Windows Phone

• To minimize the Code behind of the View

• ViewModel ( Controller):

• Views connect to it by databinding (the ViewModel is the Data context)

• Filtering and aggregation

1.22. Architecture of mobile applications

• Follow the MVC conventions common on the given platform!

• Put the UI and data representation to the View class, but not the business logic!

• Each part of data transformation should happen in the controller or the model parts

• Transformations that do not affect the business logic (do not alter the state of the application,) can happen

in the model

• If a UI event reaches the View, BL tasks should be delegated to the controller.

1.23. COMMUNCATION

1.24. Communication

• Over HTTP/HTTPS

• Transaction based

Page 21: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

9 Created by XMLmind XSL-FO Converter.

• TCP stream -based

• Continouos, synchronous connection

• The middleware should steadily supervise it

• On client side, the open socket needs resources

• For special tasks, such as streaming

• The business layer is usually a web service

1.25. Webservice implementation

• The standard HTTP-based interface can be

• SOAP-based

• XML messages

• RPC-like, WSDL descriptors at server side

• REST (Representational State Transfer)

• Standard HTTP queries (POST/PUT/GET/...)

• Resources with general interfaces, or URIs

• RESTful requirements: client-server architecture, stateless, cache-able, layered structure, uniform

interface

1.26. The REST body

• CSV

• Simplest

• Hard to extend and understand

• XML

• Structured, easy to understand

• Too verbose

• JSON

• More difficult to understand than XML, because of the lack of labels

• More compact

1.27. How server can reach the client

• Polling

• Scheduled queries delay can be big

• Frequent and unnecessary queries: energy, computing time, bandwidth

Page 22: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

10 Created by XMLmind XSL-FO Converter.

• The application should be running

• Push notification messages

• On every important platform, with external support

• Handled by the operating system

• Small sized messages

1.28. DATA STORAGE

1.29. Data storage: where?

• Correlates with the offline capability of the client

• At server side

• Either way, e.g. RDBMS, cloud, ...

• Client side

• For small amount of data: XML or file

• SQL on every platform

1.30. Sychronization with the server

• Keeping the data up-to-date is critical question

• Full synchronization

• Easy, with many unnecessary resending

• Only in case of small dataset or rare synchronization

• Incremental synchronization with version control

• Resending only which has higher version

• More work at server side, minor extra task at client side

• Implementation for example with timestamp

1.31. CONSEQUENCES OF LIMITED NETWORK ACCESS

1.32. The network can be down...

• In a tunnel, out of office, abroad...

• Two main strategies:

• Only online operation:

• Retrieves data from server at every view displaying

Page 23: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

11 Created by XMLmind XSL-FO Converter.

• Temporary data storage

• Stops working with network outage.

• Prepared for offline operation:

• The application represents data from a local database,

• Updates the data with the middleware on a time basis or with a predefined trigger

1.33. Offline operation

• Critical if connection is dropped during synchronization

• Transactions on both sides

• Communciation on a background thread

• Without blocking the UI thread

• Disabling the UI (e.g. with a waiting indicator)

• Only when inevitable

• Only when data are downloaded

1.34. Strategies of offline operation

• Partial offline operation:

• Client offers most of the functionalities

• Specific tasks (e.g. data modification) can not be performed

• Unlimited offline operation:

Page 24: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

12 Created by XMLmind XSL-FO Converter.

• Every function can be performed

• Modifications stored in a local data store

• Synchronization when network is available

1.35. APPLICATION PUBLISHING

1.36. Testing

• Preparation of testing report

• Predefined testing scenarios

• The functional test should cover all the use cases

• Hit the whole user interface

• Test with extreme input data

• Stress test: both on client and server side

• Incerasing the size of database, or simulating the increase of synhronized data amount

• Emulated clients can be used to test the server side

1.37. Technical documentation

• Application specification

• 3rd partry libraries and their licensing

• Further applied technologies

• Compilation steps of server and client sides

Page 25: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

13 Created by XMLmind XSL-FO Converter.

1.38. Further documentation

• Installation docs

• Should happen without user interaction or configuration

• Compilation guide

• User guide

• Is user interface ergonomic and straightforward to be used without the user guide?

1.39. Installation package and metadata

• Validation steps:

• Permissions, capabilities: exactly the needed ones?

• Application name, and icon is OK for all the (available) device types?

• Is metadata and other text that is shown to the user during installation correct?

• Obfuscation

1.40. SUMMARY

1.41. Summary

• Desiging and impementing software for enterprise context

• Different design patterns and circumstances

• Usually a client/server architecture

• Eventually with offline functionality

• And data synchronization

1.42. References

• Frank H. P. Fitzek (editor): Mobile Phone Programming and its Application to Wireless Networking.

Springer-Verlag, 2007. (ISBN: 978-1-4020-5968-1)

• John Hunter, Scott Olson, Ben Horgen and Kenny Goers: Professional Cross-Platform Mobile Development

in C#. 2012, Wrox.

• Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides: Design Patterns: Elements of Reusable Object-

Oriented Software. Addison-Wesley, 1994

• Bulent Tavli: Mobile Ad Hoc Networks: Energy-Efficient Real-Time Data Communications. Springer, 2010.

2. 2 Introducing the Android mobile platform Android application components UI design

Page 26: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

14 Created by XMLmind XSL-FO Converter.

2.1. Lecture 2 - Outline

• Android platform introduction

• Application components

• UI Design

2.2. ANDROID PLATFORM INTRODUCTION

2.3. Genesis of Android

• Android is one of the most popular mobile operating systems of present days

• It is a brand (TV spots, ads, etc.)

• Google stands behind

• Android offers the picture of a well functioning OS

• Revolutionized the picture of mobile operating systems

2.4. Open Handset Alliance

• Android is not only Google's development

• More than 50 member companies

• 11 manufacturer (HTC, LG, Motorola, Samsung, Asus, Garmin, Huawei, Sony Ericsson, Ericsson,

Toshiba, Acer)

• 13 semiconductor manufacturer (not at least Intel, Marvell, nVidia, Broadcom, SiRF, ARM and Atheros)

• 10 operator (example T-Mobile and Vodafone)

• 12 software company (Google, eBay)

• 7 other corporation

• Members are changing frequently

• Android:

• Product of huge knowledge and lot of work

2.5. Android hardware requirements

• Open Handset Alliance members get the OS free

• But! Google grants permission to Google Maps, YouTube and Google Play only when a device fulfills some

hardware requirements:

• At least QVGA resolution display

• 128 MB RAM and 256 MB flash memory,

Page 27: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

15 Created by XMLmind XSL-FO Converter.

• Bluetooth

• mini or microSD memory card

• WiFi

• Without these applications, these phones are rather feature phones

2.6. Android and Google integration

• After assigning a Google/GMail user, the OS will keep the contact list, the messages, the conversations, and

the calendar synchronized with it

• When the user starts a conversation with a new partner in Gmail, then the new name will be shown in

Android contact list

• When the user adds a new contact after a phone call, it will be synchronized with Gmail. This works for

calendar and GTalk too.

• Users can share their photos created with the camera of the devices at Picasa

• Using Latitude, users can share their position with friends

• Google+ community network functions

2.7. Android versions

• Developers must follow version changes

• Could be significant differences between versions

• Google pursue backward compatibility, but there are deep gaps (v 3.0)

• Before developing, it's neccesary to choose the minimum supported version well

• Version codename: some candy

2.8. Structure of Android platform

Page 28: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

16 Created by XMLmind XSL-FO Converter.

2.9. Platform build-up 1/3

• The structure of the platform is simple and clean

• The red part is the Linux kernel, which contains:

• Drivers of the hardware components

• These parts are created by the device manufacturers, because they know best "what is in the box"

• Memory management, process scheduling, low energy consumption performance management

2.10. Platform build-up 2/3

• The green parts are program libraries/services which run on the Linux kernel, like: libc, SSL, SQLite, etc.

These are implemented in C/C++

• The Dalvik virtual machine in the yellow part is based on these parts

• Not compatible with Sun's virtual machine

• Totally different instruction set

• It runs different binary programs

Page 29: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

17 Created by XMLmind XSL-FO Converter.

• After compiling, Java programs are not compiled into .class files, but to a Dalvik Executable format, which

extension is .dex. It is usually smaller then .class files size

• Java is only the programmig language!

2.11. Platform build-up 3/3

• Ont the blue parts are only Java source code

• Java source is run by the virtual machine. This is the essence of Android:

• A visible and touchable operating system

• Running programs

• The virtual machine can hide the whole Linux file system, and the users can see only the file system provided

by Android Runtime

2.12. Managed code

• Managed code runs on a virtual machine (Dalvik)

• It makes the application run secure

• An application can't ruin the whole system

• Memory management is happening with a garbage collector

• But! Be careful to create "good" source code

2.13. APPLICATION COMPONENTS

2.14. Applications

• Present days, the mobile client applications are more popular than web pages optimized for mobile displays

• General applications can be launched with icons

• Android grants much more:

• Services, running in the background

• Launch an application when an event occurs

• Autostart services in boot time

• Etc.

• An application can be deeply embedded in the OS

• Hold attention to user experience

2.15. Android Runtime 1/2

• After install, every Android application runs in an own secure environment (security sandbox):

Page 30: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

18 Created by XMLmind XSL-FO Converter.

• Android is a multi user operating system based on Linux. Every application is actually a different user.

• By default, the system assigns a unique Linux user identifier to every application

• This ID is hidden from the application, only the system knows about it

2.16. Android Runtime 2/2

• After install, every Android application runs in an own secure environment (security sandbox):

• Every process has its own VM instance, thus the applications source running separately from the others

• Every application runs in its own Linux Process

• Android launches the Process, when a component of the application is started. The Process will be closed,

when it is not needed any more, or the system needs more free memory for other applications

2.17. Application rights

• It is possible to use the same Linux user ID by two applications, thus they can use each other's files

• From resource saving reasons, these applications running in the same Linux Process, and they sharing on the

same virtual machine too

• Every application can request various rights to get access to device's data/hardware: contact list, SMS,

camera, Bluetooth, etc

• Every access right must be approved by the user during the installation process

2.18. Application components

• Every component is a unique building block of the application

• Every component grants a unique interface via the system can reach them

• Not every interface available for the user

• Components are helping to describe the application's global, unique behavior

• 4 application components exist. They have different purposes and life-cycle models (which defining the

component's creation and destruction)

2.19. Android application structure 1/2

• An Android application builds up from one or more application component(s):

• Activities

• Services

• Content Providers

• Broadcast Receivers

Page 31: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

19 Created by XMLmind XSL-FO Converter.

2.20. Android application structure 2/2

• Every component has its own role in the application

• Any component can activate itself

• Even an other application can activate the single components

2.21. Activities

• Independent View with own UI

• Example:

• Reminder application

• 3 Activity: ToDo list, create new ToDo, ToDo details

• Activities are independent, but they making up the whole application together

• Activities can start from another application too, like:

• Camera application can start the "create new ToDo" Activity, and assign the created photo to the reminder

• Inherited from android.app.Activity class

2.22. Services

• The Service component represents a task which running in the background for a longer time

• No user interface

• For example a downloader application running in the background while user plays a game in foreground

• Other components (Activity) can launch it, or bind it for control

• Inherited from android.app.Service class

Page 32: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

20 Created by XMLmind XSL-FO Converter.

2.23. Content providers

• Content provider's task is to manage a shared data source

• The data can be stored in the file system, in SQLite database, in the web, or in other persistent datastore,

which is accessible for the application.

• Via Content Providers, other applications have access to the data

• For example: CallLog application, which grants a Content Provider to access the content

• Inherited from android.content.ContentProvider class and must override every required API call

2.24. Broadcast receivers

• Broadcast receivers are responding to system level events (broadcasts)

• For example: display shut down, low battery, incoming message, incoming call, etc

• The application can send its own broadcast, for example when it want to indicate that an operation is done

• They don't have own UI, rather showing a message in the status bar, or starting an other component

• Inherited from android.content.BroadcastReceiver class; the event is available as an Intent (see later)

2.25. Manifest file

• Application descriptor, defines the application components

• XML file

• Before starting a component, the system checks the manifest file to verify the component's definition

• It provides other tasks too (example: what are minimum requirements to run the application)

• System verifies it at application installation

2.26. Application resources

• An Android application not only made up from source code, but from resources too, just like: images, sounds,

etc

• Also the interfaces defined in XML are resources too: layout, animation, menu, style, color

• With resources the application is much more flexible

• The system automatically generates a unique identifier to every resource. They will be reachable from the

source code with this ID

2.27. "Back stack"

• When a new Activity is starting, the previous Activity will be stopped, but system preserves it on the "back

stack"

• When the Activity started, it will be put on the back stack, and will get the focus

Page 33: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

21 Created by XMLmind XSL-FO Converter.

• Back stack: "last in, first out" array

• On "Back button" press, the back stack's top Activity will remove from the array, and the underneath gets the

focus

2.28. Activity lifecycle

• For a reliable and flexible application, it is critical to override appropriate the Activity lifecycle callback

methods

• The lifecycle of the Activity defined by the other cooperating Activities

• It is necessary to test the Activity's functions in the different lifecycle states

2.29. Activity states

• There are 3 main states:

• Resumed (running): the Activity is in the foreground and it has the focus

• Paused: the Activity is "alive", but another Activity is in the foreground (transparent, or pop-up like),

which is not cover it fully. System can kill it when the memory is extremely low

• Stopped: the Activity is "alive", but another Activity is fully in the foreground, and it covers the Stopped

Activity. System can kill it when the memory is low

2.30. Activity lifecycle model

Page 34: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

22 Created by XMLmind XSL-FO Converter.

2.31. Activity lifecycle-callback

• When an Activity stops for a start of another, the Activity will be notified via the lifecycle callback methods

• Many callback methods are supported (create, stop, resume, destroy, etc.)

• When a stop event occurs, it is typical to release the "big" objects (Database connection, network connection)

• When the Activity resuming, the resources must be allocated again

• These transitions are typically part of Activity lifcycle

2.32. Multitasking

• Task: a performable function, which can use more Activities, but they don't need to belong to the same

application

• On pressing the Home button, the system will go to the Home Screen, and we can launch a new task

Page 35: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

23 Created by XMLmind XSL-FO Converter.

• On launching a new task, the system keeps the previous task's Back Stack

• The new task gets a new Back Stack

2.33. UI DESIGN

2.34. Different screen sizes 1/2

• Android can run on different display resolutions and densities

• The OS grants a mechanism to support different displays (from version 1.6)

• It takes over the most of the work from the developer

• Developer/designer must create only the appropriate resources

• For example, there are huge differences between a screen of a tablet and a mobile phone

2.35. Different screen sizes 2/2

• The OS automatically scales and resizes the surface of the application to reach the maximal device

compatibility

• But! It is important, that the surface and the resources (images) will be optimized for the supported

resolutions and densities

• This method can greatly increase the user experience

• Furthermore the device specific visualization will increase the user satisfaction

• Following this method will result an application in a single .apk file, which can support every device in UI

regard

2.36. Most imoprtant definitions 1/2

• Screen size:

• Physical screen diagonal

Page 36: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

24 Created by XMLmind XSL-FO Converter.

• For simplicity, Android distinguishes 4 different categories: small, normal, large and extra large

• Screen density ( ): the number of pixels within an area. Typically dots per inch. (dpi)

• Android distinguishes 4 different categories: low, medium, high Ă©s extra high

• Orientation: the orientation from the user's point of view:

• Portrait

• Landscape

• Orientation can change in runtime, for example with the rotation of the device

• It's possible to lock the orientation

2.37. Most important definitions 2/2

• Resolution ( ): Number of the pixels of the display

• At UI desing, never work with resolution, only size and density

• Density-independent pixel( )

• Virtual pixel unit, which is expedient to use at UI design

• One dp is one physical pixel on a 160 dpi screen.

• The OS handles every necessary scaling at runtime according to the defined dp

• For example on a 240 dpi screen, 1 dp is 1.5 physical pixel

2.38. General screen sizes

• 4 general sizes:

• small, normal, large and xlarge

• 4 general densities:

• ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high)

Page 37: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

25 Created by XMLmind XSL-FO Converter.

2.39. Runtime operation

• To optimize the visualization, it is possible to set alternative resources to support different screen resolutions

and densities

• Typically, we must define different layouts and distinct resolution images

• The OS choose the appropriate resources runtime

• Generally there is no need to define every resolution and density combination

2.40. Density independency

• An application can be density independent, when the UI components preserving their physical size on the

different densities (from the user’s point of view)

• Keeping density independency is very important. For example, a button can be larger on a smaller density

screen

• The problems which are related to density can significantly influence the usability of the application

• Andorid helps to reach density independency with two ways:

• The OS calculates the dp, and scale the user interface from the actual screen density

• The system scales image resources automatically from screen density

2.41. Most important factors

• Use the wrap_content, fill_parent or dp units at UI design

• Do not use predefined pixels!

• Do not use AbsoluteLayout (obsolete)!

• We must create different image resources to handle different display densities anyway

• For text scaling it's worth to use scale-independent pixels (sp). They work like dp

2.42. Designing user interfaces

• Defining the layout and the resources in XML

• Assign the UI resource to the Activity

• Layout components from source code:

• Dynamic UI handling

• Supporting animations

2.43. User Interface resources

Page 38: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

26 Created by XMLmind XSL-FO Converter.

• Layout

• Text based resources:

• Image resources:

• Animation resources:

2.44. Some important layout

Page 39: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

27 Created by XMLmind XSL-FO Converter.

2.45. Pop-up windows

Page 40: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

28 Created by XMLmind XSL-FO Converter.

2.46. Menus

• Can be defined in source code

• Can be defined in resources

• Dynamic menus

• Set visibility

• Manipulation from Java code

• Supporting submenus

2.47. Localization

• Multi language supported

• Language independent surfaces and resources

• Resource types supporting localization:

• Images

• Layouts

• Text based resources

• Default folders:

[fragile]

2.48. Creating styles

Page 41: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

29 Created by XMLmind XSL-FO Converter.

• Style file: res/values/styles.xml

<style name="ExampleStyle">

<item name="android:textSize">22sp</item>

<item name="android:textColor">#0000EE</item>

</style>

• Using a style:

<TextView

android:id="@+id/tvHello"

android:text="@string/hello_world"

style="@style/ExampleStyle" />

[fragile]

2.49. Using themes

• Definition like in styles:

<style name="CustomTheme" parent="android:Theme">

<item name="android:windowTitleSize">50dip</item>

<item name="android:textColor">#000000</item>

<item name=

"android:windowBackground">@color/white_color</item>

</style>

• Themes can inherited from each other

• Can set in the Manifest:

<activity android:label="" android:name=".MainActivity"

android:screenOrientation="portrait"

android:theme="@style/CustomTheme"/>

3. 3 Communication between components, Resources, User Interface

3.1. Lecture 3 - Outline

• Communication between components

• Resources

• Advanced User Interface

• Animations

3.2. COMMUNICATION BETWEEN COMPONENTS

Page 42: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

30 Created by XMLmind XSL-FO Converter.

3.3. Communication between components

• Every application runs in its sandbox

• Restrictions about sandbox

• Communication through Android OS

• Communication types

• Intent

• From one component to another

• Broadcast Intent

• From one component to others

• Content Provider

• Provides access to data to components

3.4. Intent

• Passive data structure

• Late runtime bind between components

• Components: Activity, Service, Broadcast Receiver

• Abstract description of an operation to be performed or an occured event

• Operation to be performed: if the intent indicates an operation

• Activity, Service, Broadcast Receiver registration / activation

• Occurred event: if an event indicates the intent

• Broadcast message

[fragile]

3.5. Intent delivery

• Three type of target components

• startActivity[ForResult](Intent): start or continue an Activity

• startService(Intent), bindService(Intent): start or bind a Service

• send[Ordered|Sticky]Broadcast(Intent): reach all BroadcastReceiver which is interested

• Android OS locate the proper target and instantiate it if needed

• Intent only reaches one kind of component

3.6. Intent object

Page 43: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

31 Created by XMLmind XSL-FO Converter.

• Component name: the name of the component that should handle the intent

• If it is empty Android locate a suitable target

• Action: action to be performed or action that took place and is being reported

• Data: the URI and the MIME type of the data to be acted

• Category: additional criteria to the component handling the intent

• Extras: key-value pairs for additional information that should be delivered

• Flags: instruct the Android system how to launch an activity

3.7. Usage of intents

• Common usage: start a new activity

• Two types

• Explicit intent: explicitly defines the component which should be called by its name

• Implicit intent: do not name a target

• Specify the action which should be performed and optionally an URI which should be used for this

action

• E.g. open a file, play a video, choose a contact

3.8. Explicit intents

• Explicit call: pass the name of the target to the constructor

• If there is an instantiates in the memory then it continues otherwise the Android instantiate and starts the

target

[fragile]

3.9. Returning of an activity

• Sometimes a result is needed from an activity when it ends

• Solution: startActivityForResult(Intent, requestCode)

• To post a result from the target to the parent activity

• Call the setResult(resultCode) before finish()

• Handling the result with the callback function:

• onActivityResult(requestCode, resultCode, extras) {...}

• requestCode: integer, same as the code passed to the startActivityForResult

Page 44: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

32 Created by XMLmind XSL-FO Converter.

• resultCode: integer, numeric code of the result

• extras: Intent which can contain key-value pairs

[fragile]

3.10. Intent Extras

• Inserting extra data

• intent.putExtra(name, value);

• Reading the data

• intent.get[Typename]Extra(name[, DefaultValue]);

[fragile]

3.11. Implicit Intents

• Implicit call: describe the action which has to be performed

• Multiple targets

• If no component fits

• ActivityNotFoundException

• If the system cannot decide

• "Complete action using" dialog

• Possibility to make Android OS to remember the choice

3.12. Implicit Intent - Actions

• There are a lot of built-in action

• Importants:

• ACTION_EDIT: edit, e.g. contact, file, picture

• ACTION_WEB_SEARCH: start google search with given text

• ACTION_CALL: dial the given number

Page 45: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

33 Created by XMLmind XSL-FO Converter.

• ACTION_PICK: choose from a list, e.g. from contacts, from gallery

• ACTION_VIEW: open with the proper application, e.g. installer, file, pdf, picture

3.13. Implicit Intent - Example

• Dial number

• Choose contact

[fragile]

3.14. Intent resolution

• Resolution based on Action, Data and Category

• Comparing the contents of the Intent object to intent filters

• Possible to register to handle intent with intent filters

• In

[fragile]

3.15. Intent filter

• Advertise the capabilities of a component and delimit the intents it can handle

• there are built-in filters, e.g. ACTION_CALL, ACTION_IMAGE_CAPTURE

• Action: action which can be handled by the component

• Default or custom

• <action android:name=,,com.amorg.notes.SHOWNOTE''/>

• Data: which type of data can be handled by the component

• Given by an URI and/or a MIME type

• MIME: <data android:mimeType=''vnd.amorg.notepad.note/*''/>

• URI: scheme://host:port/path

• Category: describe the circumstances of handling an intent

Page 46: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

34 Created by XMLmind XSL-FO Converter.

• Important ones: LAUNCHER, HOME, DEFAULT

3.16. Intent resolution

• Android OS locate the component which is the best fit

• Only for implicit intents

• Complex process

• There are three tests to match intent with intent filters

• Action test, Data test, Category test

[fragile]

3.17. Intent flags

• Used to modify the default behavior of launching an activity

• Important flags

• FLAG_ACTIVITY_NEW_TASK: new activity starts in a new task

• FLAG_ACTIVITY_SINGLE_TOP: if the target activity is in the Back Stack then it will be continued

• FLAG_ACTIVITY_CLEAR_TOP: if the target activity is in the Back Stack then all above will be cleared

• Set with setFlags() function

• Useful only in very rare cases

3.18. RESOURCES

3.19. Resources

• Separated from application code

• Maintain independently

• Externalizing resources allows to provide alternative resources that support specific device configurations

• Default and alternative resources

• Qualifiers in directory names

• Located in subdirectories of res/ directory

[fragile]

3.20. Resource types

• Animation

• Saved in res/anim/ or res/drawable/

Page 47: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

35 Created by XMLmind XSL-FO Converter.

• Accessed from the R.anim or R.drawable class

• Color State List

• res/color/ - R.color

• Drawable

• Res/drawable/ - R.drawable

• Layout

• res/layout/ - R.layout

• Menu

• res/menu/ - R.menu

• String

• res/values/ - R.string, R.array, R.plurals

• Style

• res/values/ - R.style

• Other resource types

• res/values/ - R.* (e.g. R.bool, R.integer, R.dimen, etc.)

[fragile]

3.21. Qualifiers

• Appear in resource directory names:

• To support specific device configuration

• e.g. different layout for landscape and portrait view

• layout-port contains layout for portrait orientation and layout-land contains layout for landscape

• Multiple qualifiers: drawable-port-hdpi/

• The qualifiers must be in a specific order (check out: developer.android.com)

• Examples

• Language for localization: en, fr, hu, etc.

• Screen size: small, normal, large, xlarge

• Pixel density (dpi): ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpi

• Platform version (API level): v3, v4, v7, etc.

• etc.

3.22. Example 1/2

• Layout

Page 48: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

36 Created by XMLmind XSL-FO Converter.

3.23. Example 2/2

• String

• Menu

3.24. ADVANCED USER INTERFACE

[fragile]

3.25. Android Fragment Framework

• Fragment: represents a behavior or a portion of user interface in an Activity

• Advantages

• Modularize the code

• Reuseable: use in multiple activities

• Adjust the user interface to the screen

• Multiple layouts based on the size of the display

3.26. Fragment and Activity

Page 49: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

37 Created by XMLmind XSL-FO Converter.

• Fragments are attached to an Activity

• Their lifecycles almost the same

3.27. Fragment lifecycle

Page 50: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

38 Created by XMLmind XSL-FO Converter.

3.28. Different display sizes

[fragile]

Page 51: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

39 Created by XMLmind XSL-FO Converter.

3.29. UI Fragment

• Create

• Extend Fragment class and override onCreateView() method

3.30. UI Fragment

• Attach

• Dynamic

• Load the proper Fragment in runtime

• Static

• In Layout XML

[fragile]

3.31. Managing Fragments

• Manage fragments withFragmentManager class

• Activity: .getFragmentManager()

• Starting FragmentTransaction

• Find fragments with id or tag

• Managing Fragment-stack

[fragile]

3.32. FragmentTransaction

Page 52: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

40 Created by XMLmind XSL-FO Converter.

• Modify active fragments throughFragmentTransaction

• Starting with the beginTransaction() method in FragmentManager

• Important methods

• add(), remove(), replace(): add or remove fragments in an Activity

• commit(): execute transaction

• show(), hide(): show or hide fragment instance

• setTransition(), setCustomAnimations()

• addToBackStack(): transaction can be added to back stack

[fragile]

3.33. Communication

• Fragments have to be encapsulated indirect communication

• Activity acts like a mediator

If direct communication is needed:

setTargetFragment()

getTargetFragment()

[fragile]

3.34. FragmentDialog

• Fragment can appear as a dialog

• Dialog with custom layout

• Dialog has the same lifecycle as Fragment

• Fragment Dialog can be added to back stack

• DialogFragment is also a Fragment

Page 53: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

41 Created by XMLmind XSL-FO Converter.

• It can be shown as a part of an Activity layout

[fragile]

3.35. Fragment parameters

• Fragment can be instantiated with its default constructor

• If additional parameters are needed

• Pass them with Bundle

• setArguments()

• The Bundle stores the data during initiation

• getArguments()

• The Bundle survive the changing of orientation

[fragile]

3.36. Fragments in older versions

• Official support library

• Static class library

• Support from Android 1.6

• Support for additional components which come with new Android versions

• Loader framework

• GridLayout

• LruCache

• ViewPager

• etc.

3.37. ViewPager

• Layout manager that allows the user to flip left and right through pages of data with swipe gestures, e.g.

Google Play

Page 54: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

42 Created by XMLmind XSL-FO Converter.

[fragile]

3.38. FragmentPagerAdapter

• Usually the pages of ViewPager are Fragments

• FragmentPagerAdapter provides the pages

• Working is similar to BaseAdapter

Page 55: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

43 Created by XMLmind XSL-FO Converter.

• Fragment getItem(int position): returns the proper fragment

• int getCount(): returns the number of pages

• String getTitle(int position): returns the title of the given page

[fragile]

3.39. PageTitleStrip and PageTabStrip

• Widgets which show the titles of pages in ViewPager

PageTitleStrip non-interactive

PageTabStrip interactive

3.40. ANIMATIONS

Page 56: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

44 Created by XMLmind XSL-FO Converter.

3.41. Property Animation

• Allow to animate almost anything

• Components

• Animators: provide the basic structure for creating animations

• Evaluators: tell the property animation system how to calculate values

• Interpolators: tell how specific values in an animation are calculated as a function of time

3.42. Property Animation elements

• Duration: the duration of an animation

• Time interpolation

• Repeat count and behavior

• Animator sets: group animations to play together or sequentially or after specified delays

• Frame refresh delay: how often to refresh frames of the animation

3.43. View animation

• Preform tween animation on View objects

• Base animations

• Rotate, scale, translate, alpha

• Defined by XML or Java code, but XML is preferred

3.44. Drawable animation

• Load a series of Drawable resources one after another

• Traditional animation which plays images like a roll of a film

Page 57: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

45 Created by XMLmind XSL-FO Converter.

3.45. Summary

• Communication between components with Intents

• Resources are separated from application code

• Qualifiers to create alternative resources

• Advanced UI with reusable Fragments

• Support library for older Android versions

• Create multiple layouts for different display sizes

• Three type of animations to create complex UI animations

• Drawable, View and Property animation

4. 4 Persisting and binding data on Android platform, Broadcast Receiver Component

4.1. Lecture 4 - Outline

• Persistent Data Storage

• Content Provider

• Data Binding

• Broadcast Receiver

4.2. PERSISTENT DATA STORAGE

4.3. Persistent Data Storage

• There are 4 ways

• Shared Preferences

• Store private primitive data in key-value pairs

• Files

• Store data on device memory or on external storage

Page 58: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

46 Created by XMLmind XSL-FO Converter.

• SQLite Database

• Store structured data in private database

• Network

• Store data on the web

[fragile]

4.4. Shared Preferences

• Store private primitive data in key-value pairs

• boolean, float, int, long, String, Set<String>

• Data will be persisted across user sessions

• Even if the application is killed

• SharedPreferences class is an interface for accessing and modifying preference data

• Modifications through SharedPreferences.Editor object

[fragile]

4.5. Using Shared Preferences - Write

• Call edit() to get a SharedPreferences.Editor

• Add values with put...() methods

• Commit new values with commit() method

[fragile]

4.6. Using Shared Preferences - Read

• Call the proper get...() method in SharedPreferences

Page 59: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

47 Created by XMLmind XSL-FO Converter.

[fragile]

4.7. Internal and External Storage

• Read and write files

• Internal/phone storage

• External storage / SD card

• Operations with standard Java objects

• FileOutputStream, FileInputStream

• Files can be private or public

• public: readable and/or writeable by others

• Read and write files

• Internal/phone storage

[fragile]

4.8. Internal Storage example

• Create and write a file to internal storage

• Read file with openFileInput() and read() method of FileInputStream

[fragile]

4.9. External Storage example

• Create and write a file to internal storage

Page 60: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

48 Created by XMLmind XSL-FO Converter.

• Read file with openFileInput() and read() method of FileInputStream

[fragile]

4.10. SQLite Database

• Full support for SQLite databases

• Private database, not accessible from outside the application

• Manage with SQLiteOpenHelper and SQLiteDatabase objects

• SQLite queries return Cursor objects

• Navigate and read

4.11. SQLite Example 1/3

4.12. SQLite Example 2/3

Page 61: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

49 Created by XMLmind XSL-FO Converter.

4.13. SQLite Example 3/3

• Get one row

• Insert new row

[fragile]

4.14. Network Connection

• Use network to store data on a web-based service

• Standard Java package or Android specific package

• java.net.*

• android.net.*

4.15. CONTENT PROVIDER

4.16. Content Provider

• Manage access to a structured set of data

Page 62: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

50 Created by XMLmind XSL-FO Converter.

• Standard interface to share data with other applications

• Android hasn't got any storage which any application can access

• Built-in content providers

• Contacts, calendar events, files

• Accessible to any Android application

• Need to register Content Provider

• Every resource has unique URI

4.17. Similar Conceptions

• Web page

• Domain registration is required

• REST: REpresentational State Transfer

• Unique URI for data

• WebService

• Provides operations through services

• Stored procedures

• Service based access to database

4.18. Example 1/3

Page 63: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

51 Created by XMLmind XSL-FO Converter.

[fragile]

4.19. Query data

• With query() method of ContentResolver

• startManagingCursor(): to manage the lifecycle of the Cursor

• Parameters:

• URI

• Column names

• WHERE conditions

• Order conditions

[fragile]

4.20. Query data

• Returns: Cursor with 0+ row

• Data is only readable with Cursor

• moveToFirst()

• moveToNext()

Page 64: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

52 Created by XMLmind XSL-FO Converter.

• moveToPrevious()

• getCount()

• getColumnIndexOrThrow()

• getColumnName()

• getColumnNames()

• moveToPosition()

• getPosition()

4.21. Example 2/3

[fragile]

4.22. Insert and Modify

• With ContentValues key-value pairs

• Insert new key-value with put() method

Page 65: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

53 Created by XMLmind XSL-FO Converter.

• ContentResolver.insert(...)

• Returns with the URI of the new element

4.23. Example 3/3

[fragile]

4.24. Create Custom Provider 1/2

• Extend ContentProvider class

• Open data in onCreate() method

• Thread-safe implementation!

• Define column names with public staticString variables

• Define _id column to identify rows

• In SQLite: INTEGER PRIMARY KEY AUTOINCREMENTATION

[fragile]

4.25. Create Custom Provider 2/1

Page 66: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

54 Created by XMLmind XSL-FO Converter.

• Override methods:

• query(), insert(), update(), delete(), getType()

• Register Content Provider in

4.26. DATA BINDING

[fragile]

4.27. Data Binding

• Simple way to present and interact with data

• AdapterView is a view whose children are determined by an Adapter

• ListView, Gallery, Spinner, GridView, etc.

• Adapter supplies the data

• Adapter is responsible for drawing the View for each data element

• Concrete implementations: ArrayAdapter, CursorAdapter

4.28. Example - ArrayAdapter

4.29. Another example 1/2

Page 67: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

55 Created by XMLmind XSL-FO Converter.

4.30. Another example 2/2

Page 68: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

56 Created by XMLmind XSL-FO Converter.

4.31. Example - Google autocomplete

4.32. BROADCAST RECEIVER

[fragile]

4.33. Broadcast Receiver

• Allow to register for system or application events

• Types:

• Normal: all receivers will be called in random order

• Ordered: running one at the time

• Components can be ordered by priorities and can terminate calls for lower priorities

• Catch messages with BroadcastReceiver component

• Extend BroadcastReceiver class

Page 69: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

57 Created by XMLmind XSL-FO Converter.

• Override onReceive() method

• Create an intent filter

• 5 seconds time limit!

4.34. Registration

• From XML

• From code

[fragile]

4.35. Events

• There are built-in Broadcast Intents (generated by the system), e.g.:

• sendBroadcast() method allows to send custom Broadcast Intents

• It is intent so it can contain extra data

4.36. Example - Monitoring calls

• Monitoring incoming and outgoing calls

• Incoming and outgoing calls generate Broadcast messages

• Support a few kind of event about phone calls

Page 70: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

58 Created by XMLmind XSL-FO Converter.

• Additional data can be determined (e.g. caller id)

• Required permissions

4.37. Example - Registration of receivers

4.38. Example - handle incoming calls

4.39. Example - handle outgoing calls

Page 71: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

59 Created by XMLmind XSL-FO Converter.

4.40. Example - screenshot

Page 72: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

60 Created by XMLmind XSL-FO Converter.

4.41. Summary

• Store data in persistent data storage

• SharedPreferences, Files, Database, Network

• Use Content Provider to share data with other applications

• Built-in providers for contacts, events, files

• Manage model-view connection with data binding

• BroadcastReceiver to notify components about events

• Built-in broadcast messages

5. 5 Network communication, Location based services, Service component

5.1. Lecture 5 - Outline

• Network communication

• Location based services

Page 73: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

61 Created by XMLmind XSL-FO Converter.

• ProximityAlert, Geocoding, MapActivty and MapView

• Services

5.2. NETWORK COMMUNICATION

[fragile]

5.3. Mobile network information

• TelephonyManager object

• TelephonyManager tm = (TelephonyManager)getSystemService(Context.

);

• Accessible information

• Call state, cell locations, operator name, imei, etc.

• Monitoring mobile network state with PhoneStateListener

• tm.listen(listener, event);

5.4. Examples

• Cell information

• Operator and SIM data

• Monitoring signal strength

5.5. HTTP communication

• HTTP queries with HTTP GET and POST parameters

• Full HTTPS support

• HTTP library created by Apache

• Need permission

Page 74: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

62 Created by XMLmind XSL-FO Converter.

• Basic rules:

• Work in new thread!

• Check response code!

5.6. HttpClient and DefaultHttpClient

• HttpClient

• HTTP client interface

• Executes HTTP requests

• Cookie management

• Authentication support

• DefaultHttpClient

• Concrete implementation of HttpClient interface

• AndroidHttpClient

• Extends DefaultHttpClient with Android specific settings

[fragile]

5.7. HttpGet

• Standard HTTP GET implementation

• org.apache.http.client.methods.HttpGet

• Automatically follows redirects

• To disable: setFollowRedirects(false);

• Instantiate

• HttpGet httpGet = newHttpGet(,,http://www.google.com'');

• Execute with execute(...) method of HttpClient

[fragile]

5.8. Result of HTTP request

• execute() method returns HttpResponse object

• Get reply status

• StatusLine object which contains status code

• HttpStatus: store HTTP statuses as constants

• Get content of response

• HttpEntity object

Page 75: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

63 Created by XMLmind XSL-FO Converter.

• HttpEntity entity =response.getEntity();

[fragile]

5.9. HttpEntity

• Both request and response can contain HttpEntity

• 3 main types:

• Streamed: get content as a stream

• Self-contained: content is stored in memory

• Wrapping: content is wrapped in another entity

• Get content

• InputStream is =entity.getContent();

5.10. HTTP GET example

5.11. Modifying UI from another thread

• The system creates a main thread at application start (UI thread)

• Long-running operations can block UI

• Run in new thread!

• Results of these operations usually indicate UI update which is only allowed from UI thread

• Solutions:

• Activity.runOnUiThread(Runnable)

• View.post(Runnable)

• View.postDelayed(Runnable, long)

• Handler

• AsyncTask

Page 76: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

64 Created by XMLmind XSL-FO Converter.

[fragile]

5.12. URL encoding

• GET parameters cannot contain special characters

• Only alphanumerics [0-9a-zA-Z] and some characters ( ) are allowed

• URLs should be encoded everywhere in a request

• URL encoding converts special characters into a format that can be transmitted

• URLEncoder

• encode(String s)

• encode(String s, String charsetName)

• URLDecoder

• decode(String s)

• decode(String s, String encoding)

[fragile]

5.13. HTTP POST

• Standard Http Post message

• org.apache.http.client.methods.HttpPost

• Parameters do not appear in URL

• Typical usage:

• Uploading files

• Sending data to database

• etc.

5.14. HTTP POST example

Page 77: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

65 Created by XMLmind XSL-FO Converter.

5.15. HTTPS

• Secure HTTP requests

• All data are encrypted

• Typical usage

• Generate certificate

• Set HTTPS server with the generated cert.

• Use certificate in the Android application

• Use HttpsUrlConnection class on Android

5.16. Processing responses

• Usually predefined protocol for client-server communication

• Most of the times a third party server replies data in common protocol

• Typical formats

• CSV (Comma Separated Value(s))

• JSON (JavaScript Object Notation)

• XML (Extensible Markup Language)

• Built-in parsers on Android

5.17. JSON

• Structural characters: '{', ']' ,'[', ']' ,':' ,';'

• Example:

Page 78: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

66 Created by XMLmind XSL-FO Converter.

[fragile]

5.18. Processing JSON

• JSONObject

• Parsing JSON objects

• Get elements with key

• getString(String name)

• getJSONObject(String name)

• getJSONArray(String name)

• Create JSON objects from String or Map

• JSONArray

• For JSON arrays

• Parse and query by index

• Create from Collection

5.19. JSON example

Page 79: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

67 Created by XMLmind XSL-FO Converter.

5.20. XML

[fragile]

5.21. Processing XML

• Rich possibilities for parsing XML data on Android

• SAX parser

• javax.xml.parsers.SAXParser

• event based parser

• generate events when parser reaches specific parts of the data

• call back with specific functions

• DOM parser

• javax.xml.parsers.DocumentBuilder

• javax.xml.parsers.DocumentBuilderFactory

• parsed XML is stored in memory as a tree

Page 80: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

68 Created by XMLmind XSL-FO Converter.

5.22. XML example

[fragile]

5.23. TCP/IP socket

• Standard socket implementation

• With well-known java.net.Socket class

• java.net.ServerSocket class for incoming connections

• local applications can communicate with each other through localhost

• Read and write with InputStream and OutputStream

5.24. LOCATION BASED SERVICES

5.25. Location based services

• Mobile phones are portable

• Application can use location to provide extra information

• Navigation

• Meeting organization based on routines

• Enterprise applications: fleet tracking

5.26. Current Position

• Location Manager

• Obtain current location

• Track movement

• Set proximity alerts for detecting movement into and out of a specified area

Page 81: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

69 Created by XMLmind XSL-FO Converter.

• Location Provider

• Based on mobile cells

• Fine location: GPS

• Permissions

5.27. Providers

• Example

• Different capabilities

• power consumption, monetary cost, accuracy

• ability to determine altitude, speed or heading

• Criteria object for get the best provider

• accuracy criteria, power requirement criteria, altitude required, etc.

5.28. Examples

• Get current location (last known location)

• Request location update (based on time or distance)

5.29. ProximityAlert

• Android can notify when mobile move into or out a specified area

• Coordinate and radius

• Intelligent logic for using the correct provider

Page 82: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

70 Created by XMLmind XSL-FO Converter.

5.30. Geocoding

• GPS coordinate from address

• Synch call!

5.31. Reverse Geocoding

• Address/addresses from GPS coordinate

5.32. MapView

• Displays coordinates on Google map

• Full control of view

• location, zoom level, type (map, satellite, traffic)

• Can contain overlays

• Can contain custom POIs

5.33. MapView screenshot

Page 83: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

71 Created by XMLmind XSL-FO Converter.

[fragile]

5.34. Creating MapView

• Only in activity which extends MapActivity

• MapView in layout XML

• Internet permission is required

• Override isRouteDisplayed() method

• Personalized API key is required

• Using MapView

• Set layers with setSatellite(), setStreetView(), setTraffic() methods

• Get center, current zoom, max zoom, etc.

• Control map with MapController object

• set center, zoom level, etc.

5.35. MapView - Layout

Page 84: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

72 Created by XMLmind XSL-FO Converter.

[fragile]

5.36. MapView Overlays

• MapView can contain any number of Overlay

• You can draw anything on overlay

• You can be notified about touch events

• Automatic mapping from pixels to GeoPoint with Projection class

• ItemizedOverlay class to display POIs automatically

• Store POIs as OverlayItem objects

5.37. Creating Overlay

5.38. SERVICES

5.39. Service

• Application component

Page 85: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

73 Created by XMLmind XSL-FO Converter.

• Perform a longer-running operation while not interact with the user

• Service has no UI

• Service has its own lifecycle

• Other applications can interact with the service

• Take care of closing resources and stopping the service!

• Examples: music player, downloader application (e.g. torrent), etc.

[fragile]

5.40. Service types

• Started

• Service started with startService() method by a component

• Usually perform a single operation

• When the operation is done, the service should stop itself

• Bound

• An application component binds to the service by calling bindService()

• Offers a client-server interface to interact with the service in both ways

• Run only as long as another application component is bound to it

• Custom service can support both types at the same time

5.41. Service lifecycle

Page 86: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

74 Created by XMLmind XSL-FO Converter.

5.42. Managing Services

• The usage is similar to activities

• Communicate through Intents

• Service runs in the main thread of its process by default

• Long-running or blocking tasks should be executed in new thread

• e.g. CPU intensive work, MP3 playback, networking

• if not: well-known Application Not Responding (ANR)

[fragile]

5.43. Creating Service

• Extend Service class

• Override required methods

• Take care of proper termination

• Close resources

• Stop service

• Register the Service in as an application component

Page 87: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

75 Created by XMLmind XSL-FO Converter.

• Start the Service

• startService() or bindService()

[fragile]

5.44. Custom Service methods

• onStartCommand()

• automatically called when another component starts the service

• onBind()

• automatically called when another component binds to the service

• onCreate()

• called when the service is created

• before onStartCommand() and onBind()

• onDestroy()

• called before the service has been destroyed

5.45. Terminating services by Android OS

• Android OS stops services only if the Activity in the foreground needs more memory

• Lower the chance that the service will be destroyed

• If a service is bound to an Activity

• Foreground Services are almost never killed by the system

• If there is enough free memory again then the system trying to restart the service

5.46. Service attributes 1/2

5.47. Service attributes 2/2

Page 88: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

76 Created by XMLmind XSL-FO Converter.

• enabled: determine that the service can be instantiated by the system

• exported: whether or not components of other applications can invoke the service or interact with it

• icon: icon of the service

• label: a name for the service that can be displayed to users

• name: package name where the implementation is

• permission: which permissions are required to connect to this service

• process: the name of the process where the service is to run

5.48. Service example

• Custom Service

• Starting the Service

5.49. Summary

• Network communication

• Standard interfaces for standard protocols

• Location based services

• Lot of possibilities to monitoring location

• Geocoding and reverse geocoding to transform coordinates to addresses and back

• Custom Google Map based views with MapView

• Use Service to perform long-running operations in the background

• Independent from UI

6. 6 Introducing the iOS Mobile Platform, Developer Tools and Programming basics

Page 89: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

77 Created by XMLmind XSL-FO Converter.

6.1. Lecture 6 - Outline

• Platform summary

• Developer Tools and Programming basics

• Architecture of the iOS applications

6.2. Devices running iOS

• iPhone

• iPhone, iPhone 3G, iPhone 3GS, iPhone 4, iPhone 4GS, iPhone 5

• iPod Touch

• iPod Touch 1st, 2nd, 3rd, 4th, 5th generation

• iPad

• iPad 1, iPad 2, iPad 3, iPad 4, iPad Mini

• (Apple TV)

6.3. iOS the Operating System

• Derived from core OS X technologies

• Nearly the same kernel (XNU)

• UNIX/BSD fundaments

• iOS application are not compatible with OS X

• Closed platform with numerous restrictions

• Development only with the official iOS SDK only in OS X environment

Page 90: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

78 Created by XMLmind XSL-FO Converter.

6.4. Behind success

• Innovative User Interface

• Touchscreen

• Multitouch support

• Fast and fluent

• A real Mobile web browser: Safari

• App Store: centralized application store

• "There is an App For That!"

• The developers get popularity only for a small percent of the profit

• Common Components

• Human Interface Guidelines

• Apple fanboy effect

6.5. Drawbacks

• API weakness, no full multitasking

• Became even better

• Requires OS X for development

• Requires iTunes for data synchronization

• Unable to use as USB pendrive

• Applications are available only through App Store

• Apple decides which applications can be published through the Store. Many critics.

• Customization requires Jailbreak

• No integrated FM radio (only external)

• Expensive

6.6. Drawbacks

• API weakness, no full multitasking

• Became even better

• Requires OS X for development

• Requires iTunes for data synchronization

• Unable to use as USB pendrive

• Applications are available only through App Store

Page 91: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

79 Created by XMLmind XSL-FO Converter.

• Apple decides which applications can be published through the Store. Many critics.

• Customization requires Jailbreak

• No integrated FM radio (only external)

• Expensive

6.7. The History of the iPhone

• API weakness, no full multitasking

• 2007. june: itroduces iPhone 1.0

• 2008. march: introduces the iPhone SDK

• The begining of 3rd party application development

• 2008. july: introduces iPhone 3G and iOS 2.0 and opens the App Store

• 2010. april: introduces iPad (from than on the operation system is officially called iOS)

• Currently iPad 4, iPhone 5

6.8. iOS versions from user perspective

• iOS 1: fix 20 applications (Mail, Messages, Maps, ...)

• iOS 2: App Store, A-GPS

• iOS 3: MMS, copy-paste, Spotlight search, Push Notification, IMAP, compass

• iOS 4: multitasking, app folders, inbox, Game Center, iAd

• iOS 5: Notification Center, iCloud, iMessage, native Twitter, Siri

6.9. iOS versions from developer perspective

• iOS 1.0: only web based 3rd party applications

• iOS 2.0: native 3rd party applications, iOS SDK, App Store

• iOS 3.0-3.2: MMS, copy-paste, Spotlight search, Push Notification, IMAP, compass

• iOS 4.0-4.3: New application life-cycle model, background tasks, easier thread handling(blocks), Xcode 4

• iOS 5.0: automatic reference counting (ARC), storyboards

6.10. Hardware, common properties

• ARM architecture based processors(ARMv6 és ARMv7 instruction set)

• Display resolutions:

• iPhone5: 640 x 1136, 960x640 (iPhone 4-4S, "Retina display"), 480x320

• iPad: 2048x1536 (iPad 3+), 1024x768 (iPad 1-2, iPad Mini)

Page 92: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

80 Created by XMLmind XSL-FO Converter.

• Simultaneous multitouch points:

• iPhone: 5

• iPad: 11

6.11. iPhone 5 interiors

• Display: 640 x 1136 IPS TFT, capacitive touch screen

• SoC: Apple A6 (Dual-core 1.2 GHz ARM Coretex-A9)

• RAM: 1 GB

• Wireless radio:

• 3G, HSDPA, HSUPA

• Wi-Fi 802.11 b/g/n,

• Bluetooth 4.0

• A-GPS, GLONASS, accelerometer, gyroscope, compass

• Capacity: 16/32/64 GB

• Camera: 8 MP, autofocus

• Accumulator: 1440 mAh

6.12. UDID: Unique Device Identifier

• Every iOS device have a globally unique identifier, which is a 40 character hexa string

• This identifies the test device during the application development

• It can be get with Xcode Organizer or with iTunes: Summary view, than one clikk on "Serial Number"

filed

• Hint: Cmd + C will copy to clipboard

6.13. BASIC PROPERTIES

Page 93: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

81 Created by XMLmind XSL-FO Converter.

6.14. Relevant attributes

• Application life-cycle - multitasking

• Notifications

• Isolated storage (sandbox)

• Limited application testing

• Device identification (UDID)

6.15. iOS multitasking

• Only one application can run in the foreground (active)

• The other running apps are in deactivated mode in the memory

• Home button: sending application to background (deactivating)

• Home button double press: multitasking bar

• If the memory is insufficient, the iOS terms some deactivated applications

• Certain predefined tasks can be run in deactivated applications(background execution)

• Audio playback, VoIP, GPS tracking

• How can we reach a non running application? Notifications!

6.16. Notifications

• Asynchronous notifications for the non running applications

• Two types

Page 94: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

82 Created by XMLmind XSL-FO Converter.

• Local Notification: application schedules for himself (ie. notify in 5 seconds)

• Push Notification: Notifications arriving through Apple Push Notification service through a permanently

connected TCP channel

• When the notification arrives, the user decides to start the application or not.

• iOS 5 Notification Center

6.17. Sandbox model

• Applications can reach resources only within their own sandboxes

• Only specific directories can be accessed (read/write)

• No support for memory card

• It is not possible to reach the other applications sandboxes

• There is no IPC (Inter Process Communication)

• Other applications can be launched through special URL schemes:

• Device Bluetooth settings: prefs:root=General path=Bluetooth

• List of Facebook friends: fb://friends

6.18. Isolated Storage 1/2

"Every application is an Island."

Page 95: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

83 Created by XMLmind XSL-FO Converter.

6.19. Isolated Storage 2/2

• Every application has a dedicated folder, which can be accessed only by itself

• Inside the Home Directory there are three subdirectories. One of the most important is the Documents

directory

• Documents

• Can be accessed through PC/Mac via iTunes ("File Sharing")

• Will be archived and stored during iTunes backup

6.20. Application distribution

• AppStore

• Application Store of Apple, main distribution channel

• Ad-Hoc

• Maximum 100 device with registered UDIDs

• The installer of the application (IPA) can be shared (via email, webpage, etc.)

• Requires iTunes for installation

Page 96: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

84 Created by XMLmind XSL-FO Converter.

• Constrained only to devices with registered UDID

• Enterprise

• In-house application sharing for companies (max 200 devices)

• 300$ / year

6.21. App Store

• Application Store, can be accessed through the device

• The developer defines the price of his application

• After each purchase 70% of the incoming will be wired monthly

• The application should fulfill the requirement of the App Store

• All submitted application will be reviewed. Those who fail on the tests will be rejected

• Developers have to enrolled in the Apple Developer Program

• 99$ / year

6.22. TOOLS AND DEVELOPMENT CONCEPTS

6.23. Application development

• iOS application types

• Web: Safari rendered, web applications optimized for mobile (HTML, CSS, JavaScript)

Page 97: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

85 Created by XMLmind XSL-FO Converter.

• Fast development, easy update

• Most parts are platform independent

• Only a subset of iOS functionality can be reached- ie. multitouch even handling via JavaScript

• Native: Objective-C based application compiled for the iOS devices

• Full iOS functionality, fast

• Web content can be also presented (WebKit)

• Slower development process

6.24. iOS development without Objective-C?

• MonoTouch

• C# / .NET based development

• Ahead-Of-Time (AOT) compiling

• Binding to numerous Cocoa Touch API

• Development only on Mac OS

• Adobe Air for iOS

• Creates iOS application from Flash source (packaging)

6.25. Official developer tools

• iOS SDK contains all of them

• Xcode: IDE, debugger, interface builder

• iOS Simulator

• Instruments: application testing and analysis (ie. memory leak, CPU usage)

• Dashcode: Tool for iOS web application development

Page 98: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

86 Created by XMLmind XSL-FO Converter.

6.26. Xcode the IDE

• Editor

• Interface builder

• Debugger

• LLDB or GDB

Page 99: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

87 Created by XMLmind XSL-FO Converter.

• For iOS and Mac OS application development

• Apple LLVM compiler for compiling

• Full integration in Xcode

6.27. iOS Simulator

• Simulating iPhone and iPad on Mac OS X

• Appliction can be tested without real hardware

• In fact the code compiles for X86 / Mac OS

• Simulating harware behaviour

• Device orienatation, hardver buttons and shake gesture simulation

• Limited multi-touch and gesture support

• Positioning: From Xcode 4.2 Ăłta the coordinates can be set

• Sensor support with external applications

Page 100: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

88 Created by XMLmind XSL-FO Converter.

6.28. iOS applications

• iOS (and Mac OS X) applications exist in the form of so called

• A predefined folder structure with the name of "Applicationname.app"

• It contains all resources of the application (binaries, images, etc.)

• All applications have a unique identifier (App ID), which was defined by the developer

ie.com.mycompany.myApplication

• The installation of the application can be interpreted as copying the bundle to a predefined place

6.29. Framework

• The functionality of the iOS can be reached through the frameworks

• Framework requires linking!

• Framework: DLL + resources and headers

• Making 3rd party frameworks for iOS is not possible (for Mac OS it is allowed)

6.30. Framework examples

Page 101: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

89 Created by XMLmind XSL-FO Converter.

• Foundation

• Basic supporting classes (arrays, strings, time and date handling, etc.)

• Projects generated by Xcode automatically link it

• UIKit

• The bigest and most important framework:

• Supporting application life-cycling, multitasking

• UI components

• gestures...

• Projects generated by Xcode automatically link it

• Core Location

• Positioning

6.31. Compiling/testing with iOS device

• Should be enrolled into the iOS Developer Program

• Max 100 different device can be used during the development

• Device should be connected to the Mac via wired connection (iTunes)

• After compiling the application will be copied to the device

• On-device debug: Application running on device while debugging the code with Xcode on the Mac

6.32. Application development and iOS versions 1/2

• iOS continuously updates, current iOS 6

• Significant differences between the API versions

• All iOS applications have a minimum iOS version which is still supported

• There is a new iOS SDK for each new iOS versions

• Each iOS SDK supports compiling for older iOS versions (just a few previous ones)

6.33. Application development and iOS versions 2/2

• In Xcode not only the SDK version but the minimum iOS version can be set.

• It can be defined for each iOS application project

• Base SDK: the SDK what is used for compiling (defines also the API set)

• Deployment Target: the oldest iOS version, which the application supports

Page 102: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

90 Created by XMLmind XSL-FO Converter.

• If we would like to use an SDK functionality on a target which is not support it, runtime check required

(Otherwise the application crashes)

6.34. iPad vs. iPhone

6.35. Mac OS X vs. iOS development

• Many joint API, but there are differences too

• Cocoa vs. Cocoa Touch

• Missing or reduced classes under iOS

• Separated documentation and sample codes

• 3D graphics: OpenGL vs. OpenGL ES

• No garbage collection on iOS (but from iOS 5 Automatic Reference Counting)

• The two world get even closer to each other

• In the application of Mac App Store the sandbox environment became also a requirement

• Separated developer program for the two platforms (99$ x 2)

• Mac OS applications can be distributed and tested App Store

6.36. Architecture of the iOS applications

Mobilszoftverek - iOS

6.37. Model View Controller

Page 103: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

91 Created by XMLmind XSL-FO Converter.

6.38. The MVC concept

• The classes of the program can be grouped into three categories

• Model: all kinds of data used by the program

• View: UI - what the user sees on the screen

• Controller: control interaction between the view and the model

• Directive: If any component is modified (model/view/controller) the others remains unchanged

• Ie. if we modify the view in order to support iPad not only iPhone, than the model and the controller should

not be modified

6.39. iOS application base classes

Page 104: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

92 Created by XMLmind XSL-FO Converter.

6.40. View

• Everything which is drawing directly to the screen and the user can see

• The View can catch the user interaction (touch), but controller can react!

• Base view class: UIView

• Everything that draws directly to the screen

• Interaction with the user: controls (UIControl)

• Can embed each other: a UIView can contain child UIViews

• Views can be built from code, but usually they are generated with the Interface Builder (IB)

6.41. UIView examples

• UIButton

• UILabel

• UIImageView

• UITableView

• UIWebView

• UISegmentedControl

• UISplitView

Page 105: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

93 Created by XMLmind XSL-FO Converter.

Page 106: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

94 Created by XMLmind XSL-FO Converter.

6.42. View hierarchy

• Views can be embed in each other: a view can contain several child views

• Parent-Child

• A screen of the application is usually a parent view with many child views

6.43. Controller

• Connection between the view and the model

Page 107: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

95 Created by XMLmind XSL-FO Converter.

• Handles the events of the view(ie. a button tapped)

• Performs transformations on the data of the model

• "Everything which is neither belonging to the view nor to the model"

• In the UIKit we are working with View Controllers

• The name contains View because the controller owns and manages the view

• The controller never draws to the screen, that is the task of the view

• The parent class of all view controllers is the UIViewController

6.44. View controller in details

• Controlls the coherent views

• Usually one "screen" is controlled by one controller

• Generally each view is controlled by one view controller

• The events generated by the view (ie. touch events) handled in its the controller

• The sheme of the UI of the application is based on the hierarchy of the view controllers

• The root view of the view controller can be reached through the view property of the view controller

• The subviews (childrens) of the root view are also controlled by the same view controller

6.45. View and ViewController in the source

• The view is usually defined in the Interface Builder

6.46. Model

Page 108: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

96 Created by XMLmind XSL-FO Converter.

• Task belongs to the model:

• File handling

• Serializing

• Database access (SQLite, Core Data...)

• There is no dedicated "model" parent class, the developer should define the classes belong to the model

• ie. NewsModel, GameWorld, ClientDb, stb...

7. 7 The Objective-C

7.1. Lecture 7 - Outline

• Objective-C basics

• Connection between source code and Interface builder

7.2. OBJECTIVE-C BASICS

7.3. Objective-C

• Based fully on the C language, can be interpreted as an extension of C language

• 100% C compatible, all standard C code can be compiled with an Objective-C compiler

• Beyond C

• Object-oriented programming

• Dynamic type handling

• reflection

• Syntax: Comes from Smalltalk

• Non object oriented components can be accessed with standard C syntax

• Only on Mac OS X and on iOS get popular

• Dynamic language: tries to do everything in run time instead of compile time

Page 109: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

97 Created by XMLmind XSL-FO Converter.

[fragile]

7.4. Primitive types, strings

• C primitives: int, float, char, \dots

• Unique boolean: BOOL

• NO = 0

• YES = 1

• Special types: id, Class, SEL, IMP

• Null pointer value: nil

• Strings: NSString is used instead of char*

• NSString* string = @,,This is a string'';

• @ marks, that this is an NSString literal, omitting can cause crash

[fragile]

7.5. Objects

• Each object has a class (Class)

• An object can contain

• Methods

• Instance variables

• Properties (setter/getter methods definitions)

• The class of the object is stored in the isa instance variable of object's Class

Page 110: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

98 Created by XMLmind XSL-FO Converter.

• Can be obtained

[fragile]

7.6. Method calling = Message sending

• In Objective-C messages can be sent to the objects

• If the format/identifiers of the message conforms to the method of the object, the method will be called

• Message syntax: [recipient message];

• Parameters:

• Examples:

• Each message should contain as much parameter as the number of colons are in the signature of the message

7.7. Message sending: Java vs. Objective-C

[fragile]

7.8. Message sending

• Messages sent to nil-make no effect and returns with 0(nil)

Page 111: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

99 Created by XMLmind XSL-FO Converter.

• Functions should be called with the regular syntax of C function call

[fragile]

7.9. The id type

• The base class of the object pointers: id

• Can point to any kind of object

• If it has no value, than it should be set to nil

• Essentially pointer! ('*' not needed)

• like C++ void*, but works only with objects

[fragile]

7.10. Classes - Class object

• Each class contains a Class type met object

• It can be referred by the name of the class i.e. MyClass, NSString, etc.

• Messages can be sent to it like to other objects: \[MyClass doSomething\];

• Class instances (objects) can be generated through this meta object

• Class methods can also be reached through this : static method

• Examples:

[fragile]

7.11. Classes - Instantiation

• The creation of a new object is done by sending the alloc message to the classid myEgg;myEgg = [TurtleEgg

alloc];

• alloc(ates) the required memory for the object and fills with 0

• The initialization of an "empty" object is done by the init method ( constructor)

Page 112: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

100 Created by XMLmind XSL-FO Converter.

• The implementation of the init method should be done by the programmer

7.12. NSObject

• Base class of all classes

• "Services":

• Instantiation (alloc class method)

• Reference to the class of the object (class, superClass)

• Message sending (performSelector:)

• Introspection / reflection, ie.

• conformsToProtocol

• isKindOfClass

7.13. Defining classes

• The class definition consists of two parts

• Interface Class.h

• Implementation Class.m

• Should be imported before use: #import MyPrinter.h

• Same as #include, protects against multiple insertion

[fragile]

7.14. Method definition 1/2

• Method definition should be inside the @interface block

• Closes the @end keyword

• Method implementation inside the @implementation block

• Referring to the object with self ( this pointer)

Page 113: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

101 Created by XMLmind XSL-FO Converter.

• Each method are "public", if a proper a message arrives the method will be called

• At the beginning of the method +/- indicates, whether it is a class or an instance method (not UML

public/private!)

7.15. Method definition 2/2

• The parameter identifiers (name, age) are only relevant at the definition of the method

[fragile]

7.16. Dynamic binding

• Dynamic binding at message sending

• Always the current object defines which method should be called the pointer type is irrelevant

• Message sending to self and to super

• self: accessing the methods of the current class

• super: accessing the methods of the super class

Page 114: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

102 Created by XMLmind XSL-FO Converter.

7.17. Classes - Instance variables

• Declaration of the instance variables should be placed into the interface definition between the { } brackets

• The default visibility of the instance variables are @protected, but it can be @private and @public

7.18. Classes - Properties

• Property: Property of an object which can be get or set

• Always public

• Property declaration:@property (strong) NSString* address;

• The setting and getting of the value of the property:

7.19. Creating properties in 2 steps

1. The property should be declared in the header (.h) file of the class

Page 115: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

103 Created by XMLmind XSL-FO Converter.

2. The property can be synthesized in the implementation (.m) file of the class

7.20. Property synthesizing

• The property is actually a pair of methods and an instance variable which can be generated with the

7.21. Inheritance1/2

• Each class has only one parent class

• The inherited methods can be overridden (each method is "virtual")

• Multiple inheritance only with protocols

• Protocol = in other languages "interface"

• List of method definition without instance variables and implementations

[fragile]

7.22. Inheritance 2/2

Page 116: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

104 Created by XMLmind XSL-FO Converter.

• A class can adopt any number of protocols

• Methods declared in the protocol should not be listed in the interface, only implementation required

• Methods of the protocol could be the following:

• Optional (@optional - implementation is optional)

• Required (@required - implementation is required)

7.23. Example - Protocol implementation

7.24. Memory management

• From iOS 5 Automatic Reference Counting: ARC

• The commands responsible for the reference counting, will be inserted by the compiler automatically

• Not Garbage Collector, no run time analysis

• An object becomes deallocated when there is no strong reference to it

• The objects are kept alive by pointers

• It can be set how the properties and variables should behave respect to the reference counting

• strong: means ownership "keeps alive the objects"

• weak: not included in the reference counting

7.25. CONNECTION BETWEEN SOURCE CODE AND INTERFACE BUILDER

7.26. Repeat: Model View Controller

Page 117: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

105 Created by XMLmind XSL-FO Converter.

7.27. Repeat: iOS application base classes

7.28. Repeat: View and ViewController in the source

Page 118: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

106 Created by XMLmind XSL-FO Converter.

• The view is usually defined in the Interface Builder

7.29. Connection between IB and source code

• Accessing components created in IB from source code: Outlet

• A property, which is pointing to an object defined in the IB

• i.e.. We want to modify a label text (UILabel entity) from code We create an outlet to a UILabel

• Handling actions generated by object created in IB: Action

• Method with specific signature, called by a specific event

• i.e.. Call a method (this is the "action"), if the user presses a button

• i.e.. Call a method, if the value of a UITextField changes

[fragile]

7.30. Defining and connecting IBOutlet

• First define in the source code:@property (weak) IBOutletUIButton *button;@synthesize button;

• Than connect the outlet with a UI component in the IB

• Either in Connection inspector of IB

• Or Ctrl + drag and drop from the object contains the outlet to the desired component

Page 119: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

107 Created by XMLmind XSL-FO Converter.

[fragile]

7.31. Action methods

• Certain views emit events as effects of user interaction

• Those views which are emitting events are called controls

• In order to handle actions, action methods can be defined, which have fix signature:- (IBAction)

actionMethodName:(id)sender;

• sender is the object, which emits the event

• If an event of an object is connected with an action method, then the action method will be called when the

event occurs

• Based on the Target-Action design pattern, appears often in the iOS frameworks

7.32. Action methods

• Defining action methods

• Connecting the action handler method with the events of an object in IB

1. Select the elements which emit the action

2. In the Connections inspector view connect the action by "drag and drop" with the element which

implements the action handler method

7.33. Summary: action methods and outlets

• Event handlers "action" methods can be connected to the events of a view

Page 120: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

108 Created by XMLmind XSL-FO Converter.

• Outlet: a property, which points to an object defined in the Interface Builder

• The object can be accessed through this property from source code

8. 8 Developing iOS User Interface

8.1. Lecture 8 - Outline

• Applications with multiple views

• Storyboards

• Table view

8.2. APPLICATIONS WITH MULTIPLE VIEWS

8.3. View controller

• Responsible for one screen

• On iPad it is possible to control only a segment of the screen

• Creates and manages the views

• Views can be created from code and with InterfaceBuilder

• The viewController itself does not displays anything. That is the task of the views.

• Handles the events of the views. (i.e.. a button did tap)

• Provides data for the views

8.4. View controller types

• There are two types of view controller

• Simple view controller:

• A view controller manages a set of views that usually makes up a screen of the application. Created by the

developer

Page 121: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

109 Created by XMLmind XSL-FO Converter.

8.5. Tab bar controller

• Provides user interface separated by tabs

• Each tab has a unique view controller

• Implemented in the UITabBarController class

• If it contains more than 5 tab, the fifth tab will be the "More" tab, which leads the user to a list view

Page 122: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

110 Created by XMLmind XSL-FO Converter.

8.6. Tab bar controller example

• The Clock application

Page 123: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

111 Created by XMLmind XSL-FO Converter.

8.7. Navigation controller

• Manages the navigation of hierarchical content

• The contained view controllers are like a group of stacked pages

• Navigation to the previous page with the Back button of the "navigation bar"

• The pages are stored in a stack like hierarchy (LIFO): navigation stack

• At the top of the stack is the view controller, which is currently displayed

• When we move back from the current view, it will be popped out from the stack

8.8. Navigation controller example

• Contacts

Page 124: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

112 Created by XMLmind XSL-FO Converter.

8.9. Split View Controller

• UISplitViewController

• iPad specific view controller

• Not implemented for iPhone

• Controls two separated view controllers

• Similar to the tab bar controller, but it always contains only two view controller

• In portrait mode only the detail view (right panel) will be presented

Page 125: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

113 Created by XMLmind XSL-FO Converter.

• Configurable

8.10. Simple view controller

• Responsible for a screen or for a part of a screen

• Mostly used inside container views (ie. a tab of a tab bar controller)

• The tasks of a simple view controller

• Load views, when it is required

• Remove views from the memory when memory is low

• Handle the orientation changes (portrait - landscape)

8.11. STORYBOARDS

8.12. Storyboard

• Storyboard:

• A UI layout "plan" of the application.

• Contains multiple views, their relationships and the navigation hierarchy too.

• Can be edited in Xcode

• Only from iOS 5

8.13. Structure of the Storyboard

• A storyboard - like in real life - consist of scenes.

• Scene standalone view controller

Page 126: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

114 Created by XMLmind XSL-FO Converter.

• The scenes can be connected with:

• Relationship: connection between a container view and their child views.Like a tab bar controller and the

view controllers of the tabs

• Segue: switch to another view,i.e. after a button pressor specific gesture

• ie. presenting a modal view controller

8.14. Tab bar controller in storyboard

• The relationship connection between the tab bar controller and view controllers of the tabs

• The viewControllers property of the tab bar controller

Page 127: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

115 Created by XMLmind XSL-FO Converter.

8.15. Navigation controller in storyboard

• The relationship connection between the navigation controller and the bottom view controller of the stack

(root view controller)

• The rootViewController property of the navigation controller

• During the navigation we can add additional "pages" to the navigation stack by the use of the Push segue

Page 128: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

116 Created by XMLmind XSL-FO Converter.

8.16. Prepare for a segue

8.17. Storyboard in the project

• Standalone file with the extension .storyboard

• XML based

• It can be set in the Info.plist file of the project, which storyboard should load in during the startup of the

application

• "Main storyboard file base name":" MyStoryboard"

• The initial scene of the storyboard is indicated by an arrow coming from thevoid

Page 129: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

117 Created by XMLmind XSL-FO Converter.

• It can be set in the attributes of the view controller

8.18. TABLE VIEW

8.19. Table view

• List "like" view

• The most common component of the iOS applications

• In contrast with the name it presents only one column

• The cells (rows) are views: they are fully customizable

Page 130: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

118 Created by XMLmind XSL-FO Converter.

8.20. Table view styles

• 2 style

UITableViewStylePlain

Page 131: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

119 Created by XMLmind XSL-FO Converter.

UITableViewStyleGrouped

8.21. Structure of the table view

Page 132: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

120 Created by XMLmind XSL-FO Converter.

• 2 level hierarchy

• The table view consists of sections

• The sections consist of cells

• If we do not want to use sections, all cells should be put in the first (0.) section

8.22. Table view types

Page 133: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

121 Created by XMLmind XSL-FO Converter.

8.23. The data source of the table view

• How can we fill the list with elements?

• Each table view has a data source, which is stored by a property:

• Usually the data source is the view controller of the table view

• It can be any other class which implements the UITableViewDataSource protocol

• The tasks of the data source

• Setting the sections and cells of the table view

• The modification of the "data" if the user adds, removes, inserts or moves a cell on the UI

8.24. The behavior of the data source

• The table view requests cells by sending messages to the data source

• Optimization! Only those cells were queried which are currently visible

• The identification of the cells and sections are done by IndexPaths (0. section, 12. cell)

• NSIndexPath, identifies a cell, bundles the section number and the number of the cell

• indexPath.section // the section number

• indexPath.row // the cell number of the section

8.25. UITableViewDataSource

• Giving the number of the sections

Page 134: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

122 Created by XMLmind XSL-FO Converter.

• By default 1, can be overwritten

• (NSInteger)numberOfSectionsInTableView: (UITableView*)sender;

• Giving the number of cells inside the sections

• (NSInteger)tableView:(UITableView*)sender numberOfRowsInSection:(NSInteger)section;

• Giving a cell

• (UITableViewCell*)tableView:(UITableView*)sendercellForRowAtIndexPath:(NSIndexPath*)indexPath;

8.26. Defining a table view in storyboard

• The appearance of the table view cells can be defined inside the storyboard by the definition of cell

prototypes

• Prototype: contains the subviews of the cell and their properties

• A table view can have multiple types of cells

• Each prototype has a cell Identifier: i.e.. "TestCell"

• In the code the dequeueReusableCellWithIdentifier: method of table view generates the prototype based on

the cell identifier:

8.27. Defining cell

• Defining cell trough the Data Source Protocol

Page 135: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

123 Created by XMLmind XSL-FO Converter.

8.28. Static table view

• In storyboards it is possible to define static table views

• Static = fix number of cells, fix content

• No need to implement the data source protocol (UITableViewDataSource)

• The table view will look like a prebuilt form

• The section and row count can be set

• Each cell can be edited separately

8.29. UITableViewController

• "Comfortable class", for those situations when a table view should be presented in a view controller

• Inherits from the UIViewController

• Implements the UITableViewDataSource protocol

Page 136: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

124 Created by XMLmind XSL-FO Converter.

• Implements the UITableViewDelegate protocol

• Additional functionalities

• Reloads the data of the table view before appearance

• Built-in edit button handling

• Blinking scroll indicator after view has appeared

9. 9 iOS Services - From gesture recognition to Map Kit

9.1. Lecture 9 - Outline

• Gesture recognition

• Blocks

• Grand Central Dispatch

• Animation

• MapKit

9.2. GESTURE RECOGNITION

9.3. Gesture recognizers

• Classes for automatic gesture recognition

• Can be assigned to a UIView

• Dedicated target-actions will be invoked if a gesture is in progress or occurred on the assigned view

• Each gesture type has its own gesture recognizer class

• Own/Unique gesture recognizer can be generated by inheriting the UIGestureRecognizer class

9.4. Gesture recognizer classes

• Tap:UITapGestureRecognizer

• Pinch:UIPinchGestureRecognizer

• Pan/drag:UIPanGestureRecognizer

• Swipe:UISwipeGestureRecognizer

• Elforgatás:UIRotationGestureRecognizer

• Hosszú érintés:UILongPressGestureRecognizer

Page 137: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

125 Created by XMLmind XSL-FO Converter.

9.5. Example: handling swipe gesture

• Creating and assigning a gesture recognizer to a view:

Page 138: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

126 Created by XMLmind XSL-FO Converter.

9.6. Example:handling pinch gesture

• Creating and assigning a gesture recognizer to a view:

• During the pinch gesture the messages are continuously arriving (called multiple times):

9.7. BLOCKS

9.8. Block

9.9. What can we do with blocks?

Page 139: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

127 Created by XMLmind XSL-FO Converter.

• Multithreading

• Grand Central Dispatch

• Sorting

• Iterating over containers (ie. arrays)

• Animations

• Notifications

• Event handling

• If the event occurred, run a block

• Error handling: if an error occurred, run a block

• Instead of callbacks...

9.10. Defining blocks

9.11. Examples for using of the blocks

Page 140: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

128 Created by XMLmind XSL-FO Converter.

9.12. Blocks and variables

9.13. What is good in blocks?

• Easy handling, can be set and stored as parameters

• Compact code

• Code cohesion is better

• In certain situations provides better performance

9.14. GRAND CENTRAL DISPATCH

9.15. Grand Central Dispatch (GCD)

• The newest solution in iOS for convenient thread handling

• We can define the parallel processed task in blocks

• In order to execute a block it should be placed into a queue

• Basically these queues are working like a FIFO queue

• There are concurrent queues too

• There is a dedicated thread for each queue

• The application has more than one queue

Page 141: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

129 Created by XMLmind XSL-FO Converter.

9.16. GCD

9.17. What is GCD good for?

• No need for direct thread handling, only the task should be defined and added to the queue

• Variable sharing between threads is easier

• Faster than the normal thread handling

9.18. GCD APIs 1/2

Page 142: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

130 Created by XMLmind XSL-FO Converter.

• GCD uses C based APIs

• Each queue is identified by a dispatch_queue_t type structdispatch_queue_t mainQueue;

• Getting the Main queue (it runs on the main thread)dispatch_queue_t mainQueue =

dispatch_get_main_queue();

• Creating and releasing an own FIFO queuedispatch_queue_t downloadQueue =

dispatch_queue_create("download queue", NULL);...dispatch_release(downloadQueue);

9.19. GCD API-k 2/2

• Adding a block into a queue for execution

• UI actions can be executed only in the Main queue!

9.20. Example: download image in separated thread

9.21. ANIMATION

9.22. Animations

• Core Animation

• Rich animation-code dictionary, with wide range of functionality

Page 143: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

131 Created by XMLmind XSL-FO Converter.

• Most animations in the UI are made with Core Animation

• Part of the Quartz Core framework

• Can be used without UIViews, also in low level.

• In this section only UIView animations will be introduced.

9.23. UIView animations: basics

9.24. UIView animation

• With the method of the UIView class

• duration: the duration of the animation (in seconds)

• delay: the begin time of the animation

• options: the properties of the animation

• animation: a block which contains the actions and property changes, which should be animated

• completion: a block which will be executed right after the animation ended

9.25. Defining animations

• UIView properties which can be animated

• @property frame

• @property bounds

• @property center

• @property transform

Page 144: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

132 Created by XMLmind XSL-FO Converter.

• @property alpha

• @property backgroundColor

• @property contentStretch

• Defining an animation blockanimation:

9.26. Example

• Animating the position and translucency of a view:

Page 145: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

133 Created by XMLmind XSL-FO Converter.

9.27. Animating view exchange

• The fromView will be removed from the parent view while the toView will be placed on it

• The exchange will be done in duration long time

• The options contains the animation properties

• The completion is a block, which will be called when animation ended.

• Example: Exchange between the views of BlueViewController and RedViewController:

Page 146: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

134 Created by XMLmind XSL-FO Converter.

9.28. Animation options

• enum UIViewAnimationOptions

• Types of view exchange

• TransitionFlipFromLeft/Right

• TransitionCurlUp/Down

• CrossDissolve (from iOS 5)

• Easing

• CurveEaseInEaseOut

• CurveEaseIn

• CurveLinear

• Hiding instead of parent changing

• ShowHideTransitionViews

• Multiple options can be set with binary "or"

operatorUIViewAnimationOptionTransitionFlipFromLeftUIViewAnimationOptionCurveEaseIn

9.29. MAP KIT

9.30. Map Kit

• Online map based service

• Can be embedded into the UI (standard UIView)

• Scrollable and zoomable

Page 147: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

135 Created by XMLmind XSL-FO Converter.

• Displays current location

• Overlay views can be placed above the map

• Annotation views like pins

• Lines, polygons (for displaying routes)

• Reverse geocoding: getting address from coordinates

9.31. Initializing the map

• Adding the MapKit.framework to the project

• And the appropriate header file should be imported: #import MapKit/MapKit.h

• Initializing the map view

• Setting the map type

Page 148: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

136 Created by XMLmind XSL-FO Converter.

• MKMapTypeStandard

• MKMapTypeSatellite

• MKMapTypeHybrid

• map.mapType = MKMapTypeSatellite;

• Displaying the current location map.showsUserLocation = YES;

9.32. Annotations

• Annotation: an overlay view assigned to a specific coordinate

• For each annotation belongs two objects

• MKAnnotation protocol: provides interface for getting the data of the annotation (model)

• It should be implemented by a class

• MKAnnotationView: displays the content of the annotation

• The blue dot, which represent the current position, is also an annotation, which was provided by the system.

Page 149: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

137 Created by XMLmind XSL-FO Converter.

9.33. Defining annotation

• An own class should be defined ie. MyInfoAnnotation which implements the MKAnnotation protocol.

9.34. Annotation

• Adding annotation to the map

• In order to provide unique appearance for annotation the MKMapViewDelegate protocol should be

implemented- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id

MKAnnotation )annotation

9.35. Reverse geocoding

• Getting address information from the map service based on coordinates

• ie. Magyar tudósok körútja 2.

• Can be reached through the MKReverseGeocoder class

Page 150: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

138 Created by XMLmind XSL-FO Converter.

• Initiation, and processing an asynchronous request

• If the required data has arrived, we will be informed through the MKReverseGeocoderDelegate protocol-

(void)reverseGeocoder:(MKReverseGeocoder *)geocoder didFindPlacemark:(MKPlacemark *)placemark;

10. 10 Introduction to the Windows Phone platform

10.1. Lecture 10 - Outline

• Introduction to Windows Phone programming

• Silverlight basics

• XAML

• Hello Windows Phone

10.2. Introduction to Windows Phone programming

10.3. History 1/2

• First version: Pocket PC 2000

• Primarily targets business users

• Pen based UI

• Manager capabilities

• Two device classes:

• Professional Edition (PDA)

• Phone Edition (smartphone)

• Pocket PC 2000, 2002, 2003

Page 151: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

139 Created by XMLmind XSL-FO Converter.

10.4. History 2/2

• Windows Mobile 2003, 5, 6, 6.5

• Mobile version of Microsoft products (Outlook, IE, Office, Media Player, etc.)

• Programming: C++ and .NET Compact Framework

• Multitasking, free access to most functions of the OS

• Outdated UI (not touch-friendly, lacking multi-touch), not fast enough, the user is not allowed to update the

system officially

Page 152: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

140 Created by XMLmind XSL-FO Converter.

10.5. Windows Phone 7

Page 153: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

141 Created by XMLmind XSL-FO Converter.

10.6. Hardware requirements 1/2

• Unified hardware requirements for all Windows Phone 7 devices

• Screen resolution: WVGA (800x480)

• Capacitive, 4-point multi-touch screen

• Hardware DirectX 9 acceleration (3D graphics)

• GPS and sensors (accelerometer, ambient light and proximity sensor, optional compass and gyroscope)

Page 154: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

142 Created by XMLmind XSL-FO Converter.

10.7. Hardware requirements 2/2

• Unified hardware requirements for Windows Phone 7 devices

• Camera/camcorder and flash

• 3G and Wi-Fi internet access

• Start, Search and Back keys

• Minimum 256 MB RAM (since Tango), minimum 8 GB flash storage

10.8. Windows Phone 7 devices

• Currently about 45 unique devices

• Main manufacturers: Nokia, Samsung, HTC, LG

• Notable devices:

• Nokia Lumia 800 and 900

• HTC Titan and Titan 2

• Samsung Focus S

Page 155: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

143 Created by XMLmind XSL-FO Converter.

10.9. Drawbacks

• Sandbox environment: no full file system access

• Developer applications cannot use PC synchonization or support memory card

• Data can only be accessed from the device via Cloud or network sources

Page 156: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

144 Created by XMLmind XSL-FO Converter.

• iOS-like multitasking model: only 1 running and maximum 5 inactive applications

10.10. Advantages

• Only slight variances in hardware, only one supported resolution

• Well known .NET developer tools, Silverlight

• Quick development, short learning phase

• Animation handling is easy, responsive UI

• Live tiles (a sort of widgets) are resource friendly and easy to handle

• Integrates well with Microsoft technologies and services (WCF, Azure, etc.)

10.11. Windows Phone 8 - Apollo

• Released on October 29, 2012

• New features

• Support for native code

• Multi-core processors

• NFC

• Memory card (microSD)

• Direct synchronization with Windows 8(eliminating the need for Zune)

• Full Skype integration, video calls

10.12. Microsoft design language ("Metro/Modern UI")

10.13. Metro

METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT'S MODERN AND CLEAN.

IT'S FAST AND IN MOTION. IT'S ABOUT CONTENT AND TYPOGRAPHY. AND IT'S ENTIRELY

AUTHENTIC.

• Infographic

• Focus is on content

• Touch friendly

Page 157: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

145 Created by XMLmind XSL-FO Converter.

• Typography is important

• Animations have an elevated role

10.14. Iconographic vs. infographic UI

• Iconographic

• Uses objects of the real world as metaphors

• Hyperrealism (shadows, lights, etc.)

• Transferring content from the analogue world to the digital

• Focuses on the technique of manipulation and ordering of content

Page 158: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

146 Created by XMLmind XSL-FO Converter.

• Infographic

• Information is elevated

• The interface is the content itself

• Design is functional: orders, separates, highlights information

• With colours, fonts, spaces

• No chrome: devoid of unneeded design elements, clutter

Page 159: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

147 Created by XMLmind XSL-FO Converter.

10.15. Control elements

10.16. Examples

Page 160: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

148 Created by XMLmind XSL-FO Converter.

Page 161: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

149 Created by XMLmind XSL-FO Converter.

10.17. Metro UI platforms

• Windows Phone

• Windows 8

• Xbox

Page 162: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

150 Created by XMLmind XSL-FO Converter.

10.18. Software development for Windows Phone

10.19. .NET on one slide...

• The .NET translator generates IL (Intermediate Language) code, this is translated into machine code by the

CLR runtime (Just In Time)

• Several possible programming languages (20+)

• Only C# and Visual Basic for Windows Phone

• Managed code: system protection, garbage collection, reflection, etc...

10.20. WP software technologies

• Two .NET technologies are at our disposal

• Silverlight: "business" applications

• XNA: games

• From Windows Phone 7.5 onwards these can be used together (eg. game area - XNA, menus - Silverlight)

Page 163: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

151 Created by XMLmind XSL-FO Converter.

10.21. Silverlight

• Originally RIA (Rich Internet Application) platform: made for in-browser applications

• Like Flash

• WPF (Windows Presentation Foundation): Since .NET 3.0, made for Windows desktop application

development, complex UI framework

• Silverlight: for applications in browser or on mobile devices

• Grown out of WPF

• Multiplatform/browser

• Many minor differences compared to WPF in all aspects

• Some functions are exclusive to Silverlight: eg. no official Deep Zoom for WPF

10.22. WP - Why Silverlight?

• Multiplatform from the beginning, developed for low-resource environments

• Sandboxed environment: safety

• Apps can only access functions provided by the Silverlight APIs

• Isolated storage: every application has a separate folder

• UI: XAML, declarative, animation, vector-based

• Easy to support other resolutions in the future

Page 164: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

152 Created by XMLmind XSL-FO Converter.

10.23. XNA

• XNA is Not an Acronym

• Rich programming framework and toolkit primarily for game development

• Render loop model, 2D and 3D support (also for shaders)

• Supported platforms:

• Xbox 360

• Windows (XP, Vista, 7)

• Zune

• Windows Phone 7

• XNA Framework

• Based on .NET CF 2.0

10.24. Structure of Silverlight WP applications

• User interface declared in XAML files

• The functional counterpart for the interface defined in XAML is in a C#/VB code-behind file

• Model, other pieces of code in C#/VB files

• Recommended architecture: Model-View-ViewModel (MVVM)

10.25. MVVM

Page 165: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

153 Created by XMLmind XSL-FO Converter.

• More about MVVM in Lecture 12

10.26. Development tools

• IDE

• Visual Studio

• Expression Blend

• Windows Phone Emulator

Page 166: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

154 Created by XMLmind XSL-FO Converter.

10.27. Visual Studio

• For Windows Phone development

• Any paid version + downloadable addons

• Free: Visual Studio 2010 Express for Windows Phone

• The usual, rich functionality

• UI (XAML) editor

• Debug functions

• Emulator

• On device debug

Page 167: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

155 Created by XMLmind XSL-FO Converter.

10.28. Expression Blend

• Primarily for UI preparation

• Uses the same Solution as Visual Studio

• Richer functionality than the UI Editor found in Visual Studio

• Animation, styles, etc.

• Also runs code in the background! (eg. XAML code behind file)

• Some functions (eg. WCF service calls) don't work

10.29. Windows Phone Emulator

• x86 port of the operating system of the phone

• Utilizes the hardware of the PC

• 3D acceleration

Page 168: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

156 Created by XMLmind XSL-FO Converter.

• Virtualization

• Internet Explorer Mobile

• Emulation of mobile specific functions

• Location determination

• Accelerometer

10.30. App development and publication

Page 169: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

157 Created by XMLmind XSL-FO Converter.

10.31. App Hub Account

• Required for:

• Testing / debugging on phone: unlocking the phone becomes available after registration, then up to a fixed

number of developer apps can be on the device at the same time

• Uploading applications to the Marketplace

• 99$ / year

• Registration for App Hub

• http://create.msdn.com/

10.32. Windows Phone Marketplace

• As a developer, 100 free and an unlimited number of paid applications can be uploaded

• Further free apps cost 20$ each

Page 170: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

158 Created by XMLmind XSL-FO Converter.

• The developer receives 70% of the price

• Price range: 0.99$ - 499.99$

• Applications are tested before being released to the public (certification)

• Mid-November 2012:118,000 apps

• Free registration for students:DreamSparkwww.dreamspark.com

10.33. XAP files

• Windows Phone applications can be distributed in form of .XAP files

• Essentially a renamed .ZIP archive

• Contents:

• Code of the application in a DLL (assembly)

• XAML files

• Further DLLs

• Pictures and other content

10.34. XAML basics

10.35. XAML

• XAML: XML based, declarative language for initializing structured values and objects by creating

hierarchical object graphs

• No magic involved, every function is accessible from code

• In case of Silverlight, common language of the programmers and designers, developer tools (Visual Studio)

and designer tools (Blend)

Page 171: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

159 Created by XMLmind XSL-FO Converter.

• XAML is only a tool, language for declarative arrangement of the user interface

• Slightly resembles XHTML, but is much more powerful

• Hierarchy of elements, layout, graphics, media, animation, data binding, triggers, styles, ...can all be

expressed with it!

10.36. XAML example

10.37. XAML processing

• XAML is stored in plain text/XML format along with the application

• No converting to binary format (BAML) unlike in WPF

• When running a SilverLight application

• Reading XAML, building object tree, generating code:

10.38. XAML basics

• Tags instantiate classes (name of tag = name of class)

• Each class of every .NET namespace is also accessible from XAML

• In the XAML, we assign XML namespaces to .NET namespaces with properties of the root element

• Silverlight controllers are in the default namespace

• The 'x' namespace is the general XAML engine

Page 172: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

160 Created by XMLmind XSL-FO Converter.

• Other assemblies and their namespaces can be imported into new XML namespaces

10.39. Property value assignment

• If the value of the property can be determined from a string, the standard XML attribute can be used:

• Any value can be given with the Property Element syntax: the value of the property is listed as a child

element of the XML

10.40. XAML vs. C#

• XAML:

• C#

10.41. XAML basics - Content property

• A so-called Content property can be set in case of every class, the value of the XML tag will be given to this

Page 173: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

161 Created by XMLmind XSL-FO Converter.

10.42. Code-behind

• Additional code to the classes defined in the XAML

• In a separate source file: code-behind file (eg. App.xaml and App.xaml.cs)

• Code can be written in the XAML itself: x:Code BAD PRACTICE

• Code-behind file

• Contains a partial class, can be accessed with the x:Class property from the XAML

• The partial class has to be derived from a root class defined in the XAML

• Eg. PhoneApplicationPage

10.43. Example: code-behind

10.44. Connection between code-behind and XAML

• Handling objects from the code-behind: x:Name property

• A field with the given name and type is generated

Page 174: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

162 Created by XMLmind XSL-FO Converter.

• Event handlers

• The name of the event handler defined in the code-behind is given as an attribute in the XAML

fileClick="button_Click"

10.45. Up and downsides of XAML

• Easier to read

• For developers and tools alike

• Follows the hierarchy of the interface

• Concise

• Dynamic instantiation (it's slower, though)

• Harder to spot mistakes (debugging)

• "Magic" things can also happen, like in code (although not as frequently)

• Why is this white?

• Why doesn't the data binding work?

10.46. HELLO WINDOWS PHONE

10.47. Project structure

10.48. HelloWP main page

• Button on the main page defined in XAML (MainPage.xaml)

Page 175: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

163 Created by XMLmind XSL-FO Converter.

• Event handling in the code-behind (MainPage.xaml.cs)

11. 11 Developing Windows Phone User Interface

11.1. Lecture 11 - Outline

Page 176: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

164 Created by XMLmind XSL-FO Converter.

• Dependency Property, Attached Property

• Basic UI elements

• Layout handling

• Windows Phone Toolkit

• Resources

• Demo: Playing audio

11.2. Silverlight object tree

• The XAML defines an object tree

• The elements are connected via properties

• The tree has multiple roles: for example, certain property values are derived from the "parent" based on this

• A partial graph of the object tree containing only the elements that appear on the user interface is the visual

tree

11.3. Dependency Property

11.4. Dependency Property (DP)

• Extending the functionality of the normal .NET properties

• Automatic change notification (value change triggers callback)

Page 177: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

165 Created by XMLmind XSL-FO Converter.

• Small memory footprint: only stores values for the non-default elements (flyweight design pattern)

• Determination (resolution) of the value happens according to a precedence order (if one source doesn't set

the value, the next highest level gets the chance)

• Data binding

• Validation

• Can be animated

• Every property of the UI controllers (eg. Button) is DP

• Can be used as a normal Property when getting/setting, but their inner mechanisms are completely different:

11.5. Defining a Dependency Property 1/2

• Every class containing DPs has to extend the DependencyObject

• This class stores DPs in a hash table

• For defining DPs, a static DependencyProperty field has to be added to the containing class

• The field has to be "registered", so that the DependencyObject ancestor can reach it

• The value of the DP can be accessed via the GetValue() and SetValue() methods inherited from the

DependencyObject

• The GetValue() and SetValue() calls can be wrapped in a normal property

11.6. Defining a Dependency Property 2/2

11.7. DP value resolution

Page 178: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

166 Created by XMLmind XSL-FO Converter.

• When GetValue() is called, the actual value of the DP is determined from multiple sources according to a

precedence order

[fragile]

11.8. Value change notification

• When registering the DP, a PropertyMetadata instance is passed in the Register method, which may contain

• The default value of the DP

• The callback method for changes of the DP

• Change handlingprivate static void

11.9. Attached Property

• Property values can be assigned to objects from classes not declaring that property

• Most frequent use: in a parent-child hierarchy the parent can attach certain data (settings, labels) to the child

elements

• It is in fact implemented with the Dependency Property defined by the parent

• No common interface needed to the child elements!

• Example: Grid parent with 2 rows containing two Button children

Page 179: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

167 Created by XMLmind XSL-FO Converter.

• The Grid.Row Attached Propery determines which child goes into which row

11.10. User interface development

11.11. WP application base classes

11.12. Basic UI classes

• PhoneApplicationFrame

• Root UI element

• Always shows onePhoneApplicationPage

• PhoneApplicationPage

• A separate "screen", view of the application

• It can contain any controller

• The UI of the Windows Phone applications consists of such pages

• Navigation is the switching between these pages

Page 180: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

168 Created by XMLmind XSL-FO Converter.

11.13. Control component examples

• Button, CheckBox, RadioButton,TextBox, PasswordBox

• TextBlock, Image, Slider, ProgressBar

Page 181: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

169 Created by XMLmind XSL-FO Converter.

11.14. Elements of the user interface

• UI elements in a parent-children relation: Silverlight object tree

• Superclasses: UIElement FrameWorkElement Control

• Determining the containment happens through the ContentProperty of the element usually

• Reminder: the Content Property can vary by class!

• Further important base classes

• Panel: orders layout elements, eg. Grid, StackPanel, Canvas

• ContentControl: a single displayable content element (which can be composite...), eg. Button

• ItemsControl: several content elements, eg. ListBox

• UserControl: user defined Control

11.15. Layout handling

• Layout elements are used for ordering of the UI components (derived from Panel)

• StackPanel: child elements follow each other horizontally or vertically

• Grid: consists of rows and columns, child elements are in the cells

• Canvas: child elements can be positioned directly with coordinates

• The child elements can be added to the Layout element, which places them on itself

• Properties of the child elements (and Attached Properties) affect their placement

Page 182: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

170 Created by XMLmind XSL-FO Converter.

11.16. Layout - StackPanel

11.17. Layout - Grid 1/3

• For "table-like" ordering of the elements, diverse functionality, one of the most used layout elements

• The rows and columns of the table can be defined freely:

• Number of rows and columns

• Size of rows and columns

• The Attached Properties of the child element determine which row/column of the Grid it will be in

Page 183: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

171 Created by XMLmind XSL-FO Converter.

11.18. Layout - Grid 2/3

• Defining rows and columns with RowDefinitions and ColumnDefinitions

• Sizes (eg. Height) determination

• Auto: dynamic (depends on contained element)

• Specific size

• *: divides the space remaining after the Auto and fixed size rows/columns

Page 184: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

172 Created by XMLmind XSL-FO Converter.

11.19. Layout - Grid 3/3

11.20. ContentControl

Page 185: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

173 Created by XMLmind XSL-FO Converter.

• Visualizes a single contained element stored by the value of the Content Property

• The content can be

• An individual UIElement

• A Panel with child elements

• String

• An arbitrary number of other types of objects: their string representation is used (ToString() is called)

• The way the content appears can be customized via the ContentTemplate property

• Most important subclass: Button

11.21. Button

• Click event, when pressed

11.22. ItemsControl

• A controller able to contain several elements

• Two possibilities for element definition

• Through the Items property, the list of the elements can be modified , eg. new elements can be added

• Through the ItemSource property with data binding

• Examples: ListBox, Grid

11.23. ListBox

• Standard ListView with selectable elements

• The appearance of the elements is customizable via the ItemTemplate property

• Selected element: SelectedItem, SelectedItemIndex properties

• SelectionChanged event, when the selected event changes

Page 186: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

174 Created by XMLmind XSL-FO Converter.

11.24. Showing and receiving text

• Showing text: TextBlock

• Asking for text input: TextBox

• Accessing content via the Text property

• TextChanged event, when the content changes

11.25. ApplicationBar

• An ApplicationBar instance can be assigned to the pages of the app (PhoneApplicationPage) via the

ApplicationBar property

• Separate Application Bar for every page

• Stores the highlighted buttons and menu elements of the page

• It can contain:

• 4 button with icons (ApplicationBarIconButton)

• Any number of menu elements via the MenuItems property (ApplicationBarMenuItem)

• If the value of Opacity is lower than 1, the content of the page extends under the transparent Application Bar

Page 187: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

175 Created by XMLmind XSL-FO Converter.

11.26. ApplicationBar example

11.27. Icons, pictures in the project

• The Build Action property has two possible settings for pictures/icons added with "Add Existing Item":

• Resource: the picture is embedded into the assembly (DLL) as a resource, this is the default

• Reference: "/HelloWorld;component/icon.png"

• Content: the picture is copied into the installer (XAP) as a separate file, and it will only be loaded when

referenced (smaller memory footprint!)

• Reference: "/icon.png"

• The embedded Application Bar icons can be found in the SDK folder

• C: Program Files (x86) Microsoft SDKs Windows Phone v7.1 Icons

11.28. Windows Phone Toolkit

11.29. Windows Phone Toolkit

• New APIs by Microsoft, "experimental" controller elements (may become parts of the WP SDK later)

• Most of the elements are tested thoroughly and ready for use in industrial applications

• Can be downloaded and installed fromhttp://phone.codeplex.com

Page 188: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

176 Created by XMLmind XSL-FO Converter.

• A number of new controllers and services

• HubTile

• DateTimePickers

• ToggleSwitch

• GestureHelper (Flick, Pinch...)

11.30. Toolkit example

• For the use of the Toolkit controllers

1. A reference to the Microsoft.Phone.Controls.Toolkit assembly has to be added

2. An XML namespace must be defined in the XAML file for the references (eg. toolkit):

• For example, "Tilt" effect: rotates on touch

• The value of TiltEffect.IsTiltEnabled Attached Property has to be set to True on the pressable element

11.31. Resources

11.32. Resources

Page 189: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

177 Created by XMLmind XSL-FO Converter.

• Resources are objects which are to be reused in the XAML (or code) several times

• Eg. A color, a numerical value, a style, etc...

• The resources are stored in a shared ResourceDictionary

• ResourceDictionary is stored by the Resources property of the FrameWorkElement, thus in the

code/XAML every class derived from it can contain resources

• For example, resources can be given for the Page or the Application

• Resources are identified by a textual key

• Resources can be instances of any class

11.33. Resource example

11.34. System resources

• The system defines the settings of the actual UI as resources

• The main color of the theme and other colors

• Eg. PhoneAccentBrush

• Fonts and font sizes

• Eg. PhoneFontFamilyNormal, PhoneFontSizeLarge

• Thicknesses for positioning elements

• Eg. PhoneHorizontalMargin

• Using these, the application will always appear with the current theme settings

Page 190: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

178 Created by XMLmind XSL-FO Converter.

11.35. Playing audio

11.36. Playing audio

• For playing WAV files

1. A reference has to be added to: Microsoft.Xna.Framework.dll

2. Needed namespaces:

12. 12 Build Data-Driven Apps with Windows Phone

12.1. Lecture 12 - Outline

• Navigation

• Data binding

• Data template, customization of ListBox elements

• MVVM

12.2. Navigation

12.3. Reminder: Basic UI classes

• PhoneApplicationFrame

• Root UI element

• Handles pages of the application and interchanges them when needed

• Rarely handled directly

• Created at the application startup in the App.xaml.cs:

Page 191: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

179 Created by XMLmind XSL-FO Converter.

• PhoneApplicationPage

• A separate "screen", view of the application

• The UI of the Windows Phone applications consists of such pages

12.4. Pages

• Pages are defined in separate classes extending PhoneApplicationPage

• Every page has its own XAML and Code Behind file

• Pages contain a root level Content element (typically a Layout element, like Grid or StackPanel), to which the

other controllers on the page are added

• The start page of the application is set in the WMAppManifest.xml ("Tasks" element):

12.5. Navigation

• The application always has exactly one active page

Page 192: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

180 Created by XMLmind XSL-FO Converter.

• Changing between active pages is navigation

• The previous pages are stored in a navigation stack (BackStack), thus the "previous page" can be restored

(like in a browser)

• Navigation between pages can be initiated by several sources

• NavigationService: a class, which provides access to navigation-related functions

• HyperlinkButton: a button, which can be pressed to change to a given page

• The pages can be referenced by the name of a XAML file, via an URI

[fragile]

12.6. NavigationService

• Every page has a NavigationService property, which provides access to the navigation APIs

• "Forward navigation" (changing to a new page):

• Before backwards navigation, the existence of a saved page in the BackStack can be checked:if

(NavigationService.CanGoBack) { . . . }

• URI of current page: NavigationService.CurrentSource

12.7. Passing data to pages

• When navigating forward, a ? can be appended to the URI, which enables passing values structured like

• On the opened page, the OnNavigatedTo() method is called when the page is switched, this can be overridden

to receive the passed values via the QueryString property of the NavigationService

[fragile]

Page 193: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

181 Created by XMLmind XSL-FO Converter.

12.8. Even more navigation

• An object belonging to a page exists as long as the page is on the BackStack

• The page doesn't get deleted on forward navigation, the state of the object remains unchanged, its timers

keep running, etc.

• By overriding the OnNavigatedFrom() method, the switching away from the page can be handled (eg. by

stopping the timers)

• On each forward navigation (Navigate()), a new instance is created from the class of the page

• On backward navigation (GoBack()), no parameters can be passed in the URI

• The previous page of the BackStack can also be deleted without

navigation:NavigationService.RemoveBackEntry();

12.9. Animating page transition

• With the help of Transition classes in Windows Phone Toolkit

• To enable the animations, the type of the application frame in the App.xaml.cs has to be changed to

TransitionFrame:

• The transition can be assigned to pages with Attached Properties of the NavigationService class

• The transitions played when switching to and from the page can be given separately

• Transitions

• RotateTransition

• SlideTransition

• SwivelTransition

• TurnstileTransition

• RollTransition

Page 194: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

182 Created by XMLmind XSL-FO Converter.

12.10. Transition example

12.11. Data Binding

12.12. Data Binding

• The aim of data binding: assiging the charasteristics of a controller to a data source

• "Creates a channel between the UI and the data objects"

• Synchronizes the property of the data source and the UI controller automatically

• For example, when the value of a TextBox is changed, the data source object bound to it also changes

automatically

• Convenient, needs little coding, easy to read

• Data binding always happens between two properties

• Binding Source: any property

• Binding Target: always Dependency Property

• A single object can be Source and Target at the same time

Page 195: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

183 Created by XMLmind XSL-FO Converter.

12.13. Setting the data source

• The code {Binding PropertyName} only defines the name of the property

• What determines which object does the data source property belong to?

• The Source property of the Binding object:

• Multiple data bindings are possible at the same time with the DataContext property of the controller (eg.

PhoneApplicationPage)

12.14. Data source example with Source property

12.15. DataContext 1/2

• If the Source is not defined in the data binding, the properties of an object that can be given as DataContext

property will take part in the data binding

• The FrameworkElement property of DataContext, therefore it can be assigned to almost any UI element

• The value of DataContext can be any object

12.16. DataContext 2/2

Page 196: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

184 Created by XMLmind XSL-FO Converter.

• The UI elements inherit the DataContext from their parents in the Silverlight object tree

• It is sufficient to set the DataContext in a single parent, eg. the root page, and every contained UI element

will be able to access it!

• The DataContext of the child overwrites the one in the parent (but only if the property name matches!)

12.17. Change notification

• One of the most important functions of data binding is that the bound element is refreshed automatically

whenever the value of the source property is changed

• Only works if the class of the object defined as data source implements the INotifyPropertyChanged interface

and generates an event when the value of the property is changed

• In our example, the Book class has to implement the INotifyPropertyChanged interface and generate an

event on the change of its property

12.18. Change notification example

12.19. Direction of the data binding

• The direction of the data binding can be given with the Mode property:

• OneWay: the target property is refreshed in case the source is changed, but not in the other direction

Page 197: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

185 Created by XMLmind XSL-FO Converter.

• TwoWay: it works in both directions

• OneWayToSource: the reversed version of OneWay

• If the Mode is not given, the default is generally OneWay (but it depends on the property)

12.20. ObservableCollection T

• A generic, dynamic collection, which signals when its elements are changed

• Implements INotifyCollectionChanged and INotifyPropertyChanged

• Should not be used with LINQ (or else the change notifications won’t work)

• Can be used for data binding: if its contents are changed, the bound views are also refreshed

12.21. Data Templates

12.22. Data Templates

• The Data Templates are used for defining the way the data appear on the user interface

• A DataTemplate can be assigned to many UI elements: it defines the visualization of the data belonging to the

UI element in question

• The DataTemplate can contain UI elements, these appear in case of presentation

• Eg. the looks and contained data of the elements of a ListBox can be defined with a DataTemplate

• When setting the DataTemplate, data binding is used in most cases for referencing the data

12.23. ListBox data binding

• The elements of a ListBox (or any other ItemsControl) can be defined via the ItemsSource property

Page 198: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

186 Created by XMLmind XSL-FO Converter.

• ItemsSource can be bound to any collection (eg. List), the elements of the collection will be visualized by

list elements

• If the ListBox is to be refreshed automatically when the contents of the data source change,

ObservableCollection should be used

• The looks of the list elements are defined by a DataTemplate, which has to be assigned to the

ListBox.ItemsTemplate property

12.24. Example: ListBox + data binding

12.25. Presentation of a List element

12.26. MVVM

12.27. MVVM architecture

Page 199: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

187 Created by XMLmind XSL-FO Converter.

12.28. MVVM

• In a sizable MVVM project

• Model: the business logic and data class of the application

• ViewModel

• Reads data from the model and transforms it to presentable form, separate ViewModel for every page

defined in the XAML

• Receives the commands from the views and calls the corresponding methods of the model

• View: the classes responsible for presentation (in XAML)

• In case of smaller examples (like ours): the logic and part of the Model are located in the ViewModel (instead

of the Model)

• The advantages of MVVM architecture are only noticeable in bigger projects, in case of small projects, only

the overhead is increased :(

12.29. Advantages of MVVM

Page 200: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

188 Created by XMLmind XSL-FO Converter.

• The business logic is detached from the views responsible for presentation entirely (different classes, different

files)

• The View defined almost entirely in XAML

• Code written in code-behind files is kept to a minimum

• Blendability: the views show the data during development, in the designer (Expression Blend, Visual Studio)

• A separate "design-time" data source (d:DataContext) can be assigned

• Expression Blend can generate dummy data based on the ViewModel class!

• Uncomplicated unit testing

12.30. Relation of View and ViewModel

• Accessing data and filling the View with it: Binding

• The DataContext of the Views is set to the ViewModel

• The Views are bound to the properties of the ViewModel

• Business logic, actions happening because of user interaction

• Event handler method in the code-behind?NO!

• The logic is defined in Commands placed in the ViewModel, binding to these

12.31. ICommand

• Encapsulates an action to be executed, to which an element of the View can be connected with Binding

• The actions, which are to be carried out in response to the events taking place in the Views can be defined in

the ViewModel in the form of Commands

• The reality is not so simple: not all Views and events can be assigned a Command :(

12.32. Command example

Page 201: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

189 Created by XMLmind XSL-FO Converter.

12.33. MVVM Light Toolkit

• MVVM requires great quantities of repetitive coding. In response to this and in order to reduce the

complexity of MVVM development, several code libraries were made: Prism, MVVMLight, Caliburn, etc.

• MVVM Light Toolkit

• Common ViewModel base class

• Messenger: sending and receiving messages between application classes (eg. for communication between

View and ViewModel)

• EventToCommand behavior: a Command can be assigned to any UI event

• Simpler Command handling (RelayCommand: no need to create an own class implementing ICommand)

• ...

13. 13 Advanced Windows Phone Development

13.1. Lecture 13 - Outline

• Launcher / Chooser

• Tiles

• Panorama and Pivot Control

• Application lifecycle

• Isolated Storage

13.2. Launcher / Chooser Task

13.3. Launcher / Chooser Task

• Task: a service offered by an integrated application of the system

• Sending e-mails, taking or choosing photos...

• When a Task is called, a system application is started, but the user sees it as a part of the caller application

(appears as a separate page)

• Two types of Tasks

• Launcher: doesn't provide data to the caller (eg. sending an e-mail)

• Chooser: returns data (eg. the photo taken)

13.4. Using Tasks

1. Instantiation and parameterization of the desired Task class, eg.:

Page 202: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

190 Created by XMLmind XSL-FO Converter.

2. In case of Choosers, the Completed event signals that the Task is finished, returned data can be processed by

handling this

13.5. Launchers

• Initiating a phone call: PhoneCallTask

• Sending an e-mail: EmailComposeTask

• Sending an SMS: SmsComposeTask

• Route calculation with Bing Maps:BingMapsDirectionsTask

• Opening network settings of the phone:ConnectionSettingsTask

• Message sharing on social networks:ShareStatusTask

• Accessing different Marketplace functions

13.6. Launcher examples

• PhoneCallTask

• SearchTask

• SmsComposeTask

Page 203: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

191 Created by XMLmind XSL-FO Converter.

13.7. Choosers

• Taking a photo with the camera:CameraCaptureTask

• Choosing an existing photo from the gallery:PhotoChooserTask

• Asking for an e-mail address of a person from the Contacts application:EmailAddressChooserTask

• Asking for a phone number of a person from the Contacts application:PhoneNumberChooserTask

• Adding a new contact: SaveContactTask

13.8. Chooser example

• The Task is stored as a field of a class:

• The event handler is assigned to it in the contructor:

• Starting the Task:

• Processing the picture:

13.9. Launcher/Chooser on the emulator

• Most of the Tasks are accessible on the emulator

• Phone call: always succeeds

Page 204: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

192 Created by XMLmind XSL-FO Converter.

• Sending SMS: always succeeds

• Taking photos: there is an animated image on the screen, which can be "photographed"

• Playing media: music can be played, but the videos are also sound-only

• ...

• Some Tasks aren't

• Sending e-mails doesn't work, as there are is no ability to log into accounts on the emulator

• Marketplace rating isn't possible, as there is no Live ID

• Further information:http://msdn.microsoft.com/en-us/library/ff955600

13.10. Live Tiles

13.11. Live Tiles

• Small surfaces on the Start screen belonging to applications

• The corresponding application can be launched by touching the Tile

• They provide information

• The Windows Phone version of widgets

• Two types

• Application Tile: it appears when the user selects the "pin to start" option in the application menu after a

long press on the icon

• Secondary Tile: it can be generated in the app itself, more than one can be made by one application

• For example, a weather app can make a secondary tile for each selected city

Page 205: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

193 Created by XMLmind XSL-FO Converter.

13.12. Structure of a Tile

• Tiles have two sides (they autorotate on the Start screen every few seconds)

• Their content has a fixed arrangement

• A different kind of tile can be made by drawing a bitmap from code, and set it as the background of a tile

• Tiles are static, they show the same content until being refreshed

13.13. Setting data of Tiles

Page 206: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

194 Created by XMLmind XSL-FO Converter.

• The data can be set via the StandardTileData class

[fragile]

13.14. Tiles: ShellTile

• Secondary tiles can be accessed via the ShellTile class

• Create() - making a new secondary Tile

• Update() - refreshing the content of the Tile

• Delete() - deleting the Tile

• The collection of all Tiles of the app:ShellTile.ActiveTiles

• The first element of the ActiveTiles is always the Application Tile:

[fragile]

13.15. Refreshing the Application Tile

1. Accessing the Application Tile:ShellTile appTile = ShellTile.ActiveTiles.First();

2. Assembling the StandardTileData:

3. Refreshing the Tile with the StandardTileData object:

Page 207: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

195 Created by XMLmind XSL-FO Converter.

13.16. Creating a secondary Tile

• Creating Tile (appears on the Start screen immediately):

13.17. Methods for refreshing Tiles

• ShellTile API: from code (like in the previous examples)

• Also possible when the app isn't running by using a Background Agent (periodically runs code in the

background)

• Tile Notification: a kind of Microsoft Push Notification containing data of a Tile (background picture, text,

etc.)

• ShellTileSchedule API: the Tile can be ordered to periodically download the background picture from a

constant URL

13.18. ShellTileSchedule

13.19. Panorama and Pivot Control

13.20. Panorama Control

• The most iconic controller of Windows Phone

Page 208: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

196 Created by XMLmind XSL-FO Converter.

• Stretches over multiple screens, side-scrollable

• Can be scrolled by one screen at a time (default case)

• A shared background picture for the whole surface

• The sides of the surface "touch" (the screens are looped)

• For views belonging together, "hubs"

13.21. Structure of Panorama Control

Page 209: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

197 Created by XMLmind XSL-FO Converter.

• Title: the title spanning all of the views

• Consists of PanoramaItems

• Derived from ContentControl: it can contain any Control

• There is an optional Header Control for every PanoramaItem (it can be any UI element, but is mostly text)

13.22. Panorama Control example

Page 210: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

198 Created by XMLmind XSL-FO Converter.

[fragile]

13.23. Some Panorama Control advice

• Use no more than four sections!

• If the Orientation property of a Panorama Item is set to Horizontal, its width can exceed that of the screen,

and the user can freely scroll around (scrolling doesn't automatically switch to another PanoramaItem)

• <controls:PanoramaItem Orientation="Horizontal" Width="800">

13.24. Pivot Control

• A side-scrollable surface divided into sections

• The Windows Phone counterpart of "TabbedView"

• A section = a screen, the next screen "swims into view" when switching

• Resembles a Panorama Control, but is not an independent surface, only separate views

• The edge of the next section doesn't appear

• No common background

• For different views of the same data (filtering)

Page 211: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

199 Created by XMLmind XSL-FO Converter.

13.25. Structure of Pivot Control

• Consists of PivotItems

• Each PivotItem has a Header (can be any UI element, though it is usually textual)

• Derived from ContentControl: can contain any Control

13.26. Pivot Control example

Page 212: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

200 Created by XMLmind XSL-FO Converter.

13.27. Application lifecycle

13.28. Application lifecycle

• Three application states

• Running: active, running in the foreground

• Dormant: inactive, but remains in the memory

• Tombstoned: inactive, deleted from memory, state saved to storage

• Tombstoning: the application is stopped, deleted from memory, but certain data (Navigation BackStack,

screenshot) are saved automatically

• A Dormant application becomes Tombstoned when the memory is low and the system decides to get rid of

it

• The system stores a maximum of 5 Tombstoned applications, the saved states of the rest are deleted!

13.29. Application lifecycle

Page 213: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

201 Created by XMLmind XSL-FO Converter.

• The lifecycle events can be handled via the event handlers of the Application object

• Each event handler can run for a maximum of 10 seconds!

13.30. Page events

• Besides the Application events (Activated, Deactivated, ...) pages also get events when the application's state

is altered

• Deactivation: for the given page -OnNavigatedFrom()

• Activation: for the given page -OnNavigatedTo()

• These can also be used for the saving / loading of the page state

13.31. Tombstoning

• During Tombstoning, the following data automatically become saved:

• BackStack (navigation history, current page)

• A State dictionary containing key-value pairs

• The role of the programmer is to write the transient data of the application into the State dictionary on the

Deactivated event or in the OnNavigatedFrom() method

• The Tombstoned application can get deleted, losing the State dictionary!

• Only transient data related to the current run/session and not needed after a full restart of the application

should be saved this way

• The persistent data needed on the long run should be saved to the Isolated Storage

13.32. Example: usage of State at tombstoning

Page 214: Mobile Softwares - tankonyvtar.hu...Created by XMLmind XSL-FO Converter. Mobile Softwares Ekler, Péter Forstner, Bertalan Kelényi, Imre

Mobile Softwares

202 Created by XMLmind XSL-FO Converter.

13.33. Isolated Storage

13.34. Data storage on the device

• Isolated Storage is the own storage area of an application that no other app can access

• Data storage methods usable in the Isolated Storage:

• Key-value pairs

• Files grouped into directories

• Local database (SQL)

• Via LINQ to SQL

13.35. File handling basics

• IsolatedStorageFile: provides access to the area containing the files and directories

• Accessing the Store:

• File and directory operations: eg. CopyFile(), CreateFile(), FileExists(), DeleteDirectory(), ...

• IsolatedStorageFileStream

• Deleting Isolated Storage in the Emulator:

• By restarting the emulator or uninstalling the application

• From code: store.Remove();