Aditya GaurMentor: Apurba Nath
What?   Yahoo User Interface   Pronounced “Why-you-eye” or “yooey”   Launched in Feb 2006   It is a collection of java...
YUI global object Starting point of YUI Dependency for all YUI implementation Instantiable object- can create as many i...
Putting YUI on Page (1/3)<script type="text/javascript"src="http://yui.yahooapis.com/3.0.0pr1/build/yui/yui-min.js"></scri...
Putting YUI on Page (1/3) YUI().use(node, function(Y) {   Y.Node.get(#demo); });    <script type="text/javascript" src="ht...
Putting YUI on Page (2/3)  <script type="text/javascript"  src="http://yui.yahooapis.com/3.0.0pr1/combo?build/yui/yui-  ba...
Putting YUI on Page (3/3)The Classical way:  <script type="text/javascript" src="http://  yui.yahooapis.com/combo?3.0.0pr1...
YUI global object: Advantages Instance based: Sandboxing   o Each instance is separate   o Multiple applications per page...
YUI3 vs YUI2
Global Variable YAHOO replaced by YUI Reasons:     Some people don’t like YAHOO in their code     Both the YUI 2 and Y...
ModularityModularity is good but “Sub Modularity” is better.                               Datasource                     ...
Loader In YUI 3 the loader is built into the core. In YUI 2, we have a loader utility:  var loader = new YAHOO.util.YUIL...
Loader (YUI 2)                                     Module 1<script src="module1.js"></script><script src="module1.js"></sc...
Loader (YUI 3)    YUI().use("module1“, "module2“ , "module3“,)                       Y UI seed file            Module 1   ...
That’s it for YUI
mViewer Updates    mViewer
Thank You
Upcoming SlideShare
Loading in …5
×

Yui intro

461
-1

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
461
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Yui intro

  1. 1. Aditya GaurMentor: Apurba Nath
  2. 2. What? Yahoo User Interface Pronounced “Why-you-eye” or “yooey” Launched in Feb 2006 It is a collection of javascript and css resources Simplifies building web applications Provides ready to use, configurable components such as datatable, charts, dialog boxes and other widgets.
  3. 3. YUI global object Starting point of YUI Dependency for all YUI implementation Instantiable object- can create as many instancesas we need
  4. 4. Putting YUI on Page (1/3)<script type="text/javascript"src="http://yui.yahooapis.com/3.0.0pr1/build/yui/yui-min.js"></script> anim dd Y UI Object + http request Loader Utility node json
  5. 5. Putting YUI on Page (1/3) YUI().use(node, function(Y) { Y.Node.get(#demo); }); <script type="text/javascript" src="http:// yui.yahooapis.com/combo?3.0.0pr1/build/oop/oop- min.js&3.0.0pr1/build/event/event-min.js&3.0.0pr1/ build/dom/dom-min.js&3.0.0pr1/build/node/node- min.js"></script>REUSE : If any of the modules is already present on the page,then http request is not send
  6. 6. Putting YUI on Page (2/3) <script type="text/javascript" src="http://yui.yahooapis.com/3.0.0pr1/combo?build/yui/yui- base.js"></script> anim ddY UI Object Loader http request Utility http request node json
  7. 7. Putting YUI on Page (3/3)The Classical way: <script type="text/javascript" src="http:// yui.yahooapis.com/combo?3.0.0pr1/build/yui-base/yui- base-min.js&3.0.0pr1/build/oop/oop-min.js&3.0.0pr1/ build/event/event-min.js&3.0.0pr1/build/dom/dom- min.js&3.0.0pr1/build/node/node-min.js"></script> YUI().use(*, function(Y) { Y.get(#demo); });
  8. 8. YUI global object: Advantages Instance based: Sandboxing o Each instance is separate o Multiple applications per page o Secure mashups Dynamic o Since loader is built into core so we don’t have to statically include all modules Namespace – Avoiding naming conflict
  9. 9. YUI3 vs YUI2
  10. 10. Global Variable YAHOO replaced by YUI Reasons:  Some people don’t like YAHOO in their code  Both the YUI 2 and YUI 3 code can co exist
  11. 11. ModularityModularity is good but “Sub Modularity” is better. Datasource Y UI 2 Y UI 3Datasource Datasource Datasource Datasource Datasource Datasource io Local P olling Get jsonschema function
  12. 12. Loader In YUI 3 the loader is built into the core. In YUI 2, we have a loader utility: var loader = new YAHOO.util.YUILoader();
  13. 13. Loader (YUI 2) Module 1<script src="module1.js"></script><script src="module1.js"></script> Module 2 Module 3<script src="module1.js"></script>
  14. 14. Loader (YUI 3) YUI().use("module1“, "module2“ , "module3“,) Y UI seed file Module 1 Module 2 Module 3
  15. 15. That’s it for YUI
  16. 16. mViewer Updates mViewer
  17. 17. Thank You

×