COMP327 Mobile Computing

Lecture Set 5 - Dashcode, Web Content and Web Apps for the iPhone

1 In this Lecture Set

• Dashcode and Web Apps • IDE This material will not • Dashcode Elements appear in the exam! It supports the First • Layout Assignment • Data Sources and Data Binding • Hints and tricks for Web

2 This material will not appear in the exam! It supports the First Assignment Dashcode

• Dashcode Integrated Development Environment • An IDE originally designed for Dashboard Widgets (Dashcode 1.0) • Web Apps and Apps appeared in Dashcode 2.0 and 3.0 • Adheres to Web Standards • HTML5 and CSS3 support • Provides CSS templates, JavaScript Support, etc through a MVC model

3 This material will not appear in the exam! It supports the First Assignment Multiple Destinations

• Projects can be built for both Safari and Mobile Safari (i.e. iPhone) • Allows simultaneous development for different types of platform • Code developed using JavaScript

4 This material will not appear in the exam! It supports the First Assignment Data binding

• Supports the ability to bind data from a data source (RSS, XML, JSON etc) to elements on the canvas • Value Transformer methods can be used to modify data before being rendered on the page

5 This material will not appear in the exam! It supports the First Assignment Workflow

• A simple guide takes the developer step by step through the development process • Each workflow is tuned for each template

6 This material will not appear in the exam! It supports the First AssignmentGetting around the IDE Navigator

Canvas

Inspector

7 This material will not appear in the exam! It supports the First AssignmentExploring the Navigator

• Projects include various resources (files) organised in a logical directory structure • index.html provides access to the App • css files to control the presentation • java script files contain the widget methods • Editor provides different views on each file type • Library Pane provides access to new widgets or useful code fragments File Navigator Library

File List Data Sources

8 This material will not appear in the exam! It supports the First AssignmentDeveloping a simple Web App

• Aim is to develop a web app to list details about the First Semester 3rd Year Courses

9 This material will not appear in the exam! It supports the First Assignment Creating a simple App

• Start Dashcode • Uncheck Safari • Select Browser

10 This material will not appear in the exam! It supports the First Assignment Creating a simple App

• Personalising the Project • Change the name of the project • Double click the title on the canvas, and change the name

11 This material will not appear in the exam! It supports the First Assignment Creating a simple App

• Changing the data source • Click on the File Button to view the files • Select sampleData.js • Change the contents • Click on the Data Sources Button • Update data model • Browse the model for both the list and the dataSource itself

12 This material will not appear in the exam! It supports the First Assignment Creating a simple App

• Bind the data to the widgets on the canvas • Whilst viewing the listLevel widget element • From “dataSource” • Bind the course element to the row title • Click on the data element, then drag from the hollow circle to the first “Item”

13 This material will not appear in the exam! It supports the First Assignment Creating a simple App

• Bind the data to the widgets on the canvas • Whilst viewing the detailLevel • From “list” data • Bind the course element and title elements to the “Title” and “Location” elements • Also bind the title to the Description element

14 This material will not appear in the exam! It supports the First Assignment Creating a simple App

• Add a browser button • Drag a button from the library pane • In the Inspector, under Behaviours, select onclick, and create a behaviour method • Add code to go to the course website

15 This material will not appear in the exam! It supports the First Assignment Creating a simple App

• Create a transformer for the Description text • Open the Inspector to the bindings tag • Click on the Description element • Open the text option

16 This material will not appear in the exam! It supports the First Assignment Creating and laying out Web Apps • Dashcode provides a number of templates that can be modified for different applications • Much larger number for Dashboard Widgets, but fewer for Safari apps • Some templates have additional attributes that can be set in the “Application Attributes” tab • e.g. RSS feed readers support URLs

17 This material will not appear in the exam! It supports the First Assignment Custom Application Template

• A blank web application • Contains basic files and images • No preconfigured abilities are included

18 This material will not appear in the exam! It supports the First Assignment Browser Template

• Supports navigation through multiple levels of content • Stacks based template • Good for hierarchical content • Default application contains a top level list and second level detail • Selecting a list element reveals detail view • Additional levels can be added

