Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
ELET4133: Embedded Systems Topic 6 Basic Program Structure Originals of Slides and Source Code for Examples: http://www.coreservlets.com/android-tutorial/ Special Thanks • To Marty Hall – Author of most of the information in these slides – Gave me permission to use and modify – His company does customized training for many technical topics – All online for self-study – http://courses.coreservlets.com 8/14/2013 2 Agenda • • • • • • • 8/14/2013 Making and testing Android projects Basic program structure Java-based layout XML-based layout Eclipse ADT visual layout editor Hybrid layout Project structure summary 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 3 Starting a New App • When starting a new App, Eclipse has already built into the “structure” a functional “Hello World” program • To start a new App go to the File Menu -> New -> Project and a new window will open 8/14/2013 1: http://courses.coreservlets.com 4 Starting a New App • Select Android Project and then [Next] 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 5 Starting a New App • Select Android Project and then [Next] • This window will appear – fill it in Application Name: Name will show on the Title Bar Follow whatever convention you have for the Package Name and Project Name, I name them the same Keep the default selections for the others until you are more familiar 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 6 Starting a New App • Keep the default selections for this window also, click [Next] 8/14/2013 1: http://courses.coreservlets.com 7 Starting a New App • Keep the default selections for this window also, click [Next] • Again, until necessary, keep the default selections, click [Next] 8/14/2013 1: http://courses.coreservlets.com 8 Starting a New App • Keep the default selections for this window also, click [Next] • Again, until necessary, keep the default selections, click [Next] • Choose Blank Activity and Create Activity, click [Next] 8/14/2013 1: http://courses.coreservlets.com 9 Starting a New App • Keep the defaults unless you want to name the Main_Activity something else, click [Finish] 8/14/2013 1: http://courses.coreservlets.com 10 Starting a New App • When you click [Finish] Eclipse creates a working App that prints “Hello World” on the screen 11 8/14/2013 1: http://courses.coreservlets.com Starting a New App • When you click [Finish] Eclipse creates a working App that prints “Hello World” on the screen • And is runnable on a virtual device or on a real phone, connected through a USB cable 8/14/2013 1: http://courses.coreservlets.com 12 Basic Program Structure 8/14/2013 13 Three Main Approaches • There are three main approaches to creating an Android App in Eclipse 1. Java-based 2. XML-based 3. Hybrid • The one that seems most like MVC is the XML-based 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 14 Three Main Approaches • Java-based1 – Use java to define Strings, layout window, create GUI controls, and assign event handlers. – Like Swing programming • XML-based1 – Use XML files to define Strings, layout window, create GUI controls, and assign event handlers. • The java method reads the layout from the XML file and passes it to setContentView • XML assigns event handlers, java implements event handlers • Hybrid1 – Use an XML file to define Strings, layout windows, and create GUI controls. • Use java to assign event handlers 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 15 General Structure • This general structure is common to all approaches to developing apps package com.companyName.projectName import android.app.Activity; import android.os.Bundle; import android.widget.SomeLayoutOrView There is no need to type the import statements manually. Just use the classes in your code and then when Eclipse marks the line as an error, click on the light bulb on the left and Eclipse will tell your which packages to import, or press [CONTROL]+[SHIFT]+O and Eclipse will create the correct import statement for you. 1 public class someName extends Activity { @Override public void onCreate (Bundle savedInstanceState) { super.onCreate (savedInstanceState); SomeLayoutOrView view = createOrGetView ( ); …… setContentView (view); } …. } 8/14/2013 16 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf General Structure • This general structure is common to all approaches to developing apps package com.companyName.projectName import android.app.Activity; import android.os.Bundle; import android.widget.SomeLayoutOrView Apps are frequently shut down by the device. This lets it remember some info about the previous invocation. For now just know that you should always call super.onCreate() as the first line of your onCreate method. 1 public class someName extends Activity { @Override public void onCreate (Bundle savedInstanceState) { super.onCreate (savedInstanceState); SomeLayoutOrView view = createOrGetView ( ); …… setContentView (view); } …. } 8/14/2013 17 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf General Structure • This general structure is common to all approaches to developing apps package com.companyName.projectName import android.app.Activity; import android.os.Bundle; import android.widget.SomeLayoutOrView Some Android conventions are used here and are required for all students in this class: 1: No *s in the import statements (a * indicates you want to import all the classes of a certain package ) 2: Open brace “{“ on the same line as the declaration statement 3: @Overide where appropriate: an annotation that you can use to tell the compiler and your IDE that you intend the method that has that annotation to be an override of a super class method public class someName extends Activity { @Override public void onCreate (Bundle savedInstanceState) { super.onCreate (savedInstanceState); SomeLayoutOrView view = createOrGetView ( ); …… setContentView (view); } …. } 8/14/2013 18 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf The Java Approach • Almost everything is done in the java code public class SomeName extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); String message = "..."; LinearLayout window = new LinearLayout(this); window.setVariousAttributes(…); Button b = new Button(this); b.setText("Button Label"); b.setOnClickListener(new SomeHandler()); mainWindow.addView(b); ... setContentView(window); } private class SomeHandler implements OnClickListener { @Override public void onClick(View clickedButton) { doSomething(...); } }} 8/14/2013 19 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf The XML Approach • The basic approach used in Eclipse so far – Functionality in java – Layout in XML src/com.mystuff/Main_Activity.java public class SomeClass extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } public void handlerMethod(View clickedButton) { String someName = getString(R.string.some_name); doSomethingWith(someName); res/layout/activity_main.xml } } <?xml version="1.0" encoding="utf-8"?> <LinearLayout …> res/values/strings.xml <TextView … /> <?xml version="1.0" encoding="utf-8"?> <Button … <resources> android:onClick="handlerMethod" /> <string name="some_name">…</string> </LinearLayout> … </resources> 8/14/2013 20 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf The Hybrid Approach • The Functionality in java (classes and listeners) – Layout only in XML – No assignment of handlers in XML res/layout/activity_main.xml src/com.mystuff/Main_Activity.java public class SomeClass extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button b = (Button)findViewById(R.id.button_id); b.setOnClickListener(new SomeHandler()); } private class SomeHandler implements OnClickListener { @Override public void onClick(View clickedButton) { doSomething(...); } }} <?xml version="1.0" encoding="utf-8"?> <LinearLayout …> <TextView … /> <Button … given IDs only in XML/> </LinearLayout> 8/14/2013 21 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf The “Say Hello App” using The Three Approaches 8/14/2013 22 Say Hello Application • All three approaches will be used to write an Android program: – Has one button • “Show Greeting” – The Greeting: prints “Hello from Android” • The three approaches will be simulated on the Atrix 2 Virtual Device 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 23 Java Based Layout 8/14/2013 24 PROs and CONs • Approach – Use Java to define Strings, lay out window, create GUI controls, and assign event handlers. • Advantages – Familiar to Java desktop developers. Like approach used for Swing, SWT, and AWT. – Good for layouts that are dynamic (i.e., that change based on program logic). • Disadvantages – Harder to maintain (arguable, but general consensus) – Works poorly with internationalization – Not generally recommended except for dynamic layouts • But still acceptable for App Store. Whatever works best for your programmers and your app. No code police. 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 25 Java Code • Java-code1 – Main Activity Class – Has the onCreate() method – Defines • • • • 8/14/2013 Buttons Text windows Layout And assigns listeners public class SayHelloJava extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); String appName = "SayHello Application"; String windowText = "Press the button below to receive " + "a friendly greeting from Android."; String buttonLabel = "Show Greeting"; LinearLayout mainWindow = new LinearLayout(this); mainWindow.setOrientation(LinearLayout.VERTICAL); setTitle(appName); TextView label = new TextView(this); label.setText(windowText); mainWindow.addView(label); Button greetingButton = new Button(this); greetingButton.setText(buttonLabel); greetingButton.setOnClickListener(new Toaster()); mainWindow.addView(greetingButton); setContentView(mainWindow); } 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 26 Java Code (Event Handler Method) private class Toaster implements OnClickListener { @Override public void onClick(View clickedButton) { String greetingText = "Hello from Android!"; Toast tempMessage = Toast.makeText(SayHelloJava.this, greetingText, Toast.LENGTH_SHORT); tempMessage.show(); } } • Handler (or Listener) – Defines what the App should do when the button is clicked 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 27 XML Code <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <!-- This file is not used in the SayHelloJava example --> </LinearLayout> • The activity_main.xml file – Specifies the layout only • In this case: Linear Layout – Also coded in the onCreate Java method 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 28 The Emulator • The SayHelloJava App running on an AVD 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 29 XML Based Layout 8/14/2013 30 PROs and CONs • Approach1 – Use XML files to define Strings, lay out window, create GUI controls, and assign event handlers. • Define layout and controls in res/layout/main.xml • Define Strings in res/values/strings.xml • Advantages1 – Easier to maintain – Can use visual layout editor in Eclipse – Standard/recommended approach (along with hybrid) • Disadvantages1 – Works poorly for dynamic layouts 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 31 More Information • res/layout/main.xml1 – Define layout and controls with XML description • <LinearLayout …> Define controls </LinearLayout> – Refer to strings (from strings.xml) with @string/string_name – Assign event handler with android:onClick • res/values/strings.xml1 – Define strings used in GUI or that might change with I18N 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 32 More Information • Java code – Refer to layout with R.layout.main – Refers to strings with getString(R.string.string_name) – Refers to controls with findViewById(R.id.some_id) • More info – http://developer.android.com/ guide/topics/ui/ declaring-layout.html 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 33 More Information Refers to layout defined in res/layout/main.xml with R.layout.main. Refers to strings defined in res/values/strings.xml with getString(R.string.string_name) Defines screen layout and GUI controls. Optionally assigns event handlers to controls. Refers to strings defined in res/values/strings.xml with @string/string_name Conventional for main file to be called main.xml, but not required. If it is foo.xml, then Java uses R.layout.foo. As we will see later, complex apps have several layout files for different screens. Defines strings that are either used in GUI controls or that might change with internationalization. 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 34 Code (res/layout/main.xml) These attributes (android:orientation, etd.) are defined in JavaDoc API for LinearLayout. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" These strings are defined in android:layout_height="match_parent"> res/values/strings.xml <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/window_text"/> <Button android:text="@string/button_label" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="showToast"/> </LinearLayout> 8/14/2013 This must be a public method in main class, have a void return type, and take a View as argument. No interface needs to be implemented, as it does with event handlers referred to in Java code. 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 35 Code (res/values/strings.xml) <?xml version="1.0" encoding="utf-8"?> app_name is used for the title of the screen. When you create the project, this name is used automatically, but it can be overridden in AndroidManifest.xml. All the rest are developerspecified names. <resources> <string name="app_name">Say Hello Application</string> <string name="window_text"> Press the button below to receive a friendly greeting from Android. </string> <string name="button_label">Show Greeting</string> <string name="greeting_text">Hello from Android!</string> </resources> main.xml refers to this with @string/greeting_text Java refers to this with getString(R.string.greeting_text) Eclipse auto-completion will recognize the names when editing other files that use them. 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 36 Java Code public class SayHelloXml extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } public void showToast(View clickedButton) { String greetingText = getString(R.string.greeting_text); Toast tempMessage = Toast.makeText(this, greetingText, Toast.LENGTH_SHORT); tempMessage.show(); } } 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 37 The Emulator • The SayHelloXML App running on an AVD It looks exactly the same as the Java based project 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 38 Hybrid Layout 8/14/2013 39 PROs and CONs • Approach – Use XML files to define Strings, lay out window, and create GUI controls. – Use Java to assign event handlers. • Advantages – Mostly same as XML-based approach – But, since event handler needs to be edited by Java programmer anyhow, often makes more sense to assign it programmatically as well. • Disadvantages – Works poorly for dynamic layouts 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 40 Code (res/layout/main.xml) <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" We define an id for the button, so android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/window_text"/> <Button android:id="@+id/greeting_button" android:text="@string/button_label" android:layout_width="match_parent" android:layout_height="wrap_content"/> that the button can be referred to in Java code with findViewById(R.id.greeting_button) </LinearLayout> 8/14/2013 We do not assign an event handler to the button, as we did in the previous example. 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 41 Code (res/values/strings.xml) <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Say Hello Application</string> <string name="window_text"> Press the button below to receive a friendly greeting from Android. </string> <string name="button_label">Show Greeting</string> <string name="greeting_text">Hello from Android!</string> </resources> No differences between XML based and the Hybrid 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 42 Java Code You must call setContentView before public class SayHelloHybrid extends Activity { calling findViewById. If you @Override call findViewById first, you public void onCreate(Bundle savedInstanceState){ get null. super.onCreate(savedInstanceState); setContentView(R.layout.main); Button greetingButton =(Button)findViewById(R.id.greeting_button); greetingButton.setOnClickListener(new Toaster()); } private class Toaster implements OnClickListener { @Override public void onClick(View clickedButton) { String greetingText = getString(R.string.greeting_text); Toast tempMessage = Toast.makeText(SayHelloHybrid.this, greetingText, Toast.LENGTH_SHORT); tempMessage.show(); } }} 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 43 The Emulator • The SayHelloHybrid App running on an AVD It also looks exactly the same as the Java based project and the XML based project 8/14/2013 1: http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Programming-Basics.pdf 44 Summary • Looked at the basic program structure – In general – Java-based layout – XML-based layout – Hybrid layout • It doesn’t really matter which structure you use unless – Specified by the company – Dynamic GUIs (use Java only) 8/14/2013 1: http://courses.coreservlets.com 45