Home >> Miscellaneous
>> DOJO-Example-Dialog
Tags: DOJO Example, DOJO Tutorial, DOJO Widgets, DOJO Animation, DOJO Help, DOJO Design.
In this page I shall try to elaborate my experience and quest for finding simple
and elegant ways using ready made widgets such as Tree bar, Calendar, Dialog and
many more.
I shall be using Dijit for user interface components.
I shall use dijit.Dialog so to start with we have to mention require method
from dojo.
<html>
<head>
<script src="js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.Dialog");
var testDialog;
dojo.addOnLoad(function() {
testDialog = new dijit.Dialog({title: "Testing Dialog",
style: "width: 200px; height: 200px"});
testDialog.set("content","ok");
});
</script>
<link rel="stylesheet" type="text/css" href="js/dijit/themes/claro/claro.css"/>
</head>
<body class="claro" onLoad="javascript:testDialog.show();">
</body>
</html>
|
The above HTML source is just to show a Dialog on load of this file from within
browser.
Before executing this example one has to install/extract relevant DOJO distribution
file to any folder within the web application relative path. If you want to run
this example code without any changes, then you have to create a folder "js" within
the web application root folder, or the folder where you have placed the above HTML
file and then extract DOJO release/distribution Zip file to this "js" folder.
In this example I am using two files from the DOJO Library, shown as follows:
-> js/dojo/dojo.js
-> js/dijit/themes/claro/claro.css
whereby js is the folder I created locally. If you have created any other folder
instead of js , then just change/replace "js" with your folder name.
For any Person who knows coding using Java Language, must be aware of the "import"
word in source code, like that in DOJO we have to use "require" to make any widget
component visible within the file/page.So I have used "dojo.require("dijit.Dialog");"
then declared a variable testDialog.
Then addOnLoad method implementation runs on load of the page/file from within
the browser. This is the method that I have used to instantiate a Dialog object
testDialog = new dijit.Dialog({title: "Testing Dialog",
style: "width: 200px; height: 200px"});
Here I have passed title and style properties to supply some testing values/text.
Now using testDialog instance variable, I can set some of the content to be shown
within the body of the Dialog box.
At last I am just calling a JavaScript method from onLoad event of the body tag,
and making the testDialog instance show up on screen.
In this example I have used theme from dijit folder, namely "claro",
one can use many other themes such as
-> nihilo
-> soria
-> tundra
or you can create your customized theme as per your requirement.
Dialog widget from dijit comes with a default close icon and related functionality,
so I need not provide an onclose mechanism/code.
If anything missed out , please let me know at
techienjoy at yahoo . com
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Google GWT Example : |
Example using GWT and some design patterns and various
ways of implementing this example.
|
|
|
|
|
|
|
|
| Android Canvas Example : |
Example using Canvas using Android Platform
and source code implementing this example.
|
|
|
|
|
|
|
|
| Android ListView Example : |
Example on Android ListView
explained with a very simple scenario
whereby showing folder and files with
structure and appropriate screens
captured and shown.
|
|
|
|
|
|
|
|
| Android Robots Example : |
Example using Borots using Android Platform
and source code implementing this example.
|
|
| Android ListView Example : |
Example on Android List View
explained with a very simple scenario
and article with appropriate screens
captured and shown.
|
|
|
|
|
|
|
|
|
|
| Android ListView Example : |
Example on Android ListView and
explained with a very simple scenario
and article with appropriate screens
captured and shown.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Android NFC Example : |
Example using NFC using Android Platform
and source code implementing this example.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Android Draw Example : |
Example using Draw using Android Platform
and source code implementing this example.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Android Sensors Example : |
Example on Android Sensors Listed and
explained with a very simple scenario
and article with appropriate screens
captured and shown.
|
|
|
|
|
|
|
|
|
| Android GridView Example : |
Example using GridView Widget using Android Platform
and source code implementing this example.
|
|
|
|
|
| Android Intent Example : |
Example using Intent from Android Platform
and source code implementing this example.
|
|
| Android Tab View Example : |
Example on Android Tab View
explained with a very simple scenario
and appropriate screens captured and shown.
|
|
| Android Views Example : |
Example using Views using Android Platform
and source code implementing this example.
|
|
|
|
| Android Gallery Example : |
Example on Android Gallery View
explained with a very simple scenario
and appropriate screens captured and shown.
|
|
| Android Examples : |
List of ANDROid examples
with source code and output
screens captured and shown.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|