www.webOShelp.net

Get the latest on:webOS Developers' RSS FeedwebOS Facebook page webOS Twitter Feed

Home Forums

The www.webOShelp.net WebOS / Mojo Developers' Forum

WebOS Mojo Development => Mojo Tutorials/Sample code/applications => Topic started by: Ken Young on March 05, 2009, 12:38:55 AM


Title: Sample code from first official webOS tutorial from Palm!
Post by: Ken Young on March 05, 2009, 12:38:55 AM
Here's the code from the tutorial presented by Mitch Allen (http://www.weboshelp.net/webos-tutorials/179-first-official-webos-mojo-tutorial-from-palm) during the first webOS developer webcast (http://www.weboshelp.net/webos-news-and-rumors/168-developing-applications-for-webos-webcast-coverage).

Title: Re: Sample code from first official webOS tutorial from Palm!
Post by: Ken Young on March 07, 2009, 02:06:50 PM
Sorry, there was a typo and some weird characters because I saved from my Mac.  I've fixed the file and re-attached the updated file to the first post.

Title: Re: Sample code from first official webOS tutorial from Palm!
Post by: Ken Young on March 07, 2009, 02:12:59 PM
Here's the full code for those interested:

appinfo.json

Code:
appinfo.json
{
   "title": "MyApp",
   "type": "web",
   "main": "index.html"
   "icon": "icon.png",
   "id": "com.yourdomain.app.myapp",
   "version": "1.0",
   "vendorid": "com.yourdomain.app.myapp",
   "removable": true
}
index.html

Code:
<?xml version=”1.0” encoding=”UTF-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
<html xmlns=http://www.w3.org/1999/xhtml xml:lang="en">
<head>
   <title>MyApp</title>
   <script src="/usr/palm/frameworks/mojo/mojo.js" type="text/javascript" x-mpjo-version="1"></script>
   <script src="app/assistants/stage-assistant.js" type="text/javascript"></script>
   <script src="app/assistants/first-assistant.js" type="text/javascript"></script>
   <script src="app/assistants/second-assistant.js" type="text/javascript"></script>

   <!--application stylesheet should come in after the one loaded by the framework -->
   <link href="stylesheets/main.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

stage-assistant.html

Code:
function StageAssistant () {
}

StageAssistant.prototype.setup = function() {
   Mojo.Controller.stageController.pushScene ("first");
}

first-assistant.js

Code:
function FirstAssistant() {
   /* this is the creator function for your scene assistant object. 
      It will be passed all the additional parameters (after the scene
      name) that were passed to pushScene.  The reference to the scene
      controller (this.controller) has not been established yet, so any
      initialization that needs the scene controller should be done in
      the setup function below. */
}

FirstAssisstant.prototype.setup = function() {
   /* this function is for setup tasks that have to happen when the scene is first created */

   /* use Mojo.View.render to render view templates and add them to the scene, if needed. */

   /* setup widgets here */

   /* add event handlers to listen to events from widgets */
   
   this.textAttr = {
      hintText: "Enter Color",
      focus:true
   };

   this.textModel= {
      value: ""
   };

   this.controller.setupWidget("myText",this.textAttr,this.textModel);
   
   Mojo.Event.listen($("myButton"), "click", this.nextScene.bindAsEventListener(this));
}

FirstAsssistant.prototype.activate = function(event) {
   /* put in event handlers here that should only be in effect when
      this scene is active.  For example, key handlers that are observing
      the document */
}

FirstAssistant.prototype.deactivate = function(event){
   /* remove any event handlers you added in activate and do any other
      cleanup that should happen before this scene is popped or another
      scene pushed on top */
}

FirstAssistant.prototype.cleanup = function(event) {
   /* this function should do any cleanup needed before the scene is
      destroyed as a result of being popped off the scene stack */
}

FirstAssistant.prototype.nextScene=function(event){
   Mojo.Controller.stageController.pushScene("second", this.textModel.value);
}

second-assistant.js

Code:
function SecondAssistant(text) {
   /* this is the creator function for your scene assistant object. 
      It will be passed all the additional parameters (after the scene
      name) that were passed to pushScene.  The reference to the scene
      controller (this.controller) has not been established yet, so any
      initialization that needs the scene controller should be done in
      the setup function below. */
   this.textString=text;
}

SecondAssisstant.prototype.setup = function() {
   /* this function is for setup tasks that have to happen when the scene is first created */

   /* use Mojo.View.render to render view templates and add them to the scene, if needed. */

   /* setup widgets here */

   /* add event handlers to listen to events from widgets */
}

SecondAsssistant.prototype.activate = function(event) {
   /* put in event handlers here that should only be in effect when
      this scene is active.  For example, key handlers that are observing
      the document */
}

SecondAssistant.prototype.deactivate = function(event){
   /* remove any event handlers you added in activate and do any other
      cleanup that should happen before this scene is popped or another
      scene pushed on top */
   $("color").innerHTML=this.textString;
}

SecondAssistant.prototype.cleanup = function(event) {
   /* this function should do any cleanup needed before the scene is
      destroyed as a result of being popped off the scene stack */
}

first-scene.html

Code:
<div class="palm-header">
   <div class="palm-header-center">
      App 1 - Scene 1
   </div>
<div class="palm-header-spacer"></div>
This is our first scene together!
<div x-mojo-element="TextField" id=’myText’></div>
<button class="palm-button" id="myButton">Next Scene</button>

second-scene.html

Code:
<div class="palm-page-header" align="center">
   App 1 – Scene 2
</div>
This is our second scene a bit like the first.
Color is <span id="color"></span>

Title: Re: Sample code from first official webOS tutorial from Palm!
Post by: Scott S. on March 13, 2009, 04:57:21 PM
Thanks for posting this!  8)

Title: Re: Sample code from first official webOS tutorial from Palm!
Post by: thedeath on May 27, 2009, 08:17:43 PM
Hi, thanks for sample code.
But, can u guide me how to build this app? I run index.html file but content was empty. I thinks I miss mojo.js, where can I download it?
Thanks for your help!!!!

Title: Re: Sample code from first official webOS tutorial from Palm!
Post by: Ken Young on May 28, 2009, 05:02:01 PM
Quote from: thedeath on May 27, 2009, 08:17:43 PM
Hi, thanks for sample code.
But, can u guide me how to build this app? I run index.html file but content was empty. I thinks I miss mojo.js, where can I download it?
Thanks for your help!!!!

Unfortunately, to get this program to run, you'll need the webOS emulator that comes with the Mojo SDK or an actual Palm Pre.  Even if you had mojo.js, I don't think it would do you any good as the program would need to hook into the webOS UI system manager for certain things to work.  Palm hasn't yet said when the SDK will be available to the public, but you can sign up for their early access program (http://developer.palm.com) and they might give you access sooner.

Title: Re: Sample code from first official webOS tutorial from Palm!
Post by: pointgod36 on June 29, 2009, 05:40:51 AM
Quote from: Ken Young on March 07, 2009, 02:06:50 PM
Sorry, there was a typo and some weird characters because I saved from my Mac.  I've fixed the file and re-attached the updated file to the first post.

Thank you, there are still some errors in the appinfo.json though. I should look like this...
{
   "title": "MyApp",
   "type": "web",
   "main": "index.html",
   "icon": "icon.png",
   "id": "com.yourdomain.app.myapp",
   "version": "1.0",
   "vendor": "com.yourdomain.app.myapp",
   "removable": true
}
Now you'll be able to run the program as for it working... it sill does not. I haven't looked to see whats wrong but im sure its just a typo causing this argument.

Title: Re: Sample code from first official webOS tutorial from Palm!
Post by: SeanBlader on June 29, 2009, 08:27:27 AM
In JSON, the quotes on the left side of the object listing aren't required unless your name isn't a valid Javascript variable name. And I found that the ipk assembly command line tool won't accept your application if you don't have a vendorid listed in there as well:

{
    title: 'myapp',
   type: 'web',
   main: 'index.html',
   icon: 'icon.png',
   id: 'com.yourdomain.app.myapp',
   version: '0.8',
   vendorid: 'com.yourdomain',
   vendor: 'com.yourdomain',
   removable: true
}

Since there aren't any spaces or dashes in the name's of the name:data pairs you don't need quotes around those elements. Also it keeps your code cleaner when you don't have to reference your data later as object["name"], and you can just use object.name which is a little nicer looking.

And for my personal preference, I use double quotes in my HTML, and single quotes for my Javascript. This helps when you're trying to work around an application limitation by putting an event handler into your HTML like a google analytics tracking code.

<a href="link.html" onclick="pageTracker._trackPageView('link was clicked');">link</a>

So on the data you're passing to the function, if you used "" you'd have closed your onclick and gotten a javascript error when you tried to run this function "pageTracker._trackPageView(". So I say pick either single or double quotes for one language and use the other for the opposite.

Title: Re: Sample code from first official webOS tutorial from Palm!
Post by: bhartman36 on July 07, 2009, 07:09:22 PM
Hi, everyone.

For some reason, when I set this up, I can't get beyond the first scene.  I went through these files, then went through the WebOS video tutorial, and I can't find the problem.  There are actually two differences I have:

1) As noted, the next scene doesn't load.
2)  There's no textbox for ext entry.

Can anyone help me through this?  I think my problem must be in first-assistant.js, since first-stage.html loads fine...

I've attached a Zip file with the files I created (without the directory structure).  Basically, the scene HTMLs are in /views, the js files are in /assistants, and the index and appinfo.json files are in the root of the application.  I haven't included icon.png.  That much, I have working. :)

Title: Re: Sample code from first official webOS tutorial from Palm!
Post by: gthompson83 on July 25, 2009, 06:58:18 PM
the main issue here is the missing sources.json file. This file attaches each scene with its js assistant. So without it they files weren't launching together. There were a few other issues, but I don't remember what they were.

A full working example is attached.

Title: Re: Sample code from first official webOS tutorial from Palm!
Post by: bhartman36 on August 10, 2009, 06:08:34 PM
Hey, thanks for the help!! :)


Powered by SMF | SMF © 2006-2009, Simple Machines LLC