Polytech A4 stage BG MusalaSoft:Dojo

De Wiki de Romain RUDIGER
Aller à : navigation, rechercher

Dojo toolkit tips

Des petites notes sur le cadriciel Dojo [1].

Source : Dojo book

TextBox

dojo.require("dijit.form.TextBox");
<input type="text" size="20" name="first"  dojoType="dijit.form.TextBox" trim="true" propercase="true" />
  • trim : enlève les espaces avant et après
  • propercase : une majuscule puis des minuscules
  • lowercase : tout en minuscule
  • lowercase : tout en majuscule

CurrencyTextBox

dojo.require("dijit.form.CurrencyText");
<input type="text"
                maxlength="12"
                class="fillwidth currency"
                id="grossincome" name="grossincome"
                value="0.00"
                dojoType="dijit.form.CurrencyTextBox"
                required="true"
                onChange="updateTotals()"
                currency="USD"/>

TitlePane

dojo.require("dijit.TitlePane");
<div dojoType="dijit.TitlePane" open="false"
     title="Directions (click to Expand)" style="width:400px;height:300px">
Proin risus. Nullam rhoncus purus id turpis. Praesent aliquam adipiscing ligula. Aenean lorem ante,
accumsan quis, elementum id, cursus eu, lorem. Fusce viverra. Ut tempor nisi at ipsum. Etiam sed nibh.
</div>

Tooltip

dojo.require("dijit.Tooltip");
<img src="symbol_help.gif" id="helpIncome"/>
<div dojoType="dijit.Tooltip" style="display:none" connectId="helpIncome">
    That's how much <b>money</b> you make.
</div>

The dijit.Tooltip displays a message when the user hovers over the button. It knows this by connecting the connectId to the id attribute of the widget (helpIncome).

I18N

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Googolica Tax Form</title>
<style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="/dojoroot/dojo/dojo.js"
        djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dijit.form.TextBox");
        dojo.require("dijit.form.CheckBox");
        dojo.require("dijit.form.DateTextBox");
        dojo.require("dijit.form.CurrencyTextBox");
        dojo.require("dijit.Declaration");
        dojo.require("dijit.TitlePane");
        dojo.require("dijit.Tooltip");
               
        // This is necessary to i18n routines look in this directory for the nls folder
        dojo.registerModulePath("taxformI18n","/online-book/taxform");
        dojo.requireLocalization("taxformI18n", "taxform");
    </script>
</head>
<body class="tundra">
<span dojoType="dijit.Declaration" widgetClass="TaxformI18n"
        defaults="{ fieldid: 'none' }">
        <label for="${fieldid}" id="${fieldid}_label"></label>
       
        <script type='dojo/connect'     event='startup'>
        var labelNode = dojo.byId(this.fieldid + "_label");
        var taxFormBundle = dojo.i18n.getLocalization("taxformI18n","taxform");
        labelNode.innerHTML = taxFormBundle[this.fieldid];
    </script>
</span>
<form>
<div dojoType="TaxformI18n" fieldid="first"></div>
<input type="text" size="20" name="first" dojoType="dijit.form.TextBox"
        trim="true" propercase="true" /><br>
<div dojoType="TaxformI18n" fieldid="last"></div>
<input type="text" size="20" name="last" dojoType="dijit.form.TextBox"
        trim="true" propercase="true" /><br>
<span dojoType="TaxformI18n" fieldid="email"></span>: <input type="text"
        length="20" name="email" dojoType="dijit.form.TextBox" lowercase="true" />
<div dojoType="TaxformI18n" fieldid="filingDate"></div>
<input type="text" length="10" id="filingDate" name="filingDate"
        dojoType="dijit.form.DateTextBox">