19 This material will not appear in the exam! It supports the First AssignmentPodcast Web Application Template • Similar to Browser template • Lists , which can be selected and loaded • Properties include the Podcast URL

20 This material will not appear in the exam! It supports the First Assignment Utility Template

• Supports a dual-level view app • First level (front) presents a writable window • Second view (settings) allow various parameters to be configured • An info button allows transitions between the two views

21 This material will not appear in the exam! It supports the First AssignmentRSS Application Template

• Similar to Browser and Podcast template • Customised by defining a URL from which to retrieve articles • Options include: • Feed URL • Number of articles to display, time period, and number of “top” articles

22 This material will not appear in the exam! It supports the First AssignmentLaying out widgets in the workspace • The workspace allows widgets to be laid out • The inspector can then be used to modify widget attributes • Widgets can be selected from the Library • Both portrait and landscape views are possible Change • Both real and pixel View size views possible Landscape/ Portrait

23 This material will not appear in the exam! It supports the First Assignment The inspector

• The Inspector provides details about different aspects of each widget • Attributes • Fill and Stroke • Metrics • Text • Bindings • Behaviours

24 This material will not appear in the exam! It supports the First Assignment Attribute Inspector

• Can modify the selected element’s ID • Used within JavaScript to reference the element • Its CSS class • Whether or not it is visible • Default Images • Element specific parameters • Sub-element labels • Email addresses etc • These parameters are also settable through Javascript

25 This material will not appear in the exam! It supports the First AssignmentFill and Stroke Inspector

• Dependent on the element being modified • Affects the look and effects of an element • Its “Fill” • Solid / Gradient / Image • Corner Roundness • Opacity • Reflection • Stroke Colour • Stroke Width • Effects include • Glass effects • Recess (raise or lower)

26 This material will not appear in the exam! It supports the First Assignment Metrics Inspector

• Used to modify the element’s size and position on the canvas • Size parameters given in pixels (include borders) • Also change the behaviour when the widget / webpage is resized • Positioning can be absolute coordinate or “document flow” (i.e. relative to other elements) • Can affect how widgets are moved in the editor • Autoresize reflect the elements behaviour when the widget is resized

27 This material will not appear in the exam! It supports the First Assignment Text Inspector

• Used when an element displays text • Adjust text characteristics • font, style, size etc • Text wrapping and overflow • Clip - cuts string at the element bounds • Ellipse - replaces any additional text with “...”

28 This material will not appear in the exam! It supports the First Assignment Bindings Inspector

• Used to define the bindings between a data source and specific properties of an element • Specify data source • Key path of the item in the data source • Value Transformer • Placeholder values • Typically set by using the drag and drop method from the data model • However, place holder values and transformers have to be set manually

29 This material will not appear in the exam! It supports the First Assignment Behaviour Inspector

• Used to assign Javascript handlers for various events • Depending on the different element • By specifying the name of a handler, an event stub is created in the code • Arrow to the right provides direct access to the method in the code

30 This material will not appear in the exam! It supports the First Assignment Creating elements from the code • Elements can be created on the fly, and modified using CSS • Good for providing non-standard behaviour • However it is better to use elements from the editor • Use “document.createElement” to create the element • Use “setAttribute” to specify its CSS characteristics • The add it to another element using “apppendChild” • Take a close look at the code included in other Templates for inspiration • Also check out code fragments in the Code Library

31 This material will not appear in the exam! It supports the First Assignment Creating elements from the code (example) • Taken from the Podcast template

// // Function: showError(errorString) // Show an error in a red box // // errorString: string to be displayed // divtoHide: element that needs to be hidden when error is shown. function showError(errorString) { var errorDiv = document.createElement("div"); errorDiv.innerText = errorString; errorDiv.setAttribute("style", "position: absolute; border-style: solid; border-width: 1px; right: 10px; left: 10px; top: 120px; background-: rgb(32, 32, 32); border-color: rgb(0, 0, 0); -webkit-border-radius: 10px; -moz-border- radius: 10px; text-align: center; padding: 15px; font-family: Helvetica; font- weight: bold; color: rgb(255, 255, 255); font-size: 15px; text-shadow: rgb(0, 0, 0) 0px -1px 0px;");

document.getElementById("content").appendChild(errorDiv); }

