Your SlideShare is downloading. ×
YUI Basics
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

YUI Basics


Published on

Small one way go to learn about YUI

Small one way go to learn about YUI

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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
    • And put it into Web folder of your project For eg: TRSV1.0NineCiphers.TRS.Webyui_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=&quot;text/javascript&quot; src=&quot;../yui_2.8.0r4/yahoo/yahoo-min.js&quot;></script>
    • For more Info:
  • 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=&quot;text/javascript&quot; src=&quot;../yui_2.8.0r4/dom/dom-min.js&quot;></script>
    • For more Info:
  • 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 &quot;publish&quot; the interesting moments or events in your own code so that other components on the page can &quot;subscribe&quot; to those events and respond to them.
    • <script src=&quot;; ></script>
    • For more Info:
  • 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:
  • 9. Layout Manager Eg.
  • 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:
  • 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:
  • 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:
  • 14. ANY QUERIES ???