<hr />
<ol>
        <li>
        <div dojoType="TaxformI18n" fieldid="grossincome"></div>
        <input type="text" maxlength="12" id="grossincome" name="grossincome"
                value="0" dojoType="dijit.form.CurrencyTextBox" required="true"
                currency="USD" /> <img src="symbol_help.gif" id="helpIncome" />
        <div dojoType="dijit.Tooltip" connectId="helpIncome">That's how
        much <b>money</b> you make.</div>
        </li>
        <li>
        <div dojoType="TaxformI18n" fieldid="deductibles"></div>
        <input type="text" dojoType="dijit.form.CurrencyTextBox"
                id="deductibles" name="deductibles" value="0" required="false"
                currency="USD" /></li>
        <li>
        <div dojoType="TaxformI18n" fieldid="netincome"></div>
        <input type="text" value="0" dojoType="dijit.form.CurrencyTextBox"
                required="false" id="netincome" name="netincome" currency="USD" /></li>
        <li>
        <div dojoType="TaxformI18n" fieldid="taxpaid"></div>
        <input type="text" value="0" class="fillwidth currency"
                dojoType="dijit.form.CurrencyTextBox" required="false" readonly="true"
                id="taxpaid" name="taxpaid" currency="USD" /></li>
        <li>
        <div dojoType="TaxformI18n" fieldid="refund"></div>
        <input type="text" value="0" dojoType="dijit.form.CurrencyTextBox"
                required="false" readonly="true" id="refund" name="refund"
                currency="USD" /></li>
        <div dojoType="TaxformI18n" fieldid="owed"></div>
        <input type="text" value="0" dojoType="dijit.form.CurrencyTextBox"
                required="false" readonly="true" id="owed" name="owed" currency="USD" />
        </li>
        <li>
        <div dojoType="TaxformI18n" fieldid="campaign"></div>
        <input type="checkbox" name="campaign" value="Y"
                dojoType="dijit.form.CheckBox"></li>
</ol>
<div dojoType="dijit.TitlePane" open="false"
        title="Directions (click to Expand)" style="width:400px;height:300px">
Proin risus. Nullam rhoncus purus id turpis. Praesent aliquam adipiscing
ligula. Aenean lorem ante, accumsan quis, elementum id, cursus eu,
lorem. Fusce viverra. Ut tempor nisi at ipsum. Etiam sed nibh.</div>
</body>
</html>

fichiers : Dojo I18N.png

Basic Layout

Doc pour le TabContainer : tab-container exemple de page avec un gestionnaire d'onglet, bare d'outils et un pied de page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo Mail Application</title>

    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" 
	        djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dojo.parser");

		dojo.require("dijit.Toolbar");

		dojo.require("dijit.layout.LayoutContainer");
		dojo.require("dijit.layout.SplitContainer");
		dojo.require("dijit.layout.AccordionContainer");
		dojo.require("dijit.layout.TabContainer");
		dojo.require("dijit.layout.ContentPane");
    </script>

	<style type="text/css">
		@import "http://o.aolcdn.com/dojo/1.0.0/resources/dojo.css";
		@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/soria/soria.css";
		@import "http://o.aolcdn.com/dojo/1.0.0/dijit/demos/mail/mail.css";
	</style>

</head>
<body class="soria">

	<div dojoType="dijit.layout.LayoutContainer" id="main">

		<!-- toolbar with new mail button, etc. -->
		<div dojoType="dijit.Toolbar" layoutAlign="top" style="height:25px;">
		   Toolbar will go here
		</div>
		
		<div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" 
		     id="footer" align="left">
			<span style="float:right;">DojoMail v1.0 (demo only)</span>

			Progress bar will go here
		</div>

		<div dojoType="dijit.layout.TabContainer" 
		    id="tabs" jsId="tabs" layoutAlign="client">

            			<!-- main section with tree, table, and preview -->
			<div dojoType="dijit.layout.SplitContainer"
				orientation="horizontal"
				sizerWidth="5"
				activeSizing="0"
				title="Inbox"
			>
		
				<div dojoType="dijit.layout.AccordionContainer" sizeMin="20" sizeShare="20">
					<div dojoType="dijit.layout.AccordionPane" title="Folders">
					    Folders will go here
					</div>

					
					<div dojoType="dijit.layout.AccordionPane" title="Address Book">
					    Address Book will go here
					</div>
				</div>
				
				<div dojoType="dijit.layout.SplitContainer"
					id="rightPane"
					orientation="vertical"
					sizerWidth="5"
					activeSizing="0"
					sizeMin="50" sizeShare="85"
				>
					<div id="listPane" dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20">
					   Message List will go here
					</div>
					
					<div id="message" dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="80">
					    Message will go here
					</div>

				</div> <!--  End right hand side split container -->
					
			</div><!-- End entire-screen split container -->
            

		</div> <!--  End tab container -->
	</div> <!--  End layout container -->
					
