Data-Dash Files

Thanks for choosing Dash!
This file contains instructions on how to get started.

These instructions and more detailed/pretty ones can be found at http://data-dash.blogspot.com

1. The following scripts/styles must be included in the header of your page.

<script type="text/javascript" src=”Dash/ui/JQuery/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="Dash/ui/JQuery/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="Dash/ui/TimepickerAddon/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="Dash/ui/DataTables/jquery.dataTables.min.js"></script>  
<script type="text/javascript" src="Dash/Dash.js"></script>
<link rel="Stylesheet" href="Dash/Dash.css" />


2. In order to create Dash elements, you must use what I will call "dash directives".

For example, the following uses the "data-datepicker" directive:

<input type="text" data-datepicker="true" />

And that's all you need to do!


3. You can add settings and additional properties to the elements using other dash directives.

The following sets the minimum date of the datepicker to yesterday:

<input type="text" data-datepicker-min-date="-1d" />

** The full list of directives can be found in the /docs folder. **


************************************
* A note on JavaScript Namespacing *
************************************

What is namespacing? : A way to separate logical parts of code into their own sections.

Why should I use it? : It prevents code from interacting with code it shouldn't touch, and prevents naming conflicts.

How do I do it in JavaScript? :

// The Space namespace
var Space = new function ()
{
     // A function that anyone can call
     this.SayGoodbye = function ()
     {
          alert("Bye Pluto!");
     }

     // A variable only visible inside the Space namespace
    var planets = ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"];
}

In the above example, anyone can access the SayGoodbye function in the following way:

Space.SayGoodbye();

However, if they tried to get the planets variable, it would error out.

var x = Space.planets; // error!

So, you can use this to hide things that are specific to a namespace, and only give out the things that need to be.


But Why is This Relevant to Dash??

Some of the dash directives can take in functions or variables. Using namespacing, you can prevent problems that occur when you accidentally use the same name for a variable.

Example of passing in an object. 

JS:

// Sales namespace
var Sales = new function ()
{
     this.CarCompanies = ["Audi", "BMW", "Chevrolet", "Ford", "Jaguar"];
}

HTML

<input type="text" data-autocomplete="true" data-autocomplete-source="Sales.CarCompanies" />

Note that you simply use the dot (.) notation for passing these in. The same thing applies for passing in any variable that is inside a namespace.

Also, if you choose not to use namespacing (shame on you), then you will just place the name of the object or function as the value for the directive.