Dash Exhibit : Custom Property Sets

I think we can all agree that standardization in web development is good. In that vein, Dash allows you to create sets of "data-" attributes that can be used over and over.

Let's say we want a modal (covers background), draggable, resizeable dialog box of width 200px and height 100px with a title of "Caution!" that pops up on page load. To do this in plain JQuery, you would write:

HTML:
<div id="dialog">
  <p>Beware ye who enter here</p>
</div>


JS:
$("#dialog").dialog({
    autoOpen : true,
    draggable : true,
    height : 100,
    modal : true,
    resizeable : true,
    title : "Caution!",
    width : 200});

As you can imagine, this would actually be worse in Dash, as you would have a separate "data-" attribute for each property that conflicts with the defaults. 


So, you instead create a JavaScript object with the properties you want.


HTML:
<div id="dialog" data-dialog="true" data-dash-custom="Warnings.DefaultPopup">
  <p>Beware ye who enter here</p>
</div>


JS: 
// The Warnings Namespace
var Warnings = new function ()
{
    this.DefaultPopup = {
        "data-dialog-auto-open" : true,
        "data-dialog-draggable" : true,
        "data-dialog-height" : 100,
        "data-dialog-modal" : true,
        "data-dialog-resize" : true,
        "data-dialog-title" : "Caution!",
        "data-dialog-width" : 200
    };
}

But wait!, you say. That's more writing than the standard way, and I could put the options in a variable for standard JQuery too!

You would be correct, but with Dash you write a little extra once and then never have to come back to JavaScript again!

Also, in the upcoming revision, there will be shortcut attributes and the "data-element" will be unnecessary in the property sets, like below:

HTML

<div data-dialog="custom:Warnings.DefaultPopup;">...</div>

JS

// The Warnings Namespace

var Warnings = new function ()

{

    this.DefaultPopup = {

        "auto-open" : true,

        "draggable" : true,

        "height" : 100,

        "modal" : true,

        "resize" : true,

        "title" : "Caution!",

        "width" : 200

    };

}

These will make it even quicker and easier to use these custom attribute sets.

Dash Exhibit : Validation

Validation in JavaScript is never fun, even though there are tons of JQuery libraries that make it easier. The Dash.Valid extension tries to make it as painless as possible, minimizing the JavaScript you need to write. Let's say we want to validate a registration form, as below:

Dash will allow you to validate this form without writing any JavaScript except what the button should do.

*Note* All inputs must have an ID for Dash.Valid to function properly.

HTML:

<div id="ValidDiv" data-valid-group="true">
  <table>
    <tr>
      <th>Name:</th>
      <td><input type="text" id="name" data-valid-required="true" data-valid-min-length="5" /></td>
    </tr>
    <tr>
      <th>Email:</th>
      <td><input type="text" id="email" data-valid-required="true" data-valid-email="true" /></td>
    </tr>
    <tr>
      <th>Phone:</th>
      <td><input type="text" id="phone" data-valid-required="true" data-valid-phone="true" /></td>
    </tr>
  </table>
  <button data-button="true" data-valid-trigger="click Registration.Register">Register</button>
  </div>


JS:
// The Registration Namespace
var Registration = new function ()
{
     this.Register = function ()
     {
        /* Register a User */
     }
}


The Result (messages pop up after the button is clicked or when ENTER is pressed in one of the inputs):

Now, Dash will remove those messages as soon as the inputs are valid. Once all inputs in a group are valid, submitting will call the Registration.Register function.


Dash adds an "invalid" and "valid" class to the corresponding input fields and labels, so this can be prettied up a bit with a small amount of CSS.

Dash Exhibit : DataTables

For those of you who don't know, Allan Jardine at datatables.net created an awesome JQuery plugin that makes pretty tables, such as:

But, there's a lot of initialization code that needs to happen. To get the above table, you need to do the following in JavaScript:

$("#table").dataTable({
    bAutoWidth : false,
    bDestroy : true,
    bFilter : true,
    bJQueryUI : true,
    bLengthChange : true
    bSort : true,
    fnDrawCallback : /* function for striping here */
});


And you would do that for every DataTable you create. Using Dash, you can instead do this:


<table data-table="true">
/* Table content here */
</table>


Let's say you want to disable sorting, for whatever reason:

<table data-table="true" data-table-filter="false">
/* Table content here */
</table>

And that's all, no JavaScript writing required!. More complex sets of properties can be used through the data-dash-custom attribute, which will be explained in a later post.

0.2.0 Release!

This release is light on features and heavy on structure. I revamped Dash and Dash.Valid using the awesome guide on the JQuery Site so that it's more standardized.


The biggest change is that you now get to choose when Dash is initialized by calling $.fn.Dash("initAll").


I had also noticed that some of the function bindings were broken in Internet Explorer, so those should be fixed as well.


Have a look at the Roadmap to see the full list of changes.

The Premise

In HTML5, any attribute beginning with data- will be considered valid HTML and be ignored by the browser.  Therefore, custom attributes can be placed on elements to store data that cannot be defined with the standard ones. 

Dash employs these attributes to let you define JQuery UI elements in HTML so that you don't have to initialize them in JavaScript. For example:


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


will get you a JQuery datepicker with default settings. 

Let's say your client comes back to you and requests that this input field be a datetimepicker instead. Then, all you need to do is make a small change to your HTML:


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

This promotes rapid, flexible development in the face of changing requirements. Of course, this is a trivial example, but it illustrates the basic benefits of the Dash library.

0.1.5 Release!

The first release of the Dash library is now out! This release also includes the Dash.Valid library. While there is documentation included in the download, more detailed instructions will be forthcoming on this site.