32 This material will not appear in the exam! It supports the First Assignment Dashcode Elements

• A number of elements are available for use in a Web App • Buttons • Containers • Indicators • Media • Shapes • Text • Different widgets have different properties which are configurable in the inspector

33 This material will not appear in the exam! It supports the First Assignment Buttons

• App-specific buttons • Specific parameters defined in inspector • Calls underlying app functionality without the need for event handlers • no “onclick” handler available • Includes: • Call Button • Define number to call • Map Button • Specify Address • Email Button • Specify Recipient and Email

34 This material will not appear in the exam! It supports the First Assignment Buttons

• Standard buttons • Different shapes for different behaviours • Use “onclick” handler to set action • Includes • Lozenge Button • Push Button • Browser buttons • Can be used within stacks views for navigation • Cause stacks transitions without the need for handlers • Stacks behaviour is linked via CSS classes • Navigation In • Go Forward Button • Right Lozenge Button • Right Rounded Button • Navigation Out • Go Back Button • Left Lozenge Button • Left Rounded Button

35 This material will not appear in the exam! It supports the First Assignment Buttons

• Check-box buttons • Allows values to be toggled on or off • Radio buttons • Several buttons can be connected, such that when one is selected, it deselects the others • Pop-up Menu • Acts like a drop down menu • Several values can be specified • iPhone-specific navigator appears when used.

36 This material will not appear in the exam! It supports the First Assignment Containers

• Designed to facilitate the organisational structure of the web app • Supports both layout control, and encapsulation control • Single and multi-pane containers • Single pane containers used structure content • Data list elements • When bound to a data source, can dynamically expand to show all elements.

37 This material will not appear in the exam! It supports the First Assignment Single Pane Containers

• Provide a container in which other elements can be logically grouped. • Good to support organisational structure • Can be used to manage group behaviours • e.g. a title (text) and data element can be grouped together, and either disabled or made invisible when data is not available • Typically document flow elements • Box used for potentially scrolling groups of elements • By default, has no left or right margin • Rounded Box used for smaller (non-scrolling) elements • Appears with margin - suited for smaller, fixed size groupings

38 This material will not appear in the exam! It supports the First Assignment Multi-pane Containers

• Supports multi-pane organisation • Number of panes definable in the inspector • Two main layouts: • Column Layout • Facilitates vertical columns that can be filled with document flow elements • Stack Layout • Facilitates several views with animated transitions

39 This material will not appear in the exam! It supports the First Assignment Data-List Containers

• Lists • When bound to a data element containing several elements, can dynamically grow to display these • Can also be statically defined • Are configured by editing contents of first (primary cell) • Edge-to-Edge List • Rounded Rectangle List • Size of list can be changed to create more cell space (but reduce number of visible elements) • Grid • Similar to Lists, but provide a grid view! • Browser • Specialised compound element to support browsing • Include header and dynamic back buttons • Includes edge-to-edge list with constrained transitions

40 This material will not appear in the exam! It supports the First Assignment Indicators

• Indicators provide a graphical representation of activity or values • Gauge, Indicator, and Horizontal / Vertical level Indicators • Can specify upper and lower limits • Also supports “warning” and “critical” thresholds • Default images are provided, but others can be specified • Used to graphically represent some value within some limits • Activity Indicator • Non parametric, but is animated to represent activity • Often used during activities such as loading data, performing calculations, etc where progress is unknown

41 This material will not appear in the exam! It supports the First Assignment Media

• Elements for supporting media • Canvas • supports simple drawing via JavaScript. • Paths define lines and areas • Can then be stroked or filled with colour or an image • Image • Displays an image within a defined area. • Images automatically scaled to fit element • Video • Displays a video viewer with controls • Provides an alternative to using built-in iPhone Quicktime application

42 This material will not appear in the exam! It supports the First Assignment Shapes

• Graphical shapes that support presentation • Sometimes included within containers to provide backgrounds • Come in various shapes and sizes • Can be used for organisational structure • Not as “intuitive” as containers

43 This material will not appear in the exam! It supports the First Assignment Text

