This is a test for the Dojo CodeGlass which lets you create executed code examples and lets the user copy and paste that same code.
CodeGlass is a widget mainly intendet for easy to create examples for documentation or similar projects.
All the user has to do is to define the to be executed HTML, CSS and JavaScript, CodeGlass will assemble the code and execute it properly.
In this example we create a completely self contained Dojo layout which you can copy and past into your environment and which will work out of the box for you
The new Dojo docs will convert simple reST syntax into escaped HTML, check the source to see what CodeGlass does.
<script type="text/javascript"> dojo.require("dijit._Calendar"); </script>
<div dojoType="dijit._Calendar" onChange="dojo.byId('formatted').innerHTML=dojo.date.locale.format(arguments[0], {formatLength: 'full', selector:'date'})"></div> <div id="formatted"></div>
With an initial selection and weekends disabled
<script type="text/javascript"> dojo.require("dijit._Calendar"); </script>
<div id="mycal" dojoType="dijit._Calendar" value="2009-08-07" isDisabledDate="dojo.date.locale.isWeekend"></div>
Programmatic, with a restriction of +/- one week from the current date
<script type="text/javascript"> dojo.require("dijit._Calendar"); dojo.addOnLoad(function(){ new dijit._Calendar({ value: new Date(2009, 7, 7), isDisabledDate: function(d){ var d = new Date(d); d.setHours(0,0,0,0); var today = new Date(); today.setHours(0,0,0,0); return Math.abs(dojo.date.difference(d, today, "week")) > 0; } }, "mycal"); }); </script>
<div id="mycal"></div>
Instantiation is super simple: dojo.query("#demo").CodeGlass({type: "dialog"});
First we declare the CSS
<style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; } #borderContainerTwo { width: 100%; height: 100%; font-family: Arial; font-size: 12px; } </style>
The html snippet simply defines the markup of your code. Dojo will then parse the dom nodes and create the widgets programatically. Usually the lifecycle goes as follows
- Programmatic code generation
- Dom manipulation
<div style="position: relative; width: 100%; height: 100%;"> <div dojoType="dijit.layout.BorderContainer" gutters="true" id="borderContainerTwo" > <div dojoType="dijit.layout.ContentPane" region="top" splitter="false"> Hi, usually here you would have important information, maybe your company logo, or functions you need to access all the time.. </div> <div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar" region="center" id="mainSplit"> <div dojoType="dijit.layout.AccordionContainer" minSize="20" style="width: 300px;" id="leftAccordion" region="leading" splitter="true"> <div dojoType="dijit.layout.AccordionPane" title="One fancy Pane"> </div> <div dojoType="dijit.layout.AccordionPane" title="Another one"> </div> <div dojoType="dijit.layout.AccordionPane" title="Even more fancy" selected="true"> </div> <div dojoType="dijit.layout.AccordionPane" title="Last, but not least"> </div> </div><!-- end AccordionContainer --> <div dojoType="dijit.layout.TabContainer" region="center" tabStrip="true"> <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true"> Lorem ipsum and all around... </div> <div dojoType="dijit.layout.ContentPane" title="My second tab"> Lorem ipsum and all around - second... </div> <div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true"> Lorem ipsum and all around - last... </div> </div> </div> </div> </div>
This is the jscript code of your example. Simple past both HMTL and Jscript into the browser.
<script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.layout.AccordionContainer"); </script> <script type="text/javascript"> dojo.addOnLoad(function(){ dojo.parser.parse(); }); </script>
Take a look at the frickin cool Dojo charting. This makes use of CodeGlass in inline "mode".
Instantiation is super simple: dojo.query("#charting").CodeGlass({type: "inline"});
This is how you get the cool charting to run
<script type="text/javascript"> dojo.require("dojox.charting.Chart2D"); dojo.require("dojox.charting.themes.Wetland"); dojo.addOnLoad(function(){ var c = new dojox.charting.Chart2D("chartOne"); c.addPlot("default", {type: "StackedAreas", tension:3}) .addAxis("x", {fixLower: "major", fixUpper: "major"}) .addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0}) .setTheme(dojox.charting.themes.Wetland) .addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4]) .addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2]) .addSeries("Series C", [6.3, 1.8, 3, 0.5, 4.4, 2.7, 2]) .render(); }); </script>
Very simple
<div id="chartOne" style=""></div>
Some simple CSS
<style type="text/css"> .{{ theme }} #chartOne { padding-top:60px; font-family: Arial; font-size: 12px; margin: 0 50px; width: 400px; height: 240px; } </style>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis cursus libero. Pellentesque sodales justo at felis molestie vestibulum. Vivamus feugiat augue sem, eget interdum odio. Sed sagittis sapien ac leo cursus ultrices in mattis massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas et tortor purus, at varius eros. Aliquam fermentum est non ipsum posuere eget pellentesque nunc adipiscing. Pellentesque volutpat porttitor dui quis molestie. Aenean a turpis tortor. Aliquam massa velit, dictum a dignissim eu, tristique ut neque. Quisque urna lectus, egestas sit amet sagittis et, fermentum nec neque. Integer sodales, nisl sed euismod porttitor, ante orci volutpat orci, vel faucibus nisi lectus tincidunt dui. Ut varius fringilla massa id vulputate. Proin gravida risus nec quam pellentesque semper.
Aenean id risus eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec euismod sem. Aliquam rutrum ligula nec erat mollis ac luctus diam iaculis. Donec in elit metus. Maecenas enim felis, volutpat eu elementum nec, semper id enim. Suspendisse ultrices luctus elementum. Mauris venenatis dolor ac velit pulvinar mattis. Nam commodo, lacus a imperdiet viverra, nisi felis ultricies diam, vitae faucibus mi elit eget lectus. Nunc vitae nisi sit amet erat volutpat iaculis.
Donec volutpat enim hendrerit risus porttitor ultrices. Donec ante enim, vulputate id egestas in, commodo accumsan massa. Nulla ac eros eros, eget ornare sapien. Nulla vehicula nibh id dui volutpat et imperdiet neque convallis. In imperdiet urna in libero condimentum gravida. Phasellus a dolor dolor. Donec tincidunt nunc velit. Vestibulum elit massa, consectetur elementum porta at, feugiat vitae sapien. Nam enim velit, consectetur eget aliquet sit amet, malesuada eu nibh. Morbi egestas pharetra dignissim. Donec non dolor arcu. Cras vulputate, orci et posuere lacinia, turpis urna semper erat, vel vestibulum urna lacus vitae mi. Maecenas eget orci eu ante euismod placerat. Sed pellentesque ante quis metus molestie vel eleifend dolor lobortis. Nullam non nunc risus. Nullam sollicitudin dignissim nibh, condimentum posuere erat ornare sit amet. Sed sed lacinia tortor. Curabitur ornare, elit id aliquam tincidunt, lorem tellus tincidunt turpis, id lacinia nisi enim ut turpis. Morbi accumsan, lorem at lacinia elementum, augue mauris luctus diam, nec luctus massa elit ac est.
<script> dojo.require("dojox.data.CsvStore"); dojo.require("dijit.form.ComboBox"); var storeData = "firstname,lastname,age\n" + "John, Doe, 21\n" + "Jane, Doe, 22\n" + "Richard, Smith, 43\n" + "Sally, Smith, 49\n" + "Lian, Zu, 23\n" + "Ichiro, Kagetsume, 23\n"+ "Umeko, Tsuguri, 18\n" + "Alptraum, Reisender, 25\n" + "Thomas, Winthrope, 14\n"; var personStore = new dojox.data.CsvStore({data: storeData}); </script>
<div dojoType="dijit.form.ComboBox" store="personStore" searchAttr="firstname"></div>