README.md in dojo_rails-0.0.1 vs README.md in dojo_rails-0.0.2
- old
+ new
@@ -21,62 +21,73 @@
## Usage
To use dojo in your application
Add the gem into your Gemfile
-group :assets do
- # ...
- gem 'dojo_rails'
-end
+ group :assets do
+ # ...
+ gem 'dojo_rails'
+ end
+
then execute
-$ bundle
+ $ bundle
+
Create a new js file called dojoConfig.js inside app/assets/javascripts
Add this configuration, you can add as many options based upon your requirement
-dojoConfig = {parseOnLoad: true}
+ dojoConfig = {parseOnLoad: true}
+
Make changes to your application.js
Require the dojo toolkit library
-//= require dojoConfig
-//= require dojo/dojo
+ //= require dojoConfig
+ //= require dojo/dojo
+
Then remove the following lines
-//= require jquery
-//= require jquery_ujs
+
+ //= require jquery
+ //= require jquery_ujs
+
It is not required anymore. We are going to use dojo, dijit completely.
Make changes to your application.css
Require the dijit and claro css
-*= require dijit
-*= require claro/claro
+ *= require dijit
+ *= require claro/claro
+
Dojo has themes available as inbuilt files. In this above code, we are using theme "claro". Other themes are nihilo, soria, tundra.
In application layout file add these inside head
-<%= stylesheet_link_tag "application" %>
-<%= javascript_include_tag "application" %>
-<%= csrf_meta_tags %>
+ <%= stylesheet_link_tag "application" %>
+ <%= javascript_include_tag "application" %>
+ <%= csrf_meta_tags %>
+
Another important thing to note is, we need to set body of the layout with the theme class then only the loaded theme will reflects in action.
Here, we need to add class "claro" to body
-<body class="claro">
+ <body class="claro">
+
We are done with integration of dojo, dijit toolkit in rails application.
Dijit datetextbox integration sample
In this example, we are going to integrate the calendar in our rails application
Add the script in view file
-<script>
- require(["dojo/parser", "dijit/form/DateTextBox"]);
-</script>
+ <script>
+ require(["dojo/parser", "dijit/form/DateTextBox"]);
+ </script>
+
Then add the below html
-<label for="date1">Drop down Date box:</label>
-<input type="text" name="date1" id="date1" value="2005-12-30"
- data-dojo-type="dijit/form/DateTextBox"
- required="true" />
+
+ <label for="date1">Drop down Date box:</label>
+ <input type="text" name="date1" id="date1" value="2005-12-30"
+ data-dojo-type="dijit/form/DateTextBox"
+ required="true" />
Reload the page to see datetextbox calendar in action.
## Contributing