Skip to main content
Kinetic Community

KD.library.util.PanelBuilder

 

This utility provides a simple to use strategy for building up YUI panels (see screenshots for examples).  The KD.library.util.PanelBuilder is a very small, basic wrapper for the YUI container widget.  The code within this library can easily be copied into a Kinetic Request service item or other web application when direct YUI widget interaction is desired.

 
The PanelBuilder utilities automates the following:
  • Applies the yui-skin-sam css class to the body element (required to utilize the YUI container css; IE things like the page masking of a dialog) on load of the page.

  • Defaults many of the common options used to generate panels/dialogs.

  • Stores a reference to each panel so that future calls to the same panel element refresh the content without rebuilding the actual container elements.

Requirements

  • YUI DOM Event Library
  • YUI DragDrop Library (only when configuring panels/dialogs to be draggable)

  • YUI Container Library
  • YUI Container CSS
 
Sample Javascript Dependencies Section
<!-- Include the YUI dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/container/container-min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/container/assets/skins/sam/container.css">
 
Sample Javascript Dependencies Section (From Kinetic Request)
<!-- Include the YUI dependencies -->
<script type="text/javascript" src="/kinetic/resources/js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/kinetic/resources/js/yui/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="/kinetic/resources/js/yui/build/container/container-min.js"></script>
<link rel="stylesheet" type="text/css" href="/kinetic/resources/js/yui/build/container/assets/skins/sam/container.css">

Example Usage

KD.library.util.PanelBuilder.renderPanel(
  // PanelBuilder options
  {
    // Required parameter; this needs to be a valid element Id or the panel will not display
    containerId: 'panelContainer',
    // Required parameter;
    panelId: 'modalPanel',
    // Optional parameter; this sets the header of the panel.
    panelHeader: "Modal Panel",
    // Optional parameter;
    panelBody: "Go <a href="http://www.google.com">Google</a>!",
    // Optional parameter;
    panelFooter: "This is a panel footer!",
    // Optional parameter; this sets the type of panel to use, which can be any subclass of YAHOO.widget.Panel.
    //   YAHOO.widget.Dialog is handy to automatically create buttons (see http://developer.yahoo.com/yui/container/dialog/)
    //   YAHOO.widget.ResizePanel is a custom developed YUI Panel extension in the resorces/js/extensions directory of Kinetic Request.
    panelClass: YAHOO.widget.ResizePanel
  },
  // YAHOO.widget.Panel configuration options (merged with defaults and passed directly to the panel object constructor)
  {modal: true}
);

Sample

Attached to this page is a sample implementation of KD.library.util.PanelBuilder.  To run the sample, copy the panel-builder.js file and the panelBuilderSample.html file to the same directory on your local machine and open the panelBuilderSample.html file within the browser of your choice.  Below is a screenshot of the sample.