creating a simple app

Professur Schaltkreis-und Systementwurf

www.tu-chemnitz.de

Software Environments of Smartphone Applications

Exercise/Practice

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.

Prerequisites for Attending

‣ 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

Prerequisites for Attending

‣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!

www.tu-chemnitz.de

Software Environments of Smartphone Applications

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

HTC Sensation, htc.com, October 01, 2012

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)

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

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

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

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

Basic Workflow

Specification

Resource Analysis

Implemen-tation

TestPlatform Decision

SDK Decision

Maintenance

Shop Rollout

Basic Workflow

‣ 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

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

Basic Workflow

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

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

costumers feedback

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

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

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

Apples Xcode

18Source: developer.apple.com

Google Android SDK

‣Based on Eclipse

Windows 8

20Source: 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

3rd Party SDKs

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

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

Source: heise Mac & I, Heft 07, 2012

www.tu-chemnitz.de

Google Android - Operating System Basics

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

Android Versions

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

Android Timeline, FAQoid.com, October 01, 2012

Android Versions

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

Android Timeline, FAQoid.com, October 01, 2012

Architecture

26Source: Unknown

Architecture

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.

Architecture

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.

Architecture

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.

Architecture

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.

Architecture

28Source: Unknown

Architecture

28Source: Unknown

Dalvik VM

‣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

Architecture

30Source: Unknown

Architecture

30Source: Unknown

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

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.

Sandboxing

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

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

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.

Opens the Android SDK Manager

www.tu-chemnitz.de

Google Android - A First Example

‣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

Screenshot vom Pool-Desktop

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

Eclipse

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

Workspace

workspace-screenshot

Existing SDK

www.tu-chemnitz.de

HelloWorld

Chemnitz Universityof Technology45

Running the App

‣Launch the Android Virtual Device Manager

‣Create one or more devices reflecting your desired targets

‣Eclipse -> Run As ... ->

Create AVD

Tweaking the AVD

Emulator

www.tu-chemnitz.de

Google Android - Application Basics

Analyzing the App

‣Using the Eclipse SDK ...

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

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

Analyzing the App

Android Manifest

Analyzing the App

Android ManifestGenerated Code

Analyzing the App

Android Manifest

Needed LibrariesGenerated Code

Analyzing the App

Android Manifest

ResourcesNeeded LibrariesGenerated Code

Analyzing the App

Android Manifest

Resources

Java Source Files

Needed LibrariesGenerated Code

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

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

</manifest>

Manifest File

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

<?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

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

www.tu-chemnitz.de

Changing the Layout

‣First‣ What do you like to display?

‣Second‣ Add the needed Strings

‣Third‣ Add the needed ViewGroups and Views

Changing the Layout

‣First‣ What do you like to display?

‣Second‣ Add the needed Strings

‣Third‣ Add the needed ViewGroups and Views

<?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

<?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

<?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>

Adding an Element

Adding a Second View

</LinearLayout>

Adding a Second View

</LinearLayout>

</LinearLayout>

Tweaking Layout & Performance

</LinearLayout>

Added a weight to let this view consume the available space

</LinearLayout>

Added a weight to let this view consume the available space

This depreciates the calculation of the contents width

</LinearLayout>

Understanding the Weight

‣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

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

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

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

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

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

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

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

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

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

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

www.tu-chemnitz.de

Application Structure

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

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

Activities

Better / own Image

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

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

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.

No line of java, yet?

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

‣But we have a running Android App ...

No line of java, yet?

‣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; }}

www.tu-chemnitz.de

Google Android - Extending the App

Syncing

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

www.tu-chemnitz.de

Push the Button

</LinearLayout>

Push the Button

</LinearLayout>

Push the Button

</LinearLayout>

Push the Button

This nominates the callback function in the activity

Adding the Callback

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

Adding the Callback

/** 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 ...

/** 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

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

This will automatically add missing imports

Try Ctrl+Shift+FThis will format your code

What does the Code?

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

What does the Code?

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

What does the Code?

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

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

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

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

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

What does the Code?

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

www.tu-chemnitz.de

A Second Activity

‣Eclipse SDK helps here as well

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

Create the Activity

Activity Basic Information

The Second Activity

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

Automatically done:Add Activity to manifestAdd some strings

@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

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

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

Use the Intent

Get the intentRecall the string by using the key

Remember: key-value-pair

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

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

Try It

www.tu-chemnitz.de

A xml Layout

@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

</RelativeLayout>

xml Layout

</RelativeLayout>

xml Layout

</RelativeLayout>

xml Layout

#Error

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

www.tu-chemnitz.de

Debugging

LogCat

‣Logger for messages from the phone / emulator

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

‣Write own messages by using Log108

/** 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

/** 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

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

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

@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

Check the Application

‣ It‘s still not working

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

@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

Found the Bug

‣No TextView is found matching this id

‣Why?

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");

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

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

Using the Debugger

Add Variables to Watch

‣ Add all variables of interest

‣Right-Click and choose „Watch“

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

Running Step by Step

‣Step over to execute the line

‣Step into to enter the next level of depth120

Stop StepoverRun Step

textView is still null after executing findViewById()

www.tu-chemnitz.de

Google Android - Application Lifecycle

The Activity Lifecycle

123All other states are only transient!

The Activity Lifecycle

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

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

Activity Startup

Startup order for each activity isonCreate()

onStart()

onResume()

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

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

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

@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

Don‘t try to copy it!

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

States of DisplayMessageActivity

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

@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

@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

@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

SESAFirstApp

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

www.tu-chemnitz.de

Sensors and Keys

Volume Changer

‣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

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

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

@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

@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

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

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 }}

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;...}

Member Variables

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

Constructor

@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

// 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

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

@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;}

That‘s It!

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?!

Suggestions

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

‣Calendar or person data display/manipulation

‣ ...

www.tu-chemnitz.de

Apple iOSOperating System

History of iOS

‣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

iOS Version Statistics

Source: socialbarrel.com

Source: insidemobileapps.com

Apple iOS

iOS, iMore, October 01, 2012

Architecture

‣ iOS consists of four layers

Source: developer.apple.com

Core OS Layer

‣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

Core Services Layer

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

Media Layer

‣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

Cocoa Touch Layer

‣Contains key frameworks for building iOS Applications

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

Application Development

‣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

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

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

Application File Format‣Each app runs its own sandbox

Source: developer.apple.com

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

‣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

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

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

‣Start XCode and choose required template

‣Define name and options

‣Xcode creates new project

‣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

‣ViewController is the class responsible for managing our view

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

‣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

‣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;

‣Complete Controller Header File looks like this

‣Generic Implementation file of Controller contains definitions of standard functions

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

be defined

- (IBAction) buttonPressed: (id)sender{

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

‣Complete Implementation file

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

‣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

‣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

‣Set target to iPhone Simulator and press Run

‣Simulator is started and App is loaded

www.tu-chemnitz.de

Windows MobileOperating System

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

History

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

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

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)

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

Software Architecture

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

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

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

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

Development Lifecycle

Development Tools

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)

Class library

www.tu-chemnitz.de

WP7 Sample App

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

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

and template, and name your app

Creating a simple app‣Visual Studio creates new project

Project files

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

App.xaml.cs‣ MainPage.xaml /

MainPage.xaml.cs‣ All files auto-generated

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

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

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

application life cycle‣ Empty per default

MainPage.xaml

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

Properties Window

‣MainPage.xaml

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

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)

User Interface Designer

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

‣ .xaml file gets modified accordingly

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

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

Reacting on User Input

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

‣Event handlers are automatically created

Writing an Event Handler

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

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

www.tu-chemnitz.de

Web Based Smartphone Applications

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

‣c‘t 15/2012

creating a simple app

Documents

a simple duck app!

creating a web app from scratch

creating books app with react native

app 101 creating a document

simple guide to creating infographics

creating art with simple shapes

ipads 4 elementary creating & app smashing€¦ · app...

lecture 4 - creating simple formula

module 3.1 creating simple documents

creating and simulating a simple model - university of...

simple messaging app

trends in mobile app development industry for creating...

creating web app

creating mobile apps with app inventor!

creating a content managed facebook app

creating a language learning app – concept to app store

microblaze tutorial creating a simple embedded...

app builder creating reports

simple todo app with meteor

creating ios app apple #ade2013