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:
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.
In instantiating ProfilerViewer, we'll use configuration attributes to:
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.
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.