×
Namespaces

Variants
Actions
(Difference between revisions)

Simple Web Runtime Design Patterns Using Dojo

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata etc)
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories. Tidy wiki text)
 
Line 1: Line 1:
 +
[[Category:Symbian Web Runtime]][[Category:Code Examples]][[Category:Mobile Design Patterns]]
 +
{{SeeAlso|
 +
* [[Simple Web Runtime Design Patterns Using Mootools]]
 +
* [[Simple Web Runtime Design Patterns Using jQuery]]
 +
* [[Simple Web Runtime Design Patterns Using YUI 3]]}}
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= [[Media:Toggle Dojo.zip]] [[Media:Slide Dojo.zip]] [[Media:FadeOut Dojo.zip]] [[Media:ExpandCollapse Dojo.zip]]
 
|sourcecode= [[Media:Toggle Dojo.zip]] [[Media:Slide Dojo.zip]] [[Media:FadeOut Dojo.zip]] [[Media:ExpandCollapse Dojo.zip]]
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
+
|devices= Nokia N97
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
+
|platform= S60 5th Edition
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
Line 20: Line 25:
 
|creationdate= 20091103
 
|creationdate= 20091103
 
|author= [[User:Symbianyucca]]
 
|author= [[User:Symbianyucca]]
}}[[Category:Symbian Web Runtime]]
+
}}
[[Category:Design]]
+
[[Category:Mobile Design]]
+
[[Category:Code Examples]]
+
  
== Simple Web Runtime Design Patterns Using Dojo ==
+
== Introduction ==
 
+
Tip: Also see the [[Simple Web Runtime Design Patterns Using jQuery]]
+
 
+
Tip: Also see the [[Simple Web Runtime Design Patterns Using Mootools]]
+
 
+
Tip: Also see the [[Simple Web Runtime Design Patterns Using YUI 3]]
+
 
+
'''
+
Introduction to design patterns using Dojo
+
 
Design patterns are “known solutions to common design problems”. The following design patterns make use of the Dojo 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 Dojo JavaScript™ library and are intended for designers and developers working with Web Runtime (WRT) and the S60 mobile browser.
  
Line 41: Line 34:
 
'''Tip:''' If you’re new to Dojo, why not spend a few minutes exploring [http://docs.dojocampus.org/ docs.dojocampus.org]'''
 
