Mediensystemen mit iOS WS 2011 Prof. Dr. Michael Rohs - - PowerPoint PPT Presentation

▶
mediensystemen mit ios
SMART_READER_LITE
LIVE PREVIEW

Mediensystemen mit iOS WS 2011 Prof. Dr. Michael Rohs - - PowerPoint PPT Presentation

Nov 01, 2022 660 likes •925 views

Praktikum Entwicklung von Mediensystemen mit iOS WS 2011 Prof. Dr. Michael Rohs michael.rohs@ifi.lmu.de MHCI Lab, LMU Mnchen Today Alerts, Action Sheets, text input Application architecture Table views Multiview applications

slide-1
SLIDE 1

Praktikum Entwicklung von Mediensystemen mit iOS

WS 2011

  • Prof. Dr. Michael Rohs

michael.rohs@ifi.lmu.de MHCI Lab, LMU München

slide-2
SLIDE 2

Praktikum Mediensysteme – iOS 2 WS 2011 Michael Rohs, LMU

  • Alerts, Action Sheets, text input
  • Application architecture
  • Table views
  • Multiview applications
  • Touch input
  • Saving data
  • Exercise 2

Today

slide-3
SLIDE 3

Praktikum Mediensysteme – iOS 3 WS 2011 Michael Rohs, LMU

Timeline

# Date Topic 1 19.10.2011 Introduction and overview of iOS 2 26.10.2011 App architecture, touch input, saving data 3 2.11.2011 Location, networking, sensors 4 16.11.2011 Interviews, storyboarding; brainstorming 5 30.11.2011 Paper prototyping test, start of software prototype 6 14.12.2011 Heuristic evaluation of software prototype 7 11.1.2012 Think-aloud user study 8 25.1.2012 Completion of software prototype 9 1.2.2012 Final presentation

slide-4
SLIDE 4

Praktikum Mediensysteme – iOS 4 WS 2011 Michael Rohs, LMU

Organization

  • 4 SWS
  • (Bi-)Weekly meetings

– Wednesday 16:10 – 17:40 – Room 107, Amalienstraße 17

  • Homepage:

– http://www.medien.ifi.lmu.de/lehre/ws1112/pem/

slide-5
SLIDE 5

Praktikum Mediensysteme – iOS 5 WS 2011 Michael Rohs, LMU

iOS Developer Account

① University Account ② Send email, we invite you ③ Create certificate ④ Register as developer ⑤ We send provisioning profile

slide-6
SLIDE 6

Praktikum Mediensysteme – iOS 6 WS 2011 Michael Rohs, LMU

Organization

  • UniWorX for individual exercises

– https://uniworx.ifi.lmu.de

  • SVN for teamwork

– SVN accounts for each team – svn://tracsvn.medien.ifi.lmu.de/repos/pem_team[number] (e.g. svn://tracsvn.medien.ifi.lmu.de/repos/pem_team1)

slide-7
SLIDE 7

Praktikum Mediensysteme – iOS 8 WS 2011 Michael Rohs, LMU

“Hello World” Steps

  • Explain #pragma mark -
  • Showing a

UIAlertView

slide-8
SLIDE 8

Praktikum Mediensysteme – iOS 9 WS 2011 Michael Rohs, LMU

“Hello World” Steps

  • Action sheets

– Implement UIActionSheetDelegate in .h file – Construct, showInView, release – Implement delegate method clickedButtonAtIndex

slide-9
SLIDE 9

Praktikum Mediensysteme – iOS 10 WS 2011 Michael Rohs, LMU

“Hello World” Steps

  • Text input

– Add UITextField in Interface Builder – Add member variable and property to .h, synthesize in .m – Declare UITextFieldDelegate in .h – Implement delegate methods in .m, set label text on end editing – Set delegate in viewDidLoad method

slide-10
SLIDE 10

Praktikum Mediensysteme – iOS 11 WS 2011 Michael Rohs, LMU

Hello World Application Architecture

HelloWorldAppDelegate : NSObject <UIApplicationDelegate> MainWindow.xib: File’s Owner HelloWorldAppDelegate HelloWorldViewController Window UIApplication UIWindow HelloWorldViewController : UIViewController <UITextFieldDelegate, UIActionSheetDelegate> HelloWorldViewController.xib: File’s Owner View Label Button … A B instantiates A B references

slide-11
SLIDE 11

Praktikum Mediensysteme – iOS 12 WS 2011 Michael Rohs, LMU

HELLO TABLEVIEW

slide-12
SLIDE 12

Praktikum Mediensysteme – iOS 13 WS 2011 Michael Rohs, LMU

UITableView Example

  • Create new project (“View-based application”)
  • Change controller base class to UITableViewController
  • Declare UITableViewDataSource, UITableViewDelegate
  • Add data array to header file, release data in dealloc
  • Change view in nib file to UITableView, connect File’s

Owner (view, data source, delegate)

  • Create arrayWithObjects in onViewDidLoad
  • Implement table data source and delegate methods
slide-13
SLIDE 13

Praktikum Mediensysteme – iOS 14 WS 2011 Michael Rohs, LMU

Table Views

HelloTableViewViewController : UITableViewController <UITableViewDataSource, UITableViewDelegate> HelloTableViewController.xib: File’s Owner TableView A B instantiates A B references UITableView

slide-14
SLIDE 14

Praktikum Mediensysteme – iOS 15 WS 2011 Michael Rohs, LMU

