PROGRAMMING APPLICATIONS DECLARATIVE GUIS

Size: px

Start display at page:

Download "PROGRAMMING APPLICATIONS DECLARATIVE GUIS"

Chrystal Andrews
6 years ago
Views:

1 PROGRAMMING APPLICATIONS DECLARATIVE GUIS

5 DIVING RIGHT IN

7 Eclipse? Plugin deprecated :-(

8 Making a new project

11 This keeps things simple

12 or clone

13 or clone

14 or clone

15 or clone

16 or clone

17 or clone

18 Try it now:

19 Try it now:

20 Try it now:

22 Really, an Android application is just a set of files in folders

23 I find the Android view most useful

26 <manifest xmlns:android=" res/android" package="uk.co.martinchapman.programmaticui"> <application android:allowbackup="true" android:supportsrtl="true" </application> </manifest> ANDROIDMANIFEST.XML

27 <manifest xmlns:android=" res/android" package="uk.co.martinchapman.programmaticui"> <application android:allowbackup="true" android:supportsrtl="true" </application> </manifest> ANDROIDMANIFEST.XML

28 STOLEN WITH <3 FROM W3SCHOOLS

29 STOLEN WITH <3 FROM W3SCHOOLS

30 STOLEN WITH <3 FROM W3SCHOOLS

31 STOLEN WITH <3 FROM W3SCHOOLS

32 STOLEN WITH <3 FROM W3SCHOOLS

33 Not used by the parser, simply used to `declare the namespace uniquely STOLEN WITH <3 FROM W3SCHOOLS

34 <manifest xmlns:android=" res/android" package="uk.co.martinchapman.programmaticui"> <application android:allowbackup="true" android:supportsrtl="true" </application> </manifest> ANDROIDMANIFEST.XML

35 <manifest xmlns:android=" res/android" package="uk.co.martinchapman.programmaticui"> <application android:allowbackup="true" android:supportsrtl="true" </application> </manifest> ANDROIDMANIFEST.XML

36 <manifest xmlns:android=" res/android" package="uk.co.martinchapman.programmaticui"> <application android:allowbackup="true" android:supportsrtl="true" </application> </manifest> Whenever we see symbol, we re typically referring to a resource file. ANDROIDMANIFEST.XML

40 Anything else that needs to be drawn should be placed in the drawable folder

41 <manifest xmlns:android=" res/android" package="uk.co.martinchapman.programmaticui"> <application android:allowbackup="true" android:supportsrtl="true" </application> </manifest> ANDROIDMANIFEST.XML

43 <resources>  <style name="apptheme" parent="theme.appcompat.light.darkactionbar">  <item <item <item </style> </resources> <?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorprimary">#3f51b5</color> <color name="colorprimarydark">#303f9f</color> <color name="coloraccent">#ff4081</color> </resources>

44 <resources>  <style name="apptheme" parent="theme.appcompat.light.darkactionbar">  <item <item <item </style> </resources> <?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorprimary">#3f51b5</color> <color name="colorprimarydark">#303f9f</color> <color name="coloraccent">#ff4081</color> </resources> More about the string resource later

45 <manifest xmlns:android=" res/android" package="uk.co.martinchapman.programmaticui"> <application android:allowbackup="true" android:supportsrtl="true" </application> </manifest> ANDROIDMANIFEST.XML

46 <manifest xmlns:android=" res/android" package="uk.co.martinchapman.programmaticui"> <application android:allowbackup="true" android:supportsrtl="true" </application> </manifest> ANDROIDMANIFEST.XML

48 WHAT MAKES AN ANDROID APP?

49 A collection of Screens

50 What is a Screen?

51 Every Android app is a collection of Screens, and each screen is comprised of an Activity and a Layout. What is a Screen?

52 What is an Activity?

53 What is an Activity? An Activity is a single, defined feature that a user can interact with, which is usually associated with an individual Screen in an application.

54 What is an Activity? An Activity is a single, defined feature that a user can interact with, which is usually associated with an individual Screen in an application.

58 What is a layout?

59 Part of the activity? What is a layout?

62 package uk.co.martinchapman.programmaticui; import android.app.activity; import android.os.bundle; /** * Created by Martin on 07/03/16. */ public class Programmatic extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); } } PROGRAMMATIC.JAVA

63 package uk.co.martinchapman.programmaticui; import android.app.activity; import android.os.bundle; /** * Created by Martin on 07/03/16. */ public class Programmatic extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); } } PROGRAMMATIC.JAVA

65 Just a Java class, but becomes an Activity through inheritance

66 Just a Java class, but becomes an Activity through inheritance Encapsulates the complexities of application initialisation (UI drawing etc.)

67 package uk.co.martinchapman.programmaticui; import android.app.activity; import android.os.bundle; /** * Created by Martin on 07/03/16. */ public class Programmatic extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); } } More about this in the final version of Snake PROGRAMMATIC.JAVA

68 Specifies that this is the main Activity of the app, and that it can be used to launch the app. <activity android:name=".programmatic"> <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> ANDROIDMANIFEST.XML

69 <activity android:name=".programmatic"> <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> Intents are used by Activities to send messages to one another ANDROIDMANIFEST.XML

70 HOW DO WE RUN AN APPLICATION?

71 1 2 3

72 1 2 3

77 Smaller and designed to run on a register-based processor

84 If you close the emulator, you re going to be waiting for a little while!

85 If I were to run my application now

86 If I were to run my application now NOTE: It can be tricky to get the emulator setup correctly. Don t worry if you can t actually run anything today.

87 What if we want a UI that looks like this?

88 HOW WOULD WE DO THIS IN SWING?

89 EXERCISE: Take a few minutes to code a Swing GUI that resembles this screenshot

90 setlayout(new BorderLayout()); JPanel centre = new JPanel(); centre.setlayout(new GridLayout(0, 1)); JPanel centretop = new JPanel(); centretop.setlayout(new FlowLayout(FlowLayout.CENTER)); centretop.add(new JLabel("Hello World")); JPanel centrebottom = new JPanel(); centrebottom.setlayout(new FlowLayout(FlowLayout.CENTER)); centrebottom.add(new JButton("HELLO WORLD")); centre.add(centretop); centre.add(centrebottom); add(centre, BorderLayout.CENTER);

91 package uk.co.martinchapman.programmaticui; import android.app.activity; import android.content.res.resources; import android.os.bundle; import android.util.typedvalue; import android.widget.button; import android.widget.relativelayout; import android.widget.textview; /** * Created by Martin on 07/03/16. */ public class Programmatic extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); Button button = new Button(this); button.settext("hello World"); button.setid(r.id.one); TextView textview = new TextView(this); textview.settext("hello World"); Translating this to an Android Activity PROGRAMMATIC.JAVA

92 Feels like Swing! button.setid(r.id.one); TextView textview = new TextView(this); textview.settext("hello World"); textview.setid(r.id.two); RelativeLayout layout = new RelativeLayout(this); RelativeLayout.LayoutParams buttonparams = new RelativeLayout.LayoutParams( RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT); buttonparams.addrule(relativelayout.center_horizontal); buttonparams.addrule(relativelayout.center_vertical); RelativeLayout.LayoutParams textparams = new RelativeLayout.LayoutParams( RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT); PROGRAMMATIC.JAVA

93 } } textparams.addrule(relativelayout.above, button.getid()); textparams.addrule(relativelayout.center_horizontal); layout.addview(button, buttonparams); layout.addview(textview, textparams); setcontentview(layout); But what s wrong with this for a mobile device? PROGRAMMATIC.JAVA

94 WHAT ARE THE DRAWBACKS OF PROGRAMMATICALLY SPECIFYING AN ANDROID LAYOUT?

95 WHAT ARE THE DRAWBACKS OF PROGRAMMATICALLY SPECIFYING AN ANDROID LAYOUT? Difficult to account for orientation and screen resolution The former must be done with IF statements, while the latter usually requires a conversion from density pixels to regular pixels, in line with the format required by the relevant methods

96 WHAT ARE THE DRAWBACKS OF PROGRAMMATICALLY SPECIFYING AN ANDROID LAYOUT? Difficult to account for orientation and screen resolution The former must be done with IF statements, while the latter usually requires a conversion from density pixels to regular pixels, in line with the format required by the relevant methods Difficult to account for localisation Successful applications will be used in many different countries

97 WHAT ARE THE DRAWBACKS OF PROGRAMMATICALLY SPECIFYING AN ANDROID LAYOUT?

98 WHAT ARE THE DRAWBACKS OF PROGRAMMATICALLY SPECIFYING AN ANDROID LAYOUT? Lots to write Reminiscent of an intricate Swing GUI

99 WHAT ARE THE DRAWBACKS OF PROGRAMMATICALLY SPECIFYING AN ANDROID LAYOUT? Lots to write Reminiscent of an intricate Swing GUI Poor separation in our application What about everything we just learned about MVC?

100 Let s update our definition What is a layout?

101 Let s update our definition A layout describes the appearance of the screen, in a file that is both separate from our Java Activity, and written in a different language. What is a layout?

102 Let s update our definition A layout describes the appearance of the screen, in a file that is both separate from our Java Activity, and written in a different language. What is a layout?

103

104 By having a separate file, we can achieve a conceptual separation between presentation and control

105 Poor separation in our application What about everything we just learned about MVC? By having a separate file, we can achieve a conceptual separation between presentation and control

106 There is one important thing to take away from this though package uk.co.martinchapman.programmaticui; import android.app.activity; import android.content.res.resources; import android.os.bundle; import android.util.typedvalue; import android.widget.button; import android.widget.relativelayout; import android.widget.textview; /** * Created by Martin on 07/03/16. */ public class Programmatic extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); Button button = new Button(this); button.settext("hello World"); button.setid(r.id.one); TextView textview = new TextView(this); textview.settext("hello World"); PROGRAMMATIC.JAVA

107 There is one important thing to take away from this though package uk.co.martinchapman.programmaticui; import android.app.activity; import android.content.res.resources; import android.os.bundle; import android.util.typedvalue; import android.widget.button; import android.widget.relativelayout; import android.widget.textview; /** * Created by Martin on 07/03/16. */ public class Programmatic extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); Button button = new Button(this); button.settext("hello World"); button.setid(r.id.one); TextView textview = new TextView(this); textview.settext("hello World"); PROGRAMMATIC.JAVA

108 There is one important thing to take away from this though package uk.co.martinchapman.programmaticui; import android.app.activity; import android.content.res.resources; import android.os.bundle; import android.util.typedvalue; import android.widget.button; import android.widget.relativelayout; import android.widget.textview; /** * Created by Martin on 07/03/16. */ public class Programmatic extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); Button button = new Button(this); button.settext("hello World"); button.setid(r.id.one); TextView textview = new TextView(this); textview.settext("hello World"); PROGRAMMATIC.JAVA

109 There is one important thing to take away from this though package uk.co.martinchapman.programmaticui; import android.app.activity; import android.content.res.resources; import android.os.bundle; import android.util.typedvalue; import android.widget.button; import android.widget.relativelayout; import android.widget.textview; /** * Created by Martin on 07/03/16. */ public class Programmatic extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); Button button = new Button(this); button.settext("hello World"); button.setid(r.id.one); TextView textview = new TextView(this); textview.settext("hello World"); A new set of names to learn PROGRAMMATIC.JAVA

110

111

112

113

114

115

116

117

118 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> ACTIVITY_PROGRAMMATIC.XML

119 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> Before, we made the view elements ourselves, now we are instructing Android <TextView about which elements we want on our android:layout_width="wrap_content" screen. Hence the term declarative GUI. android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> ACTIVITY_PROGRAMMATIC.XML

120 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> Before, we made the view elements ourselves, now we are instructing Android <TextView about which elements we want on our android:layout_width="wrap_content" screen. Hence the term declarative GUI. android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button Lots to write android:layout_width="wrap_content" android:layout_height="wrap_content" Reminiscent of an intricate Swing GUI android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> ACTIVITY_PROGRAMMATIC.XML

121

122

123

124 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> ACTIVITY_PROGRAMMATIC.XML

125 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> ACTIVITY_PROGRAMMATIC.XML

126 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> ACTIVITY_PROGRAMMATIC.XML

127 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> ACTIVITY_PROGRAMMATIC.XML

128 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> ACTIVITY_PROGRAMMATIC.XML

129

130

131

132 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> ACTIVITY_PROGRAMMATIC.XML

133 What s wrong with this? package uk.co.martinchapman.programmaticui; import android.app.activity; import android.content.res.resources; import android.os.bundle; import android.util.typedvalue; import android.widget.button; import android.widget.relativelayout; import android.widget.textview; /** * Created by Martin on 07/03/16. */ public class Programmatic extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); Button button = new Button(this); button.settext("hello World"); button.setid(r.id.one); TextView textview = new TextView(this); textview.settext("hello World"); PROGRAMMATIC.JAVA

134 The solution?

135 The solution?

136 <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">programmatic</string> <string name="hello_world">hello world!</string> </resources> STRINGS.XML

137 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> Flexibility to change multiple parts of our program from a single source and ACTIVITY_PROGRAMMATIC.XML

138 Allows us to specify multiple string files for each location STRINGS.XML (DA)

139 Allows us to specify multiple string files for each location Difficult to account for localisation Successful applications will be used in many different countries STRINGS.XML (DA)

140 What s the alternative? if ( Locale.getDefault().getDisplayLanguage().equals("English") ) { }... This might seem simple but PROGRAMMATIC.JAVA

141 When we decide to implement an Android GUI programmatically, we become responsible for responding to all states of the device US ANDROID

142 Let s explore the implications of this responsibility further. This is how a declarative layout allows us to account for different screen orientations

143 What s the alternative? private int getscreenorientation() { int rotation = getwindowmanager().getdefaultdisplay().getrotation(); DisplayMetrics dm = getresources().getdisplaymetrics(); int width = dm.widthpixels; int height = dm.heightpixels; int orientation; PROGRAMMATIC.JAVA

144 /* If this phone rotates normally, i.e. when it is in portrait, or reverse portrait, the height is greater than the width and when it is is landscape, or reverse landscape, the width is greater than the height: */ if ( ( rotation == Surface.ROTATION_0 rotation == Surface.ROTATION_180 ) && height > width ( rotation == Surface.ROTATION_90 rotation == Surface.ROTATION_270) && width > height ) { switch(rotation) { case Surface.ROTATION_0: orientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT; break; case Surface.ROTATION_90: orientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE; break; case Surface.ROTATION_180: orientation = ActivityInfo.SCREEN_ORIENTATION_REVERSE_PORTRAIT; break; case Surface.ROTATION_270: orientation = ActivityInfo.SCREEN_ORIENTATION_REVERSE_LANDSCAPE; break; default: orientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT; break; } } PROGRAMMATIC.JAVA

145 /* Otherwise, the device's natural orientation must be landscape, or the device is square: */ else { switch(rotation) { case Surface.ROTATION_0: orientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE; break; case Surface.ROTATION_90: orientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT; break; case Surface.ROTATION_180: orientation = ActivityInfo.SCREEN_ORIENTATION_REVERSE_LANDSCAPE; break; case Surface.ROTATION_270: orientation = ActivityInfo.SCREEN_ORIENTATION_REVERSE_PORTRAIT; break; default: orientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE; break; } } return orientation; } I don t think we want this responsibility! PROGRAMMATIC.JAVA

146 When we declare the GUI we want to use in different conditions (e.g. portrait and landscape) we are able to let Android decide when a device is in a certain state. US ANDROID

147 When we declare the GUI we want to use in different conditions (e.g. portrait and landscape) we are able to let Android decide when a device is in a certain state. It is particularly important that we delegate this task in a mobile environment, when it may be difficult to accurately detect a device s state, programmatically. US ANDROID

148 When we declare the GUI we want to use in different conditions (e.g. portrait and landscape) we are able to let Android decide when a device is in a certain state. With different versions of Android, it s also important not to assume a consistent interface for detecting the relevant conditions. US ANDROID

149 Finally <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> Expands to fit the text inside it ACTIVITY_PROGRAMMATIC.XML

150 wrap_content match_parent ACTIVITY_PROGRAMMATIC.XML

151 Finally <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> Enables us to create the desired layout ACTIVITY_PROGRAMMATIC.XML

152

153 But before we run our app, we need to tell our android which layout to load public class Programmatic extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_programmatic); } PROGRAMMATIC.JAVA

$oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_programmatic); } We call this inflating the GUI.$

154 But before we run our app, we need to tell our android which layout to load public class Programmatic extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_programmatic); } We call this inflating the GUI. PROGRAMMATIC.JAVA

155 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingbottom="16dp" android:paddingleft="16dp" android:paddingright="16dp" android:paddingtop="16dp" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button One small addition android:layout_width="wrap_content" android:layout_height="wrap_content" ACTIVITY_PROGRAMMATIC.XML

156 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" > We could take this <TextView even further android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" <resources> /> <dimen name="activity_horizontal_margin">16dp</ dimen> <dimen name="activity_vertical_margin">16dp</dimen> <Button </resources> android:layout_width="wrap_content" android:layout_height="wrap_content" ACTIVITY_PROGRAMMATIC.XML

157

What s the alternative? public class Programmatic extends Activity { @Override protected void oncreate(bundle savedinstancestate) { super.

158 What s the alternative? public class Programmatic extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); RelativeLayout layout = new RelativeLayout(this); layout.setpadding(dptopixels(16), dptopixels(16), dptopixels(16), dptopixels(16)); } private int dptopixels(int dp) { float scale = getresources().getdisplaymetrics().density; return Math.round(dp * scale); } PROGRAMMATIC.JAVA

159 WHAT A DECLARATIVE GUI GIVE US A natural separation between the view and the model Simple, intuitive XML code A straightforward way to indicate how our GUI, and its content, should change according to variables in the device Language Orientation An accurate way to handle device resolution

160 So do we ever need to specify an Android GUI programatically?

161 1. XML is well tuned to static interfaces. Programmatic UIs are better suited to the dynamic addition of views. 2. The slight processing overhead associated with inflating the UI might be noticeable with a large number of views (debated; lots of pre-parsing) So do we ever need to specify an Android GUI programatically?

162

163

164

165

166 Clone repo:

167

168

169

170

171 Exercise: write a declarative XML file that describes this interface

172 Spinner Exercise: write a declarative XML file that describes this interface

173 Spinner Exercise: write a declarative XML file that describes this interface

174 Spinner Exercise: write a declarative XML file that describes this interface android:entries="@array/genres"/>

175 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_width="wrap_content" ACTIVITY_FIND_FILM.XML

176 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_width="wrap_content" ACTIVITY_FIND_FILM.XML

177 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_width="wrap_content" ACTIVITY_FIND_FILM.XML

178 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <Spinner <resources> android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> <string name="app_name">filmadviser</string> <string-array name="genres"> <item>horror</item> <item>action</item> <item>comedy</item> <item>romance</item> </string-array> </resources> <TextView android:layout_width="wrap_content" STRINGS.XML ACTIVITY_FIND_FILM.XML

179 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_width="wrap_content" ACTIVITY_FIND_FILM.XML

180 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_width="wrap_content" ACTIVITY_FIND_FILM.XML

181 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_width="wrap_content" ACTIVITY_FIND_FILM.XML

182 <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> <resources> <string name="app_name">filmadviser</string> <string-array name="genres"> <item>horror</item> <item>action</item> <item>comedy</item> <item>romance</item> </string-array> <string name="find_film">find Film</string> </resources> <TextView android:layout_width="wrap_content" ACTIVITY_FIND_FILM.XML

183 <Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> ACTIVITY_FIND_FILM.XML

184

185 That s it for our discussion of Views and Layouts. The declarative XML in intuitive enough to determine how to do most things (with help from the API). Our focus now will be making an application that does something interesting, and thus allows us to test our Java problem solving skills.

186 But first some more Android specifics HOW DO WE GET AN ANDROID APPLICATION TO DO SOMETHING?

187 In Swing?

188 In Swing? search.addactionlistener(new ActionListener() public void actionperformed(actionevent e) {... } });

189 Let s go back to our example

190

191 android:layout_height="match_parent"> <Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> ACTIVITY_FIND_FILM.XML

192 android:layout_height="match_parent"> <Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onclick="onclickfindfilm" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> ACTIVITY_FIND_FILM.XML

193 android:layout_height="match_parent"> <Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onclick="onclickfindfilm" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> </RelativeLayout> Looks in the current Activity ACTIVITY_FIND_FILM.XML

194 package uk.co.martinchapman.filmadviser; import android.os.bundle; import android.support.v7.app.appcompatactivity; import android.view.view; public class FindFilmActivity extends AppCompatActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_find_film); } public void onclickfindfilm(view view) {... } } FINDFILMACTIVITY.JAVA

195 package uk.co.martinchapman.filmadviser; import android.os.bundle; import android.support.v7.app.appcompatactivity; import android.view.view; public class FindFilmActivity extends AppCompatActivity { To (potentially) help us with future processing, a copy of the View calling this method is passed. protected void oncreate(bundle savedinstancestate) { } super.oncreate(savedinstancestate); setcontentview(r.layout.activity_find_film); public void onclickfindfilm(view view) { }... FINDFILMACTIVITY.JAVA

196 package uk.co.martinchapman.filmadviser; import android.os.bundle; import android.support.v7.app.appcompatactivity; import android.view.view; public class FindFilmActivity extends AppCompatActivity { To (potentially) help us with future processing, a copy of the View calling this method is passed. protected void oncreate(bundle savedinstancestate) { } super.oncreate(savedinstancestate); setcontentview(r.layout.activity_find_film); public void onclickfindfilm(view view) { }... Similar to passing an event in Swing. FINDFILMACTIVITY.JAVA

197 package uk.co.martinchapman.filmadviser; import android.os.bundle; import android.support.v7.app.appcompatactivity; import android.view.view; public class FindFilmActivity extends AppCompatActivity { To (potentially) help us with future processing, a copy of the View calling this method is protected void oncreate(bundle savedinstancestate) { } super.oncreate(savedinstancestate); setcontentview(r.layout.activity_find_film); public void onclickfindfilm(view view) {... Return type not considered part of } method signature } Similar to passing an event in Swing. FINDFILMACTIVITY.JAVA

198 Our program s aim: 1. Take what is written in the drop-down (Spinner). 2. Select a random film of that genre. 3. Display it on the UI.

199 public void onclickfindfilm(view view) { Spinner spinner = (Spinner) findviewbyid(r.id.genre); } FINDFILMACTIVITY.JAVA

200 public void onclickfindfilm(view view) { Spinner spinner = (Spinner) findviewbyid(r.id.genre); } FINDFILMACTIVITY.JAVA

201 public void onclickfindfilm(view view) { Spinner spinner = (Spinner) findviewbyid(r.id.genre); } FINDFILMACTIVITY.JAVA

202 public void onclickfindfilm(view view) { Spinner spinner = (Spinner) findviewbyid(r.id.genre); } FINDFILMACTIVITY.JAVA

203 public void onclickfindfilm(view view) { Spinner spinner = (Spinner) findviewbyid(r.id.genre); } FINDFILMACTIVITY.JAVA

204 public void onclickfindfilm(view view) { Spinner spinner = (Spinner) findviewbyid(r.id.genre); } FINDFILMACTIVITY.JAVA

205 public void onclickfindfilm(view view) { Spinner spinner = (Spinner) findviewbyid(r.id.genre); } FINDFILMACTIVITY.JAVA

206 <Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" />

207 <Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" /> I need someway to uniquely identify each view Map<Integer,View> viewbyid; I ve been instructed to create a Spinner Spinner aspinner = new Spinner(); Associate this Spinner with its ID from the R file viewbyid.put(r.id.aspinner, aspinner); Offer my user some way to get this Spinner back, when they supply an ID (via the R file) public View findviewbyid(int id) { return (viewbyid.get(id)) }

208 public void onclickfindfilm(view view) { Spinner spinner = (Spinner) findviewbyid(r.id.genre); TextView textview = (TextView) findviewbyid(r.id.films); } FINDFILMACTIVITY.JAVA

209 public void onclickfindfilm(view view) { Spinner spinner = (Spinner) findviewbyid(r.id.genre); TextView textview = (TextView) findviewbyid(r.id.films); } textview.settext(getfilm(spinner.getselecteditem() + "")); FINDFILMACTIVITY.JAVA

210 public void onclickfindfilm(view view) { Spinner spinner = (Spinner) findviewbyid(r.id.genre); TextView textview = (TextView) findviewbyid(r.id.films); } textview.settext(getfilm(spinner.getselecteditem() + "")); FINDFILMACTIVITY.JAVA

211 public String getfilm(string genre) { ArrayList<String> horror = new ArrayList<String>(Arrays.asList(new String[]{"", ""})); ArrayList<String> action = new ArrayList<String>(Arrays.asList(new String[]{"", ""})); ArrayList<String> comedy = new ArrayList<String>(Arrays.asList(new String[]{"", ""})); ArrayList<String> romance = new ArrayList<String>(Arrays.asList(new String[]{"", ""})); switch ( genre ) { case "Horror": return horror.get((int)(math.random() * horror.size())); case "Action": return action.get((int)(math.random() * action.size())); case "Comedy": return comedy.get((int)(math.random() * comedy.size())); case "Romance": return romance.get((int)(math.random() * romance.size())); default: return "No Recommendation"; } } Important to remember that this is still just a Java program, so many of the things we want to achieve in an Activity, we can implement in a familiar way. FINDFILMACTIVITY.JAVA

212

213 What s wrong with this? Hard to reconcile both efficiency and flexibility, if we want to associate similar, yet varying, actions to different views.

214 What s wrong with this?

215 What s wrong with this? Imagine if we have a set of buttons that increment a total

216 What s wrong with this? Imagine if we have a set of buttons that increment a total public void onclickaddone(view view) {... } public void onclickaddtwo(view view) {... } public void onclickaddthree(view view) {... } Unless we can get the increment amounts from the view, we would need different event handlers for each.

217 What s wrong with this? Perhaps more importantly, it contradicts the natural notion of separating the view from the model (and control) that is brought by having a separate layout file.

218 The solution? Revert back to a familiar form of event handling button.setonclicklistener(new View.OnClickListener() { public void onclick(view v) {... }); } Some slightly altered syntax

219 The solution? We can then have all the flexibility we had previously button.setonclicklistener(new addn(5)); private class addn implements View.OnClickListener { private int n; public addn(int n) { } } this.n = n; public void onclick(view v) {... } Use Java solutions

220 Reformatting our FilmAdviser event handler Button button = (Button)findViewById(R.id.find_film); button.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { Spinner spinner = (Spinner) findviewbyid(r.id.genre); TextView textview = (TextView) findviewbyid(r.id.films); textview.settext(getfilm(spinner.getselecteditem() + "")); } }); FINDFILMACTIVITY.JAVA

221 That s it for our discussion of Event Handlers. The similarity of the syntax to Swing should enable you to achieve most things. Our focus now will be making an application that allows us to test our Java problem solving skills.

222

223

224 REMEMBER

225 REMEMBER As with all live programming examples, if you want to understand them fully, you need to go away and look over them yourself, add comments and rewrite parts; I m not expecting you to fully understand this in the lecture.

226 REMEMBER As with all live programming examples, if you want to understand them fully, you need to go away and look over them yourself, add comments and rewrite parts; I m not expecting you to fully understand this in the lecture. Use the versions of code provided on Github (link also on KEATS) to catch up if you fall behind.

227 REMEMBER As with all live programming examples, if you want to understand them fully, you need to go away and look over them yourself, add comments and rewrite parts; I m not expecting you to fully understand this in the lecture. Use the versions of code provided on Github (link also on KEATS) to catch up if you fall behind. This is only one way of implementing a solution, and not necessarily the best, especially in respect of model-viewcontroller. Some deviations for clarity and experimentation.

228 Clone repo:

229

230 THE MODEL

231 public class Coordinate { private int x; private int y; public Coordinate() {} public Coordinate( int x, int y ) { this.x = x; this.y = y; } public int getx() { return x; } public int gety() { return y; } COORDINATE.JAVA - ALL VERSIONS

232 } public int gety() { } return y; public boolean equals(coordinate other) { } if (x == other.x && y == other.y) { } return true; return public String tostring() { } return "Coordinate: [" + x + "," + y + "]"; COORDINATE.JAVA - ALL VERSIONS

233 SNAKE.JAVA - V1

234 import java.util.arraylist; // Remember use of Coordinate from local package /** * Created 0 by Martin on 14/03/16. */ public class Snake { 1 // What information do we need to store about the snake? } SNAKE.JAVA - V1

235 import java.util.arraylist; // Remember use of Coordinate from local package /** * Created 0 by Martin on 14/03/16. */ public class Snake { 1 // What information do we need to store about the snake? } EXERCISE: Determine some attributes for the snake 7 SNAKE.JAVA - V1

236 import java.util.arraylist; public class Snake { /* We'll need to store the head of the snake separately, as this is the part of the snake the `meets' things. We'll also need to display it. This is really just a symbolic field, that is pointed to the first entry on the trail */ private Coordinate head; public Coordinate gethead() { return head; } /* We'll need to store the whole of the snake, to display it and to check for things such as collisions. */ private ArrayList<Coordinate> snaketrail; public ArrayList<Coordinate> gettrail() { return snaketrail; } SNAKE.JAVA - V2

EMBEDDED SYSTEMS PROGRAMMING Application Tip: Switching UIs

EMBEDDED SYSTEMS PROGRAMMING Application Tip: Switching UIs EMBEDDED SYSTEMS PROGRAMMING 2015-16 Application Tip: Switching UIs THE PROBLEM How to switch from one UI to another Each UI is associated with a distinct class that controls it Solution shown: two UIs,