YUI Basics
1 like826 views
YUI is a JavaScript and CSS framework that makes web development easier. It includes utilities for DOM manipulation, events, layout, JSON parsing, data sources, and data tables. The YUI libraries provide cross-browser compatibility and simplify common tasks like element positioning, event handling, and exchanging data between the client and server. Components like the Layout Manager and Data Table are used throughout the TMS (transportation management system) to create application layouts and display tabular data.
![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);](https://image.slidesharecdn.com/yuibasics-110424125436-phpapp02/85/YUI-Basics-10-320.jpg)
YUI Basics
- 1. YUI BASICS By Om Vikram Thapa
- 2. CONTENTS : YUI How to Use YUI2 Core Layout in YUI JSON Data Source Data Table QUERIES??
- 3. 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
- 4. 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\
- 5. 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/
- 6. 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/
- 7. 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/
- 8. 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/
- 10. 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);
- 11. JSON (Contd.) Another example to write the data object in Response to client side jsonStr = 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/
- 12. 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/
- 13. 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/
- 14. ANY QUERIES ???