UIViewController subclasses

  • View lifecycle
  • (void)viewDidLoad
  • (void)viewDidUnload
  • View events
  • (void) viewWillAppear:(BOOL)animated
  • (void) viewWillDisappear:(BOOL)animated
  • (void) viewDidAppear:(BOOL)animated
  • (void) viewDidDisappear:(BOOL)animated
  • Rotation settings and events

interfaceOrientation property – shouldAutorotateToInterfaceOrientation:

  • many more… à see documentation
slide-15
SLIDE 15

Praktikum Mediensysteme – iOS 16 WS 2011 Michael Rohs, LMU

UITableViewDataSource (Protocol)

  • Configuring a Table View

– tableView:cellForRowAtIndexPath: required method – numberOfSectionsInTableView: – tableView:numberOfRowsInSection: required method – sectionIndexTitlesForTableView: – tableView:sectionForSectionIndexTitle:atIndex: – tableView:titleForHeaderInSection: – tableView:titleForFooterInSection:

  • Inserting or Deleting Table Rows

– tableView:commitEditingStyle:forRowAtIndexPath: – tableView:canEditRowAtIndexPath:

  • Reordering Table Rows

– tableView:canMoveRowAtIndexPath: – tableView:moveRowAtIndexPath:toIndexPath:

slide-16
SLIDE 16

Praktikum Mediensysteme – iOS 17 WS 2011 Michael Rohs, LMU

UITableViewDelegate (Protocol)

  • Configuring Rows for the Table View

– tableView:heightForRowAtIndexPath:

  • Managing Accessory Views

– tableView:accessoryButtonTappedForRowWithIndexPath:

  • Managing Selections

– tableView:{will,did}SelectRowAtIndexPath: – tableView:{will,did}DeselectRowAtIndexPath:

  • Modifying the Header and Footer of Sections

– tableView:viewFor{Header,Footer}InSection: – tableView:heightFor{Header,Footer}InSection:

  • Editing Table Rows
  • Reordering Table Rows
slide-17
SLIDE 17

Praktikum Mediensysteme – iOS 18 WS 2011 Michael Rohs, LMU

HELLO MULTIVIEW

slide-18
SLIDE 18

Praktikum Mediensysteme – iOS 19 WS 2011 Michael Rohs, LMU

View Navigation Example

  • Create a “Navigation-Based Application”
  • Add NSArray *data to RootViewController

– Add some data in onViewLoad, retain!

  • New File… à UIViewController subclass (with nib file) à

“MyDetailViewController”

– Add UILabel to nib file and to .h file (IBOutlet, @property) and to .m file (@synthesize)

  • #import "MyDetailViewController.h”
  • Implement didSelectRowAtIndexPath, set selected item
  • Show that it does not work J à Debugger
  • Show that label is still nil à use member variable, set

label in viewDidLoad

slide-19
SLIDE 19

Praktikum Mediensysteme – iOS 20 WS 2011 Michael Rohs, LMU

View Navigation Example

  • Add back button:

self.navigationItem.title = @"List";

slide-20
SLIDE 20

Praktikum Mediensysteme – iOS 21 WS 2011 Michael Rohs, LMU

MultiView Application Architecture

HelloMultiAppDelegate : NSObject <UIApplicationDelegate> MainWindow.xib: File’s Owner HelloMultiAppDelegate NavigationController Window UIApplication UIWindow A B instantiates A B references UINavigationController UINavigationBar RootViewController.xib: File’s Owner TableView UINavigationItem Navigation bar manages stack of navigation items RootViewController UITableView

slide-21
SLIDE 21

Praktikum Mediensysteme – iOS 22 WS 2011 Michael Rohs, LMU

Navigation Controller Views

Source: http://developer.apple.com/library/ios/#documentation/uikit/reference/UINavigationController_Class/Reference/Reference.html

slide-22
SLIDE 22

Praktikum Mediensysteme – iOS 23 WS 2011 Michael Rohs, LMU

Pushing a new View onto the View Stack

  • Loading and pushing the new view controller

MyDetailViewController *d = [[MyDetailViewController alloc] initWithNibName:@"MyDetailViewController" bundle:nil]; d.labelText = [data objectAtIndex:indexPath.row]; [self.navigationController pushViewController:d animated:YES]; [d release];

Source: http://developer.apple.com/library/ios/#documentation/uikit/reference/UINavigationController_Class/Reference/Reference.html

slide-23
SLIDE 23

Praktikum Mediensysteme – iOS 24 WS 2011 Michael Rohs, LMU

How to Exchange Data between Views

  • Set data before invoking new view controller

MyDetailViewController *dvc = [[MyDetailViewController alloc] initWithNibName:@"MyDetailViewController" bundle:nil]; dvc.labelText = [data objectAtIndex:indexPath.row]; [self.navigationController pushViewController:dvc animated:YES];

  • Use application delegate for “global” data

#import "HelloMultiViewAppDelegate.h” … HelloMultiViewAppDelegate *delegate = [UIApplication sharedApplication].delegate; NSData *data = delegate.myGlobalData;

slide-24
SLIDE 24

Praktikum Mediensysteme – iOS 25 WS 2011 Michael Rohs, LMU

Touch Input

  • Overwrite methods in UIView or UIImageView:
  • (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

{ UITouch *touch = [touches anyObject]; CGPoint p = [touch locationInView:self]; traceCount = 0; trace[traceCount++] = p; [self updateDisplay]; }

  • (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;
  • (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;
  • (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event;