64x64 icon dark hosting
Choose a hosting plan here and get a free year's subscription to Tuts+ (worth $180).

Introduction to webOS SDK Development: Part 4


Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)

This post is part of a series called Introduction to webOS SDK Development.
Introduction to webOS SDK Development: Part 3
Introduction to webOS SDK Development: Part 5

This is the fourth installment of our webOS introduction series. In this tutorial, you will learn how to use the webview widget in webOS to display a website embedded in your app. We'll also add functionality to allow list item reordering and deleting.

The WebView

To begin, go ahead and generate a new scene called article:

Next, edit app/views/article/article-scene.html to contain the following:

We use the same header as in our main scene. Below that we add the webview widget. Note that we wrap the webview into a wrapper-div, that way
we can push the webview down below the header.

Add the additional class to stylesheets/tutsplus.css.

Next edit app/assistants/article-assistant.js and add the setup of the webview widget:

Also add the necessary code to pass the url to the scene:

As soon as the article scene is called with a url, the webview widget starts to load the website contents.

We also need to change our list scene to call the new article scene when we tap one item. Edit app/assistants/list-assistant.js for that
and add the function handleTap:

The list's model contains the property guid, which is a url to the website. Using the event object we get the guid of the tapped
list item and pass that to the article scene.

Also add a list taphandler to the activate function of the ListAssistant:

Don't forget to cleanup your listener in the deactivate function:

That's it for the webview. Package, install, and run the app:

List Item Reordering/Deleting

Wouldn't it be nice if you could change the order of the tutsplus sites in the first scene? Say you want Mobiletuts+ first instead of nettuts, or what if you want to delete a site you aren't interested in? I'm going to show how to do that with some built-in list functionality and cookies.

If you read part 2 of this series, we supplied the data for the list from a static model. Let's change that to use a dynamic model. Open app/assistants/main-assistant.js:

in the setup-function, replace:


This will supply an empty list model at setup time for the list. Also change the list attributes:

As you can see, we added the swipeToDelete and reorderable properties and set them to true. This will enable list reordering and item deleting.

Next, let's edit the activate function and add some functions to save the sort-order and displayed tuts-sites. To do that, we need to add a cookie to the app. First, the cookie 'TutsPlusCookie' is defined and loaded:

If the cookie does not exist yet, we define its initial content and save. If the cookie already exists, we load the data from it:

Let me explain the contents of the cookie for a moment. Every tutsplus site has a defined id (from 1 to 9). The character "|" is used as a delimiter between those ids. The tutsdata variable defines the sort order of the sites as well which sites are shown. The default value shows the initial sort order and also defines that all 9 sites will be displayed. You'll see later how the reorder and delete functions will manipulate that data and store it back in the cookie.

We also need to define and add two additional listeners, one for the ListReorder and one for the ListDelete Event. We also add a function to load the data into the list model.

Don't forget to stop all listeners when the scene is deactivated:

Let's have a look at the new this.loadData function:

First, we define the 9 tutsplus sites, this is unchanged from Part 2, when we defined a static list. One change: we added the id as noted above. We then loop through the passed in string of which sites to show and how they are ordered. Each sites that is going to be displayed is added to a new array, this will be our new contents for the list model:

At last, we pass the new data to our (empty at setup) list model and tell the model that the data has changed (modelchanged). This is the same technique that we used in Part 3:

The last two things missing are the functions for the ListReorder and ListDelete event. Let's start with the handleReorder event, which will get called every time the list is reordered.

With help from the passed in parameters event.item, event.toIndex, and event.fromIndex, we change the lists model to reflect the new sort order. A new cookie value is then constructed out of the model and saved into our app's cookie.

The handleDelete function does almost the same, it first removes the deleted item from the lists model and then again constructs a new cookie value out of the model and saves that.

Now you can go ahead and reorder the list in the main scene and even delete items you don't want to see. Just hold and drag an item to reorder it. To delete an item, you slide with your finger over it and it will ask you if you want to delete it from the list.

Wrap up

We've covered quite a range of new topics to expand the tutsplus app. We learned how to use the WebView widget to display website contents, and then how to handle list item reordering and deleting. Hopefully you've enjoyed reading and learned a lot!