Namespaces

Variants
Actions

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 over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Simple Web Runtime Design Patterns Using Mootools

From Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Automated change of category from Web Runtime (WRT) to Symbian Web Runtime)
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories. Tidy wiki text)
 
(One intermediate revision by one user not shown)
Line 1: Line 1:
[[Category:Symbian Web Runtime]]
+
[[Category:Symbian Web Runtime]][[Category:Code Examples]][[Category:Mobile Design Patterns]]
[[Category:Design]]
+
{{SeeAlso|
[[Category:Mobile_Design]]
+
* [[Simple Web Runtime Design Patterns Using Dojo]]
[[Category:Code Examples]]
+
* [[Simple Web Runtime Design Patterns Using jQuery]]
 
+
* [[Simple Web Runtime Design Patterns Using YUI 3]]}}
== Simple Web Runtime Design Patterns Using Mootools ==
+
{{ArticleMetaData <!-- v1.2 -->
 
+
|sourcecode= [[Media:FadeOut Mootools.zip]] [[Media:Toggle Mootools.zip]] [[Media:ExpandCollapse Mootools.zip]] [[Media:Slide Mootools.zip]]
Tip: Also see the [[Simple Web Runtime Design Patterns Using Dojo]]
+
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
+
|devices= Nokia N97
Tip: Also see the [[Simple Web Runtime Design Patterns Using jQuery]]
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 
+
|platform= S60 5th Edition
Tip: Also see the [[Simple Web Runtime Design Patterns Using YUI 3]]
+
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
'''
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
Introduction to design patterns using Mootools'''
+
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20091104
 +
|author= [[User:Symbianyucca]]
 +
}}
 +
== Introduction ==
 
Design patterns are “known solutions to common design problems”. The following design patterns make use of the Mootools JavaScript™ library and are intended for designers and developers working with Web Runtime (WRT) and the S60 mobile browser.
 
Design patterns are “known solutions to common design problems”. The following design patterns make use of the Mootools JavaScript™ library and are intended for designers and developers working with Web Runtime (WRT) and the S60 mobile browser.
  
Line 20: Line 33:
 
