creating a simple app
TRANSCRIPT
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
Software Environments of Smartphone Applications
Exercise/Practice
1
Chemnitz Universityof Technology
Introduction‣ The course Software Environments of Smartphone
Applications (SESA) provides an overview of the current smartphone market. It depicts the concepts of the operating systems and introduces to the development environments and philosophies.
‣ As an example, the Android OS and the development of Android applications is presented in depth.
‣ The course consists of an exercise and a practice session.
‣ The examination is a 20 minutes presentation of a self developed smartphone application.
2
2
Chemnitz Universityof Technology
Prerequisites for Attending
3
‣ What do I do?‣ Depicts the concepts of the operating systems‣ Introduce the development environments and philosophies
‣ What else do I do?‣ Introduce Android environment in depth‣ Show some basic programming philosophies for Android‣ Lend you a hand while you develop your application
‣ What do I not do?‣ Teach you the english language‣ Teach you the basics of the Java programming language‣ Implement your application for you
3
Chemnitz Universityof Technology
Prerequisites for Attending
4
‣What do you do?‣ Have programming skills beyond those of „Hello
World“‣Or have a deep personal interest in learning the
Java programming language‣Have a deep personal interest in learning the
Android dependent part of the Java programming language
‣Regularly attend the exercise/pactise!
4
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
Software Environments of Smartphone Applications
5
Chemnitz Universityof Technology
Smartphones‣ First devices appeared 1994 at the market
‣ Boom started with Apples first iPhone (2007)
‣ Before, RIM and Nokia dominated the market
‣ Key hardware features of today‘s smartphones‣ High resolution touch display (mostly capacitive displays)‣ Fast processor (up to 2 GHz), various architectures‣ Plenty of RAM (512MB and more)‣ Gigabytes of Flash‣ One or two high quality cameras‣ Several sensors (acceleration, rotation, GPS, ...)
6
HTC Sensation, htc.com, October 01, 2012
6
Chemnitz Universityof Technology
Smartphones‣Key software features‣ Well defined, open and mostly free API‣ Well developed, mostly free development
environments‣ App development is open to anyone
‣Applications (Apps)‣ Applications extend the functionality of the OS‣ Applications are often OS specific (look, feel, API)‣ App Stores offers access to applications and
contents (books/magazines, music, movies)
7
Sony Xperia S, Chip.de, October 01, 2012
7
Chemnitz Universityof Technology
Operating Systems
8 IDC Worldwide Mobile Phone Tracker, May 24, 2012
‣Lots of different operating systems‣ Biggest ones are Android and iOS
‣Former leader Symbian (up to 75%) lost its importance
‣Windows Phone still lags behind
‣RIM is also not able to follow
‣Other Linux based solutionsdo not gain importance, yet
8
Chemnitz Universityof Technology
Ecosystems‣The „Ecosystem“ is the sum of‣ The vendor support for‣ The smartphone hardware‣ The smartphone OS
‣ The available App-Store(s) and contents‣ The development environment‣ The hardware and software the phone is (directly)
compatible with‣ e. g. hardware and software of the same vendor‣ software to integrate the phone in one‘s workflow
9
9
Chemnitz Universityof Technology
Smartphone Applications‣ „Apps“ - short for „Applications“‣ All kind of (end-)user software is an App‣ Currently the term is commonly used as a synonym for end user
software on smartphones
‣ Types of smartphone applications‣ OS specific apps‣ Build using the specific programming languages and tools‣ Target to a certain Phone-API and run directly on that OS‣ Often also address on special look & feel, as well as OS specific
features‣ Web-Apps‣ Build using web technologies like HTML, CSS, jQuery‣ Need a web server to be hosted‣ Can be „transformed“ to run directly on the phone
10
10
Chemnitz Universityof Technology
Basic Workflow
11
Idea
Specification
Resource Analysis
Implemen-tation
TestPlatform Decision
SDK Decision
Maintenance
Shop Rollout
11
Chemnitz Universityof Technology
Basic Workflow
12
‣ Idea
‣ Specification (first round)‣ Rough line-out, pictures, ...
‣ Resource analysis‣ Estimations for display size, computing power, ...
‣ Platform decision‣ One platform, all major platforms
‣ SDK decision‣ Specific apps or web-apps‣ Programming language
12
Chemnitz Universityof Technology
Basic Workflow‣ Implementation‣ Specification (second round)‣ control concept, GUI elements, ...
‣ Programming language, modularisation, ...
‣Test‣ First using the simulator(s)‣ Second using real phone(s)‣ May become very expensive due to the mass of
devices
13
13
Chemnitz Universityof Technology
Basic Workflow
14
‣Shop rollout‣ Decision of the price‣ Advertisement‣ Shop account‣ Gate keepers, ...
‣Maintenance‣ May be very intensive in the first cycles due to
costumers feedback
14
Chemnitz Universityof Technology
Runtime Environments‣Hosted on a web server
‣Run in the phones web browser / browser environment‣ Is therefore restricted to the browser capabilities‣ Not necessarily full hardware access (filesystem,
phone data, sensors, cameras, ...)‣ Speed limitations
‣Should emulate the phones elements and specific look
‣Should follow the UI guidelines of the target OS15
15
Chemnitz Universityof Technology
Runtime Environments‣Run natively in the phones app environment‣ Sandbox (iOS)‣ Java VM / Dalvik VM‣ Silverlight / XNA (Windows Phone)
‣Restricted by sandboxing / virtualization
‣Access to hardware, data, ... through a OS dependent API
‣Look & Feel predefined / affected by OS dependent API
16
16
Chemnitz Universityof Technology
Specific SDKs‣Applications form one of the most important
selling arguments
‣Therefore all vendors offer a SDK for their mobile OS‣ Apple: Xcode‣ Android: Android SDK (to be used with Eclipse)‣ Windows 8: Visual Studio 2012‣ RIM: BlackBerry Specific SDK
‣The SDKs also offer Simulators
17
17
Chemnitz Universityof Technology
Apples Xcode
18Source: developer.apple.com
18
Chemnitz Universityof Technology
Google Android SDK
19
‣Based on Eclipse
19
Chemnitz Universityof Technology
Windows 8
20Source: http://www.ginktage.com/2012/08/creating-windows-8-app/
20
Chemnitz Universityof Technology
3rd Party SDKs
‣Several 3rd party IDEs exist with different goals
‣More graphical approaches for non-programmers
‣Specific app development with other languages
‣Some even provide platform independent specific app development
‣Conversion of web-app to stand alone app21
21
Chemnitz Universityof Technology
3rd Party SDKs
22
Codea Corona Lazarus LiveCode RealStudio RhoMobile Suite Unity
Vendor Two Lives Left Corona Labs Lazarus
Community RunRev Realsoftware Motorola
Unity Technologies
Platform iPad OS X, Windows
OS X, Windows, Linux
OS X, Windows, Linux
OS X, Windows
OS X, Windows
OS X, Windows
Programming Language Lua Lua Object
Pascal LiveCode Realbasic Ruby Javascript, C#, Boo
Price 8 € from 199 US-$
Open Sources
from 99 US-$ from 79€ Freeware from 400
US-$
Source: heise Mac & I, Heft 07, 2012
22
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
Google Android - Operating System Basics
23
Chemnitz Universityof Technology
Android‣Operating System for Smartphones‣ Kernel, Middelware, Applications
‣ The first commercially available phone to run Android was the HTC Dream, released on October 22, 2008.
‣ Since then Android became the most used Smartphone Operating System
‣ Therefore very heterogenous infrastructure:‣ Hundreds of devices‣ Variety of Architectures, Displays, Brandings, Versions, ...
24
24
Chemnitz Universityof Technology
Android Versions
25Platform Versions,Dashboards Developers Android, October 01, 2012
Android Timeline, FAQoid.com, October 01, 2012
25
Chemnitz Universityof Technology
Android Versions
25Platform Versions,Dashboards Developers Android, October 01, 2012
Android Timeline, FAQoid.com, October 01, 2012
25
Chemnitz Universityof Technology
Architecture
26Source: Unknown
26
Chemnitz Universityof Technology
Architecture
27
27
Chemnitz Universityof Technology
Architecture
27
The base of Android is formed by the Linux Kernel and its drivers. The kernel is the only element having direct access to the hardware. It also manages the system memory and provides interfaces for the applications to communicate with each other in a secure and fast way.
27
Chemnitz Universityof Technology
Architecture
27
The base of Android is formed by the Linux Kernel and its drivers. The kernel is the only element having direct access to the hardware. It also manages the system memory and provides interfaces for the applications to communicate with each other in a secure and fast way.
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 Universityof Technology
Architecture
27
The base of Android is formed by the Linux Kernel and its drivers. The kernel is the only element having direct access to the hardware. It also manages the system memory and provides interfaces for the applications to communicate with each other in a secure and fast way.
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.
At the third layer, the Application Framework, all components run inside the Dalvik VM. Here reside services which access the libraries of the native layer and provide standardized interfaces for the Applications.
27
Chemnitz Universityof Technology
Architecture
27
The base of Android is formed by the Linux Kernel and its drivers. The kernel is the only element having direct access to the hardware. It also manages the system memory and provides interfaces for the applications to communicate with each other in a secure and fast way.
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.
At the third layer, the Application Framework, all components run inside the Dalvik VM. Here reside services which access the libraries of the native layer and provide standardized interfaces for the Applications.
The highest layer is where all applications live. Each applications live in its own sandbox. This means: Each application runs as a different user of the linux system. Each process has its own virtual machine and every application runs in its own process. Each application, by default, has access only to the components that it requires to do its work and no more. This creates a very secure environment in which an application cannot access parts of the system for which it is not given permission.
27
Chemnitz Universityof Technology
Architecture
28Source: Unknown
28
Chemnitz Universityof Technology
Architecture
28Source: Unknown
28
Chemnitz Universityof Technology
Dalvik VM
29
‣Optimized for slim devices
‣Process Virtual Machine‣ Runs as a normal application inside a host OS and
supports execution of a single process‣ Created when the process is started and destroyed
when it exits
‣ Interprets byte code, which is typically created from Java source code
‣As of Android 2.2 Dalvik is enhanced by a just-in-time-compiler to speed up execution
29
Chemnitz Universityof Technology
Architecture
30Source: Unknown
30
Chemnitz Universityof Technology
Architecture
30Source: Unknown
30
Chemnitz Universityof Technology
Core Libraries‣Set of basic libraries „close to the VM“
‣Three main parts‣ Dalvik VM- specific libraries‣ System info, debugging, ...
‣ Java compatibility libraries‣ Base and utility classes
‣ Third-party utility libraries‣ Like Apache HttpClient 4.0
‣Provides „more desktop like“ JRE‣ Subset of desktop JRE 1.5
31
31
Chemnitz Universityof Technology
Application File Format‣ Java source files of an Application are converted to Java class
files by the Java compiler
‣ Then Java class files will be converted into a .dex (Dalvik Executable) file
‣ Due to some optimization, dex files are much smaller in size than the corresponding class files.
‣ The .dex file and the resources of an Android project, e.g. the images and XML files, are packed into an .apk (Android Package) file.
‣ The resulting .apk file contains all necessary data to run the Android application and can be deployed to an Android device
‣ The Android Development Tools (ADT) perform these steps transparently to the user.
32
32
Chemnitz Universityof Technology
Sandboxing
33
‣ Each Android application lives in its own security sandbox
‣ The Android operating system is a multi-user Linux system‣ Each application is a different user with a unique,
unknown Linux user ID‣ Permissions for all the files in an application are set to
this user ID
‣ Each process has its own virtual machine (VM)
‣ By default, every application runs in its own Linux process.
33
Chemnitz Universityof Technology
Android SDKs (by Google)
‣ Android SDK‣ Includes a debugger, libraries, a handset emulator based
on QEMU, documentation, sample code, and tutorials
‣Native Development Kit‣ Development of libraries written in C and other languages‣ Compiled to ARM or x86 native code
‣ App Inventor for Android‣ Web-based visual development environment from Google‣ For novice programmers, based on MIT's Open Blocks
Java library‣ Offers Access to phone functions and sensors
34
34
Chemnitz Universityof Technology
Installation of Android SDK
‣Download eclipse for Java developers‣ http://www.eclipse.org/downloads/
‣ Install the ADT plugin for Eclipse
‣Download the latest SDK tools and platforms using the SDK Manager.
35
35
Chemnitz Universityof Technology
Installation of Android SDK
36
36
Chemnitz Universityof Technology
Installation of Android SDK
36
36
Chemnitz Universityof Technology
Installation of Android SDK
37
37
Chemnitz Universityof Technology
Installation of Android SDK
37
37
Chemnitz Universityof Technology
Installation of Android SDK
38
38
Chemnitz Universityof Technology
Installation of Android SDK
38
Opens the Android SDK Manager
38
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
Google Android - A First Example
39
Chemnitz Universityof Technology
Login
‣Use the provided login and password‣ If you change the password -> WRITE IT DOWN!
‣Scientific Linux 6
‣Eclipse needs to be started from the command line
40
Screenshot vom Pool-Desktop
40
Chemnitz Universityof Technology
[krid@kreuz8:~]$ module load android/22.3.0[krid@kreuz8:~]$ eclipse
Eclipse
41
Load module for eclipse
Start eclipseDecide where your work will be stored
At the first start it will ask for the Android-SDKuse existing /sse/eda/adt/adt-bundle-linux-x86_64-20131030/sdk
41
Chemnitz Universityof Technology
Workspace
42
workspace-screenshot
42
Chemnitz Universityof Technology
Existing SDK
43
43
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
HelloWorld
44
Chemnitz Universityof Technology45
45
Chemnitz Universityof Technology46
46
Chemnitz Universityof Technology47
47
Chemnitz Universityof Technology48
48
Chemnitz Universityof Technology49
49
Chemnitz Universityof Technology50
50
Chemnitz Universityof Technology
Running the App
‣Launch the Android Virtual Device Manager
‣Create one or more devices reflecting your desired targets
‣Eclipse -> Run As ... ->
51
51
Chemnitz Universityof Technology
Create AVD
52
52
Chemnitz Universityof Technology
Tweaking the AVD
53
53
Chemnitz Universityof Technology
Tweaking the AVD
53
53
Chemnitz Universityof Technology
Tweaking the AVD
53
53
Chemnitz Universityof Technology
Emulator
54
54
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
Google Android - Application Basics
55
Chemnitz Universityof Technology
Analyzing the App
‣Using the Eclipse SDK ...
‣Ending with a working „Hello World“ App after some klicks
56
!"" AndroidManifest.xml!"" assets!"" bin!"" gen!"" libs!"" res# !"" drawable-hdpi# !"" drawable-ldpi# !"" drawable-mdpi# !"" drawable-xhdpi# !"" layout# !"" menu# %"" values%"" src
56
Chemnitz Universityof Technology
Analyzing the App
‣Using the Eclipse SDK ...
‣Ending with a working „Hello World“ App after some klicks
56
!"" AndroidManifest.xml!"" assets!"" bin!"" gen!"" libs!"" res# !"" drawable-hdpi# !"" drawable-ldpi# !"" drawable-mdpi# !"" drawable-xhdpi# !"" layout# !"" menu# %"" values%"" src
Android Manifest
56
Chemnitz Universityof Technology
Analyzing the App
‣Using the Eclipse SDK ...
‣Ending with a working „Hello World“ App after some klicks
56
!"" AndroidManifest.xml!"" assets!"" bin!"" gen!"" libs!"" res# !"" drawable-hdpi# !"" drawable-ldpi# !"" drawable-mdpi# !"" drawable-xhdpi# !"" layout# !"" menu# %"" values%"" src
Android ManifestGenerated Code
56
Chemnitz Universityof Technology
Analyzing the App
‣Using the Eclipse SDK ...
‣Ending with a working „Hello World“ App after some klicks
56
!"" AndroidManifest.xml!"" assets!"" bin!"" gen!"" libs!"" res# !"" drawable-hdpi# !"" drawable-ldpi# !"" drawable-mdpi# !"" drawable-xhdpi# !"" layout# !"" menu# %"" values%"" src
Android Manifest
Needed LibrariesGenerated Code
56
Chemnitz Universityof Technology
Analyzing the App
‣Using the Eclipse SDK ...
‣Ending with a working „Hello World“ App after some klicks
56
!"" AndroidManifest.xml!"" assets!"" bin!"" gen!"" libs!"" res# !"" drawable-hdpi# !"" drawable-ldpi# !"" drawable-mdpi# !"" drawable-xhdpi# !"" layout# !"" menu# %"" values%"" src
Android Manifest
ResourcesNeeded LibrariesGenerated Code
56
Chemnitz Universityof Technology
Analyzing the App
‣Using the Eclipse SDK ...
‣Ending with a working „Hello World“ App after some klicks
56
!"" AndroidManifest.xml!"" assets!"" bin!"" gen!"" libs!"" res# !"" drawable-hdpi# !"" drawable-ldpi# !"" drawable-mdpi# !"" drawable-xhdpi# !"" layout# !"" menu# %"" values%"" src
Android Manifest
Resources
Java Source Files
Needed LibrariesGenerated Code
56
Chemnitz Universityof Technology
Analyzing the App‣ AndroidManifest.xml file, the "manifest" file
‣ Declare all components of an App
‣ Identify any user permissions the application requires, such as Internet access or read-access to the user's contacts.
‣ Declare the minimum API Level required by the application, based on which APIs the application uses.
‣ Declare hardware and software features used or required by the application, such as a camera, bluetooth services, or a multitouch screen.
‣ API libraries the application needs to be linked against (other than the Android framework APIs), such as Google Maps library.
‣ And more ...
57
57
Chemnitz Universityof Technology58
58
Chemnitz Universityof Technology
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="de.tuchemnitz.etit.sse.sesafirstapp" android:versionCode="1" android:versionName="1.0" >
<uses-sdk android:minSdkVersion="10" android:targetSdkVersion="15" />
<application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/title_activity_main" > <intent-filter> <action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".DisplayMessageActivity" android:label="@string/title_activity_display_message" > <meta-data android:name="android.support.PARENT_ACTIVITY" android:value="de.tuchemnitz.etit.sse.sesafirstapp.MainActivity" /> </activity> </application>
</manifest>
Manifest File
59
59
Chemnitz Universityof Technology
Analyzing the App‣Resources like layouts, strings, icons, images
‣Are kept separated from the source code
‣The containing folders define their purpose
‣The .xml-Files will automatically be converted to Java code‣ See gen/.../R.java
60
60
Chemnitz Universityof Technology
<?xml version="1.0" encoding="utf-8"?><resources> <string name="app_name">SESAFirstApp</string> <string name="menu_settings">Settings</string> <string name="title_activity_main">MainActivity</string></resources>
String Resources
61
61
Chemnitz Universityof Technology
Layout
‣An activity is made up of Views and Viewgroups‣ Views are typically UI objects‣ ViewGroups are invisible view containers that define
how the child views are laid out
62
62
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
Changing the Layout
63
Chemnitz Universityof Technology64
Changing the Layout
‣First‣ What do you like to display?
‣Second‣ Add the needed Strings
‣Third‣ Add the needed ViewGroups and Views
64
Chemnitz Universityof Technology64
Changing the Layout
‣First‣ What do you like to display?
‣Second‣ Add the needed Strings
‣Third‣ Add the needed ViewGroups and Views
64
Chemnitz Universityof Technology
<?xml version="1.0" encoding="utf-8"?><resources> <string name="app_name">SESAFirstApp</string> <string name="menu_settings">Settings</string> <string name="title_activity_main">MainActivity</string> <string name="edit_message">Enter a message</string> <string name="button_send">Send</string></resources>
String Resources
65
65
Chemnitz Universityof Technology
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" ></LinearLayout>
A Linear Layout
66
66
Chemnitz Universityof Technology
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" >
<EditText android:id="@+id/edit_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/edit_message" />
</LinearLayout>
Adding an Element
67
67
Chemnitz Universityof Technology
Adding a Second View
68
<?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 Universityof Technology
Adding a Second View
68
<?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 Universityof Technology
<?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>
Tweaking Layout & Performance
69
69
Chemnitz Universityof Technology
<?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>
Tweaking Layout & Performance
69
Added a weight to let this view consume the available space
69
Chemnitz Universityof Technology
<?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>
Tweaking Layout & Performance
69
Added a weight to let this view consume the available space
This depreciates the calculation of the contents width
69
Chemnitz Universityof Technology
Tweaking Layout & Performance
70
<?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 Universityof Technology
Tweaking Layout & Performance
70
<?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 Universityof Technology
Tweaking Layout & Performance
70
<?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 Universityof Technology
Understanding the Weight
71
‣Default is all zero
‣Numbers are added
‣Taken space is weight/summ
‣e.g. 1, 2, 0, 1 = 4
‣1/4, 2/4, 0/4, 1/4
71
Chemnitz Universityof Technology
Understanding the Weight
71
‣Default is all zero
‣Numbers are added
‣Taken space is weight/summ
‣e.g. 1, 2, 0, 1 = 4
‣1/4, 2/4, 0/4, 1/4
71
Chemnitz Universityof Technology
Understanding the Weight
71
‣Default is all zero
‣Numbers are added
‣Taken space is weight/summ
‣e.g. 1, 2, 0, 1 = 4
‣1/4, 2/4, 0/4, 1/4
71
Chemnitz Universityof Technology
Understanding the Weight
71
‣Default is all zero
‣Numbers are added
‣Taken space is weight/summ
‣e.g. 1, 2, 0, 1 = 4
‣1/4, 2/4, 0/4, 1/4
71
Chemnitz Universityof Technology
Understanding the Weight
71
‣Default is all zero
‣Numbers are added
‣Taken space is weight/summ
‣e.g. 1, 2, 0, 1 = 4
‣1/4, 2/4, 0/4, 1/4
71
Chemnitz Universityof Technology
Understanding the Weight
71
‣Default is all zero
‣Numbers are added
‣Taken space is weight/summ
‣e.g. 1, 2, 0, 1 = 4
‣1/4, 2/4, 0/4, 1/4
71
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
Application Structure
72
Chemnitz Universityof Technology
Application Basics‣Activities‣ A single (independent) screen with a user interface‣ An application may consist of several activities‣ Activities can be called by other Applications
‣Services‣ A component that runs in the background‣ No user interface
‣ Content providers‣ Manages a shared set of application data
‣Broadcast receivers‣ Responds to system-wide broadcast announcements
73
73
Chemnitz Universityof Technology
Application Basics‣Apps do not have a main() function
‣Activities always run in the context of the owning Application (not in the caller context)
‣Therefore a intend - a special type of message to the system - is needed
‣Intend‣ Asynchronous messages which allow the
application to request functionality from other components
74
74
Chemnitz Universityof Technology
Activities
75
Better / own Image
75
Chemnitz Universityof Technology
Application Basics‣Widgets‣ Interactive components mostly used on the home
screen‣ Typically display some kind of data and allow to
perform actions
‣Even more ...‣ E.g. Live Folders and Live Wallpapers
76
76
Chemnitz Universityof Technology
Application Basics
‣Views and ViewGroups‣ The GUI of an app is build up on Views and
ViewGroups‣ View objects are usually UI widgets such as buttons or
text fields‣ ViewGroup objects are invisible view containers such
as a grid or a vertical list.
77Source: Developpers.google.com
77
Chemnitz Universityof Technology
Application Basics
‣Fragments‣ Run in the context of an Activity‣ Encapsulate application code‣ Improve reuse‣ Support different sized devices
78Source: Developpers.google.com
An example of how two UI modules defined by fragments can be combined into one activity for a tablet design but separated for a handset design.
78
Chemnitz Universityof Technology
No line of java, yet?
79
‣Up to this point there was no need to write a single line of Java code.
‣But we have a running Android App ...
79
Chemnitz Universityof Technology
No line of java, yet?
79
‣Up to this point there was no need to write a single line of Java code.
‣But we have a running Android App ...package de.tuchemnitz.etit.sse.sesafirstapp; import android.os.Bundle;import android.app.Activity;import android.view.Menu; public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_main, menu); return true; }}
79
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
Google Android - Extending the App
80
Chemnitz Universityof Technology
Syncing
81
curl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/SESAFirstApp.v0.1.0.tar |tar xv
‣ In case of problems (or just to make sure ...)‣ Use version provided by me
‣Close eclipse
‣cd into your workspace
‣ rm -rf SESAFirstApp
81
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
Push the Button
82
Chemnitz Universityof Technology
<?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>
Push the Button
83
83
Chemnitz Universityof Technology
<?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>
Push the Button
83
83
Chemnitz Universityof Technology
<?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>
Push the Button
83
This nominates the callback function in the activity
83
Chemnitz Universityof Technology
Adding the Callback
84
/** Called when the user clicks the Send button */public void sendMessage(View view) { // Do something in response to button}
84
Chemnitz Universityof Technology
Adding the Callback
84
/** Called when the user clicks the Send button */public void sendMessage(View view) { // Do something in response to button}
/** Called when the user clicks the Send button */public void sendMessage(View view) { Intent intent = new Intent(this, DisplayMessageActivity.class); EditText editText = (EditText) findViewById(R.id.edit_message); String message = editText.getText().toString(); intent.putExtra(EXTRA_MESSAGE, message); startActivity(intent);}
And fill it with code to start a second Activity ...
84
Chemnitz Universityof Technology
/** Called when the user clicks the Send button */public void sendMessage(View view) { Intent intent = new Intent(this, DisplayMessageActivity.class); EditText editText = (EditText) findViewById(R.id.edit_message); String message = editText.getText().toString(); intent.putExtra(EXTRA_MESSAGE, message); startActivity(intent);}
Magic Keys
85
Several unknown keywords (red underlined)Try Ctrl+Shift+O
This will automatically add missing imports
Try Ctrl+Shift+FThis will format your code
85
Chemnitz Universityof Technology
What does the Code?
86
Intent intent = new Intent(this, DisplayMessageActivity.class);
‣Object that provides runtime binding between separate components (such as two activities).
‣Represents an app’s "intent to do something".
‣Used for a wide variety of tasks‣ most often used to start another activity
‣Here: start an activity called DisplayMessageActivity
86
Chemnitz Universityof Technology
What does the Code?
87
EditText editText = (EditText) findViewById(R.id.edit_message);
‣Create an EditText object in the Activity
‣Connect it to the edit_message in the view
‣findViewById is often used to get handles from views in the layout
87
Chemnitz Universityof Technology
What does the Code?
88
String message = editText.getText().toString();intent.putExtra(EXTRA_MESSAGE, message);
‣Create a String object
‣Fill it with the content of the edit_message view
‣Hand it over to the intent
‣An Intent can carry a collection of various data types as key-value pairs
88
Chemnitz Universityof Technology
What does the Code?
‣The key must be known to both activities
‣Thus defining it as a public constant is a good way
‣ It‘s a good practice to prefix the key with the app‘s package name
89
public class MainActivity extends Activity { public final static String EXTRA_MESSAGE = "com.example.myfirstapp.MESSAGE"; ...}
89
Chemnitz Universityof Technology
What does the Code?
‣The key must be known to both activities
‣Thus defining it as a public constant is a good way
‣ It‘s a good practice to prefix the key with the app‘s package name
89
public class MainActivity extends Activity { public final static String EXTRA_MESSAGE = "com.example.myfirstapp.MESSAGE"; ...}public class MainActivity extends Activity {
/** String constants for Intents */ public final static String EXTRA_MESSAGE = "de.tuchemnitz.etit.sse.sesafir stapp.MESSAGE"; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }...
89
Chemnitz Universityof Technology
What does the Code?
90
startActivity(intent);
‣Create a String object
‣Fill it with the content of the edit_message view
‣Hand it over to the intent
‣An Intent can carry a collection of various data types as key-value pairs
90
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
A Second Activity
91
Chemnitz Universityof Technology
A Second Activity
‣Eclipse SDK helps here as well
‣Using the „New Project“ wizard‣ Add all needed files‣ Changes the manifest and strings
92
92
Chemnitz Universityof Technology
Create the Activity
93
93
Chemnitz Universityof Technology
Create the Activity
94
94
Chemnitz Universityof Technology
Activity Basic Information
95
95
Chemnitz Universityof Technology96
96
Chemnitz Universityof Technology96
96
Chemnitz Universityof Technology
The Second Activity
97
97
Chemnitz Universityof Technology
... </intent-filter> </activity> <activity android:name="de.tuchemnitz.etit.sse.sesafirstapp.DisplayMessageActivity" android:label="@string/title_activity_display_message" android:parentActivityName="de.tuchemnitz.etit.sse.sesafirstapp.MainActivity" > <meta-data android:name="android.support.PARENT_ACTIVITY" android:value="de.tuchemnitz.etit.sse.sesafirstapp.MainActivity" /> </activity> </application>...
Changed Manifest
98
Automatically done:Add Activity to manifestAdd some strings
98
Chemnitz Universityof Technology
@Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
// get the Intent Intent intent = getIntent();
// get the message we placed in String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);
// Create a TextView and fill it with the message TextView textView = new TextView(this); textView.setTextSize(40); textView.setText(message);
// Set the text view as the activity layout setContentView(textView); /* * saved for later use * setContentView(R.layout.activity_display_message); */ getActionBar().setDisplayHomeAsUpEnabled(true);}
Use the Intent
99
99
Chemnitz Universityof Technology
... // get the Intent Intent intent = getIntent();
// get the message we placed in String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);...
Use the Intent
100
Get the intentRecall the string by using the key
Remember: key-value-pair
100
Chemnitz Universityof Technology
... // Create a TextView and fill it with the message TextView textView = new TextView(this); textView.setTextSize(40); textView.setText(message);
// Set the text view as the activity layout setContentView(textView);...
Use the Intent
101
Create TextView and fill itChange some attributesFor now we don‘t use xml layout ...But create the layout programmatically
101
Chemnitz Universityof Technology
Try It
102
102
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
A xml Layout
103
Chemnitz Universityof Technology
@Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // get the Intent Intent intent = getIntent(); // get the message we placed in String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);
// Create a TextView and fill it with the message TextView textView = (TextView) findViewById(R.id.view_message); textView.setText(message); // adapt the view setContentView(R.layout.activity_display_message);
...}
Use xml Layout
Better use .xml LayoutBetter to maintain and to develop
104
104
Chemnitz Universityof Technology
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" >
<TextView android:id="@+id/view_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:hint="@string/hello_world" android:textSize="40sp" tools:context=".DisplayMessageActivity" />
</RelativeLayout>
xml Layout
105
105
Chemnitz Universityof Technology
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" >
<TextView android:id="@+id/view_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:hint="@string/hello_world" android:textSize="40sp" tools:context=".DisplayMessageActivity" />
</RelativeLayout>
xml Layout
105
105
Chemnitz Universityof Technology
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" >
<TextView android:id="@+id/view_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:hint="@string/hello_world" android:textSize="40sp" tools:context=".DisplayMessageActivity" />
</RelativeLayout>
xml Layout
105
105
Chemnitz Universityof Technology
#Error
106
So for now - The App stopped working
curl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/SESAFirstApp.v0.2.0.tar |tar xv
Next Point to Sync
106
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
Debugging
107
Chemnitz Universityof Technology
LogCat
‣Logger for messages from the phone / emulator
‣Offering a lot of features‣ Filters, ...
‣Write own messages by using Log108
108
Chemnitz Universityof Technology
/** String prefix for Logging */ private static final String TAG = "SFA_Main"; /*SESAFirstApp Main Activity */
@Override public void onCreate(Bundle savedInstanceState) { Log.d(TAG, "onCreate called"); super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }
Using the Logger
109
109
Chemnitz Universityof Technology
/** String prefix for Logging */ private static final String TAG = "SFA_Main"; /*SESAFirstApp Main Activity */
@Override public void onCreate(Bundle savedInstanceState) { Log.d(TAG, "onCreate called"); super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }
Using the Logger
109
v(String, String) (verbose)d(String, String) (debug)i(String, String) (information)w(String, String) (warning)e(String, String) (error)
109
Chemnitz Universityof Technology
public void sendMessage(View view) {... Log.i(TAG, "Adding: " + message + " to intent"); intent.putExtra(EXTRA_MESSAGE, message); startActivity(intent); }
Add Debugging Informationprintf debugging is widely usedHelpful in many situationsIt‘s not as good as assertions or as accurate as using a debugger
110
110
Chemnitz Universityof Technology
@Overridepublic void onCreate(Bundle savedInstanceState) {... // get the message we placed in String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE); Log.i(TAG, "Got: " + message + " from Intent");... // adapt the view setContentView(R.layout.activity_display_message);}
Add Debugging Informationprintf debugging is widely usedHelpful in many situationsIt‘s not as good as assertions or as accurate as using a debugger
111
111
Chemnitz Universityof Technology
Check the Application
‣ It‘s still not working
‣What does LogCat show?‣ Use Filters to reduce the number of messages
112
112
Chemnitz Universityof Technology
@Overridepublic void onCreate(Bundle savedInstanceState) {... // Create a TextView and fill it with the message TextView textView = (TextView) findViewById(R.id.view_message); if (textView != null) { Log.d(TAG, "Found the TextView"); } else { Log.d(TAG, "Text view not found!"); } textView.setText(message); Log.d(TAG, "After insertion");
// adapt the view setContentView(R.layout.activity_display_message); Log.d(TAG, "onCreate Finished");}
More Prints ...
Narrow down the error by guarding all actions with a print
113
113
Chemnitz Universityof Technology
Found the Bug
‣No TextView is found matching this id
‣Why?
114
if (textView != null) { Log.d(TAG, "Found the TextView"); } else { Log.d(TAG, "Text view not found!"); } textView.setText(message); Log.d(TAG, "After insertion");
114
Chemnitz Universityof Technology
... // get the message we placed in String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE); Log.i(TAG, "Got: " + message + " from Intent");
// adapt the view setContentView(R.layout.activity_display_message); Log.d(TAG, "Created the Layout");
// Create a TextView and fill it with the message TextView textView = (TextView) findViewById(R.id.view_message);...
Simple Solution
115
115
Chemnitz Universityof Technology
... // get the message we placed in String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE); Log.i(TAG, "Got: " + message + " from Intent");
// adapt the view setContentView(R.layout.activity_display_message); Log.d(TAG, "Created the Layout");
// Create a TextView and fill it with the message TextView textView = (TextView) findViewById(R.id.view_message);...
Simple Solution
115
115
Chemnitz Universityof Technology
Using the Debugger
116
116
Chemnitz Universityof Technology
Using the Debugger
117
117
Chemnitz Universityof Technology
Using the Debugger
118
118
Chemnitz Universityof Technology
Add Variables to Watch
119
‣ Add all variables of interest
‣Right-Click and choose „Watch“
‣Hold the mouse over a variable to see the current state
119
Chemnitz Universityof Technology
Running Step by Step
‣Step over to execute the line
‣Step into to enter the next level of depth120
Stop StepoverRun Step
into
120
Chemnitz Universityof Technology121
textView is still null after executing findViewById()
121
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
Google Android - Application Lifecycle
122
Chemnitz Universityof Technology
The Activity Lifecycle
123All other states are only transient!
123
Chemnitz Universityof Technology
The Activity Lifecycle
123
static states
All other states are only transient!123
Chemnitz Universityof Technology
Static States‣Resumed‣ The activity is in the foreground and the user can interact
with it.
‣Paused‣ Activity is partially obscured by another activity‣ Activity does not receive user input and cannot execute any
code
‣Stopped‣ Activity is completely hidden and not visible to the user‣ The activity instance and all its state informations such as
member variables is retained, but it cannot execute any code.
124
124
Chemnitz Universityof Technology
<activity android:name=".MainActivity" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter></activity>
Activity Startup
Startup order for each activity isonCreate()
onStart()
onResume()
Which Activity is called after pressing the Apps icon is defined in the manifest
125
125
Chemnitz Universityof Technology
Activity Startup‣onCreate()‣ The App is created / started‣ Perform basic application startup logic that should
happen only once for the entire life of the activity
‣onStart()‣ The Activity becomes visible
‣onResume()‣ The Activity becomes active
126
126
Chemnitz Universityof Technology
Activity Shutdown‣onDestroy()‣ The last method called when App is destroyed‣ Activity instance is being completely removed from the
system memory
‣ In (nearly) all cases onPause() and onStop() are called in advance of onDestroy()
‣Often not needed‣ Local class references are (automatically) destroyed
with the activity‣ Most cleanup should be done during onPause() and onStop()
127
127
Chemnitz Universityof Technology
@Override public void onCreate(Bundle savedInstanceState) { Log.i(TAG, "onCreate called"); super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @Override protected void onStart() { Log.i(TAG, "onStart called"); super.onStart(); // The activity is about to become visible. } @Override protected void onResume() { Log.i(TAG, "onResume called"); super.onResume(); // The activity has become visible (it is now "resumed"). } @Override protected void onPause() { Log.i(TAG, "onPause called"); super.onPause(); // Another activity is taking focus (this activity is about to be // "paused"). } @Override protected void onStop() { Log.i(TAG, "onStop called"); super.onStop(); // The activity is no longer visible (it is now "stopped") EditText editText = (EditText) findViewById(R.id.edit_message); editText.setText(""); } @Override protected void onDestroy() { Log.i(TAG, "onDestroy called"); super.onDestroy(); // The activity is about to be destroyed. }
All States of Main Activity
128
Don‘t try to copy it!
128
Chemnitz Universityof Technology
public class DisplayMessageActivity extends Activity { /** String prefix for Logging */ private static final String TAG = "SFA_Display"; /* SESAFirstApp Display Activity */ @Override public void onCreate(Bundle savedInstanceState) { Log.i(TAG, "onCreate called"); super.onCreate(savedInstanceState); setContentView(R.layout.activity_display_message); } @Override public void onStart() { Log.i(TAG, "onStart called"); // call parents onStart() super.onStart(); // Get the message from the intent Intent intent = getIntent(); String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE); TextView text = (TextView) findViewById(R.id.DisplayTextView); text.setText(message); } @Override protected void onResume() { Log.i(TAG, "onResume called"); super.onResume(); // The activity has become visible (it is now "resumed"). } @Override protected void onPause() { Log.i(TAG, "onPause called"); super.onPause(); // Another activity is taking focus (this activity is about to be // "paused"). } @Override protected void onStop() { Log.i(TAG, "onStop called"); super.onStop(); // The activity is no longer visible (it is now "stopped") } @Override protected void onDestroy() { Log.i(TAG, "onDestroy called"); super.onDestroy(); // The activity is about to be destroyed. }
129
States of DisplayMessageActivity
Don‘t try to copy it!
129
Chemnitz Universityof Technology
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
States of DisplayMessageActivity
Don‘t try to copy it!
130
Chemnitz Universityof Technology
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
States of DisplayMessageActivity
Don‘t try to copy it!
Download & Extract now!curl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/SESAFirstApp.v0.2.1.tar |tar xv
130
Chemnitz Universityof Technology
@Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // get the Intent Intent intent = getIntent(); // get the message we placed in String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);
// Create a TextView and fill it with the message TextView textView = (TextView) findViewById(R.id.view_message); textView.setText(message); // adapt the view setContentView(R.layout.activity_display_message);
...}
Remember the Bug
Recreate the Code with the bug!!131
131
Chemnitz Universityof Technology
@Overridepublic void onStart() { // call parents onStart() super.onStart(); // Get the message from the intent Intent intent = getIntent(); String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE); TextView text = (TextView) findViewById(R.id.DisplayTextView); text.setText(message);}
A Second ApproachOnStart()
Application is about to get visible
Here the layout is already setThis also seems to be a good place for the text insertion
132
132
Chemnitz Universityof Technology
@Overrideprotected void onStop() { Log.d(TAG, "onStop called"); super.onStop(); // The activity is no longer visible (it is now "stopped") // so we clean the TextEdit EditText editText = (EditText) findViewById(R.id.edit_message); editText.setText("");}
One more Example
Reset the TextView in onStop()133
Add to the MainActivity
133
Chemnitz Universityof Technology
SESAFirstApp
134
134
Chemnitz Universityof Technology
SESAFirstApp
134
Find complete example:curl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/SESAFirstApp.v0.3.0.tar |tar xv
134
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
Sensors and Keys
135
Chemnitz Universityof Technology
Volume Changer
136
‣Create a new Android project.
‣Create a suitable logo.
‣Create a sufficiently complex layout.
‣Create needed strings.
Find this Application at:curl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/ChangeAllVolumes.v0.1.0.git |tar xv
136
Chemnitz Universityof Technology
public class VolumeMainActivity extends Activity { /** LogCat prefix */ private static final String TAG = "VMA_Main";
/** several private members */ private AudioManager audioManager; private SeekBar alarmBar; private SeekBar dtmfBar; private SeekBar musicBar; private SeekBar notifyBar; private SeekBar ringBar; private SeekBar systemBar; private SeekBar callBar;
@Overridepublic void onStart() {...
Fill Main Activity
137
Don‘t try to copy it!
137
Chemnitz Universityof Technology
...@Overridepublic void onStart() { Log.d(TAG, "onStart called"); super.onStart(); // first get the audio manager audioManager = (AudioManager) this.getSystemService(Context.AUDIO_SERVICE); // find right bar alarmBar = (SeekBar) findViewById(R.id.SeekBar01); // now connect seek bars with it's corresponding volume alarmBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, alarmBar, AudioManager.STREAM_ALARM));...
Fill Main Activity
138
Don‘t try to copy it!
138
Chemnitz Universityof Technology139
@Overridepublic void onStart() { Log.d(TAG, "onStart called"); super.onStart(); // first get the audio manager audioManager = (AudioManager) this.getSystemService(Context.AUDIO_SERVICE); // find right bar alarmBar = (SeekBar) findViewById(R.id.SeekBar01); // now connect seek bars with it's corresponding volume alarmBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, alarmBar, AudioManager.STREAM_ALARM)); dtmfBar = (SeekBar) findViewById(R.id.SeekBar02); dtmfBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, dtmfBar, AudioManager.STREAM_DTMF)); musicBar = (SeekBar) findViewById(R.id.SeekBar03); musicBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, musicBar, AudioManager.STREAM_MUSIC)); notifyBar = (SeekBar) findViewById(R.id.SeekBar04); notifyBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, notifyBar, AudioManager.STREAM_NOTIFICATION)); ringBar = (SeekBar) findViewById(R.id.SeekBar05); ringBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, ringBar, AudioManager.STREAM_RING)); systemBar = (SeekBar) findViewById(R.id.SeekBar06); systemBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, systemBar, AudioManager.STREAM_SYSTEM)); callBar = (SeekBar) findViewById(R.id.SeekBar07); callBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, callBar, AudioManager.STREAM_VOICE_CALL)); Log.d(TAG, "onStart finished");} Don‘t tr
y to copy it!
Fill Main Activity
139
Chemnitz Universityof Technology139
@Overridepublic void onStart() { Log.d(TAG, "onStart called"); super.onStart(); // first get the audio manager audioManager = (AudioManager) this.getSystemService(Context.AUDIO_SERVICE); // find right bar alarmBar = (SeekBar) findViewById(R.id.SeekBar01); // now connect seek bars with it's corresponding volume alarmBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, alarmBar, AudioManager.STREAM_ALARM)); dtmfBar = (SeekBar) findViewById(R.id.SeekBar02); dtmfBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, dtmfBar, AudioManager.STREAM_DTMF)); musicBar = (SeekBar) findViewById(R.id.SeekBar03); musicBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, musicBar, AudioManager.STREAM_MUSIC)); notifyBar = (SeekBar) findViewById(R.id.SeekBar04); notifyBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, notifyBar, AudioManager.STREAM_NOTIFICATION)); ringBar = (SeekBar) findViewById(R.id.SeekBar05); ringBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, ringBar, AudioManager.STREAM_RING)); systemBar = (SeekBar) findViewById(R.id.SeekBar06); systemBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, systemBar, AudioManager.STREAM_SYSTEM)); callBar = (SeekBar) findViewById(R.id.SeekBar07); callBar.setOnSeekBarChangeListener(new VolumeBarChangeListener( audioManager, callBar, AudioManager.STREAM_VOICE_CALL)); Log.d(TAG, "onStart finished");} Don‘t tr
y to copy it!
Download & Extract now!Find this Application at:
curl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/ChangeAllVolumes.v0.2.0.tar |tar xv
Fill Main Activity
139
Chemnitz Universityof Technology
package de.tuchemnitz.etit.sse.changeallvolumes;
import android.widget.SeekBar;import android.widget.SeekBar.OnSeekBarChangeListener;
public class VolumeBarChangeListener implements OnSeekBarChangeListener { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { // TODO Auto-generated method stub
} @Override public void onStartTrackingTouch(SeekBar seekBar) { // TODO Auto-generated method stub
} @Override public void onStopTrackingTouch(SeekBar seekBar) { // TODO Auto-generated method stub
}}
A New Java Class
140
140
Chemnitz Universityof Technology141
141
Chemnitz Universityof Technology141
141
Chemnitz Universityof Technology142
142
Chemnitz Universityof Technology142
142
Chemnitz Universityof Technology142
142
Chemnitz Universityof Technology143
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 Universityof Technology
package de.tuchemnitz.etit.sse.changeallvolumes;import ... ;
public class VolumeBarChangeListener implements OnSeekBarChangeListener { /** LogCat prefix */ private static final String TAG = "VMA_VBChange"; /** store stremId and AudioManager */ private int streamId; private AudioManager aManager;...}
144
Member Variables
144
Chemnitz Universityof Technology
...public VolumeBarChangeListener(AudioManager aManager, SeekBar bar, int streamId) { /** constructor */ Log.d(TAG, "Constructor called for " + streamId); this.streamId = streamId; this.aManager = aManager;
Log.i(TAG, String.format("Stream: %d, MaxVolume: %d", this.streamId, aManager.getStreamMaxVolume(streamId)));
// sets the range between 0 and the max volume bar.setMax(aManager.getStreamMaxVolume(streamId));
// set the seek bar progress to 1 bar.setKeyProgressIncrement(1);
// sets the progress of the seek bar based on the system's volume bar.setProgress(aManager.getStreamVolume(streamId)); Log.d(TAG, "Constructor called for " + streamId); }...
145
Constructor
145
Chemnitz Universityof Technology
@Overridepublic void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { Log.d(TAG, String.format("SeekBar: %d, Progress: %d", this.streamId, progress)); aManager.setStreamVolume(this.streamId, progress, AudioManager.FLAG_PLAY_SOUND); //AudioManager.FLAG_SHOW_UI + AudioManager.FLAG_PLAY_SOUND);}
Change Volume
146
146
Chemnitz Universityof Technology
// TODO there is still an issue with this function ...@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) { // if one of the volume keys is pressed if (keyCode == KeyEvent.KEYCODE_VOLUME_DOWN || keyCode == KeyEvent.KEYCODE_VOLUME_UP) { Log.i(TAG, "KeyEvent" + keyCode); // change the seek bar progress indicator position
ringBar.setProgress(audioManager.getStreamVolume(AudioManager.STREAM_RING)); }
// let the event propagate through the system return false;}
Respect Hardware Keys
147
This does not work as expectedKey presses and volume are not in sync
147
Chemnitz Universityof Technology148
@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) { Log.d(TAG, "KeyEvent" + keyCode); int level = audioManager.getStreamVolume(AudioManager.STREAM_RING); switch (keyCode) { case KeyEvent.KEYCODE_VOLUME_DOWN: Log.v(TAG, "KEYCODE_VOLUME_DOWN"); if (level > 0){ level -= 1; } break; case KeyEvent.KEYCODE_VOLUME_UP: Log.v(TAG, "KEYCODE_VOLUME_UP"); if (level < audioManager.getStreamMaxVolume(AudioManager.STREAM_RING)){ level += 1; } break; default: Log.v(TAG, "keyCode not handeled"); // let the event propagate through the system return false; } audioManager.setStreamVolume(AudioManager.STREAM_RING, level, AudioManager.FLAG_SHOW_UI); ringBar.setProgress(level);
// we handeled the keyEvent - don‘t propagate further return true;}
148
Chemnitz Universityof Technology149
That‘s It!
149
Chemnitz Universityof Technology149
Final Version of the Appcurl http://www.tu-chemnitz.de/etit/sse/Lehre/SESA/rsrc/ChangeAllVolumes.v1.0.0.tar |tar xv
That‘s It!
Now create your own App?!
149
Chemnitz Universityof Technology
Suggestions
150
‣CVAG - Timetable (based on position)‣ Using preloaded timetables
‣Calendar or person data display/manipulation
‣ ...
150
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
Apple iOSOperating System
151
Chemnitz Universityof Technology
History of iOS
152
‣Originally released in 2007 with the first Apple iPhone (without a particular name)
‣Derivation of Mac OS X, adapted to iPhone‣ iOS is a Unix operating system
‣Name „iPhone OS“ used since 2008
‣ In 2010, name changed to iOS‣ not only used on iPhone, also on other devices
(iPad, iPod)
‣Only available for Apple devices
152
Chemnitz Universityof Technology
iOS Version Statistics
153
Source: socialbarrel.com
Source: insidemobileapps.com
153
Chemnitz Universityof Technology
Apple iOS
154
iOS, iMore, October 01, 2012
154
Chemnitz Universityof Technology
Architecture
155
‣ iOS consists of four layers
Source: developer.apple.com
155
Chemnitz Universityof Technology
Core OS Layer
156
‣Low-level features on which other layers are based‣ System features‣ Threads‣ Networking‣ File System‣ ...
‣ Data security‣ Accelerated data processing‣ External accessories and Bluetooth support
156
Chemnitz Universityof Technology
Core Services Layer
157
‣Fundamental system services‣ iCloud storage‣ Automatic reference counting‣ Data protection‣ File sharing support‣ In-App purchase‣ SQLite support‣ XML support
157
Chemnitz Universityof Technology
Media Layer
158
‣Graphics, audio and video technologies‣ Graphics and animation‣ OpenGL and GLKit for rendering images‣ Image I/O‣ Audio player and recorder‣ iTunes access‣ Video player‣ Video capturing‣ Airplay
158
Chemnitz Universityof Technology
Cocoa Touch Layer
159
‣Contains key frameworks for building iOS Applications
‣Defines basic application infrastructure‣ User interfaces‣ Multitasking‣ Touch-based input‣ Push notifications‣ Printing‣ Other high-level services
159
Chemnitz Universityof Technology
Application Development
160
‣Development requires Apple Developer Account and XCode (Apple‘s SDK)‣ XCode only runs on MacOS X‣ Contains iOS Simulator (for iPhone and iPad)
‣Membership in iOS Developer Program required for App distribution/installation‣ currently $99/year
‣Free Developer Account available‣ Can only be used for development and simulation
160
Chemnitz Universityof Technology
Application Development‣Apps cannot be simply installed on device
‣Distribution via Apple‘s App Store‣ App is checked by Apple, provided to all users
‣Private Provisioning Profiles‣ Developers can install apps on specific devices‣ Device IDs have to be uploaded to Developer
Center‣ Only limited number of devices is allowed‣ Profile has to be installed on device, only valid for
short period of time
161
161
Chemnitz Universityof Technology
Application File Format‣Apps are distributed in the Application bundle
format‣ Common application format in OS X
‣Folder structure that groups together all necessary resources of the app‣ Executables‣ GUI elements, graphics‣ Data, ...
‣SDK creates bundle from relevant files‣ Executable is generated by Compiler
162
162
Chemnitz Universityof Technology
Application File Format‣Each app runs its own sandbox
163
Source: developer.apple.com
163
Chemnitz Universityof Technology
Application Development‣Application Design is divided into two parts
‣Grapical User Interface‣ GUI is created using a specific Interface Builder‣ Views are built graphically‣ Standard objects are provided by the SDK‣ View objects are connected to corresponding
classes that can react on user input‣ Properties of view objects can be changed by
functions
164
164
Chemnitz Universityof Technology
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
165
Chemnitz Universityof Technology
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
166
Chemnitz Universityof Technology
Creating a simple App
‣Create a simple App that reacts on pushing buttons, stores the active button and displays it in a text label
‣Three elements are contained in the view‣ two buttons‣ one text label
167
167
Chemnitz Universityof Technology
Creating a simple App
‣Start XCode and choose required template
168
168
Chemnitz Universityof Technology
Creating a simple App
‣Define name and options
169
169
Chemnitz Universityof Technology
Creating a simple App
‣Xcode creates new project
170
170
Chemnitz Universityof Technology
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
171
Chemnitz Universityof Technology
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
172
Chemnitz Universityof Technology
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
173
Chemnitz Universityof Technology
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
174
Chemnitz Universityof Technology
Creating a simple App
‣Complete Controller Header File looks like this
175
175
Chemnitz Universityof Technology
Creating a simple App
‣Generic Implementation file of Controller contains definitions of standard functions
176
176
Chemnitz Universityof Technology
Creating a simple App
‣Synthesize has to be added for properties‣ @synthesize statusText;‣@synthesize activeButton;‣Functionality for our IBAction method needs to
be defined
177
- (IBAction) buttonPressed: (id)sender{
activeButton = [sender titleForState (UIControlStateNormal)];NSString *newText = [[NSString alloc] initWithFormat:@"%@ is the active button.", activeButton];statusText.text = newText;
}
177
Chemnitz Universityof Technology
Creating a simple App
‣Complete Implementation file
178
178
Chemnitz Universityof Technology
Creating a simple App
‣ViewController.xib has to be changed to create our desired View
179
179
Chemnitz Universityof Technology
Creating a simple App
‣ViewController.xib has to be changed to create our desired View
179
179
Chemnitz Universityof Technology
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
180
Chemnitz Universityof Technology
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
181
Chemnitz Universityof Technology
Creating a simple App
182
182
Chemnitz Universityof Technology
Creating a simple App
‣Set target to iPhone Simulator and press Run
‣Simulator is started and App is loaded
183
183
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
Windows MobileOperating System
184
Chemnitz Universityof Technology
History
‣Microsoft realized Smartphone market very late‣ Plan was: release of WP7 in 2009
‣Several delays of WP7‣ „Gap“ bridged by interim version 6.5 of Windows
Mobile in 2009
‣ Incompatibility to Windows Mobile due to quick development of WP7
185
185
Chemnitz Universityof Technology
History
186
Versions Release
Windows Mobile 2002 2002
Windows Mobile 2003 June 2003
Windows Mobile 2003 SE March 2004
Windows Mobile 5.0 May 2005
Windows Mobile 6 February 2007
Windows Mobile 6.1 2007
Windows Mobile 6.5 May 2009
Windows Embedded Handheld June 2010
Windows Phone 7 2010
Windows Mobile, October 02, 2012
Windows Phone 8 October 2012
186
Chemnitz Universityof Technology
Technical facts
‣ Strict hardware requirements:‣ Multiple CPU architectures possible‣ 4-point multitouch display‣ DirectX9 capable GPU‣ 256 MB RAM, 4 GB Flash‣ Accelerometer, light sensor, proximity meter, GPS‣ FM tuner‣ 6 hardware buttons (2x volume, power, back, start,
search)
‣ Based on Windows CE
‣OS Updates via Zune (PC connection necessary)187
187
Chemnitz Universityof Technology
Security
‣Same rights for all apps
‣No background tasks
‣App has no access to other apps‘ data
‣No API for sending SMS directly
‣Apps are checked by Microsoft before releasing to market place
‣OS customization needs jailbreak (unlike Android)
188
188
Chemnitz Universityof Technology
User interface‣ User Interface „Metro“
‣ „Live tiles“ on start screen (links to features and apps)
‣ „Pages“ arrange logic and functionality in apps
‣ „Hubs“ combine online and locally stored content‣ Pictures hub: Local camera
pictures and Facebook photos‣ Music + Video hub: Local Multimedia
and Xbox live
‣ Internet Explorer 9 as rendering engine
‣ Integration of MS Office Mobile
189
189
Chemnitz Universityof Technology
Software Architecture
190
190
Chemnitz Universityof Technology
Requirements‣Requirement: MS Visual Studio + Phone SDK‣ Visual Studio 2010 Express + Phone SDK freely
available‣ Phone Emulator for debugging‣ >= Windows 7 required
191
191
Chemnitz Universityof Technology
Windows Phone SDK‣Phone SDK contents:‣ Silverlight: For event-driven apps, UI design in
XAML‣ XNA: For loop-based apps, e. g. interactive games‣ Expression Blend: Interface designer for web apps‣ XNA Game Studio‣ Phone Emulator
192
192
Chemnitz Universityof Technology
App distribution
‣ Microsoft Phone Dev Center subscription:‣ Currently $99/year‣ Required for running app on real phone‣ Required for distributing app on Market Place‣ Not required for development and simulation
‣ App distribution only via Microsoft Zune Marketplace
‣ One app = one .xap file‣ Contains byte-compiled code (for CLR runtime) and
resources‣ Cryptographically signed‣ Phone will only install apps signed by Microsoft
193
193
Chemnitz Universityof Technology
Development Lifecycle
194
194
Chemnitz Universityof Technology
Development Tools
195
195
Chemnitz Universityof Technology
Application development‣Separation of GUI and Data
‣GUI:‣ Graphical designer‣ Generates .xaml files (XML dialect, manually-editable)
‣Data:‣ Page Classes which implement behaviour‣ Object-oriented data access (C# or Visual Basic)‣ CLR: Managed code, garbage-collected
‣No strict design pattern (e. g. model-view-contoller)
196
196
Chemnitz Universityof Technology
Class library
197
197
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
WP7 Sample App
198
Chemnitz Universityof Technology
A simple app
‣Similar to iPhone app: Create a simple app that reacts on pushing buttons, stores the active button and displays it in a text label
‣Three elements are contained in the view‣ Two buttons‣ One text label
199
199
Chemnitz Universityof Technology
Creating a simple app‣Start Visual Studio, select desired language
and template, and name your app
200
200
Chemnitz Universityof Technology
Creating a simple app‣Visual Studio creates new project
201
201
Chemnitz Universityof Technology
Project files
‣Package contents:‣ Manifest‣ Resources (icons, ...)‣ App.xaml /
App.xaml.cs‣ MainPage.xaml /
MainPage.xaml.cs‣ All files auto-generated
202
202
Chemnitz Universityof Technology
App.xaml‣App.xaml‣ Including event definitions specific to application
lifecycle (launch/close/activate/deactivate application, exceptions)
203
203
Chemnitz Universityof Technology
App.xaml.cs‣App.xaml.cs‣ Event handlers / code for events specific to
application life cycle‣ Empty per default
204
204
Chemnitz Universityof Technology
MainPage.xaml
‣MainPage.xaml‣ Definition and properties for one app page‣ Properties for all subelements (buttons, ...)‣ .xaml file locked bi-directionally to UI designer
205
205
Chemnitz Universityof Technology
Properties Window
‣MainPage.xaml
‣Page properties also in „Properties“ window‣ App / Page name‣ Supported orientations‣ Layout rules‣ Default fonts‣ ...
206
206
Chemnitz Universityof Technology
MainPage.xaml.cs
‣MainPage.xaml.cs‣ Event handlers for device-
specific events (changing orientation, battery status, ...)
‣ Event handlers for UI events (Click, Drag, ...)
‣ Most important APIs automatically available
‣ Place code here directly (small apps) or apply design pattern (larger apps)
207
207
Chemnitz Universityof Technology
User Interface Designer
‣ Use tool box to place buttons and text field (drag‘n‘drop)
‣ .xaml file gets modified accordingly
208
208
Chemnitz Universityof Technology
Orientations
‣ Portrait and landscape orientations are defined in one page (not separately) per default‣ Position and alignment attributes have to be used correctly‣ Change view by usign right click in designer‣ Apply different views for orientations: Create orientation event
handlers to change page
209
209
Chemnitz Universityof Technology
Reacting on User Input‣Event handlers:‣ Double-click element for generating handler for
default event (button: „Click“)‣ More events available in „Events“ window (drag,
focus lost, ...)‣ .xaml file gets modified‣ Sample app: Use one event handler for both
buttons
210
210
Chemnitz Universityof Technology
Reacting on User Input
‣SampleApp.xaml.cs is a partial class implementing the user-specific behaviour of SampleApp.xaml
‣Event handlers are automatically created
211
211
Chemnitz Universityof Technology
Writing an Event Handler
‣ Fill in C# code (object-oriented)‣ Determine sender object / sender name‣ Store in private property pressedButtonName (optional)‣ Set status text
212
212
Chemnitz Universityof Technology
Simulation‣ Simulate in Phone Emulator
‣ Debugging available (breakpoints, variable inspection, single-step)
‣ Boots target OS (may take a while)
‣ Runs only on native Windows (no VirtualBox etc.)
213
213
Professur Schaltkreis-und Systementwurf
www.tu-chemnitz.de
Web Based Smartphone Applications
214
Chemnitz Universityof Technology
Web-Apps with specific Look‣PhoneGap (c‘t 21/2012)
‣c‘t 15/2012
215
215