vertical scroller html app webos

Question

Hi I have an app that is basically a html page. I have a problem though as the html page is longer than the viewable screen and the page wont scroll.

Ive added this div:

<div id="scrollerId" style="width:320px; height:100px" x-mojo-element="Scroller"> 
    <div >scrolling content</div>
</div>

but it doesn't do anything.

Please can someone help explain how to add one. or if i need to add anything to my javascript file or anything else ?

source/helloworld.js

    enyo.kind({
        name: "HelloWorld",
        kind: enyo.VFlexBox,
        components: [
        {kind: "PageHeader", components: [
        {content: "Page Header"}
    ]},
    {flex: 1, kind: "Pane", components: [
    {flex: 1, kind: "Scroller", components: [
    //Insert your components here
    ]}
    ]},
    {kind: "Toolbar", components: [
     ]}
]
});

Im a newbie to webos dev so go easy on me.

Answer 1

It might help to know what device(s) you're targeting. You've got a mix of a Mojo app and an Enyo app there, it looks like. Mojo is for the phones. If you're targeting the TouchPad, you should probably switch entirely to Enyo.

For the Mojo scroller to work in webOS you need to enable it as follows:

this.controller.setupWidget("myScroller",
    this.attributes = {
    },
    this.model = {
       scrollbars: true,
        mode: "free"
    });

You can read more about scrollers in Mojo here:

http://webos101.com/Scroller

However, I think you want an Enyo scroller so you get rid of the HTML in your app and use the method described above by XRay Enabler.

It is possible to use JavaScript functions to pull in content from a DIV in your HTML into an Enyo kind. Here's an example using jQuery:

this.$.myContent.setContent($("#someDiv").html());

Keep in mind you'll have to set allowHtml to true to allow HTML content.

Answer 2

First of all welcome to Enyo and webOS! Try to remember that Enyo is your framework that will create the elements of your HTML (the app). You generally do not manipulate it (HTML) directly.

As a simple example, you can create your content after the kind 'HelloWorld' has been rendered:

** your previous code **
{flex: 1, kind: "Scroller", components: [
    //Insert your components here
    {content: "", name:"myContent"}
    ]}
    ]},
    {kind: "Toolbar", components: []}
    ],
    create: function() {
        this.inherited(arguments);
    },
    rendered: function() {
        this.$.myContent.setContent("I can now add Content!");
    }
});

Notice the added content container called myContent in the Scoller. Also, remove the previously created div's in your HTML file.

The content is then added in the rendered function.