</body></html>

test : [2]

Pour ajouter un onglet

<button id="newMsg" dojoType="dijit.form.Button" iconClass="mailIconNewMessage">
New Message
 <script type="dojo/method" event="onClick">
  /* make a new tab for composing the message */
  var newTab = new mail.NewMessage({id: "new"+paneId  }).container;
  dojo.mixin(newTab,
    {
     title: "New Message #" + paneId++,
     closable: true,
     onClose: testClose
    }
  );
  tabs.addChild(newTab);
  tabs.selectChild(newTab);
 </script>
</button>

Fonction pour le fermer dans le header :

<script type="text/javascript">
  function testClose(pane,tab){
    return confirm("Are you sure you want to leave your changes?");
  }
</script>

Exemple de nouveau conteneur a ajouter

<div dojoType="dijit.layout.LayoutContainer" dojoAttachPoint="container" title="Composing..." closeable="true">
	<div dojoType="dijit.layout.LayoutContainer" layoutAlign="top" style="overflow: visible; z-index: 10; color:#666; ">
		<table width=100%>
			<tr style="padding-top:5px;">
				<td style="padding-left:20px; padding-right: 8px; text-align:right;"><label 
					for="${id}_to">To:</label></td>
				<td width=100%>
					<select dojoType="dijit.form.ComboBox" id="${id}_to" hasDownArrow="false">
						<option></option>
						<option>adam@yahoo.com</option>
						<option>barry@yahoo.com</option>
						<option>bob@yahoo.com</option>
						<option>cal@yahoo.com</option>
						<option>chris@yahoo.com</option>
						<option>courtney@yahoo.com</option>
					</select>
				</td>
			</tr>

			<tr>
				<td style="padding-left: 20px; padding-right:8px; text-align:right;"><label 
					for="${id}_subject">Subject:</label></td>
				<td width=100%>
					<select dojoType="dijit.form.ComboBox" id="${id}_subject" hasDownArrow="false">
						<option></option>
						<option>progress meeting</option>
						<option>reports</option>
						<option>lunch</option>
						<option>vacation</option>
						<option>status meeting</option>
					</select>
				</td>
			</tr>
		</table>
		<hr noshade size="1">
	</div>

	<div dojoType="dijit.layout.LayoutContainer" layoutAlign="bottom" align=center>
		<button dojoType="dijit.form.Button" iconClass="mailIconOk">Send</button>
		<button dojoType="dijit.form.Button" iconClass="mailIconCancel">Cancel</button>
	</div>

	<!-- new messase part -->
	<div dojoType="dijit.layout.LayoutContainer" layoutAlign="client">
	<!-- FIXME: editor as direct widget here doesn't init -->
		<div dojoType="dijit.layout.ContentPane" href="mail/newMail.html"></div> 
	</div>		
</div>

Form

éléments de formulaires :

Button

Simple bouton.

dojo.require("dijit.form.Button");
<button
        id="newMsg" dojoType="dijit.form.Button"
        iconClass="mailIconNewMessage">
        New Message
        <script type="dojo/method" event="onClick">
                alert("New message functionality coming soon.");
        </script>
</button>

DropDownButton

Menu avec plusieurs actions possibles.

ComboButton

un bouton avec un menu si l'on reste cliqué.

dojo.require("dijit.Menu");
dojo.require("dijit.Tooltip");
<button id="getMail" dojoType="dijit.form.ComboButton"
        iconClass="mailIconGetMail">
        <script type="dojo/method" event="onClick">
                fakeDownload();
        </script>
        <span>Get Mail</span>
        <ul dojoType="dijit.Menu">
                <li dojoType="dijit.MenuItem" iconClass="mailIconGetMail">Yahoo</li>
                <li dojoType="dijit.MenuItem" iconClass="mailIconGetMail">GMail</li>
        </ul>
</button>
<span dojoType="dijit.Tooltip" connectId="getMail">Click to download new mail.</span>

ComboBox

Doc : ComboBox

Un menu pour choisir une valeur :

<select name="state1"
        dojoType="dijit.form.ComboBox"
        autocomplete="false"
        value="California"
        onChange="setVal1">
        <option selected="selected">California</option>
        <option >Illinois</option>
        <option >New York</option>
        <option >Texas</option>
