Meet Mojo. Jesse Donaldson Sr. Manager, Mojo Framework

Size: px

Start display at page:

Download "Meet Mojo. Jesse Donaldson Sr. Manager, Mojo Framework"

Letitia Harmon
5 years ago
Views:

2 Meet Mojo Jesse Donaldson Sr. Manager, Mojo Framework

3 Goals webos UI overview Mojo apps are like web pages Development model is accessible App structure & basic framework usage Head start when you download the SDK! 2

4 webos UI Applications run in cards Cards are small web pages HTML, CSS, JavaScript 3

5 Terminology: Scenes Screens in a card are scenes Scenes may be stacked up Sibling divs in the body 4

6 Terminology: Stages Cards are a type of stage. There are others: Dashboards & alerts They are all HTML documents 5

7 Structure of a webos app MyApp app assistants views appinfo.json icon.png images index.html sources.json stylesheets 6

8 appinfo.json { } "title": "My App", "main": "index.html", "id": "com.mycompany.myapp", "version": "1.0.0", "vendor": "MyCompany, inc." 7

9 index.html <html> <head></head> <body> <div id="flashlight" style="width: 100%; height:100%; backgroundcolor:#ff9"></div> </body> </html> 8

10 Typical Mojo index.html <head> <title>framework Library</title> <script src="/usr/palm/frameworks/mojo/mojo.js" type="text/javascript" x-mojo-version="1"></script> <link href="stylesheets/fr-library.css" media="screen" rel="stylesheet" type="text/css" /> </head> <body></body> 9

11 sources.json [ { "source": "app/assistants/app-assistant.js" }, { "source": "app/assistants/detail-assistant.js" }, { "source": "app/assistants/list-assistant.js", "scenes": "list" } ] 10

12 The assistants directory Usual place for JavaScript code Mojo provides generic controller objects Apps implement assistants for them Assistants are delegates for: AppController StageController SceneController WidgetController 11

13 The views directory One subdirectory per scene Contains the HTML for each scene: A template for the scene itself Templates for widgets (e.g., list items) Mojo widgets are declared in this HTML 12

14 app/views/main/main-scene.html <div id="power-switch" x-mojo-element="radiobutton"> </div> <div id="main-light" style="width:100%; height:382px; background-color:#224;"> </div> 13

15 app/assistants/main-assistant.js MainAssistant = function() {}; MainAssistant.prototype.setup = function() { MainAssistant.prototype.switchLight = function(ev) { 14

16 MainAssistant.prototype.setup() var attributes = { choices: [ {label: "Off", value: false}, {label: "On", value: true} ] }; var model = { value: false }; this.controller.setupwidget('power-switch', attributes, model); 15

17 MainAssistant.prototype.setup(), part #2 this.switchlight = this.switchlight.bind(this); this.controller.listen('power-switch', Mojo.Event.propertyChange, this.switchlight); this.light = this.controller.get('main-light'); 16

18 MainAssistant.prototype.switchLight() MainAssistant.prototype.switchLight = function(event) { }; this.light.style.backgroundcolor = event.value? "#FF9" : "#224"; 17

19 Finished Flashlight app 18

20 Dive deeper! Download the SDK! predevcamp Informal gathering to develop webos apps Over 60 cities around the world! Saturday, August 8th See predevcamp.org for details Unaffiliated with Palm 19

21 Questions? 20

22 Possible Extra Slides 21

23 Scene Lifecycle 22

24 Localization 23

25 Widgets in list items 24

The starter app has a menu + 2 Views : Dashboard. About

Front End The starter app has a menu + 2 Views : Dashboard About All views will be based on structure laid down in Layout layout/main.hbs. Includes Semantic-UI CSS library View content will