Download MiniWorkShop.1hr

Can be viewed at:
http://web.fscj.edu/Janson/cis2930/MiniWorkShop.1hr.ppt
Mobile Computing
Overview
1
Copyright 2014 by Janson Industries
Why Mobile?

In Jan 2014 mobile phone apps
overtook PCs as the most
popular method of accessing the
WWW
2
Copyright 2014 by Janson Industries
Why Mobile?

Recently mobile apps overtook desktops
3
Copyright 2014 by Janson Industries
PC Sales

Meanwhile, smartphone
adoption was up 39%
4
Copyright 2014 by Janson Industries
IoT - Internet of Things

Not just phones
 Connected
sensors, devices and
objects


Installing sensors on water
pipes, parking meters, etc. for
more efficient use
Beacons in stores
 Track
customers in store and offer
location based deals
Copyright 2014 by Janson Industries
5
Why Android?




Did I mention 700,000 new
devices a day?
Reports say Android has over
50% of US market
Open source (aka Free)
Android Market not as restrictive
as some other stores
6
Copyright 2014 by Janson Industries
Why Android?
Top Five Smartphone Operating Systems, Worldwide Shipments,
and Market Share, 2014Q2 (Units in Millions)
Operating
System
2Q14
Shipment
Volume
Android
2Q14
Market
Share
2Q13
Shipment
Volume
2Q13
Market
Share
2Q14/2Q1
3 Growth
255.3
84.7%
191.5
79.6%
33.3%
35.2
11.7%
31.2
13.0%
12.7%
Windows Phone
7.4
2.5%
8.2
3.4%
-9.4%
BlackBerry
1.5
0.5%
6.7
2.8%
-78.0%
Others
1.9
0.6%
2.9
1.2%
-32.2%
301.3
100%
240.5
100%
25.3%
iOS
Total
7
Copyright 2014 by Janson Industries
What is Android


An open source linux based
operating system for mobile
devices
Development is primarily done
with a customized version of
java
C
and C++ supported
 Google App Inventor
 VE
for beginners
 Cross
platform development tools
 PhoneGap,
Copyright 2014 by Janson Industries
Rhomobile, appMobi
8
Android Concepts
▀
Screens/windows defined with
XML and are comprised of views
A
button, edittext, textview, etc. are
all considered views
▀
Applications comprised of
activities
 Activities
can display and retrieve
screens/windows and their
components
9
Copyright 2014 by Janson Industries
Android Concepts
▀
Eclipse with Android plug in is
the most popular IDE
 Lots
of tools: emulator, syntax
checker, logcat
▀
Initially creates a very specific
structure for applications
 Not
very java-novice friendly
 Will
ignore as much as possible
10
Copyright 2014 by Janson Industries
Getting Started with Android
▀
Need a java JDK
 Contains
all the java commands,
compiler, and more
▀
Need the Android SDK
 Unique
functionality for mobile
apps
▀
▀
Copyright 2014 by Janson Industries
Need Eclipse and the Android
plugin
We have it all set up here!
11
Eclipse
▀
Has a variety of perspectives
Java,
▀
Debug, DDMS
Each perspective consists of a
unique set of functions and
views of the application
 Java
shows source code and
allows the programmer to edit it
 Debug
shows the stack trace
(logic flow) of a running app
 DDMS
Copyright 2014 by Janson Industries
allows access to the
device/emulator’s file system
12
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
13
Double
view tab to expand view and fill perspective window
Copyright
2014 byclick
Janson Industries
Eclipse Concepts
▀
All of an application’s
resources are stored in a
project
 Source
code
 Images
 XML
▀
The resources can be further
organized into folders and
packages
14
Copyright 2014 by Janson Industries
Eclipse
Project
Package
▀
▀
Folder
Package
Folder
File
Packages and folders hold
the majority of an
application’s resources
Java source code must go
into a package
15
Copyright 2014 by Janson Industries
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
16
Copyright 2014 by Janson Industries
Creating an Application
▀
Click File, New and then Project
▀
Select Android Project
▀
Give the :
 Project,
package, activity and
application names
 Specify
a build target
17
Copyright 2014 by Janson Industries
Click File, New, and Project then expand Android, select Android
Application Project and click Next
18
Copyright 2014 by Janson Industries
Initial new app Window, must enter…
19
Copyright 2014 by Janson Industries
20
Copyright 2014 by Janson Industries
21
Copyright 2014 by Janson Industries
22
Copyright 2014 by Janson Industries
23
Copyright 2014 by Janson Industries
Creating an Application

Eclipse will create the
 Project
 Packages
and folders
 Files

It even creates a working
application
 In
