Creating Content with iad JS

Transcription

1 Creating Content with iad JS Part 2 The iad JS Framework Antoine Quint iad JS Software Engineer ios Apps and Frameworks 2

2 Agenda Motivations and Features of iad JS Core JavaScript Enhancements Working with Views and Controls Using View Controllers 3

3 Prerequisites Understanding of web technologies HTML CSS JavaScript DOM APIs Familiarity with UIKit 4

4 Introducing iad JS Motivations and features 5

5 6

6 iad Goals Emotion Interactivity Technology Media playback Expressive graphics Motion Touch 7

7 Rich Media 8

8 Rich Media Technologies Key features in WebKit on iphone 9

9 Rich Media Technologies Key features in WebKit on iphone <audio> 10

10 Rich Media Technologies Key features in WebKit on iphone <video> <audio> 11

11 Rich Media Technologies Key features in WebKit on iphone <video> 12

12 Rich Media Technologies Key features in WebKit on iphone CSS Transforms 2D and 3D 13

13 Rich Media Technologies Key features in WebKit on iphone CSS Transitions CSS Transforms 2D & 3D 14

14 Rich Media Technologies Key features in WebKit on iphone CSS Animations CSS Transitions 15

15 Rich Media Technologies Key features in WebKit on iphone CSS Animations Transitions 16

16 Rich Media Technologies Key features in WebKit on iphone Touch Events 17

17 Rich Media Technologies Key features in WebKit on iphone Touch Events 18

18 Rich Media Technologies Key features in WebKit on iphone 19

19 Rich Media 20

20 Rich Media 21

21 Rich Media 22

22 Mini Apps 23

23 24

24 Rich Media Mini Apps 25

25 26

26 iad JS Goals Streamline creation of rich ads Ensure high performance iad JS Features UIKit design and rich features Declarative programming model Modular and incremental building 27

27 How? 28

28 100% Web Standards No native code was hurt in the making of iad JS 29

29 Agenda Motivations and Features of iad JS Core JavaScript Enhancements Working with Views and Controls Using View Controllers 30

30 Core JavaScript Enhancements ADClass and ADObject 31

31 JavaScript Limitations Inheritance No explicit support for traditional inheritance in JavaScript No concept of a super class and no super keyword Property Synthesis Synthesized properties are prevalent in UIKit design No built-in support in JavaScript syntax Property Change Notifications 32

32 33

33 Core JavaScript Enhancements ADClass Utility Inheritance The superclass property ADObject Base Class Subclassing The callsuper() method Synthesis The synthetizedproperties array Notifications Observe property changes Automated With Synthesis 34

34 ADClass Inheritance // specify the superclass MyClass.superclass = ADObject; function MyClass () { // ensure parent constructor is called this.callsuper(); } // an instance method declaration MyClass.prototype.someMethod = function () { // method code }; // let ADClass process this class ADClass(MyClass); 35

35 ADClass Inheritance // specify the superclass MyClass.superclass = ADObject; function MyClass () { // ensure parent constructor is called this.callsuper(); } // an instance method declaration MyClass.prototype.someMethod = function () { // method code }; // let ADClass process this class ADClass(MyClass); 36

36 ADClass Inheritance // specify the superclass MyClass.superclass = ADObject; function MyClass () { // ensure parent constructor is called this.callsuper(); } // an instance method declaration MyClass.prototype.someMethod = function () { // method code }; // let ADClass process this class ADClass(MyClass); 37

37 ADClass Inheritance // specify the superclass MyClass.superclass = ADObject; function MyClass () { // ensure parent constructor is called this.callsuper(); } // an instance method declaration MyClass.prototype.someMethod = function () { // method code }; // let ADClass process this class ADClass(MyClass); 38

38 Property Synthesis Process MyClass.synthesizedProperties = ['foo']; MyClass.prototype.getFoo() exists? MyClass.prototype.setFoo() exists? Binds getting of foo to getfoo() Default getter, returns _foo Binds setting of foo to setfoo() Default setter, assigns to _foo 39