'''Tip:''' If you’re new to Dojo, why not spend a few minutes exploring [http://docs.dojocampus.org/ docs.dojocampus.org]'''
  
''Note:'' The following examples have been tested on the 5th Edition, N97. Support for Dojo will vary amongst 3rd Edition devices.
+
''Note:'' Support for Dojo will vary amongst 3rd Edition devices.
  
 
== 1. Show/Hide design pattern ==
 
== 1. Show/Hide design pattern ==
 
  
 
'''Problem summary'''
 
'''Problem summary'''
Line 50: Line 42:
  
 
'''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 61: Line 50:
 
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.
  
[[File:01-hide.png]]
+
[[File:01-hide.png|frame|none|This widget has two views yet only one can be active at a time]]
 
+
Figure: This widget has two views yet only one can be active at a time.
+
  
 
Use the Dojo 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 Dojo to change the view display type between none & block, note that the same style method can be used for reading the current value.
Line 138: Line 125:
  
 
'''Use'''  
 
'''Use'''  
 
+
* To gradually hide an item within a view.
To gradually hide an item within a view.
+
  
  
Line 145: Line 131:
 
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.  
  
[[File: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.
+
 
+
  
 
Use the Dojo’s animateProperty and change the height if the item for the Effects.
 
Use the Dojo’s animateProperty and change the height if the item for the Effects.
Line 209: Line 192:
  
 
'''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 218: Line 199:
 
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.
  
[[File: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.
+
  
 
Use the Dojo’s fadeIn / fadeout methods for the Effects.
 
Use the Dojo’s fadeIn / fadeout methods for the Effects.
Line 300: Line 279:
  
 
'''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 313: Line 288:
 
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.
  
[[File: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.
+
  
Use the animateProperty method within Dojo to increase or decrease the element’s ‘height’ attribute values over the duration specified (in milliseconds).
+
Use the animateProperty method within Dojo to increase or decrease the element’s {{Icode|height}} attribute values over the duration specified (in milliseconds).
 
<code xml>
 
<code xml>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  

Latest revision as of 07:06, 9 May 2012

Article Metadata
Code ExampleTested with
Devices(s): Nokia N97
Compatibility
Platform(s): S60 5th Edition
Article
Created: symbianyucca (03 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 Dojo JavaScript™ library and are intended for designers and developers working with Web Runtime (WRT) and the S60 mobile browser.

Of all the Ajax-specific frameworks that have popped up in recent years, one clearly stands out as the industrial strength solution. Dojo is not just another JavaScript toolkit -- it's the JavaScript toolkit -- and Dojo: The Definitive Guide demonstrates how to tame Dojo's extensive library of utilities so that you can build rich and responsive web applications like never before (Definitive-Guide).

Tip: If you’re new to Dojo, why not spend a few minutes exploring docs.dojocampus.org

Note: Support for Dojo 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 two views yet only one can be active at a time

Use the Dojo 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="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
 
function myinit(){
dojo.connect(dojo.byId('btn_list'),'onclick',function(){
dojo.style("detail","display", 'none')
dojo.style("list","display", 'block')
});
 
dojo.connect(dojo.byId('btn_detail'),'onclick',function(){
dojo.style("detail","display", 'block')
dojo.style("list","display", 'none')
});
 
dojo.connect(dojo.byId('btn_toggle'),'onclick',function(){
 
if(dojo.style("detail","display") == 'block'){
dojo.style("detail","display", 'none')
dojo.style("list","display", 'block')
}else{
dojo.style("detail","display", 'block')
dojo.style("list","display", 'none')
}
});
 
dojo.style("detail","display", 'none')
dojo.style("list","display", 'block')
}
 
dojo.addOnLoad( 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 Dojo.zip

[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

Use the Dojo’s animateProperty and change the height if the item for the Effects.

<!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="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
 
function slideIt(){
 
dojo.animateProperty({ node: "slide", duration:2000,
properties: {
height: { start:'100', end: '0', unit:"px" },
}
}).play();
}
 
function slideItBack(){
 
dojo.animateProperty({ node: "slide", duration:2000,
properties: {
height: { start:'0', end: '100', unit:"px" },
}
}).play();
}
 
function myinit(){
dojo.connect(dojo.byId('btn_slide'),'onclick',slideIt);
dojo.connect(dojo.byId('btn_reset'),'onclick',slideItBack);
}
 
dojo.addOnLoad( 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 Dojo.zip

[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

Use the Dojo’s fadeIn / fadeout methods for the Effects.

<!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="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script>
 
//Function linked to the button to trigger the fade.
function fadeIt() {
 
var fadeArgs1 = {
node: "list",
duration: 1000,
};
 
var fadeArgs2 = {
node: "detail",
duration: 1000,
};
 
if (dojo.style("list", "opacity") < 1) {
dojo.fadeIn(fadeArgs1).play();
dojo.fadeOut(fadeArgs2).play();
}else {
dojo.fadeOut(fadeArgs1).play();
dojo.fadeIn(fadeArgs2).play();
}
}
 
function myinit(){
dojo.connect(dojo.byId('btn_fade'),'onclick',fadeIt);
}
 
dojo.addOnLoad( 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;
opacity: 0;}
</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 Dojo.zip

[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

Use the animateProperty method within Dojo to increase or decrease the element’s height attribute values over the duration specified (in milliseconds).

<!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="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script>
 
function expandIt(){
 
dojo.animateProperty({ node: "item", duration:2000,
properties: {
height: { start:'40', end: '200', unit:"px" },
}
}).play();
}
 
function collapseIt(){
 
dojo.animateProperty({ node: "item", duration:2000,
properties: {
height: { start:'200', end: '40', unit:"px" },
}
}).play();
}
 
function myinit(){
dojo.connect(dojo.byId('btn_expand'),'onclick',expandIt);
dojo.connect(dojo.byId('btn_collapse'),'onclick',collapseIt);
}
 
dojo.addOnLoad( 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 Dojo.zip

This page was last modified on 9 May 2012, at 07:06.
74 page views in the last 30 days.