YUI Library Home

YUI Library Examples: ProfilerViewer Control: Using the ProfilerViewer API while Profiling the YUI Menu Control

ProfilerViewer Control: Using the ProfilerViewer API while Profiling the YUI Menu Control

In this example, we explore the use of the ProfilerViewer API to customize the console slightly while taking a thorough look at the performance profile of the YUI Menu Control. Customizations include:

  1. The console launcher is reduced in size;
  2. The console is draggable via the header;
  3. The height of the table and the number of functions profiled in the chart are increased;
  4. A filter is used to show only functions that have been called at least once.

Check out the example in action via the New Window button below, then come back to this page to read the full tutorial below on how to customize your ProfilerViewer instance.

Making Use of ProfilerViewer's API

This example points to how you can use ProfilerViewer's provided API to create profiling experiences tailored to your environment.

This example has the following dependencies:

1<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/container/assets/skins/sam/container.css">  
2<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/menu/assets/skins/sam/menu.css">  
3<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/profilerviewer/assets/skins/sam/profilerviewer.css"
4 
5<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/utilities/utilities.js"></script> 
6<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script> 
7<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container-min.js"></script> 
8<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/menu/menu.js"></script> 
9<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yuiloader/yuiloader-min.js"></script> 
10<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/profiler/profiler-min.js"></script> 
11<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/profilerviewer/profilerviewer-min.js"></script> 
view plain | print | ?

Here are some of the key features of this example:

1. Thorough profiling of the YUI Menu Control

Generally, a thorough profiling of a component like Menu requires careful thought and analysis. In this case, we want a picture of how Menu's own functions perform and also of how it makes use of other YUI components like the Dom Collection and the Event Utility. To do this, we need to profile the constructors of the main Menu classes and use Profiler's registerObject method to profile the static classes of Dom and Event.

1// To fully profile the Menu, we want to register all the Menu 
2// and MenuItem constructors involved in Menu creation; for the 
3// purposes of this example, we'll also profile Menu's use 
4// of core YUI components like the Dom Collection and the 
5// Event Utility: 
6YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Menu"); 
7YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuItem"); 
8YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuManager"); 
9YAHOO.tool.Profiler.registerConstructor("YAHOO.util.Config"); 
10YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Module"); 
11YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Overlay"); 
12YAHOO.tool.Profiler.registerObject("YAHOO.util.Dom"true); 
13YAHOO.tool.Profiler.registerObject("YAHOO.util.Event"true); 
view plain | print | ?

2. Using ProfilerViewer's configuration attributes

In instantiating ProfilerViewer, we'll use configuration attributes to:

  1. Set the base directory for YUI files (so that some files can be loaded only when needed) (line 3 below);
  2. Set the path to the YUI Charts Control .swf file relative to the page being viewed (line 21 below);
  3. Filter the Profiler's output, showing in the table only functions that have been called at least once (lines 11-13 below);
  4. Set the number of functions profiled visually in the chart (line 19 below);
  5. Set the height of the console's DataTable component (line 20 below).
1// Instantiate ProfilerViewer, using its API to customize it a bit: 
2var pv = new YAHOO.widget.ProfilerViewer("profiler", { 
3    base: "http://yui.yahooapis.com/2.7.0/build/"
4    visible: false//default is false; this means only the 
5                    //ProfilerViewer launchbar will be displayed 
6                    //on initial render, and the rest of the console 
7                    //(including the DataTable and Chart) won't  
8                    //be loaded and rendered until they're requested. 
9    //here, we're going to filter the displayed functions 
10    //and only show those that have been called at least once: 
11    filter: function(o) { 
12        return (o.calls > 0); 
13    }, 
14    showChart: true//default is true 
15    //the chart can be hidden entirely by setting showChart to 
16    //false; you can also control the number of functions 
17    //measured in the chart to expand or reduce the real estate 
18    //it takes up on the page: 
19    maxChartFunctions:8, 
20    tableHeight:"25em"//default: 15em 
21    swfUrl:"http://yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf" 
22}); 
view plain | print | ?

3. Use one of ProfilerViewer's "interesting moments" (custom events) to further customize the interaction

