Using Dojo with Codenvy

Create a dojo application using our Factory URL:

Codenvy supports JavaScript, HTML and a cross-browser JavaScript library dojo. To use this library in your Codenvy projects, you’ll need to download dojo from the official site, upload it to your HTML/JavaScript project, refer to dojo.js from HTML file. Below is an example:

  • create a simple JS project (use create a new project wizard and delete js file from there)
  • download dojo from an official site
  • upload dojo library to your project root folder (File > Upload File)

Capture_4

You can utilize the full Dojo Toolkit from the services[Cloud hosting via CDN] by including a script tag in your page

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>.
  • paste the following content into HTML file:
<!DOCTYPE html>
<html>
<head>
<link href="styles/styles.css" rel="stylesheet" />
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" rel="stylesheet" />
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>
<script src="js/script.js"></script>
</head>
<body class="claro">
<p class="ptxtCenter" >
Dojo tutorial<br />
<button data-dojo-type="dijit/form/Button" type="button" onclick="greetDialog.show();">Click Me!</button></p>
</body>
</html>
  • paste the following content into script.js file:
require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
greetDialog = new Dialog({
title: "Greeting",
content: "Hello World!",
style: "width: 200px;height:200px"
});
});
  • paste the following content into styles.css file:
.ptxtCenter {
text-align: center;
}
  • you should see something like this:

Capture_5

  • when you click the button, you’ll be shown a greeting dialog:

Capture_6