• Elements to display or request text entry • Content can be modified through Javascript • Three main types: • Text • Provide simple labels • Good presentation support, but few events • Text Field • Designed for single line or character limited entries • Greater event support for events • Text Area • Designed for multi-line text entry • Search Field • Designed to support search queries • Can store previous searches • Can be bound to a data-list container to select displayed items

44 This material will not appear in the exam! It supports the First Assignment Layout

• A Web App is just a web page! • Presentation of elements goes from top of page to bottom (one following another) • Associated DOM structure that can be dynamically modified • CSS supports the presentation of elements • Positioning of subsequent elements is determined by: • Page size • Content • Realisation of objects • if invisible, subsequent elements are pushed down • If the DOM structure is dynamic, then positioning is unpredictable • Good design can avoid problems • Use of absolute positioning, however, is DANGEROUS!!!

45 This material will not appear in the exam! It supports the First AssignmentLayout - Document Flow

20px (top) 20px (left)

The safest way to lay out elements 90px (right) • 40px (bottom) • Elements follow one another vertically • Use column layout to position things horizontally • Size is often constrained by a parent element, or by CSS for a specific element type. • This is typically represented by a yellow background • Some flexibility in positioning and size management • Margins specify where the element is positioned with respect to the parent element

46 This material will not appear in the exam! It supports the First Assignment Layout - Absolute

45px (top) • Allows elements to be positioned with 20pt (left) respect to their container 90pt (right)

• Sits “without” the document flow structure 277px (bottom) • Note opposite how the button is now relative to the “Developed with Dashcode” text, not the box • Can be positioned beyond the “viewport” bounds • Document view elements can increase the viewport, resulting in scrollbars (horizontal and vertical) that allow the user to view elements • Absolute view elements can disappear off the viewport (and hence the screen), with no ability to scroll to see the elements. • Good for positioning items independently of the underlying model • E.g. managing pop-up elements, such as dialog boxes

47 This material will not appear in the exam! It supports the First Assignment Data Management: Data Sources • Most apps and dynamic web pages pull data live from a source • Server delivers the web page HTML source, css and Javascript Data Server • Client then makes AJAX requests to pull over data • Dashcode simplifies this by abstracting away the AJAX management • Different “DataSources” can be defined and used • Data is fetched on load • Parses JSON, XML, RSS • Provides access to the data as objects • Visualiser facilitates data inspection • Can be updated dynamically

• Simplifies data access!

48 This material will not appear in the exam! It supports the First Assignment Data Management: Data Bindings • Data is typically attached to the DOM structure using Glue Code • Repetitive, and mundane Data Server • Can be automated through Bindings • Manages the binding of a data object to a DOM element • Can be defined graphically Data Server • Bindings relate data to a property of an element • Done automatically when the data source changes • Not only for displayed data • Visibility, colour, rendering etc • Can use transformers to modify the format of the data when necessary • Simplifies data binding!

49 This material will not appear in the exam! It supports the First AssignmentCollection Data Sources

• When data is bound to a list or grid... • a new data source is created to represent that list • Can be accessed through getDataSource javascript • Can also support • Sorting • Filtering • Selection Management (e.g. with search)

50 This material will not appear in the exam! It supports the First Assignment Value Transformers

• Value Transformers convert data from the data source model to the view • reverse transformer also available to modify the data from the view • Several built-in transformers • Getting values from arrays • Inverting binary values etc • Placeholders • Used for handling different data scenarios when bindings can’t be managed • Default values can be specified for the following: • Multiple Values • No Selection • Null Value

51 This material will not appear in the exam! It supports the First Assignment JSON

• JavaScript Object Notation • Lightweight data interchange format with simple BNF structure • Supports: • Collections of name/value pairs - objects { string : value , string : value , ... } • Ordered list of values - arrays [ value , value , ... ] • Values can be • strings, , objects, arrays, “true”, “false”, “null” • Elements can be nested • See http://json.org for full definition

52 This material will not appear in the exam! It supports the First AssignmentDeveloping Websites for the iPhone • There are various factors that could be considered when developing web sites that may also be viewed by the iPhone • A good set of intro videos available from ADC Several videos covering • Remember that these are • OS1.0 (2007) and some different levels of design elements are dated!!! • Depending on how iPhone • Available from iTunes U dependent the web content is!

