YUI BASICS

By Om Vikram Thapa

CONTENTS :

• YUI• How to Use• YUI2 Core• Layout in YUI• JSON• Data Source• Data Table• QUERIES??

YUI – WHY YUI?

• It is a combination of Javascript and CSS libraries which makes it easy to use

• Proven,Scalable, Fast & Robust• Extensively documented• Easy to integrate with IDE like Visual

Studio

How To Use

• Include YUI scripts and CSS from the YUI download or directly from Yahoo! Servers

http://developer.yahoo.com/yui/download

• And put it into Web folder of your project For eg: TRSV1.0\NineCiphers.TRS.Web\yui_2.8.0r4\

YUI 2 Core

• YAHOO Global Object- The YAHOO Global Object provides a single global namespace

within which all YUI Library code resides.- It must be included on every page that utilizes the YUI Library.

- it must appear before any of the other YUI component.- The YAHOO Global Object also contains a number of methods that

are used throughout the library.• <script type="text/javascript" src="../yui_2.8.0r4/yahoo/yahoo-min.js"></script>

• For more Info: http://developer.yahoo.com/yui/yahoo/

YUI 2 Core (contd.)

• Dom Collection- The Dom Collection comprises a family of convenience methods

that simplify common DOM-scripting tasks.- Helps in element positioning and CSS style management.

- Normalizes the cross-browser inconsistencies.• <script type="text/javascript" src="../yui_2.8.0r4/dom/dom-min.js"></script>

• For more Info: http://developer.yahoo.com/yui/dom/

YUI 2 Core (contd.)

• Event Utility- Most important feature provided by YUI which allows you to create

event-driven application in the browser.- Provides you simplified access to DOM events and browser's Event

object.- The Event Utility package includes the Custom Event object.

Custom Events allow you to "publish" the interesting moments or events in your own code so that other components on the page can "subscribe" to those events and respond to them.

• <script src="http://yui.yahooapis.com/2.8.1/build/event/event-min.js" ></script>

• For more Info:http://developer.yahoo.com/yui/event/

Layout in TMS

• Layout Manager- Allows us to create cross-browser, pixel-perfect application layouts

with little effort.- Layout Manager establishes structured layouts containing top,

bottom, left, right and center layout units.- Units can be resized or collapsed by the user.- Properties and contents of layout units can be easily modifed by

the user.• For more info:http://developer.yahoo.com/yui/layout/

Layout Manager Eg.

JSON(Javascript Object Notation)

JSON is a safe, efficient, and reliable data interchange format.

JSON Utility helps us to exchange the data from Client side to Server and vice versa in an efficient way.

For eg. var jsonStr = YAHOO.lang.JSON.stringify(myData);

-------------------------------------------------------------------------------

dataFromForm=Request.Form[0];

FormDataBin = JsonConvert.DeserializeObject<CustomerCompanyDetailsBin>(dataFromForm);

JSON (Contd.)

Another example to write the data object in Response to client sidejsonStr = JsonConvert.SerializeObject(ResponseDetailsBin);---------------------------------------------------------------------------------protected override void Render(HtmlTextWriter writer){ writer.Write(jsonStr);}---------------------------------------------------------------------------------var data = YAHOO.lang.JSON.parse(JsonData);

For more Info: http://developer.yahoo.com/yui/json/

Data Source

- The DataSource Utility provides a common configurable interface for components to fetch tabular data from a variety of local or remote sources.

- The DataSource will request data and then return the response to a callback function.

- It has the capability of going deep into the hierarchy of the source data, selecting specified fields from the raw output, parsing data as indicated and calling the provided callback function when finished.

- The DataSource has an optional local cache to store retrieved and parsed data. It can also be set to periodically poll for data. (Concept of PAGINATION)

For more Info:http://developer.yahoo.com/yui/datasource/

Data Table

- The Data Table control provides a simple yet powerful API to display screen-reader accessible tabular data on a web page.

- The DT features include sortable columns, pagination, scrolling, row selection, re sizable columns, and inline cell editing.

- For eg. We have used Data Table throughout the TMS to show the Reservation or job order or vehicle/driver information etc.

For more Info: http://developer.yahoo.com/yui/datatable/

ANY QUERIES ???