Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Yui intro

589 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

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

×