39 Property Synthesis Custom setter // specify properties to synthesize MyClass.synthesizedProperties = ['foo']; function MyClass () { // declare private ivar with convention _ prefix this._foo = 0; } // method automatically called when.foo is set MyClass.prototype.setFoo = function (foo) { // custom setter code this._foo = foo; }; ADClass(MyClass); 40

40 Property Synthesis Custom setter // specify properties to synthesize MyClass.synthesizedProperties = ['foo']; function MyClass () { // declare private ivar with convention _ prefix this._foo = 0; } // method automatically called when.foo is set MyClass.prototype.setFoo = function (foo) { // custom setter code this._foo = foo; }; ADClass(MyClass); 41

41 Property Synthesis Custom setter // specify properties to synthesize MyClass.synthesizedProperties = ['foo']; function MyClass () { // declare private ivar with convention _ prefix this._foo = 0; } // method automatically called when.foo is set MyClass.prototype.setFoo = function (foo) { // custom setter code this._foo = foo; }; ADClass(MyClass); 42

42 Property Synthesis Custom setter // specify properties to synthesize MyClass.synthesizedProperties = ['foo']; function MyClass () { // declare private ivar with convention _ prefix this._foo = 0; } // method automatically called when.foo is set MyClass.prototype.setFoo = function (foo) { // custom setter code this._foo = foo; }; ADClass(MyClass); 43

43 Property Synthesis Custom getter // specify properties to synthesize MyClass.synthesizedProperties = ['foo']; function MyClass () { // constructor code } // method automatically called when.foo is gotten MyClass.prototype.getFoo = function () { var foo; // custom code to compute foo return foo; }; ADClass(MyClass); 44