53 This material will not appear in the exam! It supports the First Assignment Designing Web Sites for mobile devices (Part 1)

Compatible Optimised Application • Web Browser compatible • Appropriately Scaled • Provide Discrete • Standards Based • Minimal panning Functionality • Displays Correctly • User-Input Friendly • Application-styled Presentation • Operates as designed • e.g. finger or multi-touch interaction • Simulate the native app • No dependency on non- experience universal systems • Designed for always-on connectivity • Integrate with built-in • e.g. Java or Flash on iPhone applications

Going from compatibility to the Application Experience

Based on the Apple “Safari on iPhone Part 1” videos

54 This material will not appear in the exam! It supports the First Assignment Designing Web Sites for mobile devices (Part 1)

• Making the content compatible • Ensure that the content is compatible with the device’s browser/micro-browser software • Check emulators, or equivalences • e.g. Windows Mobile and Internet Explorer • Safari Desktop and Safari Mobile • Consider font dependencies, etc

55 This material will not appear in the exam! It supports the First AssignmentEnsuring Compatibility when developing for mobile devices

1. User can set browser preferences 2. Separate content, presentation and interaction 3. Create well-formed / standards-based pages (no wml!!!) 4. Be browser agnostic 5. Know the per-page resource constraints 6. Know the per-page scripting constraints 7. Use supported windows and dialogs 8. Use supported content types 9. Use native fonts 10. Test and debug with Safari (for iPhone targets)

Taken from the Apple Developers video “Safari on the iPhone Part 1: Compatibility”

56 This material will not appear in the exam! It supports the First Assignment Compatibility: 1. Know the Browser Preferences • Check browser default settings • JavaScript - may be off • Pop-up blocking - on by default • Cookie Policy - conservative

• Making unorthodox assumptions may impact the browser experience • Users may be put off if expected to change their default settings to browse a site

57 This material will not appear in the exam! Compatibility: It supports the First Assignment 2. Separate content, presentation and interaction

• Use good engineering practices to separate data according to function • The source may consist of: • JavaScript - to support interaction • CSS - to support presentation • HTML - the content itself • Keep these files separate • Supports better delivery over wireless connections

58 This material will not appear in the exam! Compatibility: It supports the First Assignment 3. Create well-formed / standards-based pages • Check files for common errors • Errors often appear on pages, but the browser seams to do the “right thing”... • ... on one browser! Behaviour on another may be unpredictable • Look for: • Incorrect nesting • Malformed doctype • Missing close tags • Missing quotes • Miss-used or incorrect case • Keep to W3C standards used by the target device • DOM (Document Object Models) for structure and access functions • CSS - to support layout and presentation

59 This material will not appear in the exam! It supports the First Assignment Compatibility: 4. Be browser agnostic • Avoid browser specific content when possible • Could use “user-agent” but this limits scope Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/WW (KHTML, like Gecko) Version/XX Mobile/YY Safari/ZZ • Use CSS3 Media Queries • device specific values - screen, print, mobile • Better to use object detection • Check Javascript elements before calling • Good if the element may not be supported by all browsers • if (“showModalDialog” in window) ...

60 This material will not appear in the exam! Compatibility: It supports the First Assignment 5. Know the per-page resource constraints

• Devices are resource limited • Processor and memory constraints • Browser and OS limitations • For example, with the iPhone / iPod Touch (OS 3.0)... • 10Mb limit per text resource (.html, .css, .js etc) • 8 Mb limit (height * width * depth) for tiff, png, gif images • 32Mb limit for jpeg images (due to interpolation) • 2Mb limit (height * width * frames) for animated gif images

61 This material will not appear in the exam! Compatibility: It supports the First Assignment 6. Know the per-page scripting constraints

• Limitations on device resources also place limitations on scripting Javascript • For example, with the iPhone / iPod Touch (OS 3.0)... • 10 Mb Javascript object allocation on the stack • 5 second limit for Javascript execution • To ensure the device is responsive, e.g. when calls come in • Scripts may be paused • Inactive windows (several windows may be open, with only one active) • Browser may not be active, e.g. when calls or texts come in