a file called MainActivity.java
 File stored in a package called
com.example.howdyproj in source
folder src
24
Copyright 2014 by Janson Industries
To Run an Application




In Package Explorer, expand
HowdyProj, src, &
com.example.howdyproj
Select MainActivity by clicking it
Click the run button (green circle
with white arrow head)
Select Android Application and
click OK
25
Copyright 2014 by Janson Industries
26
Copyright 2014 by Janson Industries
You have to have a phone emulator (aka Android Virtual Device) and
you may have to create it
27
Copyright 2014 by Janson Industries
28
Copyright 2014 by Janson Industries
29
Copyright 2014 by Janson Industries
Specify a name and accept the default values
30
Copyright 2014 by Janson Industries
31
Copyright 2014 by Janson Industries
32
Copyright 2014 by Janson Industries
To Run an Application



First time will take a while
Emulator must configure itself
and will launch
The emulator is displayed
33
Copyright 2014 by Janson Industries
34
Copyright 2014 by Janson Industries
Go back and close the Manager window
35
Copyright 2014 by Janson Industries
Click the “Choose a running Android device” and select the emulator,
click OK
36
Copyright 2014 by Janson Industries
37
Copyright 2014 by Janson Industries
How Does It Work


The generated application is
pretty complicated and requires a
lot of Java knowledge
Let’s learn a little about Java,
then some XML, tweak the app,
and then modify it for input and
output
38
Copyright 2014 by Janson Industries
Activity Classes

Runnable java pgms:
public class HowdyActivity extends Activity {


Also comments (non-executable
statements) preceded by //
Consists of many methods
(program subsections)
 By
default onCreate method run
the first time the app is run
39
Copyright 2014 by Janson Industries
package com.example.howdyproj;
import
import
import
import
import
android.os.Bundle;
android.app.Activity;
android.view.Menu;
android.view.MenuItem;
android.support.v4.app.NavUtils;
Putting It All
Together
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;
}
}Copyright 2014 by Janson Industries
40
Android online documentation at:
http://developer.android.com/reference/packages.html
41
Copyright 2014 by Janson Industries
To find info about a class, start to enter text and a list of classes will
be displayed
42
Copyright 2014 by Janson Industries
Resources
▀
Are other things that comprise
the Android app
 Pictures
 Values
 Text
files
 Screen
▀
definitions
Screen definitions are defined
with XML
43
Copyright 2014 by Janson Industries
XML
▀
Extensible Markup Language
 Basically
▀
Can do a lot more than just
layouts
 As
▀
the duct tape of apps
you will see if you take the class
Like HTML comprised mostly of
paired tags
44
Copyright 2014 by Janson Industries
Screen Definition


Stored in a separate file in
res/layout
All GUI component definitions
are within the layout tags
45
Copyright 2014 by Janson Industries
Layouts

Lots of different kinds
 GridLayout,
AbsoluteLayout,
RelativeLayout

A LinearLayout organizes the
screen into a series of rows or
columns
46
Copyright 2014 by Janson Industries
LinearLayout

In the start tag must identify the
XML name space (xmlns)
 The
location of predefined XML
elements and attributes
 i.e.
The name space contains the
definition of a button, text view, etc.

Also, gives the namespace an
alias. Eg:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 The
Copyright 2014 by Janson Industries
alias is android
47
LinearLayout


The screen definition can now
use any of the attributes or
elements in the namespace
For example, the layout’s
 Orientation
 Width
 Height
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
48
Copyright
> 2014 by Janson Industries
LinearLayout



Vertical means the screen will be
laid out with horizontal bands
from top to bottom:
Fill parent means it will take up
the whole screen width or height
Need an end LinearLayout tag
</LinearLayout>
Copyright 2014 by Janson Industries
49
GUI Components


All the GUI components (aka
views, widgets, or controls) go
between the start and end layout
tags
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"
/>
50
Copyright 2014 by Janson Industries
GUI Components


Once again, width and height
declared this time based on layout
size (i.e. parent)
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"
/>
51
Copyright 2014 by Janson Industries
GUI Components

Putting all the XML together
<?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"
>
<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"
/>
</LinearLayout>
52
Copyright 2014 by Janson Industries
GUI



As mentioned, screen definition
must be stored in a file in
res/layout
Create a file called example1.xml
in res/layout
Enter the XML
53
Copyright 2014 by Janson Industries
File , New, File then select the layout folder
54
Copyright 2014 by Janson Industries
May initially bring up a Graphical Layout editor – not very good
Switch to source code view
55
Copyright 2014 by Janson Industries
Paste slide 52's XML over what's there, error icons may be displayed
Save source code and error icons will be removed
56
Copyright 2014 by Janson Industries
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.
Have to update the application to display example1.xml
57
Copyright 2014 by Janson Industries
GUI

