Palm Pre – Changing the swipe delete style

What’s wrong with this list?

Personally, I think it looks ok. Using the list is easy enough – tap the bottom to add a new entry, tap an entry to edit it, and swipe to delete. The first 2 are easy enough, and so is the delete option. All that is required is…

this.listModel = {
items: smsDataMessages.item
itemTemplate: "maintenance/msglistitems",
listTemplate: "maintenance/msglist",
addItemLabel: "Add New Message",
swipeToDelete: true,
renderLimit: 40,
reorderable: true
}, this.listModel );

Mojo.Event.listen(this.controller.get('lstMessages'),Mojo.Event.listAdd, this.btnAddClick.bind(this));
Mojo.Event.listen(this.controller.get('lstMessages'),Mojo.Event.listTap, this.lstMessagesClick.bind(this) );
Mojo.Event.listen(this.controller.get('lstMessages'),Mojo.Event.listDelete, this.lstDelete.bind(this) );

… which will set up the list on the scene complete with swipe functionality. When the swipe is invoked, the Mojo.Event.listDelete event is raised and the method “this.lstDelete” will fire. This method removes the entry from the list and quickly saves the new list in the depot.

Unfortunately, the built in markup and css is not suited to a list contained in a panel. This is what you get …

Removing the panel ensures it sits perfectly and the swipe section contains both delete options…

… but I don’t want that. I want my list to reside inside the panel. It looks neater and more professional.

So, we need to either render our list differently, or get inside the HTML & CSS and override it.

After a little digging around, I’ve found the underlying class names for the swipe to delete css.

  • palm-swipe-delete – controls the css definitions of the whole swipe-delete look and feel. You know, the grey area.
  • palm-swipe-delete-button – the main delete button.
  • palm-swipe-undo-button – the cancel button.

So, the next step is to implement out new styles into the css our app uses…

.palm-swipe-delete {
  width: 100%
  width: 108px;

The main swipe area is to be 100% of the parent container. This will force it to fit, which it did anyway.

Both buttons are to be 108 pixels wide, which means they will fit nicely. Finally, I’ve made the cancel button a bold text to highlight the seriousness of the operation. OK, so it’s just a list and not really serious, but you get the idea.

So, what are we looking like now?

And that, my fellow Palm Pre devvers is exactly what we require.

Note – The eagle eyed amongst you may have noticed the list has changed in the screen images. I decided to expand on what was displayed, which will be explained in another blog. This will also included formatters, which are not the most documented features of a list.

This entry was posted in Lists, Palm Pre Dev, Swipe, WebOS. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s