Tools

Namespaces

Variants

Views

Actions

Search

Contents

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

WRT Widget for the example code can be found from File: [http://wiki.forum.nokia.com/index.php/File:ExpandCollapse_JQuery.zip ExpandCollapse_JQuery.zip]

+

WRT Widget for the example code can be found from File: [[File:ExpandCollapse_JQuery.zip|ExpandCollapse_JQuery.zip]]

''Notes:'' Another way to create expanding and collapsing elements is to hide and show sub-elements causing the display block of the container block to expand and contract as necessary. This method does not typically incorporate animation as a means of transition.

''Notes:'' Another way to create expanding and collapsing elements is to hide and show sub-elements causing the display block of the container block to expand and contract as necessary. This method does not typically incorporate animation as a means of transition.

Simple Web Runtime Design Patterns Using jQuery

Introduction to design patterns using jQuery
Design patterns are “known solutions to common design problems”. The following design patterns make use of the jQuery JavaScript™ library and are intended for designers and developers working with Web Runtime (WRT) and the S60 mobile browser.

In recent years, the free and open source jQuery has become extremely popular with visual and interaction designers as a means of easily adding interactivity to designs using techniques they are already familiar with. It allows designers to identify elements from the DOM using CSS selectors, then add unobtrusive JavaScript™ to perform Ajax calls and create simple effects—all with only a few lines of code.

Use of jQuery on mobile
It is also fortunate that the jQuery library itself has a very small footprint (under 20kb) and performs quite well on mobile devices. This makes it ideal when working with WRT as widgets are essentially one XHTML document containing sub-views, combined with interactivity created through manipulation of the DOM using JavaScript™. Simple, built-in effects such as show/hide, fade and slide all provide a great foundation for creating widgets with a rich user experience.

Note: The following examples have been tested on the 5th Edition, 5800 Xpress Music. Support for jQuery will vary amongst 3rd Edition devices.

1. Show/Hide design pattern

Problem summary
A user must interact with multiple views of an application yet only one view can be visible on-screen at a time.

Use

• To switch views within the widget.

• To show and hide elements within a view.

• Within a tabbed interface; to show and hide tabbed views.

Solution
Provide a user or system-initiated trigger to instantly show or hide views or elements within the widget.

Figure: This widget has three views yet only one can be active at a time.

Use the jQuery show(), hide() and toggle() methods from jQuery Effects.

Notes: The ‘Slide’ features of ‘jQuery UI’ (an additional jQuery library) may be too resource intensive for use on mobile devices. If used, effects will appear quite sluggish—if they appear at all. Instead, use the standard ‘SlideUp/SlideDown’ from jQuery itself if possible.

3. Fade in/out

Problem summary
Abrupt changes in view are uncomfortable and often disorienting to the user.

Use

• When transitioning between widget views.

• To attract attention to, yet smooth out the loading of new data, images or other media.

Solution
Incorporate a transition to gradually fade the visibility of an element into or out of view.

Figure: The transition is used to gradually fade out View 1 and fade in View 2.

*HACK* Use WRT’s “fade” transition to simulate the fadeIn() and fadeOut() methods found within jQuery.

Notes: As WRT currently does not support opacity through CSS, the standard fadeIn() and fadeout() methods in jQuery do not work as expected. The solution above uses the transition features of WRT to perform a similar effect—in this case simply using the jQuery show() method.

4. Expand/Collapse

Problem summary
Users require access to content or functionality but they only need it under certain circumstances and/or there is insufficient space to provide all of it at all times.

• When needing to view content (i.e. text, images) that is currently represented in a thumbnail view.

• When making content editable. Ex. Expand a text field to allow for more visible content while editing.

Solution
Hide a portion of this information then provide the user with a means to trigger the reveal of this information when required. This action should be easily discoverable, easy to trigger and the reveal should (ideally) occur in context of the original data.

Figure: The area is expanded to reveal additional content.

Use the ‘overflow: hidden’ CSS attribute and then the animate() method within jQuery to increase or decrease the element’s ‘width’ and ‘height’ attribute values over the duration specified (in milliseconds).

Notes: Another way to create expanding and collapsing elements is to hide and show sub-elements causing the display block of the container block to expand and contract as necessary. This method does not typically incorporate animation as a means of transition.