62 This material will not appear in the exam! It supports the First Assignment Compatibility: 7. Use supported windows and dialogs • Keep in mind how the device handles multiple windows • For example, with the iPhone / iPod Touch (OS 3.0)... • An 8 window limit means that pages may be pushed off the stack • Don’t assume all windows will be available • Don’t assume all resources will be retained on unused windows • Use standard modal dialogs • Consider using these dialogs instead of forms for simple input • alert() • confirm() • prompt()

63 This material will not appear in the exam! It supports the First Assignment Compatibility: 8. Use supported content types • Exploit supported content types • There may be native support for: • text, • Audio / Video • PDF etc • Use for vector animation • Though introduced by Safari 2.0, adopted by Opera, Firefox, etc • Used in Dashcode for Dashboard widgets and Apps • Not all devices support a file system • May not be able to download (or upload) files

64 This material will not appear in the exam! It supports the First Assignment Compatibility: 9. Use native fonts

• Identify fonts native to the device • Non-native fonts will be replaced by native ones • However, this may change the layout of content • Or even render content unreadable!!!

65 This material will not appear in the exam! It supports the First Assignment Compatibility: 10. Test and debug with Safari

• Utilise debug tools associated with destination browser • Mobile browsers often share characteristics with desktop versions • E.g. Safari tools can be used to debug pages destined for iPhone

66 This material will not appear in the exam! It supports the First Assignment Optimise content for mobile devices 1. Form-factor is compact • Content is displayed on a small device 2. Content is scaled • Default iPhone behaviour scales a typical page down to (typically) 320x480 • Behaviour can be changed using metadata 3. Hands are for input • no keyboard or mouse - don’t use hover styles • fingers are LARGE !!! - space out items on a page 4. Communication is wireless • Test over different network speeds

Taken from the Apple Developers video “Safari on the iPhone Part 1: Compatibility”

67 This material will not appear in the exam! It supports the First Assignment Zooming content

• iPhone utilises the double-tap gesture to scale • Finds the bounding box of the content tapped, and zooms in (by default) to match the bounding box to the display • Default behaviour can be overridden in css • None

• Auto (default)

• By Percentage • Boxing content facilitates double-tap zoom

68 This material will not appear in the exam! It supports the First AssignmentWireless best-practices

• Turn on server-side compression • Safari browser accepts zip compression • Match image size to hight and width • Don’t send large images only to scale down • Minimise image usage • Use CSS variants • border-image, border-radius, or canvas • Use small background-images and tile • Use Quicktime reference movies • Generate different-size movies for different speed networks

69 This material will not appear in the exam! It supports the First Assignment Making web pages like web apps • Make sure that applications are at least compatible and optimised • Make apps AJAX based • Avoid server calls through the URL • Use familiar layouts using HTML with CSS • Round rectangle lists • Good for small lists of items or groups of items Round Rectangle List • Edge-to-Edge lists • Good for long, scrollable lists • Use familiar animation and navigation • slide in deck-of-cards motif

Edge to edge List

70 This material will not appear in the exam! It supports the First Assignment Making web pages like web apps • Exploit built-in apps • Maps - maps.google.com • Query • Location(s) • Directions • Mail, Telephone and SMS interaction YouTube function showOnGoogleMaps(event) • { var dsource = dashcode.getDataSource("list"); Linking to videos var name = dsource.selection().valueForKey("name"); • document.location = ("http://maps.google.com/maps?q=" + name); } • iTunes Linking to the iTunes store • Note: these don’t always work from the simulator, but need to be http://developer.apple.com/iphone/library/featuredarticles/ tested on a device instead! iPhoneURLScheme_Reference/Introduction/Introduction.html

71 This material will not appear in the exam! It supports the First Assignment To Recap...

• In this lecture set, we covered: • Dashcode • The interface and IDE • Apps as web pages with DOM structures • Simple walkthrough of creating an App Dashcode elements • This material will not • Templates • Inspectors appear in the exam! • Elements It supports the First • Layout Assignment • Data binding and Data sources • Optimising regular web pages for the iPhone

72 This material will not appear in the exam! It supports the First Assignment Further Reading

• Look at the COMP327 Lab Pages • http://www.csc.liv.ac.uk/people/trp/COMP327_-_Labs/ COMP327_-_Labs.html • Various Apple Developer resources • Try out the Apps from the Labs

73