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:
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.
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:
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: |
6 | YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Menu"); |
7 | YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuItem"); |
8 | YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.MenuManager"); |
9 | YAHOO.tool.Profiler.registerConstructor("YAHOO.util.Config"); |
10 | YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Module"); |
11 | YAHOO.tool.Profiler.registerConstructor("YAHOO.widget.Overlay"); |
12 | YAHOO.tool.Profiler.registerObject("YAHOO.util.Dom", true); |
13 | YAHOO.tool.Profiler.registerObject("YAHOO.util.Event", true); |
view plain | print | ? |
In instantiating ProfilerViewer, we'll use configuration attributes to:
1 | // Instantiate ProfilerViewer, using its API to customize it a bit: |
2 | var 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 | ? |
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: |
8 | pv.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 | ? |
getHeadEl()
method to provide a drag handle for the draggable consoleTo 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. |
3 | var 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. |
8 | pv.getHeadEl().id = "profilerHead"; |
9 | DD.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. |
14 | DD.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: |
19 | DD.dragOnly = true; |
view plain | print | ? |
The full JavaScript source code for this example is as follows:
1 | // Instantiate and render the menu when it is available in the DOM |
2 | YAHOO.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 | ? |
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