Will create a method called
onStart to display the new layout
with the following statement
setContentView(R.layout.example1);

As the name implies,
setContentView displays the
screen
58
Copyright 2014 by Janson Industries
GUI

Create onStart as follows
protected void onStart(){
super.onStart();
setContentView(R.layout.example1);
}
59
Copyright 2014 by Janson Industries
Double click MainActivity to open and paste the onStart code
60
Copyright 2014 by Janson Industries
Run the app
Now you do it!
61
Copyright 2014 by Janson Industries
Input To Application



A little more complicated
An EditText view allows user
to enter and change text
EditText content can be read
by app
<EditText android:id=”@+id/userName”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent” />
62
Copyright 2014 by Janson Industries
Input To App

Width and height the same as
before

id is new attribute

Defines a name for the view
 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” />
63
Copyright 2014 by Janson Industries
Input to App

example1.xml - change TextView also
<?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"
>
<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" />
Copyright 2014 </LinearLayout>
by Janson Industries
64
We changed the height so that the EditText doesn’t fill the whole
screen from top to bottom
Now when run looks like this
65
Copyright 2014 by Janson Industries
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" />
66
Copyright 2014 by Janson Industries
XML File
▀
Us XML to define a button and
method to call when clicked
67
Copyright 2014 by Janson Industries
Changes to Java Activity
▀
To read the EditText, need to:
 Import
the EditText class
► import
 Define
android.widget.EditText;
an EditText class level variable
► EditText
name;
 Retrieve
the EditText’s (userName)
location in memory and assign it to name
► name
=
(EditText)findViewById(R.id.userName);
 Retrieve
the text
► name.getText();
• EditText has a method called getText
68
Copyright 2014 by Janson Industries
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("");
}
69
Copyright 2014 by Janson Industries
70
Copyright 2014 by Janson Industries
Run app, notice new text and the button
Enter a name and click the Submit button
71
Copyright 2014 by Janson Industries
New msg displayed and name blanked out
72
Copyright 2014 by Janson Industries
Saving Your App
▀
▀
Export the project to thumb drive
In the Package Explorer, select
the project then
 File,
▀
Export
At export window
 Expand
 Select
 Click
Copyright 2014 by Janson Industries
General
File System
Next
73
74
Copyright 2014 by Janson Industries
Make sure project checkbox is checked
Specify location and click Finish
75
Copyright 2014 by Janson Industries
View Properties
▀
Instead of setting a view’s width
to fill_parent, can specify
wrap_content
android:layout_width="wrap_content"
▀
Since the view doesn’t fill the
parent, can specify the gravity
(justification)
android:layout_gravity="center"
76
Copyright 2014 by Janson Industries
View Properties
77
Copyright 2014 by Janson Industries
EditText and Button sizes dictated by its text content
78
Copyright 2014 by Janson Industries
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
 px
- Pixels
 in – Inches
 mm - Millimeters
79
Copyright 2014 by Janson Industries
80
Copyright 2014 by Janson Industries
81
Copyright 2014 by Janson Industries
Input Accepting Views
▀
digits – only specified numeric
characters can be entered (digits=“135”)
▀
hint – defines text for view when empty
▀
inputType
 textAutoCorrect
 number
 phone
–corrects some misspellings
– only numeric characters allowed
- only phone keypad characters allowed
 date
– only date chars (numbers, /, ., -)
 time
– only time chars (numbers, :, a, p, m)
82
Copyright 2014 by Janson Industries
83
Copyright 2014 by Janson Industries
84
Copyright 2014 by Janson Industries
Enter adn and then…
85
Copyright 2014 by Janson Industries
… a space
86
Copyright 2014 by Janson Industries
87
Copyright 2014 by Janson Industries
Initial display, typing in and
88
Copyright 2014 by Janson Industries
All letters converted to numbers according to a phone keypad
No delete, only backspace allowed
89
Copyright 2014 by Janson Industries
However none of these options can prevent all nonsense input
90
Copyright 2014 by Janson Industries
Interested in apps with…
▀
More GUI
▀
Graphics
▀
Games
▀
Music
91
Copyright 2014 by Janson Industries
Interested in apps with…
▀
Gestures
▀
Databases
▀
Maps
▀
Ads
92
Copyright 2014 by Janson Industries
Spring 2015
▀
CIS2930
▀
Reference # 414625
▀
Tuesdays 6 – 9 pm, B session
▀
B107
93
Copyright 2014 by Janson Industries