We recently were asked to make an offer to create a web based solution for a desktop software. Visually we only had some screenshots of the original desktop application. To make it easier for the customer to decide how a possible solution could look as a web application, we tried to create a prototype looking kind of similar to what his product looks like until now. Calls for Web2.0, don’t you think?
Here at Mayflower we have a lot of experience mainly with Prototype (and also with the mighty, prototype-based Scriptaculous) and Dojo. Although the documention of prototype seems more complete and easier accessible, Dojo is more mightful, and, yes, it’s an API ;-)
Dojo calls itself „the Open Source Javascript toolkit that makes professional web development better, easier, and faster.“ It’s licensed under the AFL and the BSD as well and is supported by the Dojo Foundation which list some of the big names in the industry as their sponsors and partners. Recently Sun joined the list of companies supporting the Dojo Foundation.
Dojo does not only contain widgets for flashy Web2.0 applications, but lots of different things to write real JavaScript applications (hm, isn’t that an antagonism ;-), with support for crytographic routines (dojo.crypto), linear algebra and other mathematical support (dojo.math). It also brings some new data structures out of the box (dictionary, FIFO, FILO).
To get a visual impression of what Dojo’s widgets are capable of so far, you should check out the „see it in action“
section on the Dojo website.
So we decided to create the prototype not using prototype but using Dojo (using the meanwhile deprecated 0.2.2 version) – sounds odd, he?
I just took the screenshot, created a fresh html page (I did not even use any php code in it, it should just become a static html page with some visual effects), and added a basic layout using some panes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//DE" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Customers Prototype</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="dojo.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.widget.LayoutPane");
dojo.require("dojo.widget.ContentPane");
dojo.require("dojo.widget.SplitPane");
dojo.hostenv.writeIncludes();
</script>
<link rel="stylesheet" type="text/css" href="customer.css">
</head>
<body>
<div dojoType="LayoutPane" layoutChildPriority="top-bottom" style="width: 100%; height: 100%;">
<div dojoType="ContentPane" layoutAlign="top">
<img src="images/logo.gif" align="center"/>
</div>
<div dojoType="ContentPane" layoutAlign="bottom">
Status: OK
</div>
<div dojoType="SplitPane" orientation="horizontal" sizerWidth="5" activeSizing="0"
isActiveResize="0" layoutAlign="client" >
<div dojoType="ContentPane" id="leftpane" sizeMin="220" sizeShare="1"
style="background-color: #9FA3BC">
</div>
<div dojoType="SplitPane" id="rightPane" orientation="vertical" sizerWidth="5"
activeSizing="0" sizeMin="300" sizeShare="99">
<div dojoType="ContentPane" id="uppane" sizeMin="20" sizeShare="70">
</div>
<div dojoType="ContentPane" id="downpane" sizeMin="20" sizeShare="30">
</div>
</div>
</div>
</div>
</body>
</html>
After including some needed functions with Dojo’s require command in the head of the html page, one can create panes in Dojo
by using regular html div tags and adding some dojo specific attributes like
- dojoType (LayoutPane, ContentPane, SplitPane): this makes a div tag into a dojo pane
- sizeMin: minimum size in pixels of pane
- sizeShare: initial size in percent of pane
- sizerWidth: the width in pixels of a sizer to be able to change the size of the pane
- activeSizing: if set to „0“, then the resizing of this pane is not available
- orientation (horizontal, vertical): determines the orientation of the pane splitting
Usually it helps to specifiy an id attribute for easier reference of an individual pane. For individual design, one can specify css styles
(e.g. width: 100%, height: 100%, background-color: #9FA3BC etc.).
Then I just filled all panes with some html tables and images. To make it a little more fancy, I added some dynamic elements to the left pane:
<div class="leftpanehead">
Section 2
<div class="leftpaneicon">
<img id="imagesection2" src="images/arrow_up.png" border="0" onclick="changewipe('section2')" />
</div>
</div>
<div id="leftpanesection2" class="leftpanewiper">
<img src="images/section1_action1.png" /> Subsection 2<br>
<img src="images/section1_action2.png" /> Subsection 3<br>
<img src="images/section1_action3.png" /> Subsection 4<br>
</div>
The function changewipe uses Dojo’s wipeIn and wipeOut effect and a very simple mechanism to determine the status (remember: it’s just a prototype):
function changewipe(context)
{
var obj = document.getElementById('image' + context);
if (obj.src.indexOf('arrow_down.png') > 0) {
//open
obj.src = 'images/arrow_up.png';
dojo.fx.html.wipeIn(document.getElementById('leftpane' + context), 300 );
} else {
//close
obj.src = 'images/arrow_down.png';
dojo.fx.html.wipeOut(document.getElementById('leftpane' + context), 300).play();
}
}
The functions wipeIn and wipeOut are quit easy to use. They only require the id of the element that should get wiped out (or wiped in) and the time (in miliseconds) the wiping should take. Note: Starting in Dojo version 0.3.0 dojo.fx is deprecated and should be replaced by dojo.lfx. The panes are also renamed to Container (e.g. LayoutPane is LayoutContainer).
Here you can download the prototype.
After this good and fast experience, I will probably dojo more intensive in the future. If you are planning to play around with it, try to catch one of the fresh nightly builds, or directly use the subversion repository, b/c the official releases often lag behind the current development.
Schreibe einen Kommentar