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:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/container/assets/skins/sam/container.css"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/menu/assets/skins/sam/menu.css"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/profilerviewer/assets/skins/sam/profilerviewer.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/utilities/utilities.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/menu/menu.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yuiloader/yuiloader-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/profiler/profiler-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/profilerviewer/profilerviewer-min.js"></script>

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.

// To fully profile the Menu, we want to register all the Menu // and MenuItem constructors involved in Menu creation; for the // purposes of this example, we'll also profile Menu's use // of core YUI components like the Dom Collection and the // Event Utility: YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Menu"); YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuItem"); YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuManager"); YAHOO.tool.Profiler.registerConstructor("YAHOO.util.Config"); YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Module"); YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Overlay"); YAHOO.tool.Profiler.registerObject("YAHOO.util.Dom", true); YAHOO.tool.Profiler.registerObject("YAHOO.util.Event", true);

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).

// Instantiate ProfilerViewer, using its API to customize it a bit: var pv = new YAHOO.widget.ProfilerViewer("profiler", { base: "http://yui.yahooapis.com/2.7.0/build/", visible: false, //default is false; this means only the //ProfilerViewer launchbar will be displayed //on initial render, and the rest of the console //(including the DataTable and Chart) won't //be loaded and rendered until they're requested. //here, we're going to filter the displayed functions //and only show those that have been called at least once: filter: function(o) { return (o.calls > 0); }, showChart: true, //default is true //the chart can be hidden entirely by setting showChart to //false; you can also control the number of functions //measured in the chart to expand or reduce the real estate //it takes up on the page: maxChartFunctions:8, tableHeight:"25em", //default: 15em swfUrl:"http://yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf" });

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.

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

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.

//Here, we'll use Drag and Drop to make the ProfilerViewer //console draggable. var DD = new YAHOO.util.DD("profiler"); //ProfilerViewer's API gives you access to the key container //elements in the console. Here we'll use access to the //header element to give it an ID and make it a drag handle. pv.getHeadEl().id = "profilerHead"; DD.setHandleElId("profilerHead"); //The Buttons in the head should not be valid drag handles; //they are comprised of anchor elements, which DD allows us //to disclude as handles. DD.addInvalidHandleType("a"); //Drag and Drop performs better when you use the dragOnly //setting for elements that can be moved but that don't //have any DD interactions with other page elements: DD.dragOnly = true;

Full source code

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

// Instantiate and render the menu when it is available in the DOM YAHOO.util.Event.onContentReady("productsandservices", function () { // To fully profile the Menu, we want to register all the Menu // and MenuItem constructors involved in Menu creation; for the // purposes of this example, we'll also profile Menu's use // of core YUI components like the Dom Collection and the // Event Utility: YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Menu"); YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuItem"); YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuManager"); YAHOO.tool.Profiler.registerConstructor("YAHOO.util.Config"); YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Module"); YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Overlay"); YAHOO.tool.Profiler.registerObject("YAHOO.util.Dom", true); YAHOO.tool.Profiler.registerObject("YAHOO.util.Event", true); // Instantiate ProfilerViewer, using its API to customize it a bit: var pv = new YAHOO.widget.ProfilerViewer("profiler", { base: "http://yui.yahooapis.com/2.7.0/build/", visible: false, //default is false; this means only the //ProfilerViewer launchbar will be displayed //on initial render, and the rest of the console //(including the DataTable and Chart) won't //be loaded and rendered until they're requested. //here, we're going to filter the displayed functions //and only show those that have been called at least once: filter: function(o) { return (o.calls > 0); }, showChart: true, //default is true //the chart can be hidden entirely by setting showChart to //false; you can also control the number of functions //measured in the chart to expand or reduce the real estate //it takes up on the page: maxChartFunctions:8, tableHeight:"25em", //default: 15em swfUrl:"http://yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf" }); //You can subscribe to "interesting moments" in the ProfilerViewer //just as you can with any other YUI component. Here, we'll use //the visibleChange event that accompanies any change to the PV //console's "visible" attribute. When made visible, we'll expand //the console to full width; when it's minimized, we'll reduce the //width of the launcher so that it takes up less screen real //estate: pv.subscribe("visibleChange", function(o) { //"this" is the ProfilerViewer instance; //this.get("element") is the top-level node containing //the ProfilerViewer console. var el = this.get("element"); //In this handler, the "visible" config property is //changing. If the new value is "true", the console //is becoming visible, so we'll make it wide. If the //new value is false, we'll make the launch bar skinny. var width = (o.newValue) ? "950px" : "300px"; YAHOO.util.Dom.setStyle(el, "width", width); }); //Here, we'll use Drag and Drop to make the ProfilerViewer //console draggable. var DD = new YAHOO.util.DD("profiler"); //ProfilerViewer's API gives you access to the key container //elements in the console. Here we'll use access to the //header element to make it a drag handle. pv.getHeadEl().id = "profilerHead"; DD.setHandleElId("profilerHead"); //The Buttons in the head should not be valid drag handles; //they are comprised of anchor elements, which DD allows us //to disclude as handles. DD.addInvalidHandleType("a"); //Drag and Drop performs better when you use the dragOnly //setting for elements that can be moved but that don't //have any DD interactions with other page elements: DD.dragOnly = true; // Instantiate the menu and corresponding submenus. The first argument passed // to the constructor is the id of the element in the DOM that represents // the menu; the second is an object literal representing a set of // configuration properties for the menu. var oMenu = new YAHOO.widget.Menu("productsandservices", { context: ["menutoggle", "tl", "tr"] }); // Call the "render" method with no arguments since the // markup for this Menu instance is already exists in the page. oMenu.render(); // Set focus to the Menu when it is made visible oMenu.subscribe("show", oMenu.focus); //Wire up the button to show the menu when clicked; YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu); });

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.