Handling multiple lists and a command menu; Tips from the Facebook App

3 BY devrel

When building the events scenario for the Facebook application I saw a screen that looks like this:

Two lists. One shows the events coming up, and the other birthdays forthcoming. As a Web developer I looked at this in a simple way. Literally two lists. When you click on a different command menu button, you show one list and hide the other.

So, off I go to the races, and I will now walk through the code required to do this.

Initialization and Setup

var EventsListAssistant = Class.create(NavbarAssistant, {
  initialize: function($super) {
    $super();
    this.eventList = new EventList();
    this.birthdayList = new BirthdayList();
    this.gotoEventViewHandler = this.gotoEventView.bind(this);
    this.gotoProfileViewHandler = this.gotoProfileView.bind(this);
  },

  setup: function($super) {
    $super();

    this.setupCommandMenu();
    this.setupEventsList();
    this.setupBirthdaysList();

    this.showEventsList();
  },

First we create an assistant for this scenario, and it inherits from the Navbar giving it the Facebook top menu bar.

Then we wire up the data sources for both events (eventList) and birthdays (birthdayList).

Finally, good old bind(this) for the handlers that go off into event details and profile pages based on taps on the list.

Now we are into setup() where we make sure our super-visor gets setup too, and then tells the various lists and menus to go set themselves up too.

Command Menu

Now we setup the command menu for the events and birthday buttons at the bottom. Pretty standard:

setupCommandMenu: function() {
  this.cmdMenuModel = {
    visible: true,
    items: [
      {},
      {
        items: [
          { label: $L("Events"), command: "showEventsList" },
          { label: $L("Birthdays"), command: "showBirthdaysList" }
        ],
        toggleCmd: "showEventsList"
      },
      {}
    ]
  };
  this.controller.setupWidget(Mojo.Menu.commandMenu, {}, this.cmdMenuModel);
},

We also need to handle the commands that come in (which we named showEventsList and showBirthdaysList):

handleCommand: function($super, event) {
  $super(event);
  if (event.type === Mojo.Event.command) {
    switch (event.command) {
      case "showEventsList":
        this.showEventsList();
        event.stopPropagation();
        break;
      case "showBirthdaysList":
        this.showBirthdaysList();
        event.stopPropagation();
        break;
    }
  }
},

Notice the event.stopPropagation(). This stops the command propogation. If you ever see something like this in your logs, then remember to do this:

warning: command: Propagated up to AppAssistant, no command handler detected for showEventsList

Playing with the lists

We first setup the lists. Here is an example for birthdays:

setupBirthdaysList: function() {
  this.birthdayListEl = this.controller.sceneElement.querySelector('#listBirthdays');
  this.controller.setupWidget("listBirthdays", {
    itemTemplate: "events-list/birthdays-item-template",
    emptyTemplate: "events-list/birthdays-empty-template",
    dividerTemplate: "events-list/birthdays-divider-template",
    dividerFunction: this.eventsDividerFunction.bind(this),
    hasNoWidgets: true
  }, this.birthdayList);
  this.eventManager.register(this.birthdayListEl, Mojo.Event.listTap, this.gotoProfileViewHandler);
},

The divider aims to be smart and show the birthdays starting from today and then wrapping forward (instead of starting from Jan 1st which would be the default):

eventsDividerFunction: function(item) {
  var now = new Date();
  var birthday = new Date(item.rawBirthdayDate);

  if (birthday.getFullYear() == now.getFullYear()) { // this year differs from next year
    return Mojo.Format.formatDate(birthday, $L("MMMM"));
  } else {
    return Mojo.Format.formatDate(birthday, $L("MMMM, yyyy"));
  }
},

Now we are to a point where the commands can actually cause the lists to be shown. What we do here is manage the show/hide logic between the two lists. We also add in a bit of UX so if you tap on the event that you are already showing, it jumps to the top (a nice touch).

Also, here is where the rub comes. We saw weird behavior where the scroll state wasn’t reset as lists are shown and hidden. This means that if you scroll down in birthday and tap back to events, you may be seeing low down events (matching the scroll state of birthdays).

If you run into this, then you will want to do something like we do here:

  • stop the state for each list via this.controller.sceneScroller.mojo.getState()
  • when you show and hide, make sure to tell Mojo what you are doing via this.controller.hideWidgetContainer(this.eventsListEl)

Here is the code that puts this all together for birthdays:

showBirthdaysList: function() {
    // if you are already showing the birthdays list, go to the top of the list and exit
    if (this.showing == "birthdays") {
        this.controller.sceneScroller.mojo.revealTop();
        this.birthdayListState = this.controller.sceneScroller.mojo.getState(); // should be 0, 0
        return;
    }

    // you were showing events, so now turn on birthdays
    this.showing = "birthdays";
    this.eventsListState = this.controller.sceneScroller.mojo.getState(); // save off last state

    this.controller.hideWidgetContainer(this.eventsListEl);
    this.eventsListEl.hide();
    this.birthdayListEl.show();
    this.controller.showWidgetContainer(this.birthdayListEl);

    // if there is some saved state, go ahead and set it
    if (this.birthdayListState) {
        this.controller.sceneScroller.mojo.setState(this.birthdayListState);
    } else {
        this.controller.sceneScroller.mojo.revealTop();
    }
},

And there we have it.

Hot Apps winners announced!

0 BY Fred Patton

It’s the moment you’ve all been waiting for! Today, Palm announces the winners of the Hot Apps competition. It’s been great watching as our developer community rose to the challenge, producing great apps for webOS. We hope you enjoyed the competition too, and that it helped you get more exposure for your apps.

You can check out the complete list of winners here, but we’d like to highlight the two winners in the $100,000 category:

Winner, Paid Apps – YouView Visual Voicemail Client

YouView Visual Voicemail Client by Syntactix is a visual voicemail client powered by YouMail. It replaces your carrier’s voicemail and provides a ton of handy features for handling your voicemail and other phone services. Extremely cool!

Winner, Free Apps – Pandora Radio

Pandora Radio by Pandora, is your free, personalized, streaming radio station, that customizes playlists for you based on the kind of music you like. A fantastic app!

pandora screen shot

Pandora

YouView visual voicemail client

YouView Visual Voicemail

The competition was fierce and hard-fought. Congratulations to all of our winners!

Don’t forget that we’ve got a new Hot Apps competition just for PDK apps. It’s going on now, so submit your app soon!

Inline comments, different feeds, and more come to Facebook 1.2.30 beta

3 BY devrel

When you see a news item on your newsfeed and it has “4 comments” tagged right there, do you sometimes wish you could just see them inline? We do too. Often the conversation provides much of the entertainment around a post, and that is why we have implemented “inline comments” for you as a major feature to test in our latest Facebook beta client for webOS.

We care about customizability, so you can turn that feature on or off in the preferences.

The other major user facing feature is the ability to change which feeds you want to view. You will notice a new drop down label in the middle of the screen (probably says “NEWS FEED” right now). Tap right there to see the list of available feeds.

You will also find the following features:

  • Revised photo tagging. Users can now tag both themselves and their friends in photos. To tag someone, simply upload a photo, then view it on your profile. Tap on the photo, then tap on the tagging icon that appears below it. Begin typing someone’s name to select them from your friends list, then tap Done.
  • Clearing multiple notifications. To clear all of your existing notifications, tap on the notification globe at the top-left corner of the app, then tap See All Notifications, then perform a back gesture (by swiping from right to left below your screen).
  • Support for landscape viewing. Just tilt your Palm webOS phone to the side and Facebook for Palm webOS will switch orientations accordingly.

Finally, there is also a major refactoring as part of this release. We found that the original list implementation wasn’t holding up great as we added more and more data into the list (e.g. comment info). With the number of HTML elements created for a given list feed we were having trouble using the swap on scroll implementation that the Mojo list uses due to the HTML parsing, styling and reflows that were required. The net result was choppy scrolling performance.

The custom list implementation fixed this through custom paging buttons that require the user to manually page, but reduce the number of HTML rendering cycles, while also providing a limit to the number of HTML elements that are placed in the document.

We are really excited to add these major features, as well as a slew of other bug fixes and small improvements. As always, the beta channel isn’t fully bug free, and we are asking you the community, to help us. Give us feedback and let us know what we can do to continue to improve on the app.

We also have some exciting new features in the works, and can’t wait to show these to you in the future!

Topics  Facebook App

Palm Developer Podcast Series: Episode Seven – Ares

0 BY devrel

Ben and Dion are joined by Matthew McNulty as they share details on Ares, Palm’s web-based tool for creating webOS apps. Matt gives a video walk through of the tool and provides the history, the how, and what it means to webOS and you!

There are a bunch of ways to stay in touch:

Palm at OSCON

1 BY devrel

Palm will be at OSCON next week in Portland. Josh Marinacci will be joining the rest of the HP crew in the HP booth, demonstrating Ares and webOS. He will also be giving away T-shirts, books, super nice water bottles, and you’ll even have a chance to win some phones! Here’s the full schedule of webOS related events during OSCON.

(BTW, even if you aren’t attending all of OSCON you can come see us in the Expo Hall for free!)

  • Tuesday 6:00PM: Introduction to the Mobile Web


    Portland Java User’s Group

    (not part of OSCON. it’s free!)

    Oracle Building, 8th Floor room 8005

    Pacwest Center,

    1211 SW 5th Avenue

    Portland, Oregon
  • Wednesday: 10:40AM HP’s Session: Cloudy with a Chance of Revolution

    This is an overview of where HP is going in the cloud, including a section on webOS and Ares.
  • Wednesday and Thursday: HP Booth

    Palm will be in the HP Booth demoing Ares and giving away great stuff. You will also learn about how you can win a webOS developer phone.

Though not Palm related, Josh will be doing a session on marketing your open source project with zero budget. It’ll be tons of fun!

A Quick PDK Submission Checklist

1 BY unwiredben

(Note: this checklist is now official documentation!  See it with updates on the Palm Developer Center.)

With the PDK Hot Apps promotion starting in the near future, a lot of developers want to submit their C/C++ applications to our catalog. Here are a couple of things to check first to make sure your app doesn’t get rejected.

First, lets look at your application package and executable:

  1. Is the app a full-screen app? We’re not accepting hybrid apps (ones that use both JavaScript and PDK code) into the catalog at this time.
  2. Does your appinfo.json specify ‘type: “pdk”‘? Earlier examples used the ‘game’ type in the appinfo.json, but we changed that late in the 1.4.5 development cycle so we could better differentiate between apps that were put into the catalog early versus ones from the open submission process.
  3. Did you strip the executable? We require that executable files submitted for PDK apps have their debugging information removed. This is normally done by either using the -s option for the compiler or by using the arm-none-linux-gnueabi-strip tool.
  4. Did you include a “requiredMemory” line in your appinfo.json file? This is needed to tell the system manager how much memory your app is expected to use, as it helps us keep multitasking working well. One way to determine this number is to open a shell on the device while your app is running and use the “top” command to see its memory use.  If you’re supporting both the Palm Pre and Pixi, be sure to test the memory usage on both devices.
  5. Did you build with the 1.4.5 SDK? We changed some API names between our PDK beta and the released version with the 1.4.5 SDK, so make sure you use the latest files to build your application.
  6. Did you use only whitelisted libraries?  At this time, we’re only allowing applications in the catalog that use the set of libraries we provide with the PDK.  This list includes the standard C and C++ libraries, SDL (including SDL_image, SDL_net, SDL_mixer, and SDL_ttf), and OpenGL ES (1.1 or 2.0).  If you need other libraries, you should build them yourself and statically link them with your application.
  7. Did you use the correct processor architecture arguments?  If you’re building to run on the Pixi, you should use “-mcpu=arm1136jf-s -mfpu=vfp”.  If your application will only run on the Pre, you can use the “-mcpu=cortex-a8 -mfpu=neon” switches to take advantage of the new instructions that are only available in the ARM Cortex-A8 processor on the Pre.

Now, let’s look at the actual submission process:

  1. Be sure to you properly specify the devices your app runs on.  If you’re submitting a SDL graphics-based app, make sure you only specify the Palm Pre for your PDK app, as SDL-graphics-based apps don’t update the screen properly on the Palm Pixi device. If you did an OpenGL app, you should test on both devices before submitting. If you need to do separate builds for Pre and Pixi, that’s OK; we suggest you give your Pre version your main package ID, and add a “-pixi” suffix for your Pixi version.
  2. Be sure to specify webOS 1.4.5 as your minimum OS version.  If you specify an earlier version, the PDK app will be rejected on upload.

Following these rules will keep your app from being rejected by our automated security scanners.  Of course, if the app is going into the catalog, it will still need to pass our friendly app review team.  However, you have to get by the scanner before they can look at it.

For more information on packaging PDK apps, see our helpful article in the PDK guide.  If you have questions, please feel free to ask them in our C/C++ Development with the webOS PDK development forum.

webOS Code Snippets

0 BY devrel

The awesome webos101 crew have a code snippets area that you should know about. What kind of cases will you see up there?

UI Appearance

There are a lot of tweaks at your disposal via CSS styling. Whether it be a simple #palm-app-menu style to change the app menu, using the dark theme (“theme”:”dark” in appinfo.json) or changing the look of your submenus:

// menu grouping at bottom of scene
this.cmdMenuModel = { label: $L('Menu Demo'),
    items: [
      { label: $L('Resources'), icon: "increase", submenu:'resources-menu'},{},{},{},
]};

this.resourcesMenuModel = { label: $L('Resources'), items: [
    {icon: "reminder",  secondaryIcon: "reminder", label: $L('Set Reminder'),
     command: "doCalendar"},
    {label: $L('Armortization Table'),secondaryIcon:'table', command: "amortButtonPress"},
    {label: $L('Increase Amount'),  secondaryIcon: "increase", command: "incrButtonPress"},
    {label: $L('Email'), secondaryIcon: "send", command:'email' }
]}

this.controller.setupWidget(Mojo.Menu.commandMenu,  {spacerHeight: 0, menuClass: 'no-fade'},
                            this.cmdMenuModel);
this.controller.setupWidget('resources-menu', undefined, this.resourcesMenuModel);

… you are covered.

Behavior

What little things do you find yourself doing? In this section we see things like using the clipboard:

this.controller.stageController.setClipboard('hello webos', true);

or launching the app catalog:

new Mojo.Service.Request('palm://com.palm.applicationManager', {
   method: "open",
   parameters: {
     target: 'http://developer.palm.com/appredirect/?packageid=your.app.id'
   }
});

to sensing that the user is holding a digit on the gesture area:

// You can also use just 'document' as the target is you have a single stage application.
// Otherwise you must set it to the correct stage's document as shown here
// You can also get the StageController like this:
//   Mojo.Controller.getAppController().getStageController('NameOfStage');
Mojo.Event.listen(this.controller.stageController.document, 'keydown',
                  MyFunction.bindAsEventListener(this));

function myFunction (event) {
  // You can also check the keyCode instead. Ex: event.keyCode === Mojo.Char.metaKey
  if (event.metaKey === true) {
    // Do stuff when the meta key (gesture area) is tapped or held
  }
}

There is much much more. And the best thing? It is a Wiki, so go add your good stuff!

Thanks to everyone that contributed. Our contribution?

Our Facebook application lets you update status via a launch param:

this.controller.serviceRequest("palm://com.palm.applicationManager", {
    method:      'launch',
    parameters:  {
        id: 'com.palm.app.facebook',
        params: { status: "Check this out: " + this.storyFeed.stories[this.storyIndex].title +
                                 " - " + this.storyFeed.stories[this.storyIndex].url }
    }
});

Palm at MobileBeat 2010!

1 BY devrel

Palm and HP will be participating in MobileBeat 2010. First, Phil McKinney, VP and CTO of HP Personal Systems Group will be giving the keynote address Monday morning. Then Ben Galbraith, Palm’s Director of Developer Relations will have a “fireside chat” with moderator Matthäus Krzykowski on Tuesday afternoon. They’ll be discussing the future of webOS and its developer program.

In addition, Ben is one of five judges of the Startup Competition in the Consumer Applications category on Monday from 9-11a.m. Ten finalists have been selected in the “Consumer Applications” category, and Palm will be awarding them with Pre Pluses. Each finalist will have 4 minutes to present their startup company and idea for a killer app. Congratulations to those who made it!

Look for Lisa Brewster and other Palm reps to be on hand, raffling devices and generally having a great time. Hope to see you there!

Topics  Events

New Tutorial: Client-server with webOS Wiki

0 BY Fred Patton

web OS WikiFor those of you hoping for a tutorial on client-server using webOS as a client, Frank Zammetti has come through for you! His latest is “webOS Wiki,” a wiki package that runs on your device and synchronizes with a server hosted on Google’s™ App Engine. He takes you through the whole process of setting up the server side code on GAE, then plows into the client side of things.

Along the way, Frank discusses how and why he makes design decisions, and describes how the code works, step by step. And so you won’t have to re-type everything, we’ve put all the code on our github repository. (We’d link to it here, but we want you to check out the article!)

We hope you enjoy this tutorial, and find inspiration to do your own client-server apps. Thanks, Frank!

Developing Mobile Apps (Stanford Lecture Series #8)

0 BY Fred Patton

The last of the Stanford lecture series, #8, is now available! We were lucky enough to get Jeff Haynie, co-founder and CEO of Appcelerator to come and give us his take on cross-platform application development in the mobile space.

In this lecture, Jeff discusses the diversity of the mobile space, and how tools like Appcelerator’s Titanium can help ease the burden on developers. He takes you on a tour of the Titanium APIs, and demonstrates developing an app using this powerful toolset. (At the recent Palm developer event in San Francisco, Appcelerator announced that they are working on webOS support for their Titanium product. Stay tuned…)

Lecture 8 is available on both YouTube, and should be available on iTunes U soon. Thanks Jeff!

Jeff Haynie, Lecture 8

Lecture 8: Jeff Haynie on cross-platform mobile app development

Page 1 of 212