</select>

Un menu pour choisir une valeur avec une base Json :

        dojo.require("dojo.parser");
        dojo.require("dijit.form.ComboBox");
        dojo.require("dojo.data.ItemFileReadStore");
        function setVal2(value) {
          console.debug("Selected "+value);
        }
</script>
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" url="states.txt"></div>

<input dojoType="dijit.form.ComboBox"
        store="stateStore"
        value="California"
        searchAttr="name"
        name="state2"
        onChange="setVal2" />

/* La source dans states.txt : */
{
identifier:"abbreviation",
items: [
        {name:"Alabama", label:"Alabama",abbreviation:"AL"},
        {name:"Alaska", label:"Alaska",abbreviation:"AK"},
        {name:"American Samoa", label:"American Samoa",abbreviation:"AS"},
	{name:"Wyoming", label:"Wyoming",abbreviation:"WY"}
]}
fonction type description
autoComplete Boolean
true
and then tab out of the <input> box, automatically copy the first entry displayed in the drop down list to the <input> field
hasDownArrow Boolean
true
Set this textbox to have a down arrow button
ignoreCase Boolean
true
True if the ComboBox should ignore case when matching possible items.
pageSize Integer
Infinity
Argument to data provider. Specifies number of search results per page (before hitting "next" button)
query Object
{}
A query that can be passed to 'store' to initially filter the items, before doing further filtering based on searchAttr and the key.
searchAttr String
name
Searches pattern match against this field
searchDelay Integer
100
Delay in milliseconds between when user types something and we start searching based on that value
store Object
{}
Reference to data provider object used by this ComboBox.

FilteringSelect

Doc : FilteringSelect

Un peut comme la ComboBox mais oblige a rentrer la bonne valeur et ne charge pas toutes les données d'un coup :

    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true"></script>
        <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.FilteringSelect");
       dojo.require("dojo.data.ItemFileReadStore");
   </script>
</head>
<body class="tundra">
        <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
              url="states.txt"></div>
        <form method="post">
                <input dojoType="dijit.form.FilteringSelect"
                    store="stateStore"
                        searchAttr="name"
                        name="state1"
                        autocomplete="true"
                        />
            <input type="submit" value="Go!" />
        </form>
</body></html>

/* La source dans states.txt : */
{
identifier:"abbreviation",
items: [
        {name:"Alabama", label:"Alabama",abbreviation:"AL"},
        {name:"Alaska", label:"Alaska",abbreviation:"AK"},
        {name:"American Samoa", label:"American Samoa",abbreviation:"AS"},
	{name:"Wyoming", label:"Wyoming",abbreviation:"WY"}
]}

commandes :

méthode decription
setDisplayedValue(/*String*/ label) Set label (and corresponding value) to "label"
setValue(/*String*/ value) Set value (and corresponding label) to "value"

Dialog box

A mettre juste avant la balise </body>

dojo.require("dijit.form.Button"); 
dojo.require("dijit.Dialog");
dojo.require("dijit.form.ComboBox"); 
dojo.require("dijit.form.CheckBox"); 
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.Textarea");

dojo.require("dijit.Dialog");
<div dojoType="dijit.Dialog" id="optionsDialog" title="Options:">
        <table> 
        <tr>
            <td style="text-align:right;"><label for="option1">Transport type:</label></td>
            <td>
                <select id="option1" dojoType="dijit.form.FilteringSelect">
                    <option value="pop3">POP3</option>
                    <option value="imap">IMAP</option>
                </select>
            </td>
        </tr>
        <tr>
            <td style="text-align:right;"><label for="option2">Server:</label></td>
            <td>
                <input id="option2" dojoType="dijit.form.TextBox" type="text">
            </td>
        </tr>
        <tr>
            <td style="text-align:right;">
                <input type="checkbox" id="fooCB" dojoType="dijit.form.CheckBox">
            </td>
            <td><label for="fooCB">Leave messages on Server</label></td>
        </tr>
        <tr>
             <td style="text-align:right;">
                 <input type="checkbox" id="fooCB2" dojoType="dijit.form.CheckBox">
             </td>
             <td><label for="fooCB2">Remember Password</label></td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center;">
                <button dojoType="dijit.form.Button" type="submit"
                              iconClass="mailIconOk">OK</button>
                <button dojoType="dijit.form.Button" type="submit"
                              iconClass="mailIconCancel">Abort</button>
             </td>
        </tr>
        </table>
