PPG main scene-code

From WebOS101

• First, we need to create the object for the data model we specified for our list. We need make this global to our scene, so do this in the initial scene object definition MainAssistant(argFromPusher). All this does is create an empty array named items in the wordsList object.

//The Model for list widget to hold the generated passwords
  this.wordsList = {items: []};

• Now we need to tell webOS to use our appMenu instead of the default. Put this code in the setup() function, after Ares.setupSceneAssistant(this);

//Setup our custom menu to include preferences and about options
  this.controller.setupWidget(Mojo.Menu.appMenu,
    PPG.MenuAttr, PPG.MenuModel);

\

• The next two code snippets are functions to add to Main.Assistant.prototype. When inserting them, remember that each function except the last one in the prototype should end with }, (right curly brace followed by a comma).

• Since we will be filling the list with words in a number of different places, we can create a simple helper function makeNewList. This function will call GPW to generate 6 new passwords, put them in the items array in the wordsList object, and tell the controller that the list changed. webOS figures out which widget is interested in knowing that the list changes and takes care of telling that widget. Why 6 items?.. just because that is how many fit on a Pre screen when it is vertical. I will 'leave it as an exercise for the student' to add in code to figure out the orientation and screen size to calculate the right number if that is important to you. The list is in a Scroll box, so the user can scroll up if they want.

//A utility function to fill the list with newly generated word.
makeNewList: function() {
  //Simple function to generate a new list of words
  for (i=0; i<6; i++) {
    this.wordsList.items[i]= {label: GPW.pronounceable(PPG.cookieObj.pwLength)};
  }
  //Tell the list that we have a new list to display.
  this.controller.modelChanged(this.wordsList);
}

• We should populate our list with a new set of words every time the main scene is activated. This will generate a new list when we come back from the Help or Preferences scenes.

activate: function() {
  //Generate a new word list when we get activated.
  this.makeNewList();
}

• Remember the doMore function we created to handle the onTap event when we were doing the visual setup? All we need to do is call our makeNewList in the doMore function and we are done. Add this simple code to doMore.

//Generate a new word list when we get activated.
  this.makeNewList();

Save your work and then proceed to PPG preferences scene-code where we let the user select a different password length to generate .