Presentation is loading. Please wait.

Presentation is loading. Please wait.

SE 390: Software Engineering for Mobile Devices Week 7: Messaging & Toast Copyright © Steven W. Johnson February 1, 2013.

Similar presentations


Presentation on theme: "SE 390: Software Engineering for Mobile Devices Week 7: Messaging & Toast Copyright © Steven W. Johnson February 1, 2013."— Presentation transcript:

1 SE 390: Software Engineering for Mobile Devices Week 7: Messaging & Toast Copyright © Steven W. Johnson February 1, 2013

2 Exception handling User interaction/messaging: dialogs, alerts, dialog alarms popups toast ImageButtons Action bar Course review Week 10: 2

3 Can’t assume full attention on mobile devices Interface and messaging must be even better Exception handling 3

4 Throwable hierarchy Exception handling 4

5 Many languages read left-to-right (LTR language) Some don’t Problem: aligning by left and right 5 Text direction The quick brown fox All good men الثعلب البني السريع جميع الرجال جيد The quick brown fox All good men الثعلب البني السريع جميع الرجال جيد

6 ‘Align left’ assume use of LTR languages ‘Align start’ is more general Starting with 4.2 (API 17), align on ‘start’ For us (LTR language people): start == left end == right Both should be stated for <17 After 16, should use ‘start’ and ‘end’ 6 Text direction

7 Declare in manifest to support RTL mirroring 7 Text direction

8 Android gives several methods to communicate: dialogs pop-ups toasts alerts Many similarities with HTML 8 Dialogs

9 Dialogs, Alerts, DialogAlerts: like confirm boxes may turn on services (Internet connection) Popups: a branch in the workflow captures a single selection from user no buttons; merely (single) selection choices Toasts: like timed alert boxes lightweight feedback in a timed popup Exception handling 9

10 Create an Android app. with a popup Done using ‘inline styles’ Lab: popups 10

11 Create the project: Lab: popups 11

12 Project will use ‘Material’ style (API 21 required): Lab: popups 12

13 Open ‘styles.xml’ and set the theme Lab: popups 13

14 Add three TextViews to middle of screen one ‘Medium Text’ (move to center of screen) two ‘Plain TextView’ Lab: popups 14

15 Open ‘strings.xml’ Delete ‘Hello world!’ text on ‘screen.xml’ Create three strings for TextViews Lab: popups 15 Popups Settings Popup Menu Example Touch here to see the menu

16 Create ‘colors.xml’ Define three colors: Rt. click on ‘values’ folder – New –Resource File Lab: popups 16

17 Create ‘colors.xml’ Define three colors: Rt. click on ‘values’ folder – New –Resource File Lab: popups 17 #FF #FF0000FF #FF

18 Open ‘screen.xml’ First ‘MediumText’ properties: id: ‘Title’ text: textColor: textSize: 20sp Lab: popups 18

19 Second line of text (textView2): layout _margin: 20dp (all) id: ‘Anchor’ text: textColor: textSize:16sp Lab: popups 19

20 Third TextView is the popup: layout_margin: 20dp id: ‘Selection’ text: ‘initialText’ (goes invisible because empty) textColor: textSize: 40sp Lab: popups 20

21 public class Sourcecode extends Activity protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); } Edit ‘public class’ as follows: Lab: popups 21 public class Sourcecode extends Activity implements OnClickListener, OnMenuItemClickListener { private PopupMenu popupMenu; private final static int ONE = 1; private final static int TWO = 2; private final static int THREE =

22 Open ‘Sourcecode.java’ add these imports: Lab: popups 22 import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.widget.PopupMenu; import android.widget.PopupMenu.OnMenuItemClickListener; import android.widget.TextView;

23 Add popup menus: Lab: popups 23 setContentView(R.layout.screen); popupMenu = new PopupMenu(this, findViewById(R.id.Anchor)); popupMenu.getMenu().add(Menu.NONE, ONE, Menu.NONE, "Item 1"); popupMenu.getMenu().add(Menu.NONE, TWO, Menu.NONE, "Item 2"); popupMenu.getMenu().add(Menu.NONE, THREE, Menu.NONE, "Item 3"); popupMenu.setOnMenuItemClickListener(this); findViewById(R.id.Anchor).setOnClickListener(this); }

24 Lab: popups 24 findViewById(R.id.anchor).setOnClickListener(this); public void onClick(View v) { popupMenu.show(); } public boolean onMenuItemClick(MenuItem item) { TextView tv = (TextView) findViewById(R.id.Selection); switch (item.getItemId()) { case ONE: tv.setText("ONE"); break; case TWO: tv.setText("TWO"); break; case THREE: tv.setText("THREE"); break; } return false; }