</div>

InlineEditBox

Doc : InlineEditBox

Editer un élément sur la ligne :

TextBox :

    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.InlineEditBox");
       dojo.require("dijit.form.TextBox");
       function myHandler(idOfBox, value) {
           console.debug("Edited value from "+idOfBox+" is now "+value);
       }
     </script>
</head>
<body class="tundra">
        <span id="editable" style="font-size:larger;"
                dojoType="dijit.form.InlineEditBox"
                onChange="myHandler(this.id,arguments[0])">
        <input dojoType="dijit.form.TextBox" value="Edit me - I trigger the onChange callback">
    </span>
</body></html>

DateTextBox :

    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.InlineEditBox");
       dojo.require("dijit.form.DateTextBox");
     </script>
</head>
<body class="tundra">
    <p id="backgroundArea" dojoType="dijit.form.InlineEditBox" >
                <input name="date" value="2005-12-30"
                        dojoType="dijit.form.DateTextBox"
                        constraints={datePattern:'MM/dd/yy'}
                        lang="en-us"
                        required="true"
                        promptMessage="mm/dd/yy"
                        invalidMessage="Invalid date. Use mm/dd/yy format.">
   
</body></html>

D'une façon générale, l'élément doit implémenter :

/* void */ setTextValue(/*String*/ value) { ... }
String value = getTextValue() {... }
/* void */ focus() { ... }

ProgressBar

Dojo ProgressBar.PNG

La bar qui est cachée dans un premier temps :

<div id="fetchMail" style="opacity:0;visibility:hidden">
        <div annotate="true" id="fakeFetch" dojoType="dijit.ProgressBar"
                style="height:15px; width:275px;" indeterminate="true"
                report="fakeReport"></div>
</div>

Exemple de script pour l'utiliser :

var numMails;
var fakeDownload = function(){
	dojo.byId('fetchMail').style.visibility='visible';
	numMails = Math.floor(Math.random()*10)+1;
	dijit.byId('fakeFetch').update({ maximum: numMails, progress:0 });
	dojo.fadeIn({ node: 'fetchMail', duration:300 }).play();
	for (var i=0; i<=numMails; i++){
	    setTimeout(
                      "updateFetchStatus("+i+")",
                      ((i+1)*(Math.floor(Math.random()*100)+400))
            );
	}
}

var updateFetchStatus = function(x){
	if (x == 0) {
		dijit.byId('fakeFetch').update({ indeterminate: false });
		return;
	}
	dijit.byId('fakeFetch').update({ progress: x });
	if (x == numMails){
		dojo.fadeOut({ node: 'fetchMail', duration:800,
			// set progress back to indeterminate. we're cheating, because this
			// doesn't actually have any data to "progress"
			onEnd: function(){ 
				dijit.byId('fakeFetch').update({ indeterminate: true });
                                // remove progress bar from tab order
				dojo.byId('fetchMail').style.visibility='hidden'; 
			}
		}).play();
	}
}

/* message affiché sur la barre : */
var fakeReport = function(percent){
    return "Fetching: "+(percent*this.maximum) + " of " + this.maximum + " messages.";
}

Tree

Doc : tree

Un arbre qui utilise les données présentes dans un fichier, utilisation de JSON pour le stockage :

dojo.require("dojo.data.ItemFileWriteStore"); 
dojo.require("dijit.Tree");

<div dojoType="dijit.Tree" id="addrTree" store="mailStore"
		labelAttr="label" childrenAttr="folders" query="{type:'address'}">
		<script type="dojo/method" event="getIconClass" args="item">
			var specifiedIcon = item && mailStore.getValue(item, "icon");
			return specifiedIcon || "mailIconFolderDocuments";
		</script>
	</div>
</div>

Carnet d'adresse :

{ 
	identifier: 'id',
	label: 'label',
	items: [
		{ type: 'address', id: 'adam', label: "Adam Arlen" },
		{ type: 'address', id: 'bob', label: "Bob Baxter" },
		{ type: 'address', id: 'carrie', label: "Carrie Crow" }
        ]
}