www.webOShelp.net

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

Home Forums

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

WebOS Mojo Development => Mojo Newbies => Topic started by: av6ftguy on July 17, 2009, 01:04:12 PM


Title: Simple List
Post by: av6ftguy on July 17, 2009, 01:04:12 PM
I am a definite newbie to javascript, html, and css, but would greatly appreciate some advice with this simple list I am trying to produce. I have tried to follow two other similar forum threads, but it seems as if those problems were never quite resolved. Here is my structure for my app, and when I open it up from the launcher, only a blank screen appears.

These files are all in /usr/palm/applications/aaron.facebookpics (a future program I am thinking of)

appinfo.json
Code:
{
    "title": "FacebookPics",
    "version": "0.0.1",
    "type": "web",
    "main": "index.html",
    "id": "aaron.facebookpics",
    "icon": "icon.png",
    "vendor": "Aaron Ford",
    "vendorurl": "fordhack.blogspot.com",
    "visible": true,
    "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>FacebookPics</title>

    <!-- Load the Mojo Framework -->
   <script src="/usr/palm/frameworks/mojo/mojo.js" type="text/javascript" x-mojo-version="1"></script>


</head>

<body>
</body>
</html>

sources.json
Code:
[
    {
"source": "app\/assistants\/stage-assistant.js"
},
    {
    "source": "app\/assistants\/listView-assistant.js",
    "scenes": "listView"
    }
]

...within /app/assistants/ there is listView-assistant.js
Code:
function ListViewAssistant(){

}

ListViewAssistant.prototype.setup = function(){
this.items = [];
var that = this;
var request = new Ajax.Request("models/movies.xml", {
            method: 'get',
            evalJSON: 'false',
            onSuccess:function(transport){
             var movieTags = transport.responseXML.getElementsByTagName( 'movie' );
             for( var i = 0; i < movieTags.length; i++ ) {
                 var title = movieTags[i].getAttribute('title');
                 that.items.push({text: title});
              }
           }
        });

this.controller.setupWidget("contactList" ", this.listWidgetAttr = {
        itemTemplate: "listView/rowTemplate",
        listTemplate: "listView/listTemplate",
    }, 
this.listWidgetModel = {
        items: this.items //an array
    });
};

ListViewAssistantprototype.activate = function(event){

};

ListViewAssistant.prototype.deactivate = function(event){

};

ListViewAssistant.prototype.cleanup = function(event){

};

and stage-assistant.js...
Code:
function StageAssistant () {
}

StageAssistant.prototype.setup = function() {
this.controller.pushScene("listView");
}

Then in app/models is a simple movies.xml file
Code:
<?xml version="1.0" encoding="utf-8"?>
<movies>
  <movie url="hockey.mov" title="Hockey" />
  <movie url="baseball.mov" title="Baseball" />
  <movie url="soccer.mov" title="Soccer" />
</movies>

and finally in app/views/listView there is listTemplate.html
Code:
<div class="palm-list">#{listElements}</div>

listView-Scene.html
Code:
<div id="contactList" x-mojo-element="List"></div>

and rowTemplate.html
Code:
<div class="palm-row" x-mojo-tap-highlight="momentary">
<div class="contact-row" class="truncating-text">#{text}</div>
</div>

I feel like my list view scene is never even getting loaded, because I tried out some simple test code in the html file and nothing appeared still. I would greatly appreciate any pointers in the right direction. Thanks

Title: Re: Simple List
Post by: KenCorbettJr on July 17, 2009, 03:15:29 PM
A couple things to try.  My list widgets wouldn't work until i changed the header of my index.html file to:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Also, if you are using the SDK 3.5 that was just released you have to escape your html in your listTemplate.html by puting a '-' in front of listElements.  So it should read:

Code:
<div class="palm-list">#{-listElements}</div>

Try this, hopefully it helps!


Title: Re: Simple List
Post by: av6ftguy on July 17, 2009, 05:50:41 PM
I made those two changes, including "escaping my html" in my rowTemplate.html as well...

Code:
<div class="palm-row" x-mojo-tap-highlight="momentary">
<div class="contact-row" class="truncating-text">#{-text}</div>
</div>

...but still no luck. Same result. That may have fixed something, but I still don't believe my program is "linking" to my first scene. When I type random text into the index.html file it shows up, but not when I try and input random text into listView-scene.html.

Thanks for the help though....any other suggestions?

Title: Re: Simple List
Post by: KenCorbettJr on July 18, 2009, 08:19:39 PM
It can be frustrating developing in webos right now because debugging some of these problems isn't easy.  Try running the palm-inspector, it should tell you where the problem is coming up.

The only other thing I can see from your code which might be causing you problems is your title of you listView-Scene.html.  I believe that 'scene' needs to be in lowercase letters only


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