Introduction to Essential JavaScript

Bharath M

Essential Studio for JavaScript provides a rich set of controls; all of which have been developed using the jQuery plug-in style, so the controls maintain jQuery-like chaining on every action.

For starters, let’s talk about the basics before getting into how to use any of our JavaScript controls. Here’s a list of what I’m going to discuss:

1. Default templates
2. Control creation
3. Getting and setting properties
4. Invoking functions
5. Wiring events

Let me start by providing a sample of how to use a default template.

Default Template

This is the default template for Essential Studio for JavaScript. The style sheet is set at the top. Flat Azure is the default theme.

    <title>Getting Started Essential JS</title>
    <!-- Style sheet for default theme (Flat Azure) -->
    <link href="http://cdn.syncfusion.com/js/web/flat-azure/ej.web.all-latest.min.css" rel="stylesheet" />
    <!--Scripts-->
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/ej.widgets.all-latest.min.js"></script>

	

      

Control creation

Controls can be created using following syntax in JavaScript:

$("jquery-selector").(); 

This creates a control with the default settings. Here’s an example:

$("#date-input").ejDatePicker(); 

To create a control with an option specified by you, use this syntax:

$("jquery-selector").(options); 

options : <Object Literal>

Here’s an example:

$("#date-input").ejDatePicker({
;
           persist: true
       });

Getting or setting properties

Properties are important to define a control’s behavior. They have been enabled in every control with an option to access or change their values dynamically. This is the syntax to get or set property values:

Getting properties

$("jquery-selector").("model.propertyName")
-Or-
$("jquery-selector").("option", "propertyName"); 

This returns the value of the property with propertyName. Here’s an example using the second syntax:

$("#date-input").ejDatePicker("option", "date");

Setting properties

$("jquery-selector").("model.propertyName", "value");
-Or-
$("jquery-selector").("option", "propertyName", "value");
-Or-
$("jquery-selector").({"propertyName": "value"}); 

This sets the value of a property according to the value give to propertyName. Here’s an example:

$("#date-input").ejDatePicker("option", "date", new Date());

Invoking Functions

Functions can be invoked the same way a property is accessed. Here’s the syntax for invoking functions:

$("jquery-selector").("functionName"); 

This calls the function with no parameter and returns returnValue if the function returns anything, or it will maintain the jQuery chain. Here’s an example:

$("#date-input").ejDatePicker("open");

The following syntax calls the function with parameter values “param1” and “param2”, and then it returns returnValue if the function returns anything, or it will maintain the jQuery chain.

$("jquery-selector").("functionName", "param1", "param2"); 

Here’s an example of this:

$("#date-input").ejDatePicker("option", "cssClass", "custom");

Wiring events

It is important to get a notification for an event whenever changes or actions happen in a control. Events can be wired the same way as jQuery events are bound. The syntax for this follows:

$("jquery-selector").("model.eventName", );
-Or-
$("jquery-selector").on("ej-plugin-nameeventName”, ); 

This binds the event’s “eventName” to the control. Here are examples of both types of syntax:

$("#date-input").ejDatePicker("model.destroy", function(){
       // event handler
       });

$("#date-input").on("ejDatePickerdestroy", function(){
       // event handler
       }); 

Dependencies

Essential Studio for JavaScript has dependencies on the following libraries:

·         jQuery: 1.7.1 and above.

·         JsRender: For templates.

·         jQuery Easing: For animation.

·         jQuery Globalize: For globalization.

You need to add references to all these script files in your projects.

Syncfusion’s content delivery network

Essential Studio for JavaScript libraries and themes are hosted on a content delivery network (CDN) server and are ready for use. Please refer to the following tables:

Script

Themes

Essential Studio for JavaScript supports 12 themes. They are listed in the following table with their CDN links.

Now you should be able to easily integrate Essential Studio for JavaScript into a new or existing application since it follows the same usage patterns as JQuery. We will post a blog on how to get started using the framework controls shortly.

For those who haven’t tried Essential Studio for JavaScript, simply check out the following links for more details:

List of controls: https://www.syncfusion.com/javascript-ui-controls

Online demo: http://js.syncfusion.com

Essential Studio for JavaScript download: https://www.syncfusion.com/downloads/javascript