Controls (in progress)

available controls in M 3.0.1 CE:

fckEdit
edit
richEdit
tab
buttonSet
button
static
file
link
date
radio
checkbox
checkboxSwitch
select
password
include
hidden
muliselect
uuidLink

sf.net > Documentation > Templating > Controls

Creating your own controls with DialogInclude

The control at /modules/adminInterface/controls/include will include a JSP. The controls content node class refers to info.magnolia.cms.gui.dialog.DialogInclude which uses the Servlet API's standard 'requestDispatcher.include(request,response)' to integrate a JSP in to a Magnolia Dialog. The CE samples module defines a dialog, /samples/dialogs/samples-devshow-include, that demonstrates how this control can be used. For a dialog to use the control it needs to define a content node named controlType with a value of 'include' and another named file whose value is the location of the JSP to be included. If the JSP requires other configuration information they can also be defined as arbitrary content nodes whose values can be subsequently accessed by the JSP.

The Magnolia dialog architecture revolves around the info.magnolia.cms.gui.dialog.DialogControlImpl class. This implements info.magnolia.cms.gui.dialog.DialogControl interface which requires two methods to be implemented; an 'init()' and a 'drawHtml()'; The basic premise being that a control will be provided with request, response, content and configuration repository information when it is created. And write out a HTML snippet to the response when requested. This way various controls can be created and chained together to build a HTML response that will constitute a complete dialog. There are numerous subclasses of DialogControlImpl that produce control output for various specialized tasks. All the infrastructure code needed for a DialogInclude can be ontained from DialogControlImpl.

A info.magnolia.cms.gui.dialog.DialogControlImpl object provides the JSP with a means to access any content nodes containing configuration information. The DialogControlImpl object is made available in the standard request scope for the JSP. You can access configuration node values,(from the config repository), with '.getConfigValue("configuration_property")'. You can access the content repository node,(from the website repository), that this dialog pertains to using 'getWebsiteNode()'.

The following JSP snippets are from the colorSelector.jsp in the CE samples module:

<!-- import the required classes with the page directive -->
    <jsp:directive.page import="info.magnolia.cms.gui.dialog.DialogControlImpl" />
    <jsp:directive.page import="info.magnolia.cms.gui.misc.CssConstants" />
    <jsp:directive.page import="info.magnolia.cms.gui.control.Edit" />

    <table cellpadding="0" cellspacing="2" border="0" height="60">
        <tr>

        <jsp:scriptlet>

	<!-- Get a reference to the DialogControlImpl object, get some config values, do something.. -->

    DialogControlImpl control=(DialogControlImpl) pageContext.getRequest().getAttribute("dialogObject");

    //access all the values of the dialog definition with getConfigValue
    String colorStart=control.getConfigValue("colorStart");
    String colorOffset=control.getConfigValue("colorOffset");

    int start=Integer.parseInt(colorStart,16);
    int offset=Integer.parseInt(colorOffset,16);

    for (int i=start;i>0;i-=offset) {

        String color=Integer.toHexString(i);
        while(6>color.length()) {
            color="0"+color;
        }
        pageContext.setAttribute("color", color);
        </jsp:scriptlet>

            <td style="background-color:#$\{color};width:60px;"
                onclick="document.getElementById('${dialogObject.name}').value='$\{color}'">&amp;nbsp;</td>
            <jsp:scriptlet>
    }
    </jsp:scriptlet>
        </tr>
    </table>
    <br />
    Selected value:
    <br />


    <!-- here an Edit control creates the form input element for the content node being edited -->
    <jsp:scriptlet>

    Edit editControl=new Edit(control.getName(),control.getWebsiteNode());
    editControl.setCssClass(CssConstants.CSSCLASS_EDIT);
    editControl.setCssStyles("width","60");
    out.println(editControl.getHtml());

    </jsp:scriptlet>

Summary

To introduce you own control you can use the control type include in a dialog definition and provide a content data node named file with a JSP filename as a value. This JSP will be a control to input,or edit, a single content data node in the content node on which the dialog refers. The DialogControlImpl object is made available in the request scope and can be used to get references to information about the dialogs context; content and configuration data. The edit control produces the HTML required to represent the value in the dialogs HTML form.

In its previous incarnation on JspWiki, this page was last edited on Sep 17, 2007 7:33:43 PM by Interition
Other known authors include :

Olli