COMP5047 Week 5 Lecture handouts (Rainer Wasinger)
Upcoming SlideShare
Loading in...5
×
 

COMP5047 Week 5 Lecture handouts (Rainer Wasinger)

on

  • 2,832 views

 

Statistics

Views

Total Views
2,832
Views on SlideShare
2,831
Embed Views
1

Actions

Likes
0
Downloads
89
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    COMP5047 Week 5 Lecture handouts (Rainer Wasinger) COMP5047 Week 5 Lecture handouts (Rainer Wasinger) Presentation Transcript

    • COMP 5047 Pervasive Computing: Week 5: Smartphones & the Android OS Dr.-Ing. Rainer Wasinger School of Information Technologies
    • Correction to Last Week‟s Slides • Slide 9 in the week 4 handouts, in the “Worldwide mobile terminal sales” pie chart: – “Others” should have read 23%. This has now been fixed. • The images in slides 13 and 15 also got updated. 2
    • Statistics: Mobile terminal, smartphone, and operating system market share Slide 9 in the week 4 handout (correction): Worldwide mobile terminal Worldwide smartphone Smartphone OS market sales to end users in 1Q2009 sales to end users in 1Q2009 share in 4Q2008 (source: Gartner). (source: Gartner). (source: Gartner). 3
    • So what do all the sub-directories mean? 4
    • Android Smartphone Device Characteristics Mobile Device HTC Dream HTC Magic Release date Oct 2008 May 2009 OS Android Android Display 3.2”, 320x480 (HVGA), capacitive “” Dimensions 117.7mm x 55.7mm x 17.1mm 113mm x 55m x 13.65mm Weight 158g 118.5g Processor Qualcomm MSM7201A 528MHz “” Memory 256MB ROM, 192MB RAM 512MB ROM, 192MB RAM Battery 1150mAh 1340mAh Network HSDPA/WCDMA (1700, 2100MHz), HSDPA/WCDMA (900, 2100MHz), Quad-band GSM/GPRS/EDGE (850, Quad-band GSM/GPRS/EDGE 900, 1800, 1900MHz) (850, 900, 1800, 1900MHz) Camera 3.2MP with auto focus “” WiFi WiFi 802.11b/g “” Bluetooth Bluetooth 2.0 with EDR “” Sensors GPS, digital compass, accelerometer “” 5
    • More Smartphone Specifications Mobile Device HTC Hero Apple iPhone 3GS Palm Pre Release date July 2009 July 2009 June 2009 OS Android iPhone OS 3.0 Palm webOS Display 3.2”, 320x480 (HVGA) 3.5”, 320x480 (HVGA) 3.1” 320x480 capacitive capacitive multi-touch capacitive multi-touch multi-touch Weight 135g 135g 135g Processor Qualcomm MSM7200A ARM Cortex 600MHz TI OMAP 3430 500MHz 528MHz Memory 512MB ROM, 288MB RAM 256MB RAM + 16/32 GB 256MB RAM + 8GB flash flash memory memory Battery 1350mAh 1219mAh 1150mAh Camera 5MP with auto focus 3MP with auto focus 3MP Expansion slot microSD (up to 16GB) - - WiFi WiFi 802.11b/g WiFi 802.11b/g WiFi 802.11b/g Bluetooth Bluetooth 2.0 with EDR Bluetooth 2.1 with EDR and Bluetooth 2.1 with EDR and and A2DP A2DP A2DP Sensors aGPS, digital compass, aGPS, digital compass, aGPS, accelerometer, light accelerometer, light sensor accelerometer, light sensor, sensor, proximity sensor proximity sensor 6
    • Part 1: Android Widgets and more on GUI Design 7
    • GUI Design for Android Applications • Two ways to create user interfaces: – Using Java code and classes. – Using XML. • This is the standard method of GUI creation. It is inspired by the web development model, wherein you can separate the presentation of your application (its UI) from the application logic used to fetch and fill in data. • XML layout files should start with an XML declaration, i.e.: <?xml version=“1.0” encoding=“utf-8”?> • The first ViewGroup element (e.g. ScrollView, LinearLayout) must also include the android XML namespace, e.g.: <ScrollView xmlns:android=“http://schemas.android.com/apk/res/android” • XML layout files are linked to the code via the method setContentView, e.g., for a layout page called propertylisting.xml, we would call the following from within the respective Activity class: setContentView(R.layout.propertylisting); Note: Layout filenames must contain the .xml suffix, and only the characters: “a-z”, “0-9”, and “_.”. 8
    • Android GUI Widgets (ViewGroups and Views) 9
    • ViewGroup Widgets (android.view.ViewGroup) Let‟s have a look at the following: • LinearLayout • AbsoluteLayout (deprecated) • RelativeLayout • TableLayout 10
    • Creating an XML GUI Layout File 1. Open the Android XML file wizard: 2. Fill in the details, as shown on the right 11
    • LinearLayout (android.widget.LinearLayout) • In LinearLayouts, child widgets are presented either horizontally or vertically. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content“ android:orientation="horizontal"> <Button android:text="Button01" android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button> <Button android:text="Button02“ android:id="@+id/Button02" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button> <Button android:text="Button03“ android:id="@+id/Button03" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button> </LinearLayout> 12
    • LinearLayout (cont.) • In LinearLayouts, child widgets are presented either horizontally or vertically. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content“ android:orientation=“vertical"> <Button android:text="Button01" android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button> <Button android:text="Button02“ android:id="@+id/Button02" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button> <Button android:text="Button03“ android:id="@+id/Button03" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button> </LinearLayout> 13
    • LinearLayout (cont.) • android:layout_width="wrap_content“ – “fill_parent”: This means the widget should fill up all available space in its enclosing container, after all other widgets are taken care of. If there is no parent, it will fill the entire screen. – “wrap_content”: This means that the widget should fill up its natural space, unless that is too big, in which case Android can use word- wrap as needed to make it <?xml version="1.0" encoding="utf-8"?> <LinearLayout fit. xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" – “Xpx”: The width of the android:layout_height="wrap_content“ android:orientation=“vertical"> <Button android:text="Button01" widget in pixels, where X is android:id="@+id/Button01" android:layout_width="wrap_content" a number. android:layout_height="wrap_content"></Button> <Button android:text="Button02“ • The same values apply for the android:id="@+id/Button02" android:layout_width="wrap_content" attribute android:layout_height. android:layout_height="wrap_content"></Button> <Button android:text="Button03“ android:id="@+id/Button03" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button> </LinearLayout> 14
    • RelativeLayout (android.widget.RelativeLayout) • In RelativeLayouts, child widgets are placed relative to one other. The “android:id” parameter is important when using this type of. <?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:id="@+id/RelativeLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <Button android:text="Button01" android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button> <Button android:text="Button02" android:id="@+id/Button02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/Button01"></Button> <Button android:text="Button03" android:id="@+id/Button03" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/Button01"></Button> </RelativeLayout> 15
    • TableLayout (android.widget.TableLayout) • In TableLayouts, child widgets are placed into rows and columns. A TableLayout consists of TableRow widgets, and each row can effectively have one or more columns. <?xml version="1.0" encoding="utf-8"?> <TableLayout android:id="@+id/TableLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <TableRow android:id="@+id/TableRow01" android:layout_width="wrap_content" android:layout_height="wrap_content"> <Button android:text="Button01" android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button> <Button android:text="Button02" • Other common layout parameters: android:id="@+id/Button02" android:layout_width="wrap_content" – android:gravity={“top”, “bottom” android:layout_height="wrap_content"></Button> </TableRow> “center”, “right”, “left”} <TableRow android:id="@+id/TableRow02" android:layout_width="wrap_content" – android:background=“FFFFFFFF” android:layout_height="wrap_content"> <Button android:text="Button03" – android:visibility={“visible”, android:id="@+id/Button03" “invisible”, “gone”} android:layout_width="wrap_content" android:layout_height="wrap_content"></Button> </TableRow> </TableLayout> 16
    • View Widgets (android.view.View) Let‟s have a look at the following: • TextView • EditText • Button • RadioGroup / RadioButton • Spinner 17
    • View Widgets (android.view.View) • Can anyone explain why only some of the widgets in the Outline view have the Widget type indicated in parenthesis? 18
    • TextView, EditText, and View <TextView android:text="TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="24sp" android:textStyle="bold|italic“ android:typeface="sans"> </TextView> <EditText android:text="EditText01" android:id="@+id/editText01" android:layout_width="wrap_content" android:layout_height="wrap_content"> </EditText> Retrieving text from an EditText: EditText editTextStr = (EditText)findViewById(R.id.editText01); String fetchedStr = editTextStr.getText().toString(); 19
    • TextView, EditText, and View (cont.) <TextView android:text="TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="24sp" android:textStyle="bold|italic“ android:typeface="sans"> </TextView> <EditText android:text="EditText01" android:id="@+id/editText01" android:layout_width="wrap_content" android:layout_height="wrap_content"> </EditText> <View android:background="#FFFFFF" android:layout_width="wrap_content" android:layout_height="1px"/> 20
    • A Quick Note on a View‟s ID • Any View object may have an <EditText android:text="EditText01" android:id="@+id/editText01" integer ID associated with it, to android:layout_width="wrap_content" uniquely identify the View within android:layout_height="wrap_content"> </EditText> the tree. The ID is typically assigned in the layout XML file as a string, though after compilation, it is referenced as an integer. • The @ symbol: This indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource. • The + symbol: This means that this is a new resource name that must be created and added to our resources (i.e. in the R.java file). 21
    • Button, RadioGroup/RadioButton, and Spinner <Button android:id="@+id/button01“ android:text="Button01" android:layout_width="wrap_content“ android:layout_height="wrap_content"> </Button> <RadioGroup android:id="@+id/myRadioGroup" android:layout_width="wrap_content“ android:layout_height="wrap_content" android:orientation="vertical"> <RadioButton android:id="@+id/radioButton01“ android:text="RadioButton01" android:layout_width="wrap_content” android:layout_height="wrap_content"> </RadioButton> <RadioButton android:id="@+id/radioButton02“ android:text="RadioButton02" android:layout_width="wrap_content“ android:layout_height="wrap_content"> </RadioButton> </RadioGroup> <Spinner android:id="@+id/spinner01" android:layout_width="fill_parent" android:layout_height="40px"/> 22
    • Using android.widget.Button To capture button clicks, we set up an event listener using the setOnClickListener method. E.g., we might use an (anonymous) inner class to capture button clicks, as is defined below: Button button01=(Button)findViewById(R.id.button01); button01.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { Log.d("PropertyApp", "button01 has just been pressed"); } }); 23
    • Using android.widget.RadioButton To get the ID of a currently-checked radio button we use the getCheckedRadioButtonID method. E.g.: RadioGroup myRadioGroup; myRadioGroup=(RadioGroup)findViewById(R.id.myRadioGroup); int checkedID = myRadioGroup.getCheckedRadioButtonId(); if (checkedID == -1) { Log.d(TAG, "No radio button was selected."); } else if (checkedID == R.id.radioButton01) { Log.d(TAG, "'radioButton01' was selected."); populatePropertyCatalog(false); //creates the property catalog //using 'buy' data. } else if (checkedID == R.id.radioButton02) { Log.d(TAG, "'radioButton02' was selected."); populatePropertyCatalog(true); //creates the property catalog //using 'rent' data. } 24
    • Using android.widget.Spinner public class PropertyApp extends Activity implements OnItemSelectedListener { String[] spinner01Items = {"---", "Apartment", "House", "Land"}; ... public void initialiseSearchPageGUI() { Spinner spinner01=(Spinner)findViewById(R.id.spinner01); spinner01.setOnItemSelectedListener(this); ArrayAdapter<String> spinner01AA = new ArrayAdapter<String>( this, android.R.layout.simple_list_item_1, spinner01Items); spinner01AA.setDropDownViewResource( android.R.layout.simple_spinner_dropdown_item); spinner01.setAdapter(spinner01AA); ... } ... //Callback method to be invoked when an item in this view has been selected. public void onItemSelected(AdapterView<?> parent, View v, int position, long id){ } //onItemSelected //Callback method to be invoked when the selection disappears from this view. public void onNothingSelected(AdapterView<?> parent) { } //onNothingSelected ... 25
    • Using android.widget.Spinner (cont.) public class PropertyApp extends Activity implements OnItemSelectedListener { String[] spinner01Items = {"---", "Apartment", "House", "Land"}; ... public void initialiseSearchPageGUI() { Spinner spinner01=(Spinner)findViewById(R.id.spinner01); spinner01.setOnItemSelectedListener(this); ArrayAdapter<String> spinner01AA = new ArrayAdapter<String>( this, We use the Activity itself as android.R.layout.simple_list_item_1, the listener, which is possible spinner01Items); spinner01AA.setDropDownViewResource( because the Activity android.R.layout.simple_spinner_dropdown_item); implements the spinner01.setAdapter(spinner01AA); OnItemSelectedListener ... interface. } ... The above event handling could also be implemented as an anonymous inner class: spinner01.setOnItemSelectedListener(new OnItemSelectedListener(){ //Callback method to be invoked when an item in this view has been selected. @Override public void onItemSelected(AdapterView<?> parent, View v, int position, long id){ public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long } //onItemSelected arg3) { /*Do something*/ } @Override //Callback method to be invoked when the selection disappears from this view. public voidvoid onNothingSelected(AdapterView<?> arg0) { /*Do something*/ } public onNothingSelected(AdapterView<?> parent) { }); } //onNothingSelected ... 26
    • Using android.widget.Spinner (cont.) public class PropertyApp extends Activity implements OnItemSelectedListener { String[] spinner01Items = {"---", "Apartment", "House", "Land"}; ... public void initialiseSearchPageGUI() { Spinner spinner01=(Spinner)findViewById(R.id.spinner01); spinner01.setOnItemSelectedListener(this); ArrayAdapter<String> spinner01AA = new ArrayAdapter<String>( this, android.R.layout.simple_list_item_1, spinner01Items); spinner01AA.setDropDownViewResource( • Adapters provide a common interface to the data model behind a selection-style android.R.layout.simple_spinner_dropdown_item); spinner01.setAdapter(spinner01AA); widget. ... • ArrayAdapter is one of the easiest to use adapters. It takes three parameters: } ... • Context context: The context to use, typically the Activity instance. //Callback method to be invoked when an item in this view has been selected. • int resource: The resource ID of a view to use, such as a built-in system public void onItemSelected(AdapterView<?> parent, View v, int position, long id){ } //onItemSelectedID as shown in the example above. resource • int textViewResourceId: The actual list of items to show. //Callback method to be invoked when the selection disappears from this view. • android.R.layout.simple_list_item_1: is used to format your list with one TextView in public void onNothingSelected(AdapterView<?> parent) { } //onNothingSelected is large, white, and centred vertically. each row. This text ... 27
    • Using android.widget.Spinner public class PropertyApp extends Activity implements OnItemSelectedListener { String[] spinner01Items = {"---", "Apartment", "House", "Land"}; ... public void initialiseSearchPageGUI() { Spinner spinner01=(Spinner)findViewById(R.id.spinner01); spinner01.setOnItemSelectedListener(this); ArrayAdapter<String> spinner01AA = new ArrayAdapter<String>( this, android.R.layout.simple_list_item_1, setDropDownViewResource: spinner01Items); Sets a specific resource to spinner01AA.setDropDownViewResource( use for the drop-down view, in android.R.layout.simple_spinner_dropdown_item); this case the built-in system spinner01.setAdapter(spinner01AA); resource: ... “simple_spinner_dropdown_it } em” ... //Callback method to be invoked when an item in this view has been selected. public void onItemSelected(AdapterView<?> parent, View v, int position, long id){ } //onItemSelected //Callback method to be invoked when the selection disappears from this view. public void onNothingSelected(AdapterView<?> parent) { } //onNothingSelected ... 28
    • COMP5047 PropertyApp Screenshots • Screenshots (as shown in last week‟s lecture) propertylisting.xml, searchpage.xml propertylistrow.xml propertydetails.xml • searchpage.xml: • A vertical LinearLayout, containing a number of horizontal LinearLayouts that themselves encompass a range of standard View widgets. • propertylisting.xml and propertylistrow.xml: • A LinearLayout containing a ListView. • Each element in the ListView is a horizontal LinearLayout, encompassing: • An ImageView, and a • Vertical LinearLayout containing a TextView and a TableLayout that holds a number of parameters. • propertydetails.xml: • A ScrollView, containing a vertical LinearLayout that contains a TextView, ImageView, TableLayout, and another TextView. 29
    • Part 2: More on Activities and Intents 30
    • COMP5047 PropertyApp Class Diagram User interaction AndroidManifest.xml between Activities propertylistrow.xml searchpage.xml propertylisting.xml propertydetails.xml PropertyApp PropertyList PropertyDetails (extends Activity) (extends Activity) (extends Activity) PropertyListAdapter 1 1 Write data into (extends ArrayAdapter<Property>) Retrieve database 1…* data from Retrieve data 1 Property database from database PropertyDB DatabaseHelper propertydata (extends SQLiteOpenHelper) …_buy.xml XMLPropertyCatalog XMLParser XMLUnmarshaller …_rent.xml (extends DefaultHandler) … 31
    • Activities and Intents • Activity (android.app.Activity): – Activities represent the building block of the user interface. – Activities are used to present a visual user interface for one focused endeavour that the user can undertake. • Intent (android.content.Intent): – An Intent is an abstract description of an operation to be performed. – An Intent‟s most significant use is in the launching of activities, where it can be thought of as the glue between activities. – Intents are basically a passive data structure holding an abstract description of an action to be performed. 32
    • Intents – Another look at the PropertyApp AndroidManifest.xml File <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="au.edu.usyd.it.PropertyApp" android:versionCode="1" android:versionName="1.0"> <application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name=".PropertyApp“ 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 android:name=".PropertyList“ android:label="@string/app_name"> </activity> <activity android:name=".PropertyDetails“ android:label="@string/app_name"> </activity> </application> <uses-sdk android:minSdkVersion=“2" /> </manifest> Note how each Activity in the PropertyApp application is defined in the AndroidManifest.xml file. This is needed in applications that utilise explicit intents. If not in the manifest, we would receive an ActivityNotFoundException at runtime. 33
    • Creating an Intent and passing it to the Android OS • If the activity you intend to launch is part of your own application, it is simplest to create an explicit intent that names the component that you wish to launch (remember that the activity also needs to be named in the AndroidManifest.xml file). E.g.: //Create an intent for a specific component. //Intent(Context packageContext, Class<?> cls) Intent i = new Intent(PropertyApp.this, PropertyList.class); • The next step is to pass the Intent to Android and get the child activity to launch. The simplest option is to call startActivity(Intent i), which gets Android to find the best- match activity and pass the intent to it for handling. E.g.: startActivity(i); 34
    • Intent Extras – Putting and Getting Extras • Extras: Extras are key-value pairs that contain additional information that should be delivered to the component handling the intent. E.g.: – Placing the Extra from inside the PropertyApp class: i.putExtra(PropertyApp.EXTRA_TO_RENT, “false”); – Retrieving the Extra from inside the PropertyList class: toRentStr = extras != null ? extras.getString(PropertyApp.EXTRA_TO_RENT) : null; i.e. if "extras!=null", then toRentStr=extras.getString(PropertyApp.EXTRA_TO_RENT), else toRentStr=null. 35
    • Intent Extras - The Full Example public class PropertyApp extends Activity implements OnItemSelectedListener { public static final String EXTRA_PROPERTY_ID="au.edu.usyd.it.PropertyApp.property_id"; public static final String EXTRA_TO_RENT="au.edu.usyd.it.PropertyApp.to_rent"; ... public void initialiseSearchPageGUI() { Intent i = new Intent(PropertyApp.this, PropertyList.class); i.putExtra(PropertyApp.EXTRA_TO_RENT, “false”); startActivity(i); Note: The au.edu.usyd.it.PropertyApp ... namespace is used to ensure that the 'extra' name will not collide with any public class PropertyList extends Activity { names perhaps in use by the Android ... system. protected void onCreate(Bundle savedInstanceState) { String toRentStr = null; boolean toRent = false; Bundle extras = getIntent().getExtras(); toRentStr = extras != null ? extras.getString(PropertyApp.EXTRA_TO_RENT) : null; toRent = Boolean.parseBoolean(toRentStr); 36
    • COMP5047 PropertyApp SQLite Database • SQLite Manager Add-on for Firefox 37
    • Security Permissions • A quick look at defining security permissions in an Android Application. 38
    • Security Permissions (cont.) <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="apt.tutorial.two“ android:versionCode="1“ android:versionName="1.0"> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> ... <uses-permission android:name="android.permission.READ_CALENDAR"/> <uses-permission android:name="android.permission.READ_CONTACTS"/> <application android:label="@string/app_name"> <activity android:name=".Patchy“ android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> See http://developer.android.com/reference/android/Manifest.permission.html for a full list of permissions. </manifest> There are currently over 100 that have been defined. 39
    • Part 3: Smartphone Design 40
    • Mobile Device Design • Typical mobile device limitations: – Processor, memory, display size (e.g. might require extensive scrolling), modes of input (e.g. 12-key numeric keypad; touch-screen). • System Designer Choices – E.g. menu placement, location of physical buttons, button sizes, choice of hardware (e.g. capacitive / resistive touch screens). • Input Interaction / Output Presentation: – Input: Speech, handwriting, stylus/finger input, sensor- based input. – Output: Sound, graphics, video, haptic/vibration, projection. 41
    • Mobile Phone Target Groups • Low-end: Phones for this demographic are currently being marketed as ‘internet-ready’ phones. – Consider for example the Nokia 7020. • Mid-range: Phones for this demographic are advertised as bringing smartphone and web functionality to the mass market. Nokia is also expected to bring touch screen phones to the mid-range markets sometime in 2009. – Nokia’s 5800 XpressMusic (a.k.a. the Tube) is a handset currently being targeted at the mid-range market. • High-end: Phones for this demographic typically represent the tier one manufacturer’s (and speciality manufacturer’s) flagship products. – Representative devices in this category include those that we have typically talking about in these lectures, e.g. Apple iPhone 3G. • Luxury phones: This sector focuses on third party companies who modify handsets for the fashion-conscious consumer, to create gold-plated and/or diamond-encrusted phones. – Example handsets in this group include the Gucci G600 24-karat plated gold phone, and Continental Mobile’s version of the Nokia E71 that is encrusted with diamonds and retails for GBP 5,999. 42
    • Mobile Phone Target Groups (cont.) Continental Mobile’s adaptation of the Nokia E71 Nokia’s 5800 XpressMusic HTC Hero Nokia 7020 Gucci G600 43
    • Part 4: The Future of Mobile Computing 44
    • Some Key Trends For Mobile Device Development, with specific reference to the Web • One-web: – The one-web vision in which content is authored once and then reused and repurposed based on the situation and technology that it is required for is emerging as the de facto path forward. • Evidences: Emergence of proxy-based browsers like Opera Mini, Teashark, and Skyfire. Emergence of transcoding sites like Skweezer, Google Mobilizer, and DotMobi Mowser. Existence of content-repurposing platforms like Volantis Mobility Server, IBM WebSphere, and WURFL. • Heterogeneous devices: – Heterogeneous devices will continue to emerge as the market tries to identify the relevant non- desktop devices required for interactive, mobile, always-on, and always-connected use. • Examples: Smartphones, social phones, mobile internet devices, e-book readers, gaming consoles, set-top boxes, music/video players, in-car navigation consoles, tabletops, and net books. • Interaction: – Interaction will become embedded into the classical media types like text, image, audio, and video, to create rich and engaging user experiences. Utilisers of such media, e.g. in print, TV, and radio, will need to adapt. – IPTV is gaining traction and will hopefully provide for a smooth transition from classical non- interactive TV to interactive TV. – New interaction paradigms will be a key differentiator between services seen to be innovative and of high quality.
    • The Mobile Markup Languages • A range of mobile markup languages covering protocols like WAP, i-mode, and HTTP have emerged. These mobile markup standards are converging in functionality, and that with the most secure future is XHTML-Basic. 46
    • Emerging Technology Independent Standards • The most recent smartphones now also have the same web browser capabilities as their desktop counterparts, i.e. they can render full HTML and XHTML, thus reducing the need for mobile-specific markup. Mobile protocols like i-mode, WAP, and HTTP may converge in the future. – WAP is the main mobile protocol in use and has very wide backing. i-mode has had significant impact in Japan but has not managed to penetrate much of the rest of the world. Modern smartphone browsers can also render full HTML and XHTML pages via the HTTP protocol. • Recent alignment efforts between the W3C and OMA are such that the proposed W3C XHTML Basic 1.1 and OMA‟s XHTML-MP 1.2 are now virtually indistinguishable. • Standards for interactive media and interaction in general are still maturing, but are expected to become increasingly relevant to web services in the future. – Consider: SMIL, MPEG7, EMMA, and InkML.
    • Categorization of a number of Web-Related Standards • Catering for the full spectrum of user characteristics, as too interactive media, will be important targets for the future. – Examples: User knowledge, user skills and capabilities, user interests and preferences, user goals and plans, usage data, and environment data. Device Independent Markup Style Device Capability Profiles Protocols Markup Languages Languages Languages HTML/XHTML CSS DIAL HTTP Device Description (XHTML 2.0, XForms 1.0, XHTML-Basic CSS MP Repository DiSelect 1.0, CSS 2.1) XHTML-MP WAP 2.0 WCS WAP 1.0 WML XDIME 2 DDR i-mode C-HTML Individual Device Profiles CC/PP UAProf
    • Mobile Web Browsers and their Capabilities • Web browsers: – Represent the underlying environment within which web-applications run. – A number of different web browsers exist for mobile devices; some come pre- installed while others are available in the form of 3rd party software. • Proxy-based browsers and transcoding sites are also available for mobile devices. • The top level domain suffix .mobi is available for sites that want to advertise themselves as being mobile, though the take up on this has so far been limited, and critics say that this approach goes against the „one web‟ principle. • Rich Internet Apps (extending the browser‟s capabilities) – A number of web-technologies also exist that focus on interactive multimedia, and that also blur the classical distinction between native/stand-alone functionality and web-application functionality.
    • Mobile Web Browsers • Popular mobile web browsers: Pre-installed web Manufacturer Operating system Layout engine browsers Android browser OHA Android WebKit Safari browser Apple iPhone WebKit Internet Explorer Microsoft Windows Mobile - Mobile Blackberry browser RIM BlackBerry Mango Web browser for S60 Nokia Symbian, S60 WebKit • Several predominant 3rd-party mobile browsers: 3rd party stand- Manufacturer Targeted Operating Layout / Version License / alone web system Rendering engine Cost browsers Opera Mobile Opera Windows Mobile, Presto 9.51b2 Proprietary Software UIQ and S60 for (Oct.2008) , US$24- Symbian OS. Fennec Mozilla Linux (Nokia Gecko 1.0 Freeware, Foundation Maemo) and (Dec.2008) free Windows mobile 6; alpha in the future also Symbian 50
    • Rich Internet Application Technologies • Categorisation of Rich Internet Application (RIA) technologies: Categorisation of processing strategies (left) and development technologies (right), categorised by the two axes: server-side/client- side and desktop/web (source: [Moritz, 2008]).
    • Application Stores / Market Places • Application store fronts are a new delivery channel through which customers can purchase applications and services that are compatible with their mobile device. • Device manufacturers, operating system manufacturers, and telecommunications providers are all currently introducing app stores with one goal being to try and control the payment channel. Creators of app stores are also not limited to just these three groups. • Personalisation and contextual awareness are two predominant themes in the new breed of app stores, designed to deal with the influx of apps now available in these market places (over 25,000 for the iPhone as at March 2009). • App stores are currently focussing on providing search and purchasing support for any (and all) of: applications, widgets, music, video, and gaming.
    • Application Store Front Examples • Apple‟s iPhone App Store (launched in July 2008) • OHA‟s Android Market (launched in Oct. 2008) • RIM‟s BlackBerry App World (launched April 2009) • Nokia‟s OVI Store (launched May 2009) • Microsoft‟s Windows Marketplace for Mobile (expected launch 4Q2009) • Palm‟s App Catalog • Samsung Mobile Video Store (Mar.2009) • Portals provided by the carriers: – Joint Innovation Labs (Vodafone, Verizon, Sofbank, and China Mobile) Note: The revenue share between the developer and the Application Store Fronts is typically 70:30, i.e. the developer gets 70% for every application sold through a particular store front and the store front gets the remaining 30%. Currently, many parties - the telecommunications providers, device manufacturers, operating system manufacturers, and other – all want a share of the store front market. 53