ProfilerViewer exposes a few custom events (like when the console first renders and when a data-refresh is requested; you can respond to these by subscribing to the events. Here, we'll use a different class of custom event: one that fires automatically in response to an attribute change.

ProfilerViewer has an attribute called visible that is toggled when the console is minimized/maximized. We'll subscribe to that event here. When the console is minimizing, we'll make it narrower (300px wide) so that it's more compact and out of the way. When visible is changed back to true (ie, when the console is maximized), we will reset the width of the console to 950px to reveal all of the profiling data.

1//You can subscribe to "interesting moments" in the ProfilerViewer 
2//just as you can with any other YUI component.  Here, we'll use 
3//the visibleChange event that accompanies any change to the PV 
4//console's "visible" attribute.  When made visible, we'll expand 
5//the console to full width; when it's minimized, we'll reduce the 
6//width of the launcher so that it takes up less screen real 
7//estate: 
8pv.subscribe("visibleChange"function(o) { 
9 
10            //"this" is the ProfilerViewer instance; 
11            //this.get("element") is the top-level node containing 
12            //the ProfilerViewer console.  
13            var el = this.get("element"); 
14             
15            //In this handler, the "visible" config property is 
16            //changing.  If the new value is "true", the console 
17            //is becoming visible, so we'll make it wide.  If the 
18            //new value is false, we'll make the launch bar skinny. 
19            var width = (o.newValue) ? "950px" : "300px"
20            YAHOO.util.Dom.setStyle(el, "width", width); 
21}); 
view plain | print | ?

4. Use the getHeadEl() method to provide a drag handle for the draggable console

To help keep the ProfilerViewer console out of the way, we'll make it draggable via the header bar. To do this, we need access to the ProfilerViewer's header element. ProfilerViewer's API gives you access to a number of key elements in the console's DOM; in this case, we'll use the getHeadEl() method to specify the header bar as the drag handle for the console.

1//Here, we'll use Drag and Drop to make the ProfilerViewer 
2//console draggable.     
3var DD = new YAHOO.util.DD("profiler"); 
4 
5//ProfilerViewer's API gives you access to the key container 
6//elements in the console.  Here we'll use access to the 
7//header element to give it an ID and make it a drag handle. 
8pv.getHeadEl().id = "profilerHead"
9DD.setHandleElId("profilerHead"); 
10 
11//The Buttons in the head should not be valid drag handles;  
12//they are comprised of anchor elements, which DD allows us 
13//to disclude as handles. 
14DD.addInvalidHandleType("a"); 
15 
16//Drag and Drop performs better when you use the dragOnly 
17//setting for elements that can be moved but that don't 
18//have any DD interactions with other page elements: 
19DD.dragOnly = true
view plain | print | ?

Full source code

The full JavaScript source code for this example is as follows:

1// Instantiate and render the menu when it is available in the DOM 
2YAHOO.util.Event.onContentReady("productsandservices"function () { 
3 
4    // To fully profile the Menu, we want to register all the Menu 
5    // and MenuItem constructors involved in Menu creation; for the 
6    // purposes of this example, we'll also profile Menu's use 
7    // of core YUI components like the Dom Collection and the 
8    // Event Utility: 
9    YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Menu"); 
10    YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuItem"); 
11    YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuManager"); 
12    YAHOO.tool.Profiler.registerConstructor("YAHOO.util.Config"); 
13    YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Module"); 
14    YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Overlay"); 
15    YAHOO.tool.Profiler.registerObject("YAHOO.util.Dom"true); 
16    YAHOO.tool.Profiler.registerObject("YAHOO.util.Event"true); 
17     
18    // Instantiate ProfilerViewer, using its API to customize it a bit: 
19    var pv = new YAHOO.widget.ProfilerViewer("profiler", { 
20        base: "http://yui.yahooapis.com/2.7.0/build/"
21        visible: false//default is false; this means only the 
22                        //ProfilerViewer launchbar will be displayed 
23                        //on initial render, and the rest of the console 
24                        //(including the DataTable and Chart) won't  
25                        //be loaded and rendered until they're requested. 
26        //here, we're going to filter the displayed functions 
27        //and only show those that have been called at least once: 
28        filter: function(o) { 
29            return (o.calls > 0); 
30        }, 
31        showChart: true//default is true 
32        //the chart can be hidden entirely by setting showChart to 
33        //false; you can also control the number of functions 
34        //measured in the chart to expand or reduce the real estate 
35        //it takes up on the page: 
36        maxChartFunctions:8, 
37        tableHeight:"25em"//default: 15em 
38        swfUrl:"http://yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf" 
39    }); 
40             
41    //You can subscribe to "interesting moments" in the ProfilerViewer 
42    //just as you can with any other YUI component.  Here, we'll use 
43    //the visibleChange event that accompanies any change to the PV 
44    //console's "visible" attribute.  When made visible, we'll expand 
45    //the console to full width; when it's minimized, we'll reduce the 
46    //width of the launcher so that it takes up less screen real 
47    //estate: 
48    pv.subscribe("visibleChange"function(o) { 
49     
50                //"this" is the ProfilerViewer instance; 
51                //this.get("element") is the top-level node containing 
52                //the ProfilerViewer console.  
53                var el = this.get("element"); 
54                 
55                //In this handler, the "visible" config property is 
56                //changing.  If the new value is "true", the console 
57                //is becoming visible, so we'll make it wide.  If the 
58                //new value is false, we'll make the launch bar skinny. 
59                var width = (o.newValue) ? "950px" : "300px"
60                YAHOO.util.Dom.setStyle(el, "width", width); 
61    }); 
62     
63    //Here, we'll use Drag and Drop to make the ProfilerViewer 
64    //console draggable.     
65    var DD = new YAHOO.util.DD("profiler"); 
66 
67    //ProfilerViewer's API gives you access to the key container 
68    //elements in the console.  Here we'll use access to the 
69    //header element to make it a drag handle. 
70    pv.getHeadEl().id = "profilerHead"
71    DD.setHandleElId("profilerHead"); 
72     
73    //The Buttons in the head should not be valid drag handles;  
74    //they are comprised of anchor elements, which DD allows us 
75    //to disclude as handles. 
76    DD.addInvalidHandleType("a"); 
77     
78    //Drag and Drop performs better when you use the dragOnly 
79    //setting for elements that can be moved but that don't 
80    //have any DD interactions with other page elements: 
81    DD.dragOnly = true
82 
83 
84    // Instantiate the menu and corresponding submenus. The first argument passed  
85    // to the constructor is the id of the element in the DOM that represents  
86    // the menu; the second is an object literal representing a set of  
87    // configuration properties for the menu. 
88    var oMenu = new YAHOO.widget.Menu("productsandservices", {  
89        context: ["menutoggle""tl""tr"
90     }); 
91 
92    // Call the "render" method with no arguments since the  
93    // markup for this Menu instance is already exists in the page. 
94    oMenu.render(); 
95 
96    // Set focus to the Menu when it is made visible 
97    oMenu.subscribe("show", oMenu.focus); 
98     
99    //Wire up the button to show the menu when clicked; 
100    YAHOO.util.Event.addListener("menutoggle""click", oMenu.show, null, oMenu); 
101 
102}); 
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings