Articles

Building an iPhone/Android Web App Using the Sliding-Pane Component

 , ,

In today’s blog, I’m going to show how I used the Sliding-Pane to create a fairly complete iPhone application.

 

You can download the code here.

Background

In November, I created a UI component called Sliding-Pane that creates a sliding-type animation on a specific div. The idea came from OSX’s notification system where the whole screen would slide to the left to reveal your notifications “underneath”.

Note that for any of the animations within the application, I used only the Sliding-Pane component (note that for the settings section, I used Cubiq.org’s Spinning Wheel control to allow the user to change the value of the option), so essentially the following sections:

  1. Login Screen
  2. Settings Screen
  3. Record Summary Screen
  4. Record Detail Screen

The Code

In order to add the effect to the above screens, all that was needed was the following code:

var app_height = z('#app-container').height();
var app_width = z('#app-container').width();
var tb_height = 55 + 14; /* Hardcoded size of toolbar :D */
/* Add login pane */
APP.view.loginPane = new SlidingPane({
  id: 'app-login',
  targetId: 'app-container',
  width: app_height - tb_height,
  duration: 0.3,
  side: 'top',
  timingFunction: 'ease',
  shadowStyle: '0px 0px 20px #000'
});
/* Add logout pane */
APP.view.logoutPane = new SlidingPane({
  id: 'app-logout',
  targetId: 'app-container',
  width: 170,
  duration: 0.3,
  side: 'top',
  timingFunction: 'ease',
  shadowStyle: '0px 0px 20px #000'
});
/* Add settings pane */
APP.view.settingsPane = new SlidingPane({
  id: 'app-settings',
  targetId: 'app-container',
  width: app_width - 20,
  duration: 0.3,
  timingFunction: 'ease',
  shadowStyle: '0px 0px 20px #000'
});
/* Add main record pane */
APP.view.recordListPane = new SlidingPane({
  id: 'app-record-list',
  targetId: 'app-container',
  width: app_height - tb_height,
  duration: 0.3,
  side: 'top',
  timingFunction: 'ease',
  shadowStyle: '0px 0px 20px #000'
});
/* Add record detail pane */
APP.view.recordDetailPane = new SlidingPane({
  id: 'record-detail',
  targetId: 'record-list-summary',
  width: 305,
  duration: 0.3,
  side: 'right',
  timingFunction: 'ease',
  shadowStyle: 'none'
});

Some Notes

In terms of the overall structure of the app, I have a main div container called app-container. The login, logout, settings, and record summary panes all are “underneath” the app-container. So as I bind various buttons to show/hide the above sections, this all happens against this main div container and is basically the only div that slides around. The record detail pane is nested within the record summary pane and demonstrates how you can nest sliding panes within each other.

Flattr this