creating a simple app

Professur Schaltkreis-und Systementwurf

www.tu-chemnitz.de

Software Environments of Smartphone Applications

Exercise/Practice

1

http://www.tu-chemnitz.de


Chemnitz Universityof Technology

Introduction‣ The course Software Environments of Smartphone

Applications (SESA) provides an overview of the current smartphone market. It depicts the concepts of the operating systems and introduces to the development environments and philosophies.

‣ As an example, the Android OS and the development of Android applications is presented in depth.

‣ The course consists of an exercise and a practice session.

‣ The examination is a 20 minutes presentation of a self developed smartphone application.

2

2

http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/sesa_pr.html





Prerequisites for Attending

3

‣ What do I do?‣ Depicts the concepts of the operating systems‣ Introduce the development environments and philosophies

‣ What else do I do?‣ Introduce Android environment in depth‣ Show some basic programming philosophies for Android‣ Lend you a hand while you develop your application

‣ What do I not do?‣ Teach you the english language‣ Teach you the basics of the Java programming language‣ Implement your application for you

3


Prerequisites for Attending

4

‣What do you do?‣ Have programming skills beyond those of „Hello

World“‣Or have a deep personal interest in learning the

Java programming language‣Have a deep personal interest in learning the

Android dependent part of the Java programming language

‣Regularly attend the exercise/pactise!

4


www.tu-chemnitz.de

Software Environments of Smartphone Applications

5




Smartphones‣ First devices appeared 1994 at the market

‣ Boom started with Apples first iPhone (2007)

‣ Before, RIM and Nokia dominated the market

‣ Key hardware features of today‘s smartphones‣ High resolution touch display (mostly capacitive displays)‣ Fast processor (up to 2 GHz), various architectures‣ Plenty of RAM (512MB and more)‣ Gigabytes of Flash‣ One or two high quality cameras‣ Several sensors (acceleration, rotation, GPS, ...)

6

HTC Sensation, htc.com, October 01, 2012

6


Smartphones‣Key software features‣ Well defined, open and mostly free API‣ Well developed, mostly free development

environments‣ App development is open to anyone

‣Applications (Apps)‣ Applications extend the functionality of the OS‣ Applications are often OS specific (look, feel, API)‣ App Stores offers access to applications and

contents (books/magazines, music, movies)

7

Sony Xperia S, Chip.de, October 01, 2012

7


Operating Systems

8 IDC Worldwide Mobile Phone Tracker, May 24, 2012

‣Lots of different operating systems‣ Biggest ones are Android and iOS

‣Former leader Symbian (up to 75%) lost its importance

‣Windows Phone still lags behind

‣RIM is also not able to follow

‣Other Linux based solutionsdo not gain importance, yet

8


Ecosystems‣The „Ecosystem“ is the sum of‣ The vendor support for‣ The smartphone hardware‣ The smartphone OS

‣ The available App-Store(s) and contents‣ The development environment‣ The hardware and software the phone is (directly)

compatible with‣ e. g. hardware and software of the same vendor‣ software to integrate the phone in one‘s workflow

9

9


Smartphone Applications‣ „Apps“ - short for „Applications“‣ All kind of (end-)user software is an App‣ Currently the term is commonly used as a synonym for end user

software on smartphones

‣ Types of smartphone applications‣ OS specific apps‣ Build using the specific programming languages and tools‣ Target to a certain Phone-API and run directly on that OS‣ Often also address on special look & feel, as well as OS specific

features‣ Web-Apps‣ Build using web technologies like HTML, CSS, jQuery‣ Need a web server to be hosted‣ Can be „transformed“ to run directly on the phone

10

10


Basic Workflow

11

Idea

Specification

Resource Analysis

Implemen-tation

TestPlatform Decision

SDK Decision

Maintenance

Shop Rollout

11


Basic Workflow

12

‣ Idea

‣ Specification (first round)‣ Rough line-out, pictures, ...

‣ Resource analysis‣ Estimations for display size, computing power, ...

‣ Platform decision‣ One platform, all major platforms

‣ SDK decision‣ Specific apps or web-apps‣ Programming language

12


Basic Workflow‣ Implementation‣ Specification (second round)‣ control concept, GUI elements, ...

‣ Programming language, modularisation, ...

‣Test‣ First using the simulator(s)‣ Second using real phone(s)‣ May become very expensive due to the mass of

devices

13

13


Basic Workflow

14

‣Shop rollout‣ Decision of the price‣ Advertisement‣ Shop account‣ Gate keepers, ...

‣Maintenance‣ May be very intensive in the first cycles due to

costumers feedback

14


Runtime Environments‣Hosted on a web server

‣Run in the phones web browser / browser environment‣ Is therefore restricted to the browser capabilities‣ Not necessarily full hardware access (filesystem,

phone data, sensors, cameras, ...)‣ Speed limitations

‣Should emulate the phones elements and specific look

‣Should follow the UI guidelines of the target OS15

15


Runtime Environments‣Run natively in the phones app environment‣ Sandbox (iOS)‣ Java VM / Dalvik VM‣ Silverlight / XNA (Windows Phone)

‣Restricted by sandboxing / virtualization

‣Access to hardware, data, ... through a OS dependent API

‣Look & Feel predefined / affected by OS dependent API

16

16


Specific SDKs‣Applications form one of the most important

selling arguments

‣Therefore all vendors offer a SDK for their mobile OS‣ Apple: Xcode‣ Android: Android SDK (to be used with Eclipse)‣ Windows 8: Visual Studio 2012‣ RIM: BlackBerry Specific SDK

‣The SDKs also offer Simulators

17

17


Apples Xcode

18Source: developer.apple.com

18


Google Android SDK

19

‣Based on Eclipse

19


Windows 8

20Source: http://www.ginktage.com/2012/08/creating-windows-8-app/

20

http://www.ginktage.com/2012/08/creating-windows-8-app/





3rd Party SDKs

‣Several 3rd party IDEs exist with different goals

‣More graphical approaches for non-programmers

‣Specific app development with other languages

‣Some even provide platform independent specific app development

‣Conversion of web-app to stand alone app21

21


3rd Party SDKs

22

Codea Corona Lazarus LiveCode RealStudio RhoMobile Suite Unity

Vendor Two Lives Left Corona Labs Lazarus

Community RunRev Realsoftware Motorola

Unity Technologies

Platform iPad OS X, Windows

OS X, Windows, Linux

OS X, Windows, Linux

OS X, Windows

OS X, Windows

OS X, Windows

Programming Language Lua Lua Object

Pascal LiveCode Realbasic Ruby Javascript, C#, Boo

Price 8 € from 199 US-$

Open Sources

from 99 US-$ from 79€ Freeware from 400

US-$

Source: heise Mac & I, Heft 07, 2012

22


www.tu-chemnitz.de

Google Android - Operating System Basics

23




Android‣Operating System for Smartphones‣ Kernel, Middelware, Applications

‣ The first commercially available phone to run Android was the HTC Dream, released on October 22, 2008.

‣ Since then Android became the most used Smartphone Operating System

‣ Therefore very heterogenous infrastructure:‣ Hundreds of devices‣ Variety of Architectures, Displays, Brandings, Versions, ...

24

24


Android Versions

25Platform Versions,Dashboards Developers Android, October 01, 2012

Android Timeline, FAQoid.com, October 01, 2012

25


Architecture

26Source: Unknown

26


Architecture

27

27


Architecture

27

The base of Android is formed by the Linux Kernel and its drivers. The kernel is the only element having direct access to the hardware. It also manages the system memory and provides interfaces for the applications to communicate with each other in a secure and fast way.

27


Architecture

27


At the second layer, also called the "Native Layer" there are system libraries which access kernel interfaces and provide services for the application framework. It is mainly written in C and runs directly on the CPU. The prominent part of this layer is the Android Runtime. It consists of the Dalvik VM and its core libraries.

27


Architecture

27



At the third layer, the Application Framework, all components run inside the Dalvik VM. Here reside services which access the libraries of the native layer and provide standardized interfaces for the Applications.

27


Architecture

27



At the third layer, the Application Framework, all components run inside the Dalvik VM. Here reside services which access the libraries of the native layer and provide standardized interfaces for the Applications.

The highest layer is where all applications live. Each applications live in its own sandbox. This means: Each application runs as a different user of the linux system. Each process has its own virtual machine and every application runs in its own process. Each application, by default, has access only to the components that it requires to do its work and no more. This creates a very secure environment in which an application cannot access parts of the system for which it is not given permission.

27


Architecture

28Source: Unknown

28


Dalvik VM

29

‣Optimized for slim devices

‣Process Virtual Machine‣ Runs as a normal application inside a host OS and

supports execution of a single process‣ Created when the process is started and destroyed

when it exits

‣ Interprets byte code, which is typically created from Java source code

‣As of Android 2.2 Dalvik is enhanced by a just-in-time-compiler to speed up execution

29


Architecture

30Source: Unknown

30


Core Libraries‣Set of basic libraries „close to the VM“

‣Three main parts‣ Dalvik VM- specific libraries‣ System info, debugging, ...

‣ Java compatibility libraries‣ Base and utility classes

‣ Third-party utility libraries‣ Like Apache HttpClient 4.0

‣Provides „more desktop like“ JRE‣ Subset of desktop JRE 1.5

31

31


Application File Format‣ Java source files of an Application are converted to Java class

files by the Java compiler

‣ Then Java class files will be converted into a .dex (Dalvik Executable) file

‣ Due to some optimization, dex files are much smaller in size than the corresponding class files.

‣ The .dex file and the resources of an Android project, e.g. the images and XML files, are packed into an .apk (Android Package) file.

‣ The resulting .apk file contains all necessary data to run the Android application and can be deployed to an Android device

‣ The Android Development Tools (ADT) perform these steps transparently to the user.

32

32


Sandboxing

33

‣ Each Android application lives in its own security sandbox

‣ The Android operating system is a multi-user Linux system‣ Each application is a different user with a unique,

unknown Linux user ID‣ Permissions for all the files in an application are set to

this user ID

‣ Each process has its own virtual machine (VM)

‣ By default, every application runs in its own Linux process.

33


Android SDKs (by Google)

‣ Android SDK‣ Includes a debugger, libraries, a handset emulator based

on QEMU, documentation, sample code, and tutorials

‣Native Development Kit‣ Development of libraries written in C and other languages‣ Compiled to ARM or x86 native code

‣ App Inventor for Android‣ Web-based visual development environment from Google‣ For novice programmers, based on MIT's Open Blocks

Java library‣ Offers Access to phone functions and sensors

34

34


Installation of Android SDK

‣Download eclipse for Java developers‣ http://www.eclipse.org/downloads/

‣ Install the ADT plugin for Eclipse

‣Download the latest SDK tools and platforms using the SDK Manager.

35

35

http://www.eclipse.org/downloads/packages/eclipse-ide-java-developers/junor

http://www.eclipse.org/downloads/packages/eclipse-ide-java-developers/junor



36

36



37

37



38

38



38

Opens the Android SDK Manager

38


www.tu-chemnitz.de

Google Android - A First Example

39




Login

‣Use the provided login and password‣ If you change the password -> WRITE IT DOWN!

‣Scientific Linux 6

‣Eclipse needs to be started from the command line

40

Screenshot vom Pool-Desktop

40


[krid@kreuz8:~]$ module load android/22.3.0[krid@kreuz8:~]$ eclipse

Eclipse

41

Load module for eclipse

Start eclipseDecide where your work will be stored

At the first start it will ask for the Android-SDKuse existing /sse/eda/adt/adt-bundle-linux-x86_64-20131030/sdk

41


Workspace

42

workspace-screenshot

42


Existing SDK

43

43


www.tu-chemnitz.de

HelloWorld

44



Chemnitz Universityof Technology45

45


46


47


48


49


50


Running the App

‣Launch the Android Virtual Device Manager

‣Create one or more devices reflecting your desired targets

‣Eclipse -> Run As ... ->

51

51


Create AVD

52

52


Tweaking the AVD

53

53


Emulator

54

54


www.tu-chemnitz.de

Google Android - Application Basics

55




Analyzing the App

‣Using the Eclipse SDK ...

‣Ending with a working „Hello World“ App after some klicks

56

!"" AndroidManifest.xml!"" assets!"" bin!"" gen!"" libs!"" res# !"" drawable-hdpi# !"" drawable-ldpi# !"" drawable-mdpi# !"" drawable-xhdpi# !"" layout# !"" menu# %"" values%"" src

56


Analyzing the App



56


Android Manifest

56


Analyzing the App



56


Android ManifestGenerated Code

56


Analyzing the App



56


Android Manifest

Needed LibrariesGenerated Code

56


Analyzing the App



56


Android Manifest

ResourcesNeeded LibrariesGenerated Code

56


Analyzing the App



56


Android Manifest

Resources

Java Source Files

Needed LibrariesGenerated Code

56


Analyzing the App‣ AndroidManifest.xml file, the "manifest" file

‣ Declare all components of an App

‣ Identify any user permissions the application requires, such as Internet access or read-access to the user's contacts.

‣ Declare the minimum API Level required by the application, based on which APIs the application uses.

‣ Declare hardware and software features used or required by the application, such as a camera, bluetooth services, or a multitouch screen.

‣ API libraries the application needs to be linked against (other than the Android framework APIs), such as Google Maps library.

‣ And more ...

57

57


58


<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="de.tuchemnitz.etit.sse.sesafirstapp" android:versionCode="1" android:versionName="1.0" >

<uses-sdk android:minSdkVersion="10" android:targetSdkVersion="15" />

<application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/title_activity_main" > <intent-filter> <action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".DisplayMessageActivity" android:label="@string/title_activity_display_message" > <meta-data android:name="android.support.PARENT_ACTIVITY" android:value="de.tuchemnitz.etit.sse.sesafirstapp.MainActivity" /> </activity> </application>

</manifest>

Manifest File

59

59

http://schemas.android.com/apk/res/android



Analyzing the App‣Resources like layouts, strings, icons, images

‣Are kept separated from the source code

‣The containing folders define their purpose

‣The .xml-Files will automatically be converted to Java code‣ See gen/.../R.java

60

60


<?xml version="1.0" encoding="utf-8"?><resources> <string name="app_name">SESAFirstApp</string> <string name="menu_settings">Settings</string> <string name="title_activity_main">MainActivity</string></resources>

String Resources

61

61


Layout

‣An activity is made up of Views and Viewgroups‣ Views are typically UI objects‣ ViewGroups are invisible view containers that define

how the child views are laid out

62

62


www.tu-chemnitz.de

Changing the Layout

63




Changing the Layout

‣First‣ What do you like to display?

‣Second‣ Add the needed Strings

‣Third‣ Add the needed ViewGroups and Views

64


<?xml version="1.0" encoding="utf-8"?><resources> <string name="app_name">SESAFirstApp</string> <string name="menu_settings">Settings</string> <string name="title_activity_main">MainActivity</string> <string name="edit_message">Enter a message</string> <string name="button_send">Send</string></resources>

String Resources

65

65


<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" ></LinearLayout>

A Linear Layout

66

66





http://schemas.android.com/tools



<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" >

<EditText android:id="@+id/edit_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/edit_message" />

</LinearLayout>

Adding an Element

67

67








Adding a Second View

68


<EditText android:id="@+id/edit_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/edit_message" />

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" />

</LinearLayout>

68



<EditText android:id="@+id/edit_message" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/edit_message" />


</LinearLayout>

Tweaking Layout & Performance

69

69











</LinearLayout>


69

Added a weight to let this view consume the available space

69











</LinearLayout>


69

Added a weight to let this view consume the available space

This depreciates the calculation of the contents width

69









70


<EditText android:id="@+id/edit_message" android:layout_weight="1" android:layout_width="0dip" android:layout_height="wrap_content" android:hint="@string/edit_message" />


</LinearLayout>

70


Understanding the Weight

71

‣Default is all zero

‣Numbers are added

‣Taken space is weight/summ

‣e.g. 1, 2, 0, 1 = 4

‣1/4, 2/4, 0/4, 1/4

71


www.tu-chemnitz.de

Application Structure

72




Application Basics‣Activities‣ A single (independent) screen with a user interface‣ An application may consist of several activities‣ Activities can be called by other Applications

‣Services‣ A component that runs in the background‣ No user interface

‣ Content providers‣ Manages a shared set of application data

‣Broadcast receivers‣ Responds to system-wide broadcast announcements

73

73


Application Basics‣Apps do not have a main() function

‣Activities always run in the context of the owning Application (not in the caller context)

‣Therefore a intend - a special type of message to the system - is needed

‣Intend‣ Asynchronous messages which allow the

application to request functionality from other components

74

74


Activities

75

Better / own Image

75


Application Basics‣Widgets‣ Interactive components mostly used on the home

screen‣ Typically display some kind of data and allow to

perform actions

‣Even more ...‣ E.g. Live Folders and Live Wallpapers

76

76


Application Basics

‣Views and ViewGroups‣ The GUI of an app is build up on Views and

ViewGroups‣ View objects are usually UI widgets such as buttons or

text fields‣ ViewGroup objects are invisible view containers such

as a grid or a vertical list.

77Source: Developpers.google.com

77


Application Basics

‣Fragments‣ Run in the context of an Activity‣ Encapsulate application code‣ Improve reuse‣ Support different sized devices

78Source: Developpers.google.com

An example of how two UI modules defined by fragments can be combined into one activity for a tablet design but separated for a handset design.

78


No line of java, yet?

79

‣Up to this point there was no need to write a single line of Java code.

‣But we have a running Android App ...

79


No line of java, yet?

79

‣Up to this point there was no need to write a single line of Java code.

‣But we have a running Android App ...package de.tuchemnitz.etit.sse.sesafirstapp; import android.os.Bundle;import android.app.Activity;import android.view.Menu; public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_main, menu); return true; }}

79


www.tu-chemnitz.de

Google Android - Extending the App

80




Syncing

81

curl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/SESAFirstApp.v0.1.0.tar |tar xv

‣ In case of problems (or just to make sure ...)‣ Use version provided by me

‣Close eclipse

‣cd into your workspace

‣ rm -rf SESAFirstApp

81

http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/SESAFirstApp.v0.1.0.tar





www.tu-chemnitz.de

Push the Button

82





<EditText android:id="@+id/edit_message" android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content" android:hint="@string/edit_message" />

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" android:onClick="sendMessage" />

</LinearLayout>

Push the Button

83

83









<EditText android:id="@+id/edit_message" android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content" android:hint="@string/edit_message" />

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" android:onClick="sendMessage" />

</LinearLayout>

Push the Button

83

This nominates the callback function in the activity

83








Adding the Callback

84

/** Called when the user clicks the Send button */public void sendMessage(View view) { // Do something in response to button}

84


Adding the Callback

84

/** Called when the user clicks the Send button */public void sendMessage(View view) { // Do something in response to button}

/** Called when the user clicks the Send button */public void sendMessage(View view) { Intent intent = new Intent(this, DisplayMessageActivity.class); EditText editText = (EditText) findViewById(R.id.edit_message); String message = editText.getText().toString(); intent.putExtra(EXTRA_MESSAGE, message); startActivity(intent);}

And fill it with code to start a second Activity ...

84


/** Called when the user clicks the Send button */public void sendMessage(View view) { Intent intent = new Intent(this, DisplayMessageActivity.class); EditText editText = (EditText) findViewById(R.id.edit_message); String message = editText.getText().toString(); intent.putExtra(EXTRA_MESSAGE, message); startActivity(intent);}

Magic Keys

85

Several unknown keywords (red underlined)Try Ctrl+Shift+O

This will automatically add missing imports

Try Ctrl+Shift+FThis will format your code

85


What does the Code?

86

Intent intent = new Intent(this, DisplayMessageActivity.class);

‣Object that provides runtime binding between separate components (such as two activities).

‣Represents an app’s "intent to do something".

‣Used for a wide variety of tasks‣ most often used to start another activity

‣Here: start an activity called DisplayMessageActivity

86


What does the Code?

87

EditText editText = (EditText) findViewById(R.id.edit_message);

‣Create an EditText object in the Activity

‣Connect it to the edit_message in the view

‣findViewById is often used to get handles from views in the layout

87


What does the Code?

88

String message = editText.getText().toString();intent.putExtra(EXTRA_MESSAGE, message);

‣Create a String object

‣Fill it with the content of the edit_message view

‣Hand it over to the intent

‣An Intent can carry a collection of various data types as key-value pairs

88


What does the Code?

‣The key must be known to both activities

‣Thus defining it as a public constant is a good way

‣ It‘s a good practice to prefix the key with the app‘s package name

89

public class MainActivity extends Activity { public final static String EXTRA_MESSAGE = "com.example.myfirstapp.MESSAGE"; ...}

89


What does the Code?

‣The key must be known to both activities

‣Thus defining it as a public constant is a good way

‣ It‘s a good practice to prefix the key with the app‘s package name

89

public class MainActivity extends Activity { public final static String EXTRA_MESSAGE = "com.example.myfirstapp.MESSAGE"; ...}public class MainActivity extends Activity {

/** String constants for Intents */ public final static String EXTRA_MESSAGE = "de.tuchemnitz.etit.sse.sesafir stapp.MESSAGE"; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }...

89


What does the Code?

90

startActivity(intent);

‣Create a String object

‣Fill it with the content of the edit_message view

‣Hand it over to the intent

‣An Intent can carry a collection of various data types as key-value pairs

90


www.tu-chemnitz.de

A Second Activity

91




A Second Activity

‣Eclipse SDK helps here as well

‣Using the „New Project“ wizard‣ Add all needed files‣ Changes the manifest and strings

92

92


Create the Activity

93

93


Create the Activity

94

94


Activity Basic Information

95

95


96


The Second Activity

97

97


... </intent-filter> </activity> <activity android:name="de.tuchemnitz.etit.sse.sesafirstapp.DisplayMessageActivity" android:label="@string/title_activity_display_message" android:parentActivityName="de.tuchemnitz.etit.sse.sesafirstapp.MainActivity" > <meta-data android:name="android.support.PARENT_ACTIVITY" android:value="de.tuchemnitz.etit.sse.sesafirstapp.MainActivity" /> </activity> </application>...

Changed Manifest

98

Automatically done:Add Activity to manifestAdd some strings

98


@Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

// get the Intent Intent intent = getIntent();

// get the message we placed in String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);

// Create a TextView and fill it with the message TextView textView = new TextView(this); textView.setTextSize(40); textView.setText(message);

// Set the text view as the activity layout setContentView(textView); /* * saved for later use * setContentView(R.layout.activity_display_message); */ getActionBar().setDisplayHomeAsUpEnabled(true);}

Use the Intent

99

99


... // get the Intent Intent intent = getIntent();

// get the message we placed in String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);...

Use the Intent

100

Get the intentRecall the string by using the key

Remember: key-value-pair

100


... // Create a TextView and fill it with the message TextView textView = new TextView(this); textView.setTextSize(40); textView.setText(message);

// Set the text view as the activity layout setContentView(textView);...

Use the Intent

101

Create TextView and fill itChange some attributesFor now we don‘t use xml layout ...But create the layout programmatically

101


Try It

102

102


www.tu-chemnitz.de

A xml Layout

103




@Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // get the Intent Intent intent = getIntent(); // get the message we placed in String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);

// Create a TextView and fill it with the message TextView textView = (TextView) findViewById(R.id.view_message); textView.setText(message); // adapt the view setContentView(R.layout.activity_display_message);

...}

Use xml Layout

Better use .xml LayoutBetter to maintain and to develop

104

104


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" >

<TextView android:id="@+id/view_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:hint="@string/hello_world" android:textSize="40sp" tools:context=".DisplayMessageActivity" />

</RelativeLayout>

xml Layout

105

105








#Error

106

So for now - The App stopped working

curl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/SESAFirstApp.v0.2.0.tar |tar xv

Next Point to Sync

106


www.tu-chemnitz.de

Debugging

107




LogCat

‣Logger for messages from the phone / emulator

‣Offering a lot of features‣ Filters, ...

‣Write own messages by using Log108

108


/** String prefix for Logging */ private static final String TAG = "SFA_Main"; /*SESAFirstApp Main Activity */

@Override public void onCreate(Bundle savedInstanceState) { Log.d(TAG, "onCreate called"); super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }

Using the Logger

109

109


/** String prefix for Logging */ private static final String TAG = "SFA_Main"; /*SESAFirstApp Main Activity */

@Override public void onCreate(Bundle savedInstanceState) { Log.d(TAG, "onCreate called"); super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }

Using the Logger

109

v(String, String) (verbose)d(String, String) (debug)i(String, String) (information)w(String, String) (warning)e(String, String) (error)

109

http://developer.android.com/reference/android/util/Log.html#v(java.lang.String,%20java.lang.String)

http://developer.android.com/reference/android/util/Log.html#v(java.lang.String,%20java.lang.String)

http://developer.android.com/reference/android/util/Log.html#d(java.lang.String,%20java.lang.String)

http://developer.android.com/reference/android/util/Log.html#d(java.lang.String,%20java.lang.String)

http://developer.android.com/reference/android/util/Log.html#i(java.lang.String,%20java.lang.String)

http://developer.android.com/reference/android/util/Log.html#i(java.lang.String,%20java.lang.String)

http://developer.android.com/reference/android/util/Log.html#w(java.lang.String,%20java.lang.String)

http://developer.android.com/reference/android/util/Log.html#w(java.lang.String,%20java.lang.String)

http://developer.android.com/reference/android/util/Log.html#e(java.lang.String,%20java.lang.String)

http://developer.android.com/reference/android/util/Log.html#e(java.lang.String,%20java.lang.String)


public void sendMessage(View view) {... Log.i(TAG, "Adding: " + message + " to intent"); intent.putExtra(EXTRA_MESSAGE, message); startActivity(intent); }

Add Debugging Informationprintf debugging is widely usedHelpful in many situationsIt‘s not as good as assertions or as accurate as using a debugger

110

110


@Overridepublic void onCreate(Bundle savedInstanceState) {... // get the message we placed in String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE); Log.i(TAG, "Got: " + message + " from Intent");... // adapt the view setContentView(R.layout.activity_display_message);}

Add Debugging Informationprintf debugging is widely usedHelpful in many situationsIt‘s not as good as assertions or as accurate as using a debugger

111

111


Check the Application

‣ It‘s still not working

‣What does LogCat show?‣ Use Filters to reduce the number of messages

112

112


@Overridepublic void onCreate(Bundle savedInstanceState) {... // Create a TextView and fill it with the message TextView textView = (TextView) findViewById(R.id.view_message); if (textView != null) { Log.d(TAG, "Found the TextView"); } else { Log.d(TAG, "Text view not found!"); } textView.setText(message); Log.d(TAG, "After insertion");

// adapt the view setContentView(R.layout.activity_display_message); Log.d(TAG, "onCreate Finished");}

More Prints ...

Narrow down the error by guarding all actions with a print

113

113


Found the Bug

‣No TextView is found matching this id

‣Why?

114

if (textView != null) { Log.d(TAG, "Found the TextView"); } else { Log.d(TAG, "Text view not found!"); } textView.setText(message); Log.d(TAG, "After insertion");

114


... // get the message we placed in String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE); Log.i(TAG, "Got: " + message + " from Intent");

// adapt the view setContentView(R.layout.activity_display_message); Log.d(TAG, "Created the Layout");

// Create a TextView and fill it with the message TextView textView = (TextView) findViewById(R.id.view_message);...

Simple Solution

115

115


Using the Debugger

116

116


Using the Debugger

117

117


Using the Debugger

118

118


Add Variables to Watch

119

‣ Add all variables of interest

‣Right-Click and choose „Watch“

‣Hold the mouse over a variable to see the current state

119


Running Step by Step

‣Step over to execute the line

‣Step into to enter the next level of depth120

Stop StepoverRun Step

into

120


textView is still null after executing findViewById()

121


www.tu-chemnitz.de

Google Android - Application Lifecycle

122




The Activity Lifecycle

123All other states are only transient!

123


The Activity Lifecycle

123

static states

All other states are only transient!123


Static States‣Resumed‣ The activity is in the foreground and the user can interact

with it.

‣Paused‣ Activity is partially obscured by another activity‣ Activity does not receive user input and cannot execute any

code

‣Stopped‣ Activity is completely hidden and not visible to the user‣ The activity instance and all its state informations such as

member variables is retained, but it cannot execute any code.

124

124


<activity android:name=".MainActivity" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter></activity>

Activity Startup

Startup order for each activity isonCreate()

onStart()

onResume()

Which Activity is called after pressing the Apps icon is defined in the manifest

125

125


Activity Startup‣onCreate()‣ The App is created / started‣ Perform basic application startup logic that should

happen only once for the entire life of the activity

‣onStart()‣ The Activity becomes visible

‣onResume()‣ The Activity becomes active

126

126


Activity Shutdown‣onDestroy()‣ The last method called when App is destroyed‣ Activity instance is being completely removed from the

system memory

‣ In (nearly) all cases onPause() and onStop() are called in advance of onDestroy()

‣Often not needed‣ Local class references are (automatically) destroyed

with the activity‣ Most cleanup should be done during onPause() and onStop()

127

127


@Override public void onCreate(Bundle savedInstanceState) { Log.i(TAG, "onCreate called"); super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @Override protected void onStart() { Log.i(TAG, "onStart called"); super.onStart(); // The activity is about to become visible. } @Override protected void onResume() { Log.i(TAG, "onResume called"); super.onResume(); // The activity has become visible (it is now "resumed"). } @Override protected void onPause() { Log.i(TAG, "onPause called"); super.onPause(); // Another activity is taking focus (this activity is about to be // "paused"). } @Override protected void onStop() { Log.i(TAG, "onStop called"); super.onStop(); // The activity is no longer visible (it is now "stopped") EditText editText = (EditText) findViewById(R.id.edit_message); editText.setText(""); } @Override protected void onDestroy() { Log.i(TAG, "onDestroy called"); super.onDestroy(); // The activity is about to be destroyed. }

All States of Main Activity

128

Don‘t try to copy it!

128


public class DisplayMessageActivity extends Activity { /** String prefix for Logging */ private static final String TAG = "SFA_Display"; /* SESAFirstApp Display Activity */ @Override public void onCreate(Bundle savedInstanceState) { Log.i(TAG, "onCreate called"); super.onCreate(savedInstanceState); setContentView(R.layout.activity_display_message); } @Override public void onStart() { Log.i(TAG, "onStart called"); // call parents onStart() super.onStart(); // Get the message from the intent Intent intent = getIntent(); String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE); TextView text = (TextView) findViewById(R.id.DisplayTextView); text.setText(message); } @Override protected void onResume() { Log.i(TAG, "onResume called"); super.onResume(); // The activity has become visible (it is now "resumed"). } @Override protected void onPause() { Log.i(TAG, "onPause called"); super.onPause(); // Another activity is taking focus (this activity is about to be // "paused"). } @Override protected void onStop() { Log.i(TAG, "onStop called"); super.onStop(); // The activity is no longer visible (it is now "stopped") } @Override protected void onDestroy() { Log.i(TAG, "onDestroy called"); super.onDestroy(); // The activity is about to be destroyed. }

129

States of DisplayMessageActivity


129



130



130



130



Download & Extract now!curl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/SESAFirstApp.v0.2.1.tar |tar xv

130




















@Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // get the Intent Intent intent = getIntent(); // get the message we placed in String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);

// Create a TextView and fill it with the message TextView textView = (TextView) findViewById(R.id.view_message); textView.setText(message); // adapt the view setContentView(R.layout.activity_display_message);

...}

Remember the Bug

Recreate the Code with the bug!!131

131


@Overridepublic void onStart() { // call parents onStart() super.onStart(); // Get the message from the intent Intent intent = getIntent(); String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE); TextView text = (TextView) findViewById(R.id.DisplayTextView); text.setText(message);}

A Second ApproachOnStart()

Application is about to get visible

Here the layout is already setThis also seems to be a good place for the text insertion

132

132


@Overrideprotected void onStop() { Log.d(TAG, "onStop called"); super.onStop(); // The activity is no longer visible (it is now "stopped") // so we clean the TextEdit EditText editText = (EditText) findViewById(R.id.edit_message); editText.setText("");}

One more Example

Reset the TextView in onStop()133

Add to the MainActivity

133


SESAFirstApp

134

134


SESAFirstApp

134

Find complete example:curl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/SESAFirstApp.v0.3.0.tar |tar xv

134




















www.tu-chemnitz.de

Sensors and Keys

135




Volume Changer

136

‣Create a new Android project.

‣Create a suitable logo.

‣Create a sufficiently complex layout.

‣Create needed strings.

Find this Application at:curl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/ChangeAllVolumes.v0.1.0.git |tar xv

136

http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/ChangeAllVolumes.v1.0.0.git





public class VolumeMainActivity extends Activity { /** LogCat prefix */ private static final String TAG = "VMA_Main";

/** several private members */ private AudioManager audioManager; private SeekBar alarmBar; private SeekBar dtmfBar; private SeekBar musicBar; private SeekBar notifyBar; private SeekBar ringBar; private SeekBar systemBar; private SeekBar callBar;

@Overridepublic void onStart() {...

Fill Main Activity

137


137


...@Overridepublic void onStart() { Log.d(TAG, "onStart called"); super.onStart(); // first get the audio manager audioManager = (AudioManager) this.getSystemService(Context.AUDIO_SERVICE); // find right bar alarmBar = (SeekBar) findViewById(R.id.SeekBar01); // now connect seek bars with it's corresponding volume alarmBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, alarmBar, AudioManager.STREAM_ALARM));...

Fill Main Activity

138


138


@Overridepublic void onStart() { Log.d(TAG, "onStart called"); super.onStart(); // first get the audio manager audioManager = (AudioManager) this.getSystemService(Context.AUDIO_SERVICE); // find right bar alarmBar = (SeekBar) findViewById(R.id.SeekBar01); // now connect seek bars with it's corresponding volume alarmBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, alarmBar, AudioManager.STREAM_ALARM)); dtmfBar = (SeekBar) findViewById(R.id.SeekBar02); dtmfBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, dtmfBar, AudioManager.STREAM_DTMF)); musicBar = (SeekBar) findViewById(R.id.SeekBar03); musicBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, musicBar, AudioManager.STREAM_MUSIC)); notifyBar = (SeekBar) findViewById(R.id.SeekBar04); notifyBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, notifyBar, AudioManager.STREAM_NOTIFICATION)); ringBar = (SeekBar) findViewById(R.id.SeekBar05); ringBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, ringBar, AudioManager.STREAM_RING)); systemBar = (SeekBar) findViewById(R.id.SeekBar06); systemBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, systemBar, AudioManager.STREAM_SYSTEM)); callBar = (SeekBar) findViewById(R.id.SeekBar07); callBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, callBar, AudioManager.STREAM_VOICE_CALL)); Log.d(TAG, "onStart finished");} Don‘t tr

y to copy it!

Fill Main Activity

139


@Overridepublic void onStart() { Log.d(TAG, "onStart called"); super.onStart(); // first get the audio manager audioManager = (AudioManager) this.getSystemService(Context.AUDIO_SERVICE); // find right bar alarmBar = (SeekBar) findViewById(R.id.SeekBar01); // now connect seek bars with it's corresponding volume alarmBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, alarmBar, AudioManager.STREAM_ALARM)); dtmfBar = (SeekBar) findViewById(R.id.SeekBar02); dtmfBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, dtmfBar, AudioManager.STREAM_DTMF)); musicBar = (SeekBar) findViewById(R.id.SeekBar03); musicBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, musicBar, AudioManager.STREAM_MUSIC)); notifyBar = (SeekBar) findViewById(R.id.SeekBar04); notifyBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, notifyBar, AudioManager.STREAM_NOTIFICATION)); ringBar = (SeekBar) findViewById(R.id.SeekBar05); ringBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, ringBar, AudioManager.STREAM_RING)); systemBar = (SeekBar) findViewById(R.id.SeekBar06); systemBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, systemBar, AudioManager.STREAM_SYSTEM)); callBar = (SeekBar) findViewById(R.id.SeekBar07); callBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, callBar, AudioManager.STREAM_VOICE_CALL)); Log.d(TAG, "onStart finished");} Don‘t tr

y to copy it!

Download & Extract now!Find this Application at:

curl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/ChangeAllVolumes.v0.2.0.tar |tar xv

Fill Main Activity

139

http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/ChangeAllVolumes.v0.1.0.tar



















package de.tuchemnitz.etit.sse.changeallvolumes;

import android.widget.SeekBar;import android.widget.SeekBar.OnSeekBarChangeListener;

public class VolumeBarChangeListener implements OnSeekBarChangeListener { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { // TODO Auto-generated method stub

} @Override public void onStartTrackingTouch(SeekBar seekBar) { // TODO Auto-generated method stub

} @Override public void onStopTrackingTouch(SeekBar seekBar) { // TODO Auto-generated method stub

}}

A New Java Class

140

140


141


142


package de.tuchemnitz.etit.sse.changeallvolumes;import ... ;

public class VolumeBarChangeListener implements OnSeekBarChangeListener { /** LogCat prefix */ private static final String TAG = "VMA_VBChange"; /** store stremId and AudioManager */ private int streamId; private AudioManager aManager; public VolumeBarChangeListener(AudioManager aManager, SeekBar bar, int streamId) { /** constructor */ Log.d(TAG, "Constructor called for " + streamId); this.streamId = streamId; this.aManager = aManager;

// TODO Let ProgressBar work between 0 and 100 and map the value to one // of 0..MaxVolume this will make the bars smoother

Log.i(TAG, String.format("Stream: %d, MaxVolume: %d", this.streamId, aManager.getStreamMaxVolume(streamId))); // sets the range between 0 and the max volume bar.setMax(aManager.getStreamMaxVolume(streamId)); // set the seek bar progress to 1 bar.setKeyProgressIncrement(1); // sets the progress of the seek bar based on the system's volume bar.setProgress(aManager.getStreamVolume(streamId)); Log.d(TAG, "Constructor called for " + streamId); } @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { Log.d(TAG, String.format("SeekBar: %d, Progress: %d", this.streamId, progress)); //amanager.setStreamVolume(this.streamId, progress, AudioManager.FLAG_SHOW_UI + AudioManager.FLAG_PLAY_SOUND); aManager.setStreamVolume(this.streamId, progress, AudioManager.FLAG_PLAY_SOUND); } @Override public void onStartTrackingTouch(SeekBar seekBar) { // TODO Auto-generated method stub } @Override public void onStopTrackingTouch(SeekBar seekBar) { // TODO Auto-generated method stub }}

143


package de.tuchemnitz.etit.sse.changeallvolumes;import ... ;

public class VolumeBarChangeListener implements OnSeekBarChangeListener { /** LogCat prefix */ private static final String TAG = "VMA_VBChange"; /** store stremId and AudioManager */ private int streamId; private AudioManager aManager;...}

144

Member Variables

144


...public VolumeBarChangeListener(AudioManager aManager, SeekBar bar, int streamId) { /** constructor */ Log.d(TAG, "Constructor called for " + streamId); this.streamId = streamId; this.aManager = aManager;

Log.i(TAG, String.format("Stream: %d, MaxVolume: %d", this.streamId, aManager.getStreamMaxVolume(streamId)));

// sets the range between 0 and the max volume bar.setMax(aManager.getStreamMaxVolume(streamId));

// set the seek bar progress to 1 bar.setKeyProgressIncrement(1);

// sets the progress of the seek bar based on the system's volume bar.setProgress(aManager.getStreamVolume(streamId)); Log.d(TAG, "Constructor called for " + streamId); }...

145

Constructor

145


@Overridepublic void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { Log.d(TAG, String.format("SeekBar: %d, Progress: %d", this.streamId, progress)); aManager.setStreamVolume(this.streamId, progress, AudioManager.FLAG_PLAY_SOUND); //AudioManager.FLAG_SHOW_UI + AudioManager.FLAG_PLAY_SOUND);}

Change Volume

146

146


// TODO there is still an issue with this function ...@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) { // if one of the volume keys is pressed if (keyCode == KeyEvent.KEYCODE_VOLUME_DOWN || keyCode == KeyEvent.KEYCODE_VOLUME_UP) { Log.i(TAG, "KeyEvent" + keyCode); // change the seek bar progress indicator position

ringBar.setProgress(audioManager.getStreamVolume(AudioManager.STREAM_RING)); }

// let the event propagate through the system return false;}

Respect Hardware Keys

147

This does not work as expectedKey presses and volume are not in sync

147


@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) { Log.d(TAG, "KeyEvent" + keyCode); int level = audioManager.getStreamVolume(AudioManager.STREAM_RING); switch (keyCode) { case KeyEvent.KEYCODE_VOLUME_DOWN: Log.v(TAG, "KEYCODE_VOLUME_DOWN"); if (level > 0){ level -= 1; } break; case KeyEvent.KEYCODE_VOLUME_UP: Log.v(TAG, "KEYCODE_VOLUME_UP"); if (level < audioManager.getStreamMaxVolume(AudioManager.STREAM_RING)){ level += 1; } break; default: Log.v(TAG, "keyCode not handeled"); // let the event propagate through the system return false; } audioManager.setStreamVolume(AudioManager.STREAM_RING, level, AudioManager.FLAG_SHOW_UI); ringBar.setProgress(level);

// we handeled the keyEvent - don‘t propagate further return true;}

148


That‘s It!

149


Final Version of the Appcurl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/ChangeAllVolumes.v1.0.0.tar |tar xv

That‘s It!

Now create your own App?!

149


Suggestions

150

‣CVAG - Timetable (based on position)‣ Using preloaded timetables

‣Calendar or person data display/manipulation

‣ ...

150


www.tu-chemnitz.de

Apple iOSOperating System

151




History of iOS

152

‣Originally released in 2007 with the first Apple iPhone (without a particular name)

‣Derivation of Mac OS X, adapted to iPhone‣ iOS is a Unix operating system

‣Name „iPhone OS“ used since 2008

‣ In 2010, name changed to iOS‣ not only used on iPhone, also on other devices

(iPad, iPod)

‣Only available for Apple devices

152


iOS Version Statistics

153

Source: socialbarrel.com

Source: insidemobileapps.com

153


Apple iOS

154

iOS, iMore, October 01, 2012

154


Architecture

155

‣ iOS consists of four layers

Source: developer.apple.com

155


Core OS Layer

156

‣Low-level features on which other layers are based‣ System features‣ Threads‣ Networking‣ File System‣ ...

‣ Data security‣ Accelerated data processing‣ External accessories and Bluetooth support

156


Core Services Layer

157

‣Fundamental system services‣ iCloud storage‣ Automatic reference counting‣ Data protection‣ File sharing support‣ In-App purchase‣ SQLite support‣ XML support

157


Media Layer

158

‣Graphics, audio and video technologies‣ Graphics and animation‣ OpenGL and GLKit for rendering images‣ Image I/O‣ Audio player and recorder‣ iTunes access‣ Video player‣ Video capturing‣ Airplay

158


Cocoa Touch Layer

159

‣Contains key frameworks for building iOS Applications

‣Defines basic application infrastructure‣ User interfaces‣ Multitasking‣ Touch-based input‣ Push notifications‣ Printing‣ Other high-level services

159


Application Development

160

‣Development requires Apple Developer Account and XCode (Apple‘s SDK)‣ XCode only runs on MacOS X‣ Contains iOS Simulator (for iPhone and iPad)

‣Membership in iOS Developer Program required for App distribution/installation‣ currently $99/year

‣Free Developer Account available‣ Can only be used for development and simulation

160


Application Development‣Apps cannot be simply installed on device

‣Distribution via Apple‘s App Store‣ App is checked by Apple, provided to all users

‣Private Provisioning Profiles‣ Developers can install apps on specific devices‣ Device IDs have to be uploaded to Developer

Center‣ Only limited number of devices is allowed‣ Profile has to be installed on device, only valid for

short period of time

161

161


Application File Format‣Apps are distributed in the Application bundle

format‣ Common application format in OS X

‣Folder structure that groups together all necessary resources of the app‣ Executables‣ GUI elements, graphics‣ Data, ...

‣SDK creates bundle from relevant files‣ Executable is generated by Compiler

162

162


Application File Format‣Each app runs its own sandbox

163

Source: developer.apple.com

163


Application Development‣Application Design is divided into two parts

‣Grapical User Interface‣ GUI is created using a specific Interface Builder‣ Views are built graphically‣ Standard objects are provided by the SDK‣ View objects are connected to corresponding

classes that can react on user input‣ Properties of view objects can be changed by

functions

164

164



‣Data Processing‣ Processing is done in corresponding classes‣ Programming language is Objective-C‣ Object oriented programming language‣ Used by Apple for MacOS X and iOS ‣ Communication between processes/functions

based on messages

165

165



‣ Separation of GUI and Data processing is called ,Model-View-Controller‘ (MVC)‣ MVC is a widely known and accepted programming paradigm

‣ Model objects represent data structure and processing

‣ View objects are objects that are seen by the user

‣ Controller objects act as intermediary between the other two (bind them together)

166

166


Creating a simple App

‣Create a simple App that reacts on pushing buttons, stores the active button and displays it in a text label

‣Three elements are contained in the view‣ two buttons‣ one text label

167

167



‣Start XCode and choose required template

168

168



‣Define name and options

169

169



‣Xcode creates new project

170

170



‣Template files are generated by XCode‣ AppDelegate.h‣ AppDelegate.m‣ ViewController.h‣ ViewController.m‣ ViewController.xib

‣Additional supporting files are generated

‣Standard Frameworks are included in project

171

171



‣ViewController is the class responsible for managing our view

‣Derived from UIViewController‣ contains all basic functionality‣ App specific functionality will be added here

172

172



‣Outlets and Actions are used to allow interaction between Controller and Views

‣Outlet for text label is added‣ IBOutlet UILabel *statusText;‣ Reference to access label from Controller

‣Actions are methods that can be triggered by view elements‣ -(IBAction) buttonPressed: (id)sender;‣ Method to be called if a button is pressed by user

173

173



‣Current active button is stored in a string variable‣ String variable is added to class‣ NSString *activeButton;‣Objective-C Properties are added for class

members to create getter and setter functions‣ @property (retain, nonatomic) UILabel *statusText;‣@property (copy, nonatomic) NSString *activeButton;

174

174



‣Complete Controller Header File looks like this

175

175



‣Generic Implementation file of Controller contains definitions of standard functions

176

176



‣Synthesize has to be added for properties‣ @synthesize statusText;‣@synthesize activeButton;‣Functionality for our IBAction method needs to

be defined

177

- (IBAction) buttonPressed: (id)sender{

activeButton = [sender titleForState (UIControlStateNormal)];NSString *newText = [[NSString alloc] initWithFormat:@"%@ is the active button.", activeButton];statusText.text = newText;

}

177



‣Complete Implementation file

178

178



‣ViewController.xib has to be changed to create our desired View

179

179



‣After label and buttons are added, Outlets and Actions are connected‣ Event „Touch Up Inside“ of each of the buttons

triggers Action buttonPressed‣ statusText is referencing the label element

180

180



‣AppDelegate is a Delegate of UIApplication‣ UIApplication is responsible for running the

application‣ Delegation allows Developer to react on certain

events‣ e.g. Termination, Going to Background

‣AppDelegate needs not to be changed‣ Only creates the main view of our App when

launched

181

181



182

182



‣Set target to iPhone Simulator and press Run

‣Simulator is started and App is loaded

183

183


www.tu-chemnitz.de

Windows MobileOperating System

184




History

‣Microsoft realized Smartphone market very late‣ Plan was: release of WP7 in 2009

‣Several delays of WP7‣ „Gap“ bridged by interim version 6.5 of Windows

Mobile in 2009

‣ Incompatibility to Windows Mobile due to quick development of WP7

185

185


History

186

Versions Release

Windows Mobile 2002 2002

Windows Mobile 2003 June 2003

Windows Mobile 2003 SE March 2004

Windows Mobile 5.0 May 2005

Windows Mobile 6 February 2007

Windows Mobile 6.1 2007

Windows Mobile 6.5 May 2009

Windows Embedded Handheld June 2010

Windows Phone 7 2010

Windows Mobile, October 02, 2012

Windows Phone 8 October 2012

186


Technical facts

‣ Strict hardware requirements:‣ Multiple CPU architectures possible‣ 4-point multitouch display‣ DirectX9 capable GPU‣ 256 MB RAM, 4 GB Flash‣ Accelerometer, light sensor, proximity meter, GPS‣ FM tuner‣ 6 hardware buttons (2x volume, power, back, start,

search)

‣ Based on Windows CE

‣OS Updates via Zune (PC connection necessary)187

187


Security

‣Same rights for all apps

‣No background tasks

‣App has no access to other apps‘ data

‣No API for sending SMS directly

‣Apps are checked by Microsoft before releasing to market place

‣OS customization needs jailbreak (unlike Android)

188

188


User interface‣ User Interface „Metro“

‣ „Live tiles“ on start screen (links to features and apps)

‣ „Pages“ arrange logic and functionality in apps

‣ „Hubs“ combine online and locally stored content‣ Pictures hub: Local camera

pictures and Facebook photos‣ Music + Video hub: Local Multimedia

and Xbox live

‣ Internet Explorer 9 as rendering engine

‣ Integration of MS Office Mobile

189

189


Software Architecture

190

190


Requirements‣Requirement: MS Visual Studio + Phone SDK‣ Visual Studio 2010 Express + Phone SDK freely

available‣ Phone Emulator for debugging‣ >= Windows 7 required

191

191


Windows Phone SDK‣Phone SDK contents:‣ Silverlight: For event-driven apps, UI design in

XAML‣ XNA: For loop-based apps, e. g. interactive games‣ Expression Blend: Interface designer for web apps‣ XNA Game Studio‣ Phone Emulator

192

192


App distribution

‣ Microsoft Phone Dev Center subscription:‣ Currently $99/year‣ Required for running app on real phone‣ Required for distributing app on Market Place‣ Not required for development and simulation

‣ App distribution only via Microsoft Zune Marketplace

‣ One app = one .xap file‣ Contains byte-compiled code (for CLR runtime) and

resources‣ Cryptographically signed‣ Phone will only install apps signed by Microsoft

193

193


Development Lifecycle

194

194


Development Tools

195

195


Application development‣Separation of GUI and Data

‣GUI:‣ Graphical designer‣ Generates .xaml files (XML dialect, manually-editable)

‣Data:‣ Page Classes which implement behaviour‣ Object-oriented data access (C# or Visual Basic)‣ CLR: Managed code, garbage-collected

‣No strict design pattern (e. g. model-view-contoller)

196

196


Class library

197

197


www.tu-chemnitz.de

WP7 Sample App

198




A simple app

‣Similar to iPhone app: Create a simple app that reacts on pushing buttons, stores the active button and displays it in a text label

‣Three elements are contained in the view‣ Two buttons‣ One text label

199

199


Creating a simple app‣Start Visual Studio, select desired language

and template, and name your app

200

200


Creating a simple app‣Visual Studio creates new project

201

201


Project files

‣Package contents:‣ Manifest‣ Resources (icons, ...)‣ App.xaml /

App.xaml.cs‣ MainPage.xaml /

MainPage.xaml.cs‣ All files auto-generated

202

202


App.xaml‣App.xaml‣ Including event definitions specific to application

lifecycle (launch/close/activate/deactivate application, exceptions)

203

203


App.xaml.cs‣App.xaml.cs‣ Event handlers / code for events specific to

application life cycle‣ Empty per default

204

204


MainPage.xaml

‣MainPage.xaml‣ Definition and properties for one app page‣ Properties for all subelements (buttons, ...)‣ .xaml file locked bi-directionally to UI designer

205

205


Properties Window

‣MainPage.xaml

‣Page properties also in „Properties“ window‣ App / Page name‣ Supported orientations‣ Layout rules‣ Default fonts‣ ...

206

206


MainPage.xaml.cs

‣MainPage.xaml.cs‣ Event handlers for device-

specific events (changing orientation, battery status, ...)

‣ Event handlers for UI events (Click, Drag, ...)

‣ Most important APIs automatically available

‣ Place code here directly (small apps) or apply design pattern (larger apps)

207

207


User Interface Designer

‣ Use tool box to place buttons and text field (drag‘n‘drop)

‣ .xaml file gets modified accordingly

208

208


Orientations

‣ Portrait and landscape orientations are defined in one page (not separately) per default‣ Position and alignment attributes have to be used correctly‣ Change view by usign right click in designer‣ Apply different views for orientations: Create orientation event

handlers to change page

209

209


Reacting on User Input‣Event handlers:‣ Double-click element for generating handler for

default event (button: „Click“)‣ More events available in „Events“ window (drag,

focus lost, ...)‣ .xaml file gets modified‣ Sample app: Use one event handler for both

buttons

210

210


Reacting on User Input

‣SampleApp.xaml.cs is a partial class implementing the user-specific behaviour of SampleApp.xaml

‣Event handlers are automatically created

211

211


Writing an Event Handler

‣ Fill in C# code (object-oriented)‣ Determine sender object / sender name‣ Store in private property pressedButtonName (optional)‣ Set status text

212

212


Simulation‣ Simulate in Phone Emulator

‣ Debugging available (breakpoints, variable inspection, single-step)

‣ Boots target OS (may take a while)

‣ Runs only on native Windows (no VirtualBox etc.)

213

213


www.tu-chemnitz.de

Web Based Smartphone Applications

214




Web-Apps with specific Look‣PhoneGap (c‘t 21/2012)

‣c‘t 15/2012

215

215

creating a simple app

Documents