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