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 Pages 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 Safari 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 podcasts, 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