panel-form.mustache revision b314fc1188609ac757efdb7f61cc5882a070a5e7
3802a3d3d7af51ddff31943d5514382f01265770Lennart Poettering<div class="intro">
12b42c76672a66c2d4ea7212c14f8f1b5a62b78dTom Gundersen 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.
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek<div class="example newwindow">
5de0ccffcc4a5a946102a14e0b0e681d964e3225Zbigniew Jędrzejewski-Szmek <a href="panel-form-example.html" target="_blank" class="button">
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek View Example in New Window
5de0ccffcc4a5a946102a14e0b0e681d964e3225Zbigniew Jędrzejewski-Szmek<h2>Creating a modal form using Panels</h2>
5de0ccffcc4a5a946102a14e0b0e681d964e3225Zbigniew Jędrzejewski-Szmek<h3>Setting Up The YUI Instance</h3>
5de0ccffcc4a5a946102a14e0b0e681d964e3225Zbigniew Jędrzejewski-SzmekTo 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.
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-SzmekFor 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.
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-SzmekYUI().use("panel", "datatable-base", "dd-plugin", function (Y) {
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek // We'll write example code here where we have Y.Datatable, Y.Plugin.Drag and Y.Panel available
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-SzmekNote, 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.
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek<h3>Creating a Panel From Markup</h3>
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-SzmekFor 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.
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek<div id="panelContent">
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek <div class="yui3-widget-bd">
9d3e5d11bee9ab29a479e534622bb1b23daf9fabLennart Poettering <label for="id">ID</label><br/>
9d3e5d11bee9ab29a479e534622bb1b23daf9fabLennart Poettering <input type="text" name="id" id="productId" placeholder="">
9d3e5d11bee9ab29a479e534622bb1b23daf9fabLennart Poettering <label for="name">Name</label><br/>
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek <input type="text" name="name" id="name" value="" placeholder="">
9d3e5d11bee9ab29a479e534622bb1b23daf9fabLennart Poettering <label for="password">Price</label><br/>
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek <input type="text" name="price" id="price" value="" placeholder="$">
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-SzmekThe 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.
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek<h3>Instantiating the Parent Panel</h3>
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-SzmekTo 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.
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek srcNode : '#panelContent',
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek headerContent: 'Add A New Product',
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek centered : true,
9d3e5d11bee9ab29a479e534622bb1b23daf9fabLennart Poettering visible : false,
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek<h3>Adding Footer buttons to the Panel</h3>
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-SzmekThe 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.
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek value : 'Add Item',
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek action : function (e) {
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek value : 'Remove All Items',
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek action : function (e) {
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek removeAllItemsConfirm();
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek<h3>Creating the nested Panel through JavaScript</h3>
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-SzmekIn 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:
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmekvar nestedPanel = new Y.Panel({
9d3e5d11bee9ab29a479e534622bb1b23daf9fabLennart Poettering bodyContent: 'Are you sure you want to remove all items?',
9d3e5d11bee9ab29a479e534622bb1b23daf9fabLennart Poettering centered : true,
9d3e5d11bee9ab29a479e534622bb1b23daf9fabLennart Poettering render : '#nestedPanel',
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek action : function (e) {
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek action : function (e) {
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-SzmekIn 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.
71365a7754db5ff8e07941501063b1da2a4b4bd5Zbigniew Jędrzejewski-Szmek<h3>CSS: Panel Look/Feel</h3>
66f756d437658cc464bfb5647c97efd0cf77f933Jan EngelhardtThe 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.
9d3e5d11bee9ab29a479e534622bb1b23daf9fabLennart Poettering<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.
9d3e5d11bee9ab29a479e534622bb1b23daf9fabLennart Poettering<h3>Complete Example Source</h3>
9d3e5d11bee9ab29a479e534622bb1b23daf9fabLennart Poettering{{>panel-form-source}}