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

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

Copyright 2015 by Janson Industries 3 Get Eclipse from: Click to start download process

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

Copyright 2015 by Janson Industries 5 Scroll down and click

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

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

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

Copyright 2015 by Janson Industries 9 Specify a workspace

Copyright 2015 by Janson Industries 10 Get standalone Android SDK ADT Bundle from: Click to download

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

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

Copyright 2015 by Janson Industries 13 Click Next

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

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

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

Copyright 2015 by Janson Industries 17 Specify Start menu folder name

Copyright 2015 by Janson Industries 18 Next

Copyright 2015 by Janson Industries 19 Finish

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

Copyright 2015 by Janson Industries 21 Accept license, click Install

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

Copyright 2015 by Janson Industries 23 Specify

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

Copyright 2015 by Janson Industries 25 Click Next

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

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.

Copyright 2015 by Janson Industries 28 Click OK

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

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

Copyright 2015 by Janson Industries 31 Type MobileFirst then click Go

Copyright 2015 by Janson Industries 32 Click Install for MobileFirst Studio

Copyright 2015 by Janson Industries 33 Click Confirm

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

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

Copyright 2015 by Janson Industries 36 Specify project name

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

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

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)

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.)

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

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

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

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

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

Copyright 2015 by Janson Industries 46 Voila

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

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

Copyright 2015 by Janson Industries 49 Need to download jQuery from:

Copyright 2015 by Janson Industries 50 Download the zip file

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

Copyright 2015 by Janson Industries 52 Click Finish again

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

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)

Copyright 2015 by Janson Industries 55 Generated page pretty simple

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

Copyright 2015 by Janson Industries 57 Generate the Android version

Copyright 2015 by Janson Industries 58 Run the generated Android project

Copyright 2015 by Janson Industries 59 Click the link

Copyright 2015 by Janson Industries 60 Could use some better formatting

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

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