1. 1 Mobile Computing Mobile First (formerly Worklight) Copyright 2015 by Janson Industries

2. 2 Objectives ▀ Explain how to download and install u Eclipse and the Android plugin u MobileFirst Platform Studio

3. Copyright 2015 by Janson Industries 3 Get Eclipse from: http://www.eclipse.org/ Click to start download process

4. Copyright 2015 by Janson Industries 4 Scroll down a little and for FSCJ machines select 32 bit

5. Copyright 2015 by Janson Industries 5 Scroll down and click

6. Copyright 2015 by Janson Industries 6 Specify where to save then click Save

7. Copyright 2015 by Janson Industries 7 Right click the file, select Extract All, then click Extract button

8. Copyright 2015 by Janson Industries 8 Drill into folder, then into eclipse folder, double click eclipse.exe then click Run button

9. Copyright 2015 by Janson Industries 9 Specify a workspace

10. Copyright 2015 by Janson Industries 10 Get standalone Android SDK ADT Bundle from: http://developer.android.com/sdk/index.html Click to download

11. Copyright 2015 by Janson Industries 11 Scroll down, agree to Terms, select 32 bit Save to MobileFirst folder

12. Copyright 2015 by Janson Industries 12 Double click to start installing the sdk You should have a file called Installer_rxx.x.x-windows.exe

13. Copyright 2015 by Janson Industries 13 Click Next

14. Copyright 2015 by Janson Industries 14 It should find the JDK, click Next

15. Copyright 2015 by Janson Industries 15 Make your choice, click Next

16. Copyright 2015 by Janson Industries 16 Specify where to install and make note of location – will have to specify later

17. Copyright 2015 by Janson Industries 17 Specify Start menu folder name

18. Copyright 2015 by Janson Industries 18 Next

19. Copyright 2015 by Janson Industries 19 Finish

20. Copyright 2015 by Janson Industries 20 Select some versions and Extras, click Install

21. Copyright 2015 by Janson Industries 21 Accept license, click Install

22. Copyright 2015 by Janson Industries 22 Installing ADT ▀ When finished u Close the SDK manager ▀ Need to install the ADT (Android Development Tools) plug in u Close the Welcome pane u Click Help then Install New Software u Click Add

23. Copyright 2015 by Janson Industries 23 Specify https://dl-ssl.google.com/android/eclipse/

24. Copyright 2015 by Janson Industries 24 Select Developer Tools and click Next

25. Copyright 2015 by Janson Industries 25 Click Next

26. Copyright 2015 by Janson Industries 26 Accept license then click Finish Restart Eclipse

27. Copyright 2015 by Janson Industries 27 Android Set Up ▀ When prompted, restart, After Eclipse restarted, click Window, then Android SDK Manager u If the Android SDK Manager / AVD Manager is not visible in the Window menu, click ► Window ► Customize Perspective ► Command Groups Availability ► Select the Android SDK and AVD Manager check boxes.

28. Copyright 2015 by Janson Industries 28 Click OK

29. Copyright 2015 by Janson Industries 29 If you get this, click Yes

30. Copyright 2015 by Janson Industries 30 Close the Welcome window then click Help and Eclipse Marketplace

31. Copyright 2015 by Janson Industries 31 Type MobileFirst then click Go

32. Copyright 2015 by Janson Industries 32 Click Install for MobileFirst Studio

33. Copyright 2015 by Janson Industries 33 Click Confirm

34. Copyright 2015 by Janson Industries 34 Accept the license and click Finish then Restart eclipse

35. Copyright 2015 by Janson Industries 35 Click MobileFirst menu drop down arrow and select MobileFirst Project

36. Copyright 2015 by Janson Industries 36 Specify project name

37. Copyright 2015 by Janson Industries 37 Specify app name, click Finish and click Yes to the switch to the Design perspective prompt

38. Copyright 2015 by Janson Industries 38 MobileFirst creates default Hello app Uses JavaScript, html, xml

39. Copyright 2015 by Janson Industries 39 We'll make text change, insert image & Save (Have to make text change in source not design & import the image into image folder)

40. Copyright 2015 by Janson Industries 40 Generate native environments: click MF drop down arrow, then MobileFirst Environment Specify Proj & App name and environment(s) (i.e. Android, iPad, etc.)

41. Copyright 2015 by Janson Industries 41 A new folder will be added for each environment in the application folder in Apps Also, a native Android project generated

42. Copyright 2015 by Janson Industries 42 How Does It Work ▀ MF builds the app with javascript and html u A lot of other tools, phonegap for example, do it this way also ▀ When a native env generated u MF creates needed native pieces u Keeps as much of MF resources as possible ► In android, html and js still used with a minimum of java code

43. Copyright 2015 by Janson Industries 43 This is the apps java code

44. Copyright 2015 by Janson Industries 44 How Does It Work In Android ▀ MF builds the required Java activity (HowdyMF) ▀ Uses an object called WL to get html page and superclass loads it ▀ Can now run the Android version of app in emulator or on an Android device

45. Copyright 2015 by Janson Industries 45 Right click Android project, Run As, Android Application

46. Copyright 2015 by Janson Industries 46 Voila

47. Copyright 2015 by Janson Industries 47 To add GUI components, when creating the project/app, Configure JavaScript Libraries

48. Copyright 2015 by Janson Industries 48 There are 3 options for defining GUI. jQuery looked like the easiest (and is very popular)

49. Copyright 2015 by Janson Industries 49 Need to download jQuery from: http://jquerymobile.com/download/

50. Copyright 2015 by Janson Industries 50 Download the zip file

51. Copyright 2015 by Janson Industries 51 Then specify the zip file location… … select all the resources and click Finish

52. Copyright 2015 by Janson Industries 52 Click Finish again

53. Copyright 2015 by Janson Industries 53 Now you can drag and drop HTML GUI components/tags

54. Copyright 2015 by Janson Industries 54 GUI ▀ To get the components to work have to: u Add html/javascript(s) to the web page u Tie to the component(s)

55. Copyright 2015 by Janson Industries 55 Generated page pretty simple

56. Copyright 2015 by Janson Industries 56 Changed text and added a link to a dialog box

57. Copyright 2015 by Janson Industries 57 Generate the Android version

58. Copyright 2015 by Janson Industries 58 Run the generated Android project

59. Copyright 2015 by Janson Industries 59 Click the link

60. Copyright 2015 by Janson Industries 60 Could use some better formatting

61. Copyright 2015 by Janson Industries 61 Advs and Disadvs ▀ Advs u Faster app development for multiple platforms u Single set of skills (js, html, css) rather then many skill sets (java/xml, objective-c, c#) one for each platform

62. Copyright 2015 by Janson Industries 62 Advs and Disadvs ▀ Disadvs u Apps not as efficient as ones written in native languages u Can't take advantage of unique aspects of a particular platform