44 Property Observing Default protocol var controller = { myobject : new MyClass() }; controller.init = function () { // make our controller observe myobject.foo this.myobject.addpropertyobserver('foo', this); }; // controller must implement the ADPropertyChange protocol which defines the // handlepropertychange method as callback upon property change controller.handlepropertychange = function (observedobject, propertyname) { // handle foo property change }; 45

45 Property Observing Default protocol var controller = { myobject : new MyClass() }; controller.init = function () { // make our controller observe myobject.foo this.myobject.addpropertyobserver('foo', this); }; // controller must implement the ADPropertyChange protocol which defines the // handlepropertychange method as callback upon property change controller.handlepropertychange = function (observedobject, propertyname) { // handle foo property change }; 46

46 Property Observing Default protocol var controller = { myobject : new MyClass() }; controller.init = function () { // make our controller observe myobject.foo this.myobject.addpropertyobserver('foo', this); }; // controller must implement the ADPropertyChange protocol which defines the // handlepropertychange method as callback upon property change controller.handlepropertychange = function (observedobject, propertyname) { // handle foo property change }; 47

47 Property Observing Custom callback var controller = { myobject : new MyClass() }; controller.init = function () { // make our controller observe myobject.foo this.myobject.addpropertyobserver('foo', this, 'foodidchange'); }; // controller must implement the foodidchange method which we defined as the // custom callback in addpropertyobserver controller.foodidchange = function () { // handle.foo property change }; 48

48 Property Observing Custom callback var controller = { myobject : new MyClass() }; controller.init = function () { // make our controller observe myobject.foo this.myobject.addpropertyobserver('foo', this, 'foodidchange'); }; // controller must implement the foodidchange method which we defined as the // custom callback in addpropertyobserver controller.foodidchange = function () { // handle.foo property change }; 49

49 Summary Core JavaScript enhancements Traditional inheritance with superclass and callsuper() Built-in synthesis with synthesizedproperties Automated property change notifications through synthesis 50

50 Agenda Motivations and Features of iad JS Core JavaScript Enhancements Working with Views and Controls Using View Controllers 51

51 Working with Views and Controls ADView and ADControl 52

52 Views ADView Based on UIKit s UIView ADView is the base class for anything that renders on screen Wraps a DOM element and its subtree via the layer property Manual DOM manipulation possible with the hostinglayer property Transaction-based transition system HTML body accessible as ADRootView.sharedRoot 53

53 View Instantiation Using JavaScript APIs // create our ADScrollView instance var scrollview = new ADScrollView(); // set up the viewable size scrollview.position = new ADPoint(20, 20); scrollview.size = new ADSize(window.innerWidth - 40, window.innerheight - 40); // let's only scroll vertically and without indicators scrollview.verticalscrollenabled = false; scrollview.showshorizontalscrollindicator = false; // add to the root view to display the scroll view ADRootView.sharedRoot.addSubview(scrollView); 54

54 View Instantiation Using JavaScript APIs // create our ADScrollView instance var scrollview = new ADScrollView(); // set up the viewable size scrollview.position = new ADPoint(20, 20); scrollview.size = new ADSize(window.innerWidth - 40, window.innerheight - 40); // let's only scroll vertically and without indicators scrollview.verticalscrollenabled = false; scrollview.showshorizontalscrollindicator = false; // add to the root view to display the scroll view ADRootView.sharedRoot.addSubview(scrollView); 55

55 View Instantiation Using JavaScript APIs // create our ADScrollView instance var scrollview = new ADScrollView(); // set up the viewable size scrollview.position = new ADPoint(20, 20); scrollview.size = new ADSize(window.innerWidth - 40, window.innerheight - 40); // let's only scroll vertically and without indicators scrollview.verticalscrollenabled = false; scrollview.showshorizontalscrollindicator = false; // add to the root view to display the scroll view ADRootView.sharedRoot.addSubview(scrollView); 56

56 View Instantiation Using JavaScript APIs // create our ADScrollView instance var scrollview = new ADScrollView(); // set up the viewable size scrollview.position = new ADPoint(20, 20); scrollview.size = new ADSize(window.innerWidth - 40, window.innerheight - 40); // let's only scroll vertically and without indicators scrollview.verticalscrollenabled = false; scrollview.showshorizontalscrollindicator = false; // add to the root view to display the scroll view ADRootView.sharedRoot.addSubview(scrollView); 57

57 View Instantiation Generated markup <!-- this is the view s layer property --> <div class="ad-scroll-view ad-view" style="-webkit-transform: translate(20px, 20px); width: 280px; height: 440px;"> <!-- this is the view s hostinglayer property --> <div class="hosting-layer"> <!-- scrollable content --> </div> <!-- other private views specific to ADScrollView --> <div class="ad-scroll-indicator ad-view horizontal indicator-default"> </div> <div class="ad-scroll-indicator ad-view vertical indicator-default"> </div> </div> 58

58 Why so much code? 59

59 I d rather use markup! 60

60 The Case for a Declarative Approach Ease of authoring Easier to style content with a known markup structure Separation of logic and content is just good sense Performance Fewer manipulations of DOM tree Less time spent rendering 61

61 View Instantiation Using declarative layer <!-- the root view, usually body --> <body class="ad-root-view"> <!-- the scrollview --> <div class="ad-scroll-view" ad-vertical-scroll-enabled="false" ad-shows-horizontal-scroll-indicator="false" style="left: 20px; top: 20px; right: 20px; bottom: 20px;"> <!-- the hosting layer --> <div class="hosting-layer"> <!-- scrollable content --> </div> </div> </body> 62

62 View Instantiation Using declarative layer <!-- the root view, usually body --> <body class="ad-root-view"> <!-- the scrollview --> <div class="ad-scroll-view" ad-vertical-scroll-enabled="false" ad-shows-horizontal-scroll-indicator="false" style="left: 20px; top: 20px; right: 20px; bottom: 20px;"> <!-- the hosting layer --> <div class="hosting-layer"> <!-- scrollable content --> </div> </div> </body> 63

63 View Instantiation Using declarative layer <!-- the root view, usually body --> <body class="ad-root-view"> <!-- the scrollview --> <div class="ad-scroll-view" ad-vertical-scroll-enabled="false" ad-shows-horizontal-scroll-indicator="false" style="left: 20px; top: 20px; right: 20px; bottom: 20px;"> <!-- the hosting layer --> <div class="hosting-layer"> <!-- scrollable content --> </div> </div> </body> 64

64 View Instantiation Using declarative layer <!-- the root view, usually body --> <body class="ad-root-view"> <!-- the scrollview --> <div class="ad-scroll-view" ad-vertical-scroll-enabled="false" ad-shows-horizontal-scroll-indicator="false" style="left: 20px; top: 20px; right: 20px; bottom: 20px;"> <!-- the hosting layer --> <div class="hosting-layer"> <!-- scrollable content --> </div> </div> </body> 65

65 View Instantiation Using declarative layer <!-- the root view, usually body --> <body class="ad-root-view"> <!-- the scrollview --> <div class="ad-scroll-view" ad-vertical-scroll-enabled="false" ad-shows-horizontal-scroll-indicator="false" style="left: 20px; top: 20px; right: 20px; bottom: 20px;"> <!-- the hosting layer --> <div class="hosting-layer"> <!-- scrollable content --> </div> </div> </body> 66

66 Views 67

67 Controls 68

68 Controls ADControl Subclass of ADView Provide advanced and automatic touch tracking Extends built-in touch events with more granularity 69

69 Extended Touch Events Mouse events Mouse events are relative to a target element mouseover mouseout mousemove mousedown mouseup click 70

70 Extended Touch Events Base touch events Built-in touch events provide raw touches touchstart touchmove touchend Tracking touches relative to a given element is hard 71

71 Extended Touch Events iad JS control events Controls analyze raw touches and trigger additional touch events controltouchdragenter controltouchdragexit controltouchupinside and more 72

72 Related Session Adding Touch and Gesture Detection to Web Pages on iphone OS Nob Hill Wednesday 2:00PM 73

73 Actions Using DOM events UIKit s action-target mechanism is one-to-one Model in web development is one-to-many with DOM events A controlvaluechange is dispatched when a control value changes 74

74 DOM Event Handling slider.addeventlistener('controlvaluechange', handler, false); User drags the slider and a controlvaluechange event fires on slider handler is a function? handler is an object? callback is handler() context object is window callback = handler.handleevent() context = handler Best Practice 75

75 Control States Selected Enabled Highlighted Synchronized with touch tracking State is reflected in CSS 76

76 Building a Custom Control Markup <div class="ad-control my-custom-control"></div> Style /* default state for control */.ad-control.my-custom-control { background-color: white; color: red; } /* highlighted state for control */.ad-page-control.my-custom-control.highlighted { background-color: red; color: white; } 77

77 Code Sample 78

78 79

79 Markup <body class="ad-root-view"> <div class="ad-scroll-view" ad-vertical-scroll-enabled="false" ad-shows-horizontal-scroll-indicator="false" ad-paging-enabled="true"> <div class="hosting-layer"> <img src="stig1.png"> <img src="stig2.png"> <img src="stig3.png"> <img src="stig4.png"> </div> </div> <div class="ad-page-control" ad-number-of-pages="4" ad-oncontrolvaluechange="controller.pagecontrolvaluechanged(event)"></div> </body> 80

80 Markup <body class="ad-root-view"> <div class="ad-scroll-view" ad-vertical-scroll-enabled="false" ad-shows-horizontal-scroll-indicator="false" ad-paging-enabled="true"> <div class="hosting-layer"> <img src="stig1.png"> <img src="stig2.png"> <img src="stig3.png"> <img src="stig4.png"> </div> </div> <div class="ad-page-control" ad-number-of-pages="4" ad-oncontrolvaluechange="controller.pagecontrolvaluechanged(event)"></div> </body> 81

81 Markup <body class="ad-root-view"> <div class="ad-scroll-view" ad-vertical-scroll-enabled="false" ad-shows-horizontal-scroll-indicator="false" ad-paging-enabled="true"> <div class="hosting-layer"> <img src="stig1.png"> <img src="stig2.png"> <img src="stig3.png"> <img src="stig4.png"> </div> </div> <div class="ad-page-control" ad-number-of-pages="4" ad-oncontrolvaluechange="controller.pagecontrolvaluechanged(event)"></div> </body> 82

82 Markup <body class="ad-root-view"> <div class="ad-scroll-view" ad-vertical-scroll-enabled="false" ad-shows-horizontal-scroll-indicator="false" ad-paging-enabled="true"> <div class="hosting-layer"> <img src="stig1.png"> <img src="stig2.png"> <img src="stig3.png"> <img src="stig4.png"> </div> </div> <div class="ad-page-control" ad-number-of-pages="4" ad-oncontrolvaluechange="controller.pagecontrolvaluechanged(event)"></div> </body> 83

83 Markup <body class="ad-root-view"> <div class="ad-scroll-view" ad-vertical-scroll-enabled="false" ad-shows-horizontal-scroll-indicator="false" ad-paging-enabled="true"> <div class="hosting-layer"> <img src="stig1.png"> <img src="stig2.png"> <img src="stig3.png"> <img src="stig4.png"> </div> </div> <div class="ad-page-control" ad-number-of-pages="4" ad-oncontrolvaluechange="controller.pagecontrolvaluechanged(event)"></div> </body> 84

84 Markup <body class="ad-root-view"> <div class="ad-scroll-view" ad-vertical-scroll-enabled="false" ad-shows-horizontal-scroll-indicator="false" ad-paging-enabled="true"> <div class="hosting-layer"> <img src="stig1.png"> <img src="stig2.png"> <img src="stig3.png"> <img src="stig4.png"> </div> </div> <div class="ad-page-control" ad-number-of-pages="4" ad-oncontrolvaluechange="controller.pagecontrolvaluechanged(event)"></div> </body> 85

85 Markup <body class="ad-root-view"> <div class="ad-scroll-view" ad-vertical-scroll-enabled="false" ad-shows-horizontal-scroll-indicator="false" ad-paging-enabled="true"> <div class="hosting-layer"> <img src="stig1.png"> <img src="stig2.png"> <img src="stig3.png"> <img src="stig4.png"> </div> </div> <div class="ad-page-control" ad-number-of-pages="4" ad-oncontrolvaluechange="controller.pagecontrolvaluechanged(event)"></div> </body> 86

86 Layout /* size the scroll view */.ad-scroll-view { width: 320px; height: 421px; } /* position and size the page control */.ad-page-control { top: 422px; width: 320px; height: 38px; } 87

87 Layout /* size the scroll view */.ad-scroll-view { width: 320px; height: 421px; } /* position and size the page control */.ad-page-control { top: 422px; width: 320px; height: 38px; } 88

88 Scrollable Content Layout /* explicitly size the hosting layer */.hosting-layer { width: 1280px; padding-left: 16px; } /* amount of x spacing between images */.hosting-layer > img { margin-right: 28px; } /* no margin for last image */.hosting-layer > img:last-of-type { margin-right: 0; } 89

89 Scrollable Content Layout /* explicitly size the hosting layer */.hosting-layer { width: 1280px; padding-left: 16px; } /* amount of x spacing between images */.hosting-layer > img { margin-right: 28px; } /* no margin for last image */.hosting-layer > img:last-of-type { margin-right: 0; } 90

90 Scrollable Content Layout /* explicitly size the hosting layer */.hosting-layer { width: 1280px; padding-left: 16px; } /* amount of x spacing between images */.hosting-layer > img { margin-right: 28px; } /* no margin for last image */.hosting-layer > img:last-of-type { margin-right: 0; } 91

91 Controller var controller = {}; controller.init = function () { // get a reference to our page control this.pagecontrol = ADRootView.sharedRoot.pageControls[0]; // get a reference to our scroll view this.scrollview = ADRootView.sharedRoot.scrollViews[0]; // wire up the scroll view delegate to be our controller this.scrollview.delegate = this; }; function init () { // init our controller controller.init(); } // call init() as soon as the page is fully loaded window.addeventlistener('domcontentloaded', init, false); 92

92 Controller var controller = {}; controller.init = function () { // get a reference to our page control this.pagecontrol = ADRootView.sharedRoot.pageControls[0]; // get a reference to our scroll view this.scrollview = ADRootView.sharedRoot.scrollViews[0]; // wire up the scroll view delegate to be our controller this.scrollview.delegate = this; }; function init () { // init our controller controller.init(); } // call init() as soon as the page is fully loaded window.addeventlistener('domcontentloaded', init, false); 93

93 Controller var controller = {}; controller.init = function () { // get a reference to our page control this.pagecontrol = ADRootView.sharedRoot.pageControls[0]; // get a reference to our scroll view this.scrollview = ADRootView.sharedRoot.scrollViews[0]; // wire up the scroll view delegate to be our controller this.scrollview.delegate = this; }; function init () { // init our controller controller.init(); } // call init() as soon as the page is fully loaded window.addeventlistener('domcontentloaded', init, false); 94

94 Controller var controller = {}; controller.init = function () { // get a reference to our page control this.pagecontrol = ADRootView.sharedRoot.pageControls[0]; // get a reference to our scroll view this.scrollview = ADRootView.sharedRoot.scrollViews[0]; // wire up the scroll view delegate to be our controller this.scrollview.delegate = this; }; function init () { // init our controller controller.init(); } // call init() as soon as the page is fully loaded window.addeventlistener('domcontentloaded', init, false); 95

95 Controller var controller = {}; controller.init = function () { // get a reference to our page control this.pagecontrol = ADRootView.sharedRoot.pageControls[0]; // get a reference to our scroll view this.scrollview = ADRootView.sharedRoot.scrollViews[0]; // wire up the scroll view delegate to be our controller this.scrollview.delegate = this; }; function init () { // init our controller controller.init(); } // call init() as soon as the page is fully loaded window.addeventlistener('domcontentloaded', init, false); 96

96 Scroll View Delegation // scroll view has snapped to the nearest page without deceleration controller.scrollviewdidendscrollinganimation = function (thescrollview) { this.syncpagecontroltoscrollview(); }; // scroll view has scrolled to a new location following a deceleration animation controller.scrollviewdidenddecelerating = function (thescrollview) { this.syncpagecontroltoscrollview(); }; // syncs the page control to show the currently visible page in the scroll view controller.syncpagecontroltoscrollview = function () { this.pagecontrol.currentpage = Math.round( this.scrollview.contentoffset.x / this.scrollview.size.width); }; 97

97 Scroll View Delegation // scroll view has snapped to the nearest page without deceleration controller.scrollviewdidendscrollinganimation = function (thescrollview) { this.syncpagecontroltoscrollview(); }; // scroll view has scrolled to a new location following a deceleration animation controller.scrollviewdidenddecelerating = function (thescrollview) { this.syncpagecontroltoscrollview(); }; // syncs the page control to show the currently visible page in the scroll view controller.syncpagecontroltoscrollview = function () { this.pagecontrol.currentpage = Math.round( this.scrollview.contentoffset.x / this.scrollview.size.width); }; 98

98 Scroll View Delegation // scroll view has snapped to the nearest page without deceleration controller.scrollviewdidendscrollinganimation = function (thescrollview) { this.syncpagecontroltoscrollview(); }; // scroll view has scrolled to a new location following a deceleration animation controller.scrollviewdidenddecelerating = function (thescrollview) { this.syncpagecontroltoscrollview(); }; // syncs the page control to show the currently visible page in the scroll view controller.syncpagecontroltoscrollview = function () { this.pagecontrol.currentpage = Math.round( this.scrollview.contentoffset.x / this.scrollview.size.width); }; 99

99 Scroll View Delegation // scroll view has snapped to the nearest page without deceleration controller.scrollviewdidendscrollinganimation = function (thescrollview) { this.syncpagecontroltoscrollview(); }; // scroll view has scrolled to a new location following a deceleration animation controller.scrollviewdidenddecelerating = function (thescrollview) { this.syncpagecontroltoscrollview(); }; // syncs the page control to show the currently visible page in the scroll view controller.syncpagecontroltoscrollview = function () { this.pagecontrol.currentpage = Math.round( this.scrollview.contentoffset.x / this.scrollview.size.width); }; 100

100 Scroll View Delegation // scroll view has snapped to the nearest page without deceleration controller.scrollviewdidendscrollinganimation = function (thescrollview) { this.syncpagecontroltoscrollview(); }; // scroll view has scrolled to a new location following a deceleration animation controller.scrollviewdidenddecelerating = function (thescrollview) { this.syncpagecontroltoscrollview(); }; // syncs the page control to show the currently visible page in the scroll view controller.syncpagecontroltoscrollview = function () { this.pagecontrol.currentpage = Math.round( this.scrollview.contentoffset.x / this.scrollview.size.width); }; 101

101 Scroll View Delegation // scroll view has snapped to the nearest page without deceleration controller.scrollviewdidendscrollinganimation = function (thescrollview) { this.syncpagecontroltoscrollview(); }; // scroll view has scrolled to a new location following a deceleration animation controller.scrollviewdidenddecelerating = function (thescrollview) { this.syncpagecontroltoscrollview(); }; // syncs the page control to show the currently visible page in the scroll view controller.syncpagecontroltoscrollview = function () { this.pagecontrol.currentpage = Math.round( this.scrollview.contentoffset.x / this.scrollview.size.width); }; 102

102 Page Control Event Handling <div class="ad-page-control" ad-number-of-pages="4" ad-oncontrolvaluechange="controller.pagecontrolvaluechanged(event)"></div> controller.pagecontrolvaluechanged = function (event) { // get new scroll view content offset from page control s current page var x = this.pagecontrol.currentpage * this.scrollview.size.width; // update the scroll view s content offset with an animation this.scrollview.setcontentoffsetanimated(new ADPoint(x, 0), true); }; 103

103 Page Control Event Handling <div class="ad-page-control" ad-number-of-pages="4" ad-oncontrolvaluechange="controller.pagecontrolvaluechanged(event)"></div> controller.pagecontrolvaluechanged = function (event) { // get new scroll view content offset from page control s current page var x = this.pagecontrol.currentpage * this.scrollview.size.width; // update the scroll view s content offset with an animation this.scrollview.setcontentoffsetanimated(new ADPoint(x, 0), true); }; 104

104 Page Control Event Handling <div class="ad-page-control" ad-number-of-pages="4" ad-oncontrolvaluechange="controller.pagecontrolvaluechanged(event)"></div> controller.pagecontrolvaluechanged = function (event) { // get new scroll view content offset from page control s current page var x = this.pagecontrol.currentpage * this.scrollview.size.width; // update the scroll view s content offset with an animation this.scrollview.setcontentoffsetanimated(new ADPoint(x, 0), true); }; 105

105 106

106 Summary Views and controls Two techniques Programmatic using the JS APIs Declarative using strictly HTML & CSS There s more 107

107 Scroll Views Toolbars Search Bars Page Controls Flow Views Sliders Switches Progress Views Picker Views Navigation Bars Tab Bars Buttons Rating Controls Carousel Views Table Views Segmented Controls 108

108 Agenda Motivations and Features of iad JS Core JavaScript Enhancements Working with Views and Controls Using View Controllers 109

109 Working with View Controllers ADViewController 110

110 Modular Architecture Screen One Photos Top Screen Menu Screen Two Maps 111

111 Modular Architecture Performance considerations Loading too much initial content strains the network Too many elements in the tree bogs down rendering performance 112

112 Incremental Download 113

113 Incremental Display 114

114 View Controllers Modular architecture Abstract loading of a number of resources Add and remove views as needed 115

115 Anatomy of a View Controller Bundle screen resources View Controller Programming logic Content View View content CSS Styles View layout Images 116

116 ADViewController Configuration MenuController.superclass = ADViewController; function MenuController () { this.callsuper({ id : 'menu', requiredfileuris: { contentview : 'views/menu.html', stylesheets : ['css/menu.css'], images: ['images/stig1.png', 'images/stig2.png', 'images/stig3.png'] } }); }; 117

117 ADViewController Configuration MenuController.superclass = ADViewController; function MenuController () { this.callsuper({ id : 'menu', requiredfileuris: { contentview : 'views/menu.html', stylesheets : ['css/menu.css'], images: ['images/stig1.png', 'images/stig2.png', 'images/stig3.png'] } }); }; 118

118 ADViewController Configuration MenuController.superclass = ADViewController; function MenuController () { this.callsuper({ id : 'menu', requiredfileuris: { contentview : 'views/menu.html', stylesheets : ['css/menu.css'], images: ['images/stig1.png', 'images/stig2.png', 'images/stig3.png'] } }); }; 119

119 ADViewController Configuration MenuController.superclass = ADViewController; function MenuController () { this.callsuper({ id : 'menu', requiredfileuris: { contentview : 'views/menu.html', stylesheets : ['css/menu.css'], images: ['images/stig1.png', 'images/stig2.png', 'images/stig3.png'] } }); }; 120

120 ADViewController Configuration MenuController.superclass = ADViewController; function MenuController () { this.callsuper({ id : 'menu', requiredfileuris: { contentview : 'views/menu.html', stylesheets : ['css/menu.css'], images: ['images/stig1.png', 'images/stig2.png', 'images/stig3.png'] } }); }; 121

121 images/stig1.jpg images/stig3.jpg views/menu.html css/menu.css images/stig2.jpg viewcontrollerprogressloadingrequiredfiles viewcontrollerwillloadrequiredfiles viewcontrollerdidloadrequiredfiles contentviewdidload viewdidload Loading Delegate 122

122 ADViewController Configuration MenuController.superclass = ADViewController; function MenuController () { this.callsuper({ id : 'menu', requiredfileuris: { contentview : 'views/menu.html', stylesheets : ['css/menu.css'], images: ['images/stig1.png', 'images/stig2.png', 'images/stig3.png'] } }); }; 123

123 View Controller Unique Identifier The id property Uniquely identifies a view controller among all others ADViewController.instances.menu; Eases CSS matching contentview uses identifier as-is for its id attribute view uses identifier with -container suffix for its id attribute 124

124 Declarative Features 125

125 More Convenience 126

126 View Controllers Common Programming Tasks Obtaining references to objects in the content view Responding to user interaction triggered in content view Transitioning between screens 127

127 Outlets Automatically reference any view or element in content view <div ad-outlet="title"></div> Store references in outlets property this.outlets.title 128

128 Actions Automatically register a callback in the context of the view s controller <div ad-action="playaudio"></div> MyController.prototype.playAudio() 129

129 Transitions Automatically trigger transition to new view controller by its id <div ad-transitions-to="maps"></div> Abstracts loading and removing views in one synchronized transaction 130

130 Summary View controllers Automatic loading of screen resources bundle Incremental screen display with automated transitions Standardized common coding tasks More declarative features Less code, fewer common errors 131

131 Summary Motivations and Features of iad JS Core JavaScript Enhancements Working with Views and Controls Using View Controllers 132

132 Summary Motivations and Features of iad JS Core JavaScript Enhancements Working with Views and Controls Using View Controllers 133

133 Summary Motivations and Features of iad JS Core JavaScript Enhancements Working with Views and Controls Using View Controllers 134

134 Summary Motivations and Features of iad JS Core JavaScript Enhancements Working with Views and Controls Using View Controllers 135

135 Summary Motivations and Features of iad JS Core JavaScript Enhancements Working with Views and Controls Using View Controllers 136

136 Summary Motivations and Features of iad JS Core JavaScript Enhancements Working with Views and Controls Using View Controllers 137

137 Rich Media Mini Apps 138

138 100% Web Standards 139

139 140

140 141

141 More Information Vicki Murley Safari Technologies Evangelist Download iaddeveloper Package Documentation iad JS Reference Library Apple Developer Forums 142

142 Related Sessions iad Creating Content with iad JS, Part I Integrating Ads with iad (Repeat) Marina Thursday 9:00AM Pacific Heights Friday 9:00AM 143

143 Related Sessions Web technologies Delivering Audio and Video Using Web Standards, Part I Delivering Audio and Video Using Web Standards, Part 2 Nob Hill Friday 10:15AM Nob Hill Friday 11:30AM CSS Effects, Part I: UI Elements and Navigation CSS Effects, Part 2: Galleries and 3D Effects Adding Touch and Gesture Detection to Web Pages on iphone OS Marina Tuesday 3:15PM Marina Tuesday 4:30PM Nob Hill Wednesday 2:00PM 144

144 Labs Safari on iphone OS Lab Internet & Web Lab B Thursday 2:00PM 145

145 Q&A 146

146 147

147 148