Transition List in Guarana UI

Article Metadata

---

Article

Created: User:Kbwiki (09 Nov 2009)

Last edited: hamishwillee (01 Aug 2012)

Inheritance

Nokia.TransitionBox
    | - Nokia.Widget
        |- Nokia.Class (basic class)

1 - Description

Transition List can be used as an alternative to show the sub-items of a list. Keep the list navigation path in the title area as the following figure depicts. This list navigation path can be used to return to a previous list.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

• element: 'selector'
  • jQuery selector or the DOM reference to become the container of the component.
• title: string
  • Defines the component title.
• visible: boolean
  • Defines the visible state for the component.
• maximized: boolean
  • Defines that component will be created in maximized mode.

4.2 - Events - Callbacks

• create: function()
  • Scope: [this.element]
• show: function(openerTransitionList)
  • Scope: [this.element]
• hide: function()
  • Scope: [this.element]
• addItem: function(event, item)
  • Scope: [this.element]
• removeItem: function(event, item)
  • Scope: [this.element]

4.3 - Methods

• addItem: function(item)
  • Adds a new item in the component.
  • return [void]
• removeItem: function(item)
  • Removes a specific item from the component.
  • return [void]
• show: function(openerTransitionList)
  • Shows the component.
  • return [void]
• hide: function()
  • Hides the component.
  • return [Object]

4.4 - Default options

• title: ",
• maximized: true,
• visible: false

 

5 - Component Demo

5.1 HTML

<div id="library"></div>
<div id="entertainment"></div>
<div id="health"></div>

5.2 Javascript

bookStore = new Nokia.TransitionList({
     element: '#library',
     title: 'Book Store',
     visible: true,
     create: function() {
          console.log("create");
     },
     show: function(openerTransitionList) {
          console.log("show", openerTransitionList);
      },
     hide: function() {
          console.log("hide list1.");
     },
     addItem: function(event, item) {
          console.log("addItem", item);
     },
     removeItem: function(event, item) {
          console.log("removeItem", item);
     }
 });

var entertainment = new Nokia.TransitionList({
     title: 'Entertainment',
     element: '#entertainment'
});
var health = new Nokia.TransitionList({
     title: 'Health',
     element: '#health'
});

bookStore.addItem(
     new Nokia.TransitionListItem({
          label: 'Entertainment',
          linkedList: window.entertainment,
          click: function() {}
     })
);
bookStore.addItem(
     new Nokia.TransitionListItem({
          label: 'Romance',
          linkedList: window.romance,
          click: function() {}
     })
);

window.entertainment.addItem(
     new Nokia.TransitionListItem({
          label: 'Book 1',
          icon: 'ui-icon-note',
          click: function() {
               alert('Book 1');
          }
      })
);
window.entertainment.addItem(
     new Nokia.TransitionListItem({
          label: 'Book 2',
          icon: 'ui-icon-note',
          click: function() {
               alert('Book 2');
          }
     })
);
window.entertainment.addItem(
     new Nokia.TransitionListItem({
          label: 'Back to list',
          icon: 'ui-icon-triangle-1-w',
          linkedList: window.bookStore,
          click: function() {}
     })
);

window.romance.addItem(
     new Nokia.TransitionListItem({
          label: 'Book 1',
          icon: 'ui-icon-note',
          click: function() {
               alert('Book 1');
          }
     })
);
window.romance.addItem(
     new Nokia.TransitionListItem({
          label: 'Book 2',
          icon: 'ui-icon-note',
          click: function() {
              alert('Book 2');
          }
     })
);
window.romance.addItem(
     new Nokia.TransitionListItem({
     label: 'Back to list',
     icon: 'ui-icon-triangle-1-w',
     linkedList: window.bookStore,
          click: function() {}
     })
);

6 - Nokia WRT Browser Compatibility

 

▴	S60 3.1	S60 3.2	S60 5.0
Transition List	NO	YES	YES