25 25 package com.steve.johnson.popups; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.widget.PopupMenu; import android.widget.PopupMenu.OnMenuItemClickListener; import android.widget.TextView; public class Sourcecode extends Activity implements OnClickListener, OnMenuItemClickListener { private PopupMenu popupMenu; private final static int ONE = 1; private final static int TWO = 2; private final static int THREE = protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); popupMenu = new PopupMenu(this, findViewById(R.id.anchor)); popupMenu.getMenu().add(Menu.NONE, ONE, Menu.NONE, "Item 1"); popupMenu.getMenu().add(Menu.NONE, TWO, Menu.NONE, "Item 2"); popupMenu.getMenu().add(Menu.NONE, THREE, Menu.NONE, "Item 3"); popupMenu.setOnMenuItemClickListener(this); findViewById(R.id.anchor).setOnClickListener(this); public void onClick(View v) { popupMenu.show(); } public boolean onMenuItemClick(MenuItem item) { TextView tv = (TextView) findViewById(R.id.selection); switch (item.getItemId()) { case ONE: tv.setText("ONE"); break; case TWO: tv.setText("TWO"); break; case THREE: tv.setText("THREE"); break; } return false; }

26 Final output: Lab: popups 26 switch (item.getItemId()) { case ONE: tv.setText("ONE"); break; case TWO: tv.setText("TWO"); break; case THREE: tv.setText("THREE"); break; }

27 Create a web page that displays a toast Toast: a small, timed message Lab: toasts 27

28 Create the project Lab: toasts 28

29 Add the icon (toast.png) Rt. Click on ‘res’ folder – New – Image Asset Lab: toasts 29

30 Delete the ‘Hello world!’ TextView Select ‘Theme.Holo.Wallpaper’ Open ‘AndroidManifest’ and change theme Minimum SDK >10 Lab: toasts 30 parent="android:style/Theme.Holo.Wallpaper"

31 Update ‘Sourcecode to display ‘Holo’ themes Lab: toasts 31 import android.app.Activity; public class Sourcecode extends Activity {

32 Delete ‘Hello world’ Open ‘strings.xml’ and add ‘buttonText’ Add small button to ‘screen.xml’ (top center) Lab: toasts 32 Toasts Settings Show Text

33 Update the button: layout_width: ‘match_parent’ id: ‘ButtonToast’ text: Lab: toasts 33

34 Appearance so far: button uses a semi-transparent color contrast between button, page not good create ‘colors.xml’ Lab: toasts 34

35 Rt. Click on ‘values’ folder: New – values Resource Lab: toasts 35

36 Update ‘colors’ with two color definitions: Update button: background: textColor: Lab: toasts 36 #FFD0D0C6 #FF000000

37 Open Sourcecode.java Update the imports Add below the ‘public class’: Lab: toasts 37 import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.Toast; public class CodePage extends Activity { private Button ButtonToast;

38 LENGTH_LONG or LENGTH_SHORT Lab: toasts 38 setContentView(R.layout.screen);//already there button = (Button) findViewById(R.id.ButtonToast); button.setOnClickListener(new OnClickListener() public void onClick(View arg0) { Toast.makeText(getApplicationContext(), "Button is clicked", Toast.LENGTH_LONG).show(); } });

39 Delete two unneeded methods at bottom of class Delete imports for those methods Lab: toasts 39

40 Completed lab: Lab: toasts 40

41 A yes/no situation; a confirm box Associated with programming flow Requires end user decision 41 Dialogs

42 End-user communication (error messages) Combination of alert and confirm box Programmable Text is totally editable 42 Dialogs

43 Dialog design: optional title bar/region content area action buttons (OK, Cancel) 43 Dialogs

44 Minimum version: Honeycomb (11-13) Single selection, limited dialog box Making selection advances workflow No explicit buttons (OK, Cancel) Popup dismissed/closed ‘onBlur’ Popups 44

45 Non-modal dialog method without losing focus Lightweight, timed feedback Information only, no response or selection Consider ‘Notification’ if response needed 45 Toasts

46 Problem for end user due to: miss the message not be able to read it quickly enough may be very distracting If it’s important enough to display, display it 46 Toasts

47 Title needs to mimic content of box Include universally-understood icons Messaging 47

48 Create an alert/dialog Very similar to a confirm box in HTML Allows for one question and a choice Lab: alerts 48

49 Create ‘Alerts’ project: Lab: alerts 49

50 Add ‘Alerts’ icon: Rt. click on ‘res’ folder – New – Image Asset Browse in ‘alerts.png’ Lab: alerts 50

51 ‘screen.xml’: remove ‘Hello world’ TextView and string add a button to the page id: buttonAlert Lab: alerts 51

52 strings.xml: Name: ‘buttonLabel’ Value: ‘Show Alert Box’ Add the text to the button Lab: alerts 52

53 strings.xml: screen.xml: Lab: alerts 53


Download ppt "SE 390: Software Engineering for Mobile Devices Week 7: Messaging & Toast Copyright © Steven W. Johnson February 1, 2013."

Similar presentations


Ads by Google