'''Tip:''' If you’re new to Mootools, why not spend a few minutes exploring [http://mootools.net/ mootools.net], and downloading the required js files.
 
'''Tip:''' If you’re new to Mootools, why not spend a few minutes exploring [http://mootools.net/ mootools.net], and downloading the required js files.
  
'''
+
'''Use of Mootools on mobile'''
Use of Mootools on mobile'''
+
  
 
Mootools js file used with the example widgets is around 100kb, the size could be reduced by taking the compressed version of the js file. Also in [http://mootools.net/ mootools.net], you have an option on only including the desired parts of the Mootools in the js file, thus you could reduce the size significantly.
 
Mootools js file used with the example widgets is around 100kb, the size could be reduced by taking the compressed version of the js file. Also in [http://mootools.net/ mootools.net], you have an option on only including the desired parts of the Mootools in the js file, thus you could reduce the size significantly.
Line 27: Line 39:
 
All examples are using the core functionality, which do offer simple to use, but powerfull, built-in effects such as show/hide, fade and slide, which all do provide a great foundation for creating widgets with a rich user experience. Also there are extension’s available for Mootools for even better effects.
 
All examples are using the core functionality, which do offer simple to use, but powerfull, built-in effects such as show/hide, fade and slide, which all do provide a great foundation for creating widgets with a rich user experience. Also there are extension’s available for Mootools for even better effects.
  
''Note:'' The following examples have been tested on the 5th Edition, N97. Support for Mootools will vary amongst 3rd Edition devices.
+
''Note:'' Support for Mootools will vary amongst 3rd Edition devices.
  
 
== 1. Show/Hide design pattern ==
 
== 1. Show/Hide design pattern ==
Line 36: Line 48:
  
 
'''Use'''
 
'''Use'''
 
+
* To switch views within the widget.
To switch views within the widget.
+
* To show and hide elements within a view.
 
+
* Within a tabbed interface; to show and hide tabbed views.
To show and hide elements within a view.
+
 
+
Within a tabbed interface; to show and hide tabbed views.
+
  
  
Line 47: Line 56:
 
Provide a user or system-initiated trigger to instantly show or hide views or elements within the widget.
 
Provide a user or system-initiated trigger to instantly show or hide views or elements within the widget.
  
[[Image:01-hide.png]]
+
[[File:01-hide.png|frame|none|This widget has three views yet only one can be active at a time]]
 
+
Figure: This widget has three views yet only one can be active at a time.
+
  
 
Use the Mootools to change the view display type between none & block, note that the same style method can be used for reading the current value.  
 
Use the Mootools to change the view display type between none & block, note that the same style method can be used for reading the current value.  
Line 112: Line 119:
 
</code>
 
</code>
  
WRT Widget for the example code can be found from [[File:Toggle_Mootools.zip|Toggle_Mootools.zip]] example.
+
WRT Widget for the example code can be found from [[File:Toggle Mootools.zip|Toggle Mootools.zip]] example.
  
 
== 2. Slide transition ==
 
== 2. Slide transition ==
Line 121: Line 128:
  
 
'''Use'''  
 
'''Use'''  
 
+
* To gradually hide an item within a view.
To gradually hide an item within a view.
+
  
  
Line 128: Line 134:
 
Create a connection between the original and final view (or state) through use of an animated transition.  
 
Create a connection between the original and final view (or state) through use of an animated transition.  
  
[[Image:02-slide.png]]
+
[[File:02-slide.png|frame|none|The slide transition is used to gradually close the content area]]
 
+
'''Figure:''' The slide transition is used to gradually close the content area.
+
 
+
  
 
There is an Fx.Slide extension available, but as with this example only the core is used, the sliding effect is handled with Fx.Tween changing the height of the item.
 
There is an Fx.Slide extension available, but as with this example only the core is used, the sliding effect is handled with Fx.Tween changing the height of the item.
Line 173: Line 176:
 
</code>
 
</code>
  
WRT Widget for the example code can be found from [[File:Slide_Mootools.zip|Slide_Mootools.zip]] example.
+
WRT Widget for the example code can be found from [[File:Slide Mootools.zip|Slide Mootools.zip]] example.
  
 
== 3. Fade in/out ==
 
== 3. Fade in/out ==
Line 181: Line 184:
  
 
'''Use'''  
 
'''Use'''  
 
+
* When transitioning between widget views.
When transitioning between widget views.
+
* To attract attention to, yet smooth out the loading of new data, images or other media.  
 
+
To attract attention to, yet smooth out the loading of new data, images or other media.  
+
  
  
Line 190: Line 191:
 
Incorporate a transition to gradually fade the visibility of an element into or out of view.
 
Incorporate a transition to gradually fade the visibility of an element into or out of view.
  
[[Image:03-fade.png]]
+
[[File:03-fade.png|frame|none|The transition is used to gradually fade out View 1 and fade in View 2]]
 
+
'''Figure:''' The transition is used to gradually fade out View 1 and fade in View 2.
+
  
 
The Fade effect can be handled by the Mootools fade() method for elements, as shown in the following example:
 
The Fade effect can be handled by the Mootools fade() method for elements, as shown in the following example:
Line 247: Line 246:
 
</code>
 
</code>
  
WRT Widget for the example code can be found from [[File:FadeOut_Mootools.zip|FadeOut_Mootools.zip]] example.
+
WRT Widget for the example code can be found from [[File:FadeOut Mootools.zip|FadeOut Mootools.zip]] example.
  
 
== 4. Expand/Collapse ==
 
== 4. Expand/Collapse ==
Line 255: Line 254:
  
 
'''Use'''  
 
'''Use'''  
 
+
* To reveal or obscure additional content associated with an element.
To reveal or obscure additional content associated with an element.
+
* Within a messaging application, to temporarily collapse non-critical information such as sender address, date, persons Ccd. etc.
 
+
* When needing to view content (i.e. text, images) that is currently represented in a thumbnail view.
Within a messaging application, to temporarily collapse non-critical information such as sender address, date, persons Ccd. etc.
+
* When making content editable. Ex. Expand a text field to allow for more visible content while editing.
 
+
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.
+
  
  
Line 268: Line 263:
 
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.
 
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.
  
[[Image:04-collapse.png ]]
+
[[File:04-collapse.png|frame|none|The area is expanded to reveal additional content]]
 
+
'''Figure:''' The area is expanded to reveal additional content.
+
  
 
The expanding collapsing can be handled similarly as the sliding effect, except that not th whole item is slided.
 
The expanding collapsing can be handled similarly as the sliding effect, except that not th whole item is slided.
Line 324: Line 317:
 
</code>
 
</code>
  
WRT Widget for the example code can be found from [[File:ExpandCollapse_Mootools.zip|ExpandCollapse_Mootools.zip]] example.
+
WRT Widget for the example code can be found from [[File:ExpandCollapse Mootools.zip|ExpandCollapse Mootools.zip]] example.

Latest revision as of 04:02, 9 May 2012

Article Metadata
Code ExampleTested with
Devices(s): Nokia N97
Compatibility
Platform(s): S60 5th Edition
Article
Created: symbianyucca (04 Nov 2009)
Last edited: hamishwillee (09 May 2012)

Contents

[edit] Introduction

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

“MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.” – mootools.net

Tip: If you’re new to Mootools, why not spend a few minutes exploring mootools.net, and downloading the required js files.

Use of Mootools on mobile

Mootools js file used with the example widgets is around 100kb, the size could be reduced by taking the compressed version of the js file. Also in mootools.net, you have an option on only including the desired parts of the Mootools in the js file, thus you could reduce the size significantly.

All examples are using the core functionality, which do offer simple to use, but powerfull, built-in effects such as show/hide, fade and slide, which all do provide a great foundation for creating widgets with a rich user experience. Also there are extension’s available for Mootools for even better effects.

Note: Support for Mootools will vary amongst 3rd Edition devices.

[edit] 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.

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

Use the Mootools to change the view display type between none & block, note that the same style method can be used for reading the current value.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="js/mootools-1.2.4-core.js">
</script>
<script type="text/javascript">
 
function myinit(){
$('btn_list').addEvent('click',function(e) {
$('detail').setStyle('display','none');
$('list').setStyle('display','block');
});
 
$('btn_detail').addEvent('click',function(e) {
$('detail').setStyle('display','block');
$('list').setStyle('display','none');
});
 
$('btn_toggle').addEvent('click',function(e) {
if($('detail').getStyle('display') == 'block'){
$('detail').setStyle('display','none');
$('list').setStyle('display','block');
}else{
$('detail').setStyle('display','block');
$('list').setStyle('display','none');
}
});
 
$('list').setStyle('display','block');
}
 
window.addEvent('domready',myinit);
</script>
<style type="text/css">
div {
height: 5em;
display: none; }
div#list {
background:#f00; }
div#detail {
background:#0f0; }
</style>
</head>
<body>
<button id="btn_list">List</button>
<button id="btn_detail">Detail</button>
<button id="btn_toggle">Toggle</button>
<div id="list">
<h1>List View</h1>
</div>
 
<div id="detail">
<h1>Detail View</h1>
</div>
</body>
</html>

WRT Widget for the example code can be found from File:Toggle Mootools.zip example.

[edit] 2. Slide transition

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

Use

  • To gradually hide an item within a view.


Solution Create a connection between the original and final view (or state) through use of an animated transition.

The slide transition is used to gradually close the content area

There is an Fx.Slide extension available, but as with this example only the core is used, the sliding effect is handled with Fx.Tween changing the height of the item.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="js/mootools-1.2.4-core.js">
</script>
<script type="text/javascript">
 
function myinit(){
 
var mySlide = new Fx.Tween('slide');
 
$('btn_slide').addEvent('click',function(e) {
mySlide.start('height', 0);
});
 
$('btn_reset').addEvent('click',function(e) {
mySlide.start('height', 100);
});
}
 
window.addEvent('domready',myinit);
</script>
<style type="text/css">
div {
height: 100px;
background: #f00; }
</style>
</head>
<body>
<button id="btn_slide">Slide</button>
<button id="btn_reset">Reset</button>
<div id="slide"></div>
<h1>Slide</h1>
</body>
</html>

WRT Widget for the example code can be found from File:Slide Mootools.zip example.

[edit] 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.

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

The Fade effect can be handled by the Mootools fade() method for elements, as shown in the following example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="js/mootools-1.2.4-core.js">
</script>
<script type="text/javascript">
 
function myinit(){
 
$('btn_fade').addEvent('click',function(e) {
$('list').fade('toggle');
$('detail').fade('toggle');
});
 
$('list').fade('show');
$('detail').fade('hide');
}
 
window.addEvent('domready',myinit);
</script>
<style type="text/css">
div {
display: block; }
div#list {
height: 100px;
width: 150px;
position:absolute;
top: 50px;
background:#f00; }
div#detail {
height: 100px;
width: 150px;
position:absolute;
top: 50px;
background:#0f0; }
</style>
</head>
<body>
<button id="btn_fade">Fade Transition</button>
<div id="list">
<h1>List View</h1>
</div>
<div id="detail">
<h1>Detail View</h1>
</div>
</body>
</html>

WRT Widget for the example code can be found from File:FadeOut Mootools.zip example.

[edit] 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.

Use

  • To reveal or obscure additional content associated with an element.
  • Within a messaging application, to temporarily collapse non-critical information such as sender address, date, persons Ccd. etc.
  • 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.

The area is expanded to reveal additional content

The expanding collapsing can be handled similarly as the sliding effect, except that not th whole item is slided.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="js/mootools-1.2.4-core.js">
</script>
<script type="text/javascript">
 
function myinit(){
 
var mySlide = new Fx.Tween('item');
 
$('btn_expand').addEvent('click',function(e) {
mySlide.start('height', 200);
});
 
$('btn_collapse').addEvent('click',function(e) {
mySlide.start('height', 40);
});
}
 
window.addEvent('domready',myinit);
</script>
<style type="text/css">
p, h1 {
padding: 0; margin: 0; }
div#item {
height: 40px;
background:#f00;
overflow: hidden; }
div#more {
background:#0f0; }
</style>
</head>
<body>
<button id="btn_expand">Expand</button>
<button id="btn_collapse">Collapse</button>
<div id="item">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas lorem. Duis pellentesque. Cras nec tortor vel lacus fermentum facilisis. Nam id pede eu eros posuere cursus. Mauris dolor ligula, eleifend vitae, aliquam sit amet, bibendum vel, est. Cras sit amet augue sit amet ligula cursus scelerisque.</p>
</div>
<div id="more">
<h1>More...</h1>
</div>
</body>
</html>

WRT Widget for the example code can be found from File:ExpandCollapse Mootools.zip example.

This page was last modified on 9 May 2012, at 04:02.
107 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×