1. 1 Mobile Computing Overview Copyright 2014 by Janson Industries Can be viewed at: http://web.fscj.edu/Janson/cis2930/MiniWorkShop.1hr.ppt

2. Copyright 2014 by Janson Industries 2 Why Mobile? n In Jan 2014 mobile phone apps overtook PCs as the most popular method of accessing the WWW

3. Copyright 2014 by Janson Industries 3 Why Mobile? n Recently mobile apps overtook desktops

4. Copyright 2014 by Janson Industries 4 PC Sales n Meanwhile, smartphone adoption was up 39%

5. Copyright 2014 by Janson Industries 5 IoT - Internet of Things n Not just phones u Connected sensors, devices and objects n Installing sensors on water pipes, parking meters, etc. for more efficient use n Beacons in stores u Track customers in store and offer location based deals

6. Copyright 2014 by Janson Industries 6 Why Android? n Did I mention 700,000 new devices a day? n Reports say Android has over 50% of US market n Open source (aka Free) n Android Market not as restrictive as some other stores

7. Copyright 2014 by Janson Industries 7 Why Android? Operating System 2Q14 Shipment Volume 2Q14 Market Share 2Q13 Shipment Volume 2Q13 Market Share 2Q14/2Q1 3 Growth Android255.384.7%191.579.6%33.3% iOS35.211.7%31.213.0%12.7% Windows Phone7.42.5%8.23.4%-9.4% BlackBerry1.50.5%6.72.8%-78.0% Others1.90.6%2.91.2%-32.2% Total301.3100%240.5100%25.3% Top Five Smartphone Operating Systems, Worldwide Shipments, and Market Share, 2014Q2 (Units in Millions)

8. Copyright 2014 by Janson Industries 8 What is Android n An open source linux based operating system for mobile devices n Development is primarily done with a customized version of java u C and C++ supported u Google App Inventor F VE for beginners u Cross platform development tools F PhoneGap, Rhomobile, appMobi

9. Copyright 2014 by Janson Industries 9 Android Concepts ▀ Screens/windows defined with XML and are comprised of views u A button, edittext, textview, etc. are all considered views ▀ Applications comprised of activities u Activities can display and retrieve screens/windows and their components

10. Copyright 2014 by Janson Industries 10 Android Concepts ▀ Eclipse with Android plug in is the most popular IDE u Lots of tools: emulator, syntax checker, logcat ▀ Initially creates a very specific structure for applications u Not very java-novice friendly u Will ignore as much as possible

11. Copyright 2014 by Janson Industries 11 Getting Started with Android ▀ Need a java JDK u Contains all the java commands, compiler, and more ▀ Need the Android SDK u Unique functionality for mobile apps ▀ Need Eclipse and the Android plugin ▀ We have it all set up here!

12. Copyright 2014 by Janson Industries 12 Eclipse ▀ Has a variety of perspectives u Java, Debug, DDMS ▀ Each perspective consists of a unique set of functions and views of the application u Java shows source code and allows the programmer to edit it u Debug shows the stack trace (logic flow) of a running app u DDMS allows access to the device/emulator’s file system

13. Copyright 2014 by Janson Industries 13 Perspective indicated in upper right hand corner Java Perspective window consists of four panes Panes contain views Views indicated by tabs at top of pane, switch view by clicking tab Resize panes by clicking and dragging borders Double click view tab to expand view and fill perspective window

14. Copyright 2014 by Janson Industries 14 Eclipse Concepts ▀ All of an application’s resources are stored in a project u Source code u Images u XML ▀ The resources can be further organized into folders and packages

15. Copyright 2014 by Janson Industries 15 Project Package Folder Package Folder File Eclipse ▀ Packages and folders hold the majority of an application’s resources ▀ Java source code must go into a package

16. Copyright 2014 by Janson Industries 16 Android Java ▀ An Android application’s programs are called activities ▀ Files with an extension of.java hold an activity’s source code ▀ To create an activity you have to have a project and a package to put it in

17. Copyright 2014 by Janson Industries 17 Creating an Application ▀ Click File, New and then Project ▀ Select Android Project ▀ Give the : u Project, package, activity and application names u Specify a build target

18. Copyright 2014 by Janson Industries 18 Click File, New, and Project then expand Android, select Android Application Project and click Next

19. Copyright 2014 by Janson Industries 19 Initial new app Window, must enter…

20. Copyright 2014 by Janson Industries 20

21. Copyright 2014 by Janson Industries 21

22. Copyright 2014 by Janson Industries 22

23. Copyright 2014 by Janson Industries 23

24. Copyright 2014 by Janson Industries 24 Creating an Application n Eclipse will create the u Project u Packages and folders u Files n It even creates a working application u In a file called MainActivity.java u File stored in a package called com.example.howdyproj in source folder src

25. Copyright 2014 by Janson Industries 25 To Run an Application n In Package Explorer, expand HowdyProj, src, & com.example.howdyproj n Select MainActivity by clicking it n Click the run button (green circle with white arrow head) n Select Android Application and click OK

26. Copyright 2014 by Janson Industries 26

27. Copyright 2014 by Janson Industries 27 You have to have a phone emulator (aka Android Virtual Device) and you may have to create it

28. Copyright 2014 by Janson Industries 28

29. Copyright 2014 by Janson Industries 29

30. Copyright 2014 by Janson Industries 30 Specify a name and accept the default values

31. Copyright 2014 by Janson Industries 31

32. Copyright 2014 by Janson Industries 32

33. Copyright 2014 by Janson Industries 33 To Run an Application n First time will take a while n Emulator must configure itself and will launch n The emulator is displayed

34. Copyright 2014 by Janson Industries 34

35. Copyright 2014 by Janson Industries 35 Go back and close the Manager window

36. Copyright 2014 by Janson Industries 36 Click the “Choose a running Android device” and select the emulator, click OK

37. Copyright 2014 by Janson Industries 37

38. Copyright 2014 by Janson Industries 38 How Does It Work n The generated application is pretty complicated and requires a lot of Java knowledge n Let’s learn a little about Java, then some XML, tweak the app, and then modify it for input and output

39. Copyright 2014 by Janson Industries 39 Activity Classes n Runnable java pgms: n Also comments (non-executable statements) preceded by // n Consists of many methods (program subsections) u By default onCreate method run the first time the app is run public class HowdyActivity extends Activity {

40. Copyright 2014 by Janson Industries package com.example.howdyproj; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.MenuItem; import android.support.v4.app.NavUtils; public class HowdyActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_howdy); } public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_howdy, menu); return true; } 40 Putting It All Together

41. Copyright 2014 by Janson Industries 41 Android online documentation at: http://developer.android.com/reference/packages.html

42. Copyright 2014 by Janson Industries 42 To find info about a class, start to enter text and a list of classes will be displayed

43. Copyright 2014 by Janson Industries 43 Resources ▀ Are other things that comprise the Android app u Pictures u Values u Text files u Screen definitions ▀ Screen definitions are defined with XML

44. Copyright 2014 by Janson Industries 44 XML ▀ Extensible Markup Language u Basically the duct tape of apps ▀ Can do a lot more than just layouts u As you will see if you take the class ▀ Like HTML comprised mostly of paired tags

45. Copyright 2014 by Janson Industries 45 Screen Definition n Stored in a separate file in res/layout n All GUI component definitions are within the layout tags

46. Copyright 2014 by Janson Industries 46 Layouts n Lots of different kinds u GridLayout, AbsoluteLayout, RelativeLayout n A LinearLayout organizes the screen into a series of rows or columns

47. Copyright 2014 by Janson Industries 47 LinearLayout n In the start tag must identify the XML name space (xmlns) u The location of predefined XML elements and attributes F i.e. The name space contains the definition of a button, text view, etc. n Also, gives the namespace an alias. Eg: u The alias is android <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

48. Copyright 2014 by Janson Industries 48 LinearLayout n The screen definition can now use any of the attributes or elements in the namespace n For example, the layout’s u Orientation u Width u Height <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" >

49. Copyright 2014 by Janson Industries 49 LinearLayout n Vertical means the screen will be laid out with horizontal bands from top to bottom: n Fill parent means it will take up the whole screen width or height n Need an end LinearLayout tag

50. Copyright 2014 by Janson Industries 50 GUI Components n All the GUI components (aka views, widgets, or controls) go between the start and end layout tags n A TextView displays static text <TextView android:layout_width="fill_parent" android:layout_height=“fill_parent" android:text="This is an example of some static text that is more than one line in length" />

51. Copyright 2014 by Janson Industries 51 GUI Components n Once again, width and height declared this time based on layout size (i.e. parent) n Static text defined with text attribute <TextView android:layout_width="fill_parent" android:layout_height=“fill_parent" android:text="This is an example of some static text that is more than one line in length" />

52. Copyright 2014 by Janson Industries 52 GUI Components n Putting all the XML together <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="This is an example of some static text that is more than one line in length" />

53. Copyright 2014 by Janson Industries 53 GUI n As mentioned, screen definition must be stored in a file in res/layout n Create a file called example1.xml in res/layout n Enter the XML

54. Copyright 2014 by Janson Industries 54 File, New, File then select the layout folder

55. Copyright 2014 by Janson Industries 55 May initially bring up a Graphical Layout editor – not very good Switch to source code view

56. Copyright 2014 by Janson Industries 56 Paste slide 52's XML over what's there, error icons may be displayed Save source code and error icons will be removed

57. Copyright 2014 by Janson Industries 57 Have to update the application to display example1.xml May flag the text statement with a warning. Warnings won’t stop it from working. However, defining text/strings in xml or java code is frowned on by Eclipse because of redundancy.

58. Copyright 2014 by Janson Industries 58 GUI n Will create a method called onStart to display the new layout with the following statement n As the name implies, setContentView displays the screen setContentView(R.layout.example1);

59. Copyright 2014 by Janson Industries 59 GUI n Create onStart as follows protected void onStart(){ super.onStart(); setContentView(R.layout.example1); }

60. Copyright 2014 by Janson Industries 60 Double click MainActivity to open and paste the onStart code

61. Copyright 2014 by Janson Industries 61 Run the app Now you do it!

62. Copyright 2014 by Janson Industries 62 Input To Application n A little more complicated n An EditText view allows user to enter and change text n EditText content can be read by app <EditText android:id=”@+id/userName” android:layout_width=”fill_parent” android:layout_height=”fill_parent” />

63. Copyright 2014 by Janson Industries 63 Input To App n Width and height the same as before n id is new attribute n Defines a name for the view u Need to be able to identify the view so we can read it <EditText android:id=”@+id/userName” android:layout_width=”fill_parent” android:layout_height=”fill_parent” />

64. Copyright 2014 by Janson Industries 64 Input to App n example1.xml - change TextView also <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:id="@+id/greeting" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="What is your name? " /> <EditText android:id="@+id/userName" android:layout_width="fill_parent" android:layout_height="wrap_content" />

65. Copyright 2014 by Janson Industries 65 Now when run looks like this We changed the height so that the EditText doesn’t fill the whole screen from top to bottom

66. Copyright 2014 by Janson Industries 66 Button ▀ Us XML to define a button and method to call when clicked <Button android:id="@+id/submit" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Submit" android:onClick="submitClicked" />

67. Copyright 2014 by Janson Industries 67 XML File ▀ Us XML to define a button and method to call when clicked

68. Copyright 2014 by Janson Industries 68 Changes to Java Activity ▀ To read the EditText, need to: u Import the EditText class ► import android.widget.EditText; u Define an EditText class level variable ► EditText name; u Retrieve the EditText’s (userName) location in memory and assign it to name ► name = (EditText)findViewById(R.id.userName); u Retrieve the text ► name.getText(); EditText has a method called getText

69. Copyright 2014 by Janson Industries 69 Button ▀ In activity need to define submitClicked method import android.view.View; import android.widget.EditText; import android.widget.TextView; EditText name; public void submitClicked(View v){ name = (EditText)findViewById(R.id.userName); TextView greeting = (TextView)findViewById(R.id.greeting); greeting.setText("Hi " + name.getText() + ". Nice to meet you."); name.setText(""); }

70. Copyright 2014 by Janson Industries 70

71. Copyright 2014 by Janson Industries 71 Run app, notice new text and the button Enter a name and click the Submit button

72. Copyright 2014 by Janson Industries 72 New msg displayed and name blanked out

73. Copyright 2014 by Janson Industries 73 Saving Your App ▀ Export the project to thumb drive ▀ In the Package Explorer, select the project then u File, Export ▀ At export window u Expand General u Select File System u Click Next

74. Copyright 2014 by Janson Industries 74

75. Copyright 2014 by Janson Industries 75 Make sure project checkbox is checked Specify location and click Finish

76. Copyright 2014 by Janson Industries 76 View Properties ▀ Instead of setting a view’s width to fill_parent, can specify wrap_content ▀ Since the view doesn’t fill the parent, can specify the gravity (justification) android:layout_width="wrap_content" android:layout_gravity="center"

77. Copyright 2014 by Janson Industries 77 View Properties

78. Copyright 2014 by Janson Industries 78 EditText and Button sizes dictated by its text content

79. Copyright 2014 by Janson Industries 79 View Attributes ▀ height – view set to a specific size ▀ textColor ▀ textSize ▀ textStyle - (bold, italic) ▀ width – view set to specific size ▀ Sizes can be specified many ways u px - Pixels u in – Inches u mm - Millimeters

80. Copyright 2014 by Janson Industries 80

81. Copyright 2014 by Janson Industries 81

82. Copyright 2014 by Janson Industries 82 Input Accepting Views ▀ digits – only specified numeric characters can be entered (digits=“135”) ▀ hint – defines text for view when empty ▀ inputType u textAutoCorrect – corrects some misspellings u number – only numeric characters allowed u phone - only phone keypad characters allowed u date – only date chars (numbers, /,., -) u time – only time chars (numbers, :, a, p, m)

83. Copyright 2014 by Janson Industries 83

84. Copyright 2014 by Janson Industries 84

85. Copyright 2014 by Janson Industries 85 Enter adn and then…

86. Copyright 2014 by Janson Industries 86 … a space

87. Copyright 2014 by Janson Industries 87

88. Copyright 2014 by Janson Industries 88 Initial display, typing in and

89. Copyright 2014 by Janson Industries 89 All letters converted to numbers according to a phone keypad No delete, only backspace allowed

90. Copyright 2014 by Janson Industries 90 However none of these options can prevent all nonsense input

91. Copyright 2014 by Janson Industries 91 Interested in apps with… ▀ More GUI ▀ Graphics ▀ Games ▀ Music

92. Copyright 2014 by Janson Industries 92 ▀ Gestures ▀ Databases ▀ Maps ▀ Ads Interested in apps with…

93. Copyright 2014 by Janson Industries 93 ▀ CIS2930 ▀ Reference # 414625 ▀ Tuesdays 6 – 9 pm, B session ▀ B107 Spring 2015