panel-form.mustache revision b314fc1188609ac757efdb7f61cc5882a070a5e7
84765788c559bfdead67172a79759ac60c77231bTilo Mitra<div class="intro">
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo <p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo This example demonstrates how to set up and instantiate Y.Panel to take advantage of its nested modality and header/footer button support. In this example, we create a simple datatable with some basic information that is updated and removed through a modal form with some custom buttons.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo </p>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra</div>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
163214f6685497247d57aa5ea96fb233b3785fcfTilo Mitra<div class="example newwindow">
163214f6685497247d57aa5ea96fb233b3785fcfTilo Mitra <a href="panel-form-example.html" target="_blank" class="button">
163214f6685497247d57aa5ea96fb233b3785fcfTilo Mitra View Example in New Window
163214f6685497247d57aa5ea96fb233b3785fcfTilo Mitra </a>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra</div>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
84765788c559bfdead67172a79759ac60c77231bTilo Mitra<h2>Creating a modal form using Panels</h2>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
84765788c559bfdead67172a79759ac60c77231bTilo Mitra<h3>Setting Up The YUI Instance</h3>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloTo create an instance of a Panel on your page, the only module you need to request is the `panel` module. The `panel` module will pull in the `widget`, `widget-stack`, `widget-position`, `widget-position-align`, `widget-position-constrain`, `widget-stdmod`, `widget-buttons`, `widget-modality` and `widget-autohide` extensions it uses.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloFor this example, we also use the YUI3 Datatable, and the Drag plugin to make the panels draggable. This requires us to also request the `datatable-base` and `dd-plugin` modules in our use statement.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo```javascript
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloYUI().use("panel", "datatable-base", "dd-plugin", function (Y) {
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo // We'll write example code here where we have Y.Datatable, Y.Plugin.Drag and Y.Panel available
84765788c559bfdead67172a79759ac60c77231bTilo Mitra});
84765788c559bfdead67172a79759ac60c77231bTilo Mitra```
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloNote, using the `panel` module, will also pull down the default CSS required for panel. The CSS that styles the Panel requires you to have the class `yui3-skin-sam` on a parent element, commonly the `<body>` tag.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
84765788c559bfdead67172a79759ac60c77231bTilo Mitra<h3>Creating a Panel From Markup</h3>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloFor this example, we'll need two panel instances. The first will be created through markup, while the second will be created through JavaScript (just to illustrate the differences). The code snippet below is the markup for our modal form. It consists of a fieldset with a couple of `<input>` boxes. The `yui3-widget-bd` class is not required, but tells the Panel that this content goes in the body of the widget.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo```html
84765788c559bfdead67172a79759ac60c77231bTilo Mitra<div id="panelContent">
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo <div class="yui3-widget-bd">
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo <form>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo <fieldset>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo <p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo <label for="id">ID</label><br/>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo <input type="text" name="id" id="productId" placeholder="">
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo </p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo <p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo <label for="name">Name</label><br/>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo <input type="text" name="name" id="name" value="" placeholder="">
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo </p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo <p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo <label for="password">Price</label><br/>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo <input type="text" name="price" id="price" value="" placeholder="$">
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo </p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo </fieldset>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo </form>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo </div>
13c767706e26db4b194b9bfb1ee1434e7893a86fRyuichi Okumura</div>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra```
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloThe container DIV with id="panelContent" is specified as the contentBox for the Panel instance, and during instantiation, the panel will look for DIV's marked with the `yui3-widget-hd, yui3-widget-bd, yui3-widget-ft` classes to setup the Overlay's header, body and footer content attributes.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
84765788c559bfdead67172a79759ac60c77231bTilo Mitra<h3>Instantiating the Parent Panel</h3>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloTo create a panel instance, we use the panel constructor `Y.Panel`. We can pass in some additional configuration attributes such as `modal`, `headerContent`, and `centered`. We can make the panel draggable by adding the `Y.Plugin.Drag` plugin.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo```javascript
84765788c559bfdead67172a79759ac60c77231bTilo Mitravar panel = new Y.Panel({
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo srcNode : '#panelContent',
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo headerContent: 'Add A New Product',
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo width : 250,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo zIndex : 5,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo centered : true,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo modal : true,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo visible : false,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo render : true,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo plugins : [Y.Plugin.Drag]
84765788c559bfdead67172a79759ac60c77231bTilo Mitra});
84765788c559bfdead67172a79759ac60c77231bTilo Mitra```
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
84765788c559bfdead67172a79759ac60c77231bTilo Mitra<h3>Adding Footer buttons to the Panel</h3>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloThe parent panel has two buttons in the footer, "Add Item" and "Remove All Items". We add these buttons through the `addButton()` method present on the Y.Panel instance. For each button, we specify an `action` function, which will be called when the button is clicked, and a `section` property that specifies whether it should get rendered in the header or the footer.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo```javascript
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolopanel.addButton({
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo value : 'Add Item',
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo section: Y.WidgetStdMod.FOOTER,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo action : function (e) {
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo e.preventDefault();
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo addItem();
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo }
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo});
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolopanel.addButton({
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo value : 'Remove All Items',
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo section: Y.WidgetStdMod.FOOTER,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo action : function (e) {
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo e.preventDefault();
84765788c559bfdead67172a79759ac60c77231bTilo Mitra removeAllItemsConfirm();
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo }
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo});
84765788c559bfdead67172a79759ac60c77231bTilo Mitra```
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
84765788c559bfdead67172a79759ac60c77231bTilo Mitra<h3>Creating the nested Panel through JavaScript</h3>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloIn the example, clicking the "Remove all items" button renders a nested confirmation panel. Since Y.Panel implements the `Y.WidgetStack` and `Y.WidgetModality` extensions, creating nested panels are easy to do for the developer. The nested panel code is as follows:
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
84765788c559bfdead67172a79759ac60c77231bTilo Mitra```
84765788c559bfdead67172a79759ac60c77231bTilo Mitravar nestedPanel = new Y.Panel({
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo bodyContent: 'Are you sure you want to remove all items?',
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo width : 400,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo zIndex : 6,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo centered : true,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo modal : true,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo render : '#nestedPanel',
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo buttons: [
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo {
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo value : 'Yes',
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo section: Y.WidgetStdMod.FOOTER,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo action : function (e) {
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo e.preventDefault();
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo nestedPanel.hide();
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo panel.hide();
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo removeItems();
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo }
84765788c559bfdead67172a79759ac60c77231bTilo Mitra },
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo {
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo value : 'No',
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo section: Y.WidgetStdMod.FOOTER,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo action : function (e) {
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo e.preventDefault();
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo nestedPanel.hide();
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo }
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo }
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo ]
84765788c559bfdead67172a79759ac60c77231bTilo Mitra});
84765788c559bfdead67172a79759ac60c77231bTilo Mitra```
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
84765788c559bfdead67172a79759ac60c77231bTilo Mitra<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloIn this case, we pass in an array of buttons to the `buttons` attribute. As a result, the nested panel does not have the close button in the top-right corner.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
84765788c559bfdead67172a79759ac60c77231bTilo Mitra<h3>CSS: Panel Look/Feel</h3>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloThe panel.css Sam Skin file (build/panel/assets/skins/sam/panel.css) provides the default functional CSS for the panel. In addition, an image file (build/panel/assets/skins/sam/sprite_icons.gif) provides the icons for the "close" button.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<strong>NOTE:</strong> As discussed on the Widget landing page, all widgets are enclosed in two containing elements - the `boundingBox` is the outer(most) element, and the `contentBox` is the inner element into which the widget's content is added. It is advised to apply any look/feel CSS for the widget to the content box and it's children. This leaves the bounding box without padding/borders, allowing for consistent positioning/sizing across box models.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
8f0dc35284b10842ef7c44ffc3d410227804fcedTilo Mitra<h3>Complete Example Source</h3>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo```
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo{{>panel-form-source}}
84765788c559bfdead67172a79759ac60c77231bTilo Mitra```