Download Software Environments of Smartphone Applications

Software Environments of
Smartphone Applications
Exercise/Practice
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
1
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
Chemnitz University
of Technology
2
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
3
Chemnitz University
of Technology
3
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!
4
Chemnitz University
of Technology
4
Software Environments of
Smartphone Applications
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
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, ...)
HTC Sensation, htc.com, October 01, 2012
6
Chemnitz University
of Technology
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)
Sony Xperia S, Chip.de, October 01, 2012
‣ 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
Chemnitz University
of Technology
7
Operating Systems
‣ 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 solutions
do not gain importance, yet
8
IDC Worldwide Mobile Phone Tracker, May 24, 2012
Chemnitz University
of Technology
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
Chemnitz University
of Technology
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
Chemnitz University
of Technology
10
Basic Workflow
Idea
Specification
Maintenance
Resource
Analysis
Shop Rollout
Platform
Decision
Test
Implementation
SDK
Decision
11
Chemnitz University
of Technology
11
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
12
Chemnitz University
of Technology
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
Chemnitz University
of Technology
13
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
14
Chemnitz University
of Technology
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 OS
15
Chemnitz University
of Technology
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
Chemnitz University
of Technology
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
Chemnitz University
of Technology
17
Apples Xcode
Source:
developer.apple.com
18
Chemnitz University
of Technology
18
Google Android SDK
‣ Based on Eclipse
19
Chemnitz University
of Technology
19
Windows 8
Source: http://www.ginktage.com/2012/08/creating-windows-8app/
20
Chemnitz University
of Technology
20
3rd Party SDKs
‣ Several 3rd party IDEs exist with different
goals
‣ More graphical approaches for nonprogrammers
‣ Specific app development with other
languages
‣ Some even provide platform independent
specific app development
‣ Conversion of web-app to stand alone app
21
Chemnitz University
of Technology
21
3rd Party SDKs
Codea
Corona
Two Lives
Left
Lazarus
Corona Labs
Community
iPad
OS X,
Windows
Programming
Lua
Language
Price
Vendor
Platform
Source: heise Mac & I, Heft 07, 2012
8 €
Lazarus
RhoMobile
Suite
LiveCode
RealStudio
RunRev
Realsoftwar
Motorola
e
Unity
Technologie
s
OS X,
Windows,
Linux
OS X,
Windows,
Linux
OS X,
Windows
OS X,
Windows
OS X,
Windows
Lua
Object
Pascal
LiveCode
Realbasic
Ruby
Javascript,
C#, Boo
from 199
US-$
Open
Sources
from 99 USfrom 79€
$
Freeware
from 400
US-$
22
Unity
Chemnitz University
of Technology
22
Google Android Operating System Basics
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
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
Chemnitz University
of Technology
24
Android Versions
Android Timeline, FAQoid.com, October 01, 2012
Platform Versions,Dashboards Developers Android, October 01, 2012
25
Chemnitz University
of Technology
25
Android Versions
Android Timeline, FAQoid.com, October 01, 2012
Platform Versions,Dashboards Developers Android, October 01, 2012
25
Chemnitz University
of Technology
25
Architecture
Source: Unknown
26
Chemnitz University
of Technology
26
Architecture
27
Chemnitz University
of Technology
27
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.
27
Chemnitz University
of Technology
27
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.
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
Chemnitz University
of Technology
27
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 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.
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
Chemnitz University
of Technology
27
Architecture
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.
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 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.
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
Chemnitz University
of Technology
27
Architecture
Source: Unknown
28
Chemnitz University
of Technology
28
Architecture
Source: Unknown
28
Chemnitz University
of Technology
28
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 justin-time-compiler to speed up execution
29
Chemnitz University
of Technology
29
Architecture
Source: Unknown
30
Chemnitz University
of Technology
30
Architecture
Source: Unknown
30
Chemnitz University
of Technology
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
Chemnitz University
of Technology
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
Chemnitz University
of Technology
32
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.
33
Chemnitz University
of Technology
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
Chemnitz University
of Technology
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
Chemnitz University
of Technology
35
Installation of Android SDK
36
Chemnitz University
of Technology
36
Installation of Android SDK
36
Chemnitz University
of Technology
36
Installation of Android SDK
37
Chemnitz University
of Technology
37
Installation of Android SDK
37
Chemnitz University
of Technology
37
Installation of Android SDK
38
Chemnitz University
of Technology
38
Installation of Android SDK
Opens the Android SDK Manager
38
Chemnitz University
of Technology
38
Google Android A First Example
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
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
Screenshot vom PoolDesktop
40
Chemnitz University
of Technology
40
Eclipse
[krid@kreuz8:~]$ module load android/22.3.0
[krid@kreuz8:~]$ eclipse
Load module for eclipse
Start eclipse
Decide where your work will be stored
At the first start it will ask for the Android-SDK
use existing /sse/eda/adt/adt-bundle-linux-x86_64-20131030/sdk
41
Chemnitz University
of Technology
41
Workspace
workspace-screenshot
42
Chemnitz University
of Technology
42
Existing SDK
43
Chemnitz University
of Technology
43
HelloWorld
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
44
45
Chemnitz University
of Technology
45
46
Chemnitz University
of Technology
46
47
Chemnitz University
of Technology
47
48
Chemnitz University
of Technology
48
49
Chemnitz University
of Technology
49
50
Chemnitz University
of Technology
50
Running the App
‣ Launch the Android Virtual Device Manager
‣ Create one or more devices reflecting your
desired targets
‣ Eclipse -> Run As ... ->
51
Chemnitz University
of Technology
51
Create AVD
52
Chemnitz University
of Technology
52
Tweaking the AVD
53
Chemnitz University
of Technology
53
Tweaking the AVD
53
Chemnitz University
of Technology
53
Tweaking the AVD
53
Chemnitz University
of Technology
53
Emulator
54
Chemnitz University
of Technology
54
Google Android Application Basics
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
55
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
56
Chemnitz University
of Technology
56
Analyzing the App
‣ Using the Eclipse SDK ...
‣ Ending with a working „Hello World“ App after
some klicks
!""
!""
!""
!""
!""
!""
# # # # # # # %""
Android Manifest
AndroidManifest.xml
assets
bin
gen
libs
res
!"" drawable-hdpi
!"" drawable-ldpi
!"" drawable-mdpi
!"" drawable-xhdpi
!"" layout
!"" menu
%"" values
src
56
Chemnitz University
of Technology
56
Analyzing the App
‣ Using the Eclipse SDK ...
‣ Ending with a working „Hello World“ App after
some klicks
!""
!""
!""
!""
!""
!""
# # # # # # # %""
Android Manifest
AndroidManifest.xml
assets
bin
gen
libs
res
!"" drawable-hdpi
!"" drawable-ldpi
!"" drawable-mdpi
!"" drawable-xhdpi
!"" layout
!"" menu
%"" values
src
Generated Code
56
Chemnitz University
of Technology
56
Analyzing the App
‣ Using the Eclipse SDK ...
‣ Ending with a working „Hello World“ App after
some klicks
!""
!""
!""
!""
!""
!""
# # # # # # # %""
Android Manifest
AndroidManifest.xml
assets
bin
gen
libs
res
!"" drawable-hdpi
!"" drawable-ldpi
!"" drawable-mdpi
!"" drawable-xhdpi
!"" layout
!"" menu
%"" values
src
Generated Code
Needed Libraries
56
Chemnitz University
of Technology
56
Analyzing the App
‣ Using the Eclipse SDK ...
‣ Ending with a working „Hello World“ App after
some klicks
!""
!""
!""
!""
!""
!""
# # # # # # # %""
Android Manifest
AndroidManifest.xml
assets
bin
gen
libs
res
!"" drawable-hdpi
!"" drawable-ldpi
!"" drawable-mdpi
!"" drawable-xhdpi
!"" layout
!"" menu
%"" values
src
Generated Code
Needed Libraries
Resources
56
Chemnitz University
of Technology
56
Analyzing the App
‣ Using the Eclipse SDK ...
‣ Ending with a working „Hello World“ App after
some klicks
!""
!""
!""
!""
!""
!""
# # # # # # # %""
Android Manifest
AndroidManifest.xml
assets
bin
gen
libs
res
!"" drawable-hdpi
!"" drawable-ldpi
!"" drawable-mdpi
!"" drawable-xhdpi
!"" layout
!"" menu
%"" values
src
Generated Code
Needed Libraries
Resources
56
Java Source Files
Chemnitz University
of Technology
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
Chemnitz University
of Technology
57
58
Chemnitz University
of Technology
58
Manifest File
<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>
59
Chemnitz University
of Technology
59
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
Chemnitz University
of Technology
60
String Resources
<?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>
61
Chemnitz University
of Technology
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
Chemnitz University
of Technology
62
Changing the Layout
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
63
Changing the Layout
‣ First
‣ What do you like to display?
‣ Second
‣ Add the needed Strings
‣ Third
‣ Add the needed ViewGroups and Views
64
Chemnitz University
of Technology
64
Changing the Layout
‣ First
‣ What do you like to display?
‣ Second
‣ Add the needed Strings
‣ Third
‣ Add the needed ViewGroups and Views
64
Chemnitz University
of Technology
64
String Resources
<?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>
65
Chemnitz University
of Technology
65
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>
66
Chemnitz University
of Technology
66
Adding an Element
<?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>
67
Chemnitz University
of Technology
67
Adding a Second View
<?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" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send" />
</LinearLayout>
68
Chemnitz University
of Technology
68
Adding a Second View
<?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" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send" />
</LinearLayout>
68
Chemnitz University
of Technology
68
Tweaking Layout & Performance
<?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_weight="1"
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>
69
Chemnitz University
of Technology
69
Tweaking Layout & Performance
<?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_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
Added a weight to let this view
consume the available space
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send" />
</LinearLayout>
69
Chemnitz University
of Technology
69
Tweaking Layout & Performance
<?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_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
Added a weight to let this view
consume the available space
This depreciates the calculation
of the contents width
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send" />
</LinearLayout>
69
Chemnitz University
of Technology
69
Tweaking Layout & Performance
<?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_weight="1"
android:layout_width="0dip"
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>
70
Chemnitz University
of Technology
70
Tweaking Layout & Performance
<?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_weight="1"
android:layout_width="0dip"
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>
70
Chemnitz University
of Technology
70
Tweaking Layout & Performance
<?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_weight="1"
android:layout_width="0dip"
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>
70
Chemnitz University
of Technology
70
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
71
Chemnitz University
of Technology
71
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
71
Chemnitz University
of Technology
71
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
71
Chemnitz University
of Technology
71
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
71
Chemnitz University
of Technology
71
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
71
Chemnitz University
of Technology
71
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
71
Chemnitz University
of Technology
71
Application Structure
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
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
Chemnitz University
of Technology
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
Chemnitz University
of Technology
74
Activities
Better / own Image
75
Chemnitz University
of Technology
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
Chemnitz University
of Technology
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.
Source: Developpers.google.com
77
Chemnitz University
of Technology
77
Application Basics
‣Fragments
‣ Run in the context of an Activity
‣ Encapsulate application code
‣ Improve reuse
‣ Support different sized devices
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.
Source: Developpers.google.com
78
Chemnitz University
of Technology
78
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 ...
79
Chemnitz University
of Technology
79
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;
}
}
79
Chemnitz University
of Technology
79
Google Android Extending the App
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
80
Syncing
‣ In case of problems (or just to make sure ...)
‣ Use version provided by me
‣ Close eclipse
‣ cd into your workspace
‣ rm -rf SESAFirstApp
curl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/
rsrc/SESAFirstApp.v0.1.0.tar |tar xv
81
Chemnitz University
of Technology
81
Push the Button
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
82
Push the Button
<?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_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>
83
Chemnitz University
of Technology
83
Push the Button
<?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_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>
83
Chemnitz University
of Technology
83
Push the Button
<?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_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" />
This nominates the callback
function in the activity
</LinearLayout>
83
Chemnitz University
of Technology
83
Adding the Callback
/** Called when the user clicks the Send button */
public void sendMessage(View view) {
// Do something in response to button
}
84
Chemnitz University
of Technology
84
Adding the Callback
/** Called when the user clicks the Send button */
public void sendMessage(View view) {
// Do something in response to button
}
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);
}
84
Chemnitz University
of Technology
84
Magic Keys
Several unknown keywords (red underlined)
Try Ctrl+Shift+O
This will automatically add missing imports
Try Ctrl+Shift+F
This will format your code
/** 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);
}
85
Chemnitz University
of Technology
85
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
86
Chemnitz University
of Technology
86
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
87
Chemnitz University
of Technology
87
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
88
Chemnitz University
of Technology
88
What does the Code?
public class MainActivity extends Activity {
public final static String EXTRA_MESSAGE =
"com.example.myfirstapp.MESSAGE";
...
}
‣ 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
Chemnitz University
of Technology
89
What does the Code?
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);
}
...
‣ 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
Chemnitz University
of Technology
89
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
90
Chemnitz University
of Technology
90
A Second Activity
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
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
Chemnitz University
of Technology
92
Create the Activity
93
Chemnitz University
of Technology
93
Create the Activity
94
Chemnitz University
of Technology
94
Activity Basic Information
95
Chemnitz University
of Technology
95
96
Chemnitz University
of Technology
96
96
Chemnitz University
of Technology
96
The Second Activity
97
Chemnitz University
of Technology
97
Changed Manifest
Automatically done:
Add Activity to manifest
Add some strings
...
</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>
...
98
Chemnitz University
of Technology
98
Use the Intent
@Override
public 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);
99
Chemnitz University
of Technology
99
Use the Intent
Get the intent
Recall the string by using the key
Remember: key-value-pair
...
// get the Intent
Intent intent = getIntent();
// get the message we placed in
String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);
...
100
Chemnitz University
of Technology
100
Use the Intent
...
// 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);
...
Create TextView and fill it
Change some attributes
For now we don‘t use xml layout ...
But create the layout programmatically
101
Chemnitz University
of Technology
101
Try It
102
Chemnitz University
of Technology
102
A xml Layout
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
103
Use xml Layout
@Override
public 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);
...
}
Better use .xml Layout
Better to maintain and to develop
104
Chemnitz University
of Technology
104
xml Layout
<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>
105
Chemnitz University
of Technology
105
xml Layout
<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>
105
Chemnitz University
of Technology
105
xml Layout
<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>
105
Chemnitz University
of Technology
105
#Error
So for now - The App stopped
working
Next Point to Sync
curl http://www.tu-chemnitz.de/etit/sse/Lehre/
SESA/rsrc/SESAFirstApp.v0.2.0.tar |tar xv
106
Chemnitz University
of Technology
106
Debugging
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
107
LogCat
‣ Logger for messages from the phone /
emulator
‣ Offering a lot of features
‣ Filters, ...
‣ Write own messages by using Log
108
Chemnitz University
of Technology
108
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);
}
109
Chemnitz University
of Technology
109
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);
}
v(String, String) (verbose)
d(String, String) (debug)
i(String, String) (information)
w(String, String) (warning)
e(String, String) (error)
109
Chemnitz University
of Technology
109
Add Debugging Information
printf debugging is widely used
Helpful in many situations
It‘s not as good as assertions or as accurate
as using a debugger
public void sendMessage(View view) {
...
Log.i(TAG, "Adding: " + message + " to intent");
intent.putExtra(EXTRA_MESSAGE, message);
startActivity(intent);
}
110
Chemnitz University
of Technology
110
Add Debugging Information
printf debugging is widely used
Helpful in many situations
It‘s not as good as assertions or as accurate
as using a debugger
@Override
public 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);
}
111
Chemnitz University
of Technology
111
Check the Application
‣ It‘s still not working
‣ What does LogCat show?
‣ Use Filters to reduce the number of messages
112
Chemnitz University
of Technology
112
More Prints ...
@Override
public 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");
Narrow down the error by guarding all actions
with a print
113
Chemnitz University
of Technology
113
Found the Bug
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");
‣ No TextView is found matching this id
‣Why?
114
Chemnitz University
of Technology
114
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);
...
115
Chemnitz University
of Technology
115
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);
...
115
Chemnitz University
of Technology
115
Using the Debugger
116
Chemnitz University
of Technology
116
Using the Debugger
117
Chemnitz University
of Technology
117
Using the Debugger
118
Chemnitz University
of Technology
118
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
119
Chemnitz University
of Technology
119
Running Step by Step
Run Stop
Step
into
Step
over
‣ Step over to execute the line
‣ Step into to enter the next level of depth
120
Chemnitz University
of Technology
120
textView is still null after executing
findViewById()
121
Chemnitz University
of Technology
121
Google Android Application Lifecycle
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
122
The Activity Lifecycle
All other states are only transient!
123
Chemnitz University
of Technology
123
The Activity Lifecycle
static states
All other states are only transient!
123
Chemnitz University
of Technology
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
Chemnitz University
of Technology
124
Activity Startup
Startup order for each activity is
onCreate()
onStart()
onResume()
Which Activity is called after pressing the
Apps icon is defined in the manifest
<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>
125
Chemnitz University
of Technology
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
Chemnitz University
of Technology
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
Chemnitz University
of Technology
127
All States of Main Activity
@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.
128
}
r
t
t
‘
n
Do
ti !
y
p
o
c
o
t
y
Chemnitz University
of Technology
128
States of DisplayMessageActivity
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
ti !
y
r
t
t
‘
n
o
D
p
o
c
o
t
y
Chemnitz University
of Technology
129
States of DisplayMessageActivity
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.
}
130
ti !
y
r
t
t
‘
n
Do
p
o
c
o
t
y
Chemnitz University
of Technology
130
States of DisplayMessageActivity
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.
}
Download & Extract now!
curl http://www.tu-chemnitz.de/etit/sse/Lehre/
SESA/rsrc/SESAFirstApp.v0.2.1.tar |tar xv
130
ti !
y
r
t
t
‘
n
Do
p
o
c
o
t
y
Chemnitz University
of Technology
130
Remember the Bug
@Override
public 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);
...
}
Recreate the Code with the bug!!
131
Chemnitz University
of Technology
131
A Second Approach
OnStart()
Application is about to get visible
Here the layout is already set
This also seems to be a good place for the text insertion
@Override
public 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);
}
132
Chemnitz University
of Technology
132
One more Example
Add to the MainActivity
@Override
protected 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("");
}
Reset the TextView in onStop()
133
Chemnitz University
of Technology
133
SESAFirstApp
134
Chemnitz University
of Technology
134
SESAFirstApp
Find complete example:
curl http://www.tu-chemnitz.de/etit/sse/Lehre/
SESA/rsrc/SESAFirstApp.v0.3.0.tar |tar xv
134
Chemnitz University
of Technology
134
Sensors and Keys
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
135
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
136
Chemnitz University
of Technology
136
Fill Main Activity
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;
r
t
t
‘
n
Do
@Override
public void onStart() {
...
137
ti !
y
p
o
c
o
t
y
Chemnitz University
of Technology
137
Fill Main Activity
...
@Override
public 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));
...
ti !
y
r
t
t
‘
n
Do
138
p
o
c
o
t
y
Chemnitz University
of Technology
138
Fill Main Activity
@Override
public 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");
}
139
r
t
t
‘
n
o
D
ti !
y
p
o
c
o
t
y
Chemnitz University
of Technology
139
Fill Main Activity
@Override
public 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");
}
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
139
r
t
t
‘
n
o
D
ti !
y
p
o
c
o
t
y
Chemnitz University
of Technology
139
A New Java Class
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
}
}
140
Chemnitz University
of Technology
140
141
Chemnitz University
of Technology
141
141
Chemnitz University
of Technology
141
142
Chemnitz University
of Technology
142
142
Chemnitz University
of Technology
142
142
Chemnitz University
of Technology
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
Chemnitz University
of Technology
143
Member Variables
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
Chemnitz University
of Technology
144
Constructor
...
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
Chemnitz University
of Technology
145
Change Volume
@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_PLAY_SOUND);
//AudioManager.FLAG_SHOW_UI + AudioManager.FLAG_PLAY_SOUND);
}
146
Chemnitz University
of Technology
146
Respect Hardware Keys
// TODO there is still an issue with this function ...
@Override
public 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;
}
This does not work as expected
Key presses and volume are not in sync
147
Chemnitz University
of Technology
147
@Override
public 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
Chemnitz University
of Technology
148
That‘s It!
149
Chemnitz University
of Technology
149
That‘s It!
Final Version of the App
curl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/
rsrc/ChangeAllVolumes.v1.0.0.tar |tar xv
Now create your own App?!
149
Chemnitz University
of Technology
149
Suggestions
‣ CVAG - Timetable (based on position)
‣ Using preloaded timetables
‣ Calendar or person data display/manipulation
‣ ...
150
Chemnitz University
of Technology
150
Apple iOS
Operating System
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
151
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
152
Chemnitz University
of Technology
152
iOS Version Statistics
Source:
socialbarrel.com
Source:
insidemobileapps.com
153
Chemnitz University
of Technology
153
Apple iOS
iOS, iMore, October 01, 2012
154
Chemnitz University
of Technology
154
Architecture
‣ iOS consists of four layers
Source: developer.apple.com
155
Chemnitz University
of Technology
155
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
156
Chemnitz University
of Technology
156
Core Services Layer
‣ Fundamental system services
‣ iCloud storage
‣ Automatic reference counting
‣ Data protection
‣ File sharing support
‣ In-App purchase
‣ SQLite support
‣ XML support
157
Chemnitz University
of Technology
157
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
158
Chemnitz University
of Technology
158
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
159
Chemnitz University
of Technology
159
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
160
Chemnitz University
of Technology
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
Chemnitz University
of Technology
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
Chemnitz University
of Technology
162
Application File Format
‣ Each app runs its own sandbox
Source: developer.apple.com
163
Chemnitz University
of Technology
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
Chemnitz University
of Technology
164
Application Development
‣ 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
Chemnitz University
of Technology
165
Application Development
‣ 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
Chemnitz University
of Technology
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
Chemnitz University
of Technology
167
Creating a simple App
‣ Start XCode and choose required template
168
Chemnitz University
of Technology
168
Creating a simple App
‣ Define name and options
169
Chemnitz University
of Technology
169
Creating a simple App
‣ Xcode creates new project
170
Chemnitz University
of Technology
170
Creating a simple App
‣ 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
Chemnitz University
of Technology
171
Creating a simple App
‣ ViewController is the class responsible for
managing our view
‣ Derived from UIViewController
‣ contains all basic functionality
‣ App specific functionality will be added here
172
Chemnitz University
of Technology
172
Creating a simple App
‣ 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
Chemnitz University
of Technology
173
Creating a simple App
‣ 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
Chemnitz University
of Technology
174
Creating a simple App
‣ Complete Controller Header File looks like this
175
Chemnitz University
of Technology
175
Creating a simple App
‣ Generic Implementation file of Controller
contains definitions of standard functions
176
Chemnitz University
of Technology
176
Creating a simple App
‣ Synthesize has to be added for properties
‣ @synthesize
‣@synthesize
statusText;
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;
}
177
Chemnitz University
of Technology
177
Creating a simple App
‣ Complete Implementation file
178
Chemnitz University
of Technology
178
Creating a simple App
‣ ViewController.xib has to be changed to create
our desired View
179
Chemnitz University
of Technology
179
Creating a simple App
‣ ViewController.xib has to be changed to create
our desired View
179
Chemnitz University
of Technology
179
Creating a simple App
‣ 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
Chemnitz University
of Technology
180
Creating a simple App
‣ 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
Chemnitz University
of Technology
181
Creating a simple App
182
Chemnitz University
of Technology
182
Creating a simple App
‣ Set target to iPhone
Simulator and press
Run
‣ Simulator is started
and App is loaded
183
Chemnitz University
of Technology
183
Windows Mobile
Operating System
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
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
Chemnitz University
of Technology
185
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 Phone 8
October 2012
Windows Mobile, October 02, 2012
186
Chemnitz University
of Technology
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
Chemnitz University
of Technology
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
Chemnitz University
of Technology
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
Chemnitz University
of Technology
189
Software Architecture
190
Chemnitz University
of Technology
190
Requirements
‣ Requirement: MS Visual Studio + Phone SDK
‣ Visual Studio 2010 Express + Phone SDK freely
available
‣ Phone Emulator for debugging
‣ >= Windows 7 required
191
Chemnitz University
of Technology
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
Chemnitz University
of Technology
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
Chemnitz University
of Technology
193
Development Lifecycle
194
Chemnitz University
of Technology
194
Development Tools
195
Chemnitz University
of Technology
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-viewcontoller)
196
Chemnitz University
of Technology
196
Class library
197
Chemnitz University
of Technology
197
WP7 Sample App
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
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
Chemnitz University
of Technology
199
Creating a simple app
‣ Start Visual Studio, select desired language
and template, and name your app
200
Chemnitz University
of Technology
200
Creating a simple app
‣ Visual Studio creates new project
201
Chemnitz University
of Technology
201
Project files
‣ Package contents:
‣ Manifest
‣ Resources (icons, ...)
‣ App.xaml /
App.xaml.cs
‣ MainPage.xaml /
MainPage.xaml.cs
‣ All files auto-generated
202
Chemnitz University
of Technology
202
App.xaml
‣ App.xaml
‣ Including event definitions specific to application
lifecycle (launch/close/activate/deactivate
application, exceptions)
203
Chemnitz University
of Technology
203
App.xaml.cs
‣ App.xaml.cs
‣ Event handlers / code for events specific to
application life cycle
‣ Empty per default
204
Chemnitz University
of Technology
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
Chemnitz University
of Technology
205
Properties Window
‣ MainPage.xaml
‣ Page properties also in
„Properties“ window
‣ App / Page name
‣ Supported orientations
‣ Layout rules
‣ Default fonts
‣ ...
206
Chemnitz University
of Technology
206
MainPage.xaml.cs
‣ MainPage.xaml.cs
‣ Event handlers for devicespecific 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
Chemnitz University
of Technology
207
User Interface Designer
‣ Use tool box to place buttons and text field (drag‘n‘drop)
‣ .xaml file gets modified accordingly
208
Chemnitz University
of Technology
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
Chemnitz University
of Technology
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
Chemnitz University
of Technology
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
Chemnitz University
of Technology
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
Chemnitz University
of Technology
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
Chemnitz University
of Technology
213
Web Based Smartphone
Applications
Professur Schaltkreisund Systementwurf
www.tu-chemnitz.de
214
Web-Apps with specific Look
‣ PhoneGap (c‘t 21/2012)
‣ c‘t 15/2012
215
Chemnitz University
of Technology
215