Page Comparison

{div:class=floatRight}
[!fullPagePreviewUIO-small.png|border=1!|^fullPagePreviewUIO.png]
{div}

{div:class=component-api-page}
{span:class=small}Production Status: PREVIEW{span}
{excerpt-include:_UIO and UIE overview|nopanel=true}

The *Full Page (with Preview)* version of UI Options displays the UI Options controls in a standalone page, with a Preview pane that is updated as the user adjusts the controls.

*See Also*
[Tutorial - Full Page UI Options (with Preview)]
[UI Options Instructional Demos]
[Full Page UI Options]
[Fat Panel UI Options]
[UI Enhancer]

{include:_UIO new in 1.4}

{anchor:top}
{div2:class=summary-table}
||[#Creator]| {{[fluid.uiOptions.fullPreview(container, options)|#Creator]}} |
||Supported Events| _none_ |
||Methods| _none_ |
||[#Options]| {{[#prefix]}}\\
A relative path to templates.  |
||[#Configurable Subcomponents]|{{[#layoutControls]}}\\
The {{layoutControls}} subcomponent renders the controls for customizing the layout of the page.\\
\\
{{[#linksControls]}}\\
The {{linksControls}} subcomponent renders the controls for customizing the appearance of links on the page.\\
\\
{{[#preview]}}\\
The {{preview}} subcomponent is responsible for rendering the live preview.\\
\\
{{[#previewEnhancer]}}\\
The {{previewEnhancer}} subcomponent is the UI Enhancer for the preview.\\
\\
{{[#templateLoader]}}\\
The {{templateLoader}} subcomponent is responsible for fetching HTML templates for the various controls.\\
\\
{{[#textControls]}}\\
The {{textControls}} subcomponent renders the controls for customizing the appearance of text on the page.\\
\\
{{[#uiOptions]}}\\
The {{uiOptions}} subcomponent is responsible for the main rendering of the controls.|
{div2}

h2. Creator
{span:class=back-to-top}[back to top|#top]{span}

Use the following function to create a Full Page UI Options with Preview component:

{div2:class=api-table}
||Method| {{fluid.uiOptions.fullPreview(container, options);}} |
||Description| Instantiate a full-page version of the UI Options component, with a live Preview. |
||Parameters| _{{container}}_\\
A CSS-based selectors, single-element jQuery object, or DOM element that identifies the root DOM node where the UI Options interface should be placed.\\
\\
_{{options}}_
An optional data structure that configures the UI Options component, as described below. |
||Returns| The Full Page (with Preview) UI Options component |
||Examples| {code:javascript}var myUIO = fluid.uiOptions.fullPreview(#myContainer, {
    prefix: ".././components/uiOptions/html/"
});{code} |
||Notes|  |
||See also| [Full Page UI Options]\\
[Fat Panel UI Options] |
{div2}

h2. Options
{span:class=back-to-top}[back to top|#top]{span}
{include:_options intro}

{code:javascript}
var fullUIO = fluid.uiOptions.fullPreview(".myContainer", {
    <option1Name>: <option1value>,
    <option2Name>: <option2value>
    ...
}
});{code}


The options supported by Full Page UI Options (with Preview) are described below.

h3. prefix
{include:_UIO prefix option}

h2. Configurable Subcomponents

{include:_configurable subcomponents intro}

To learn about the specific options for each subcomponent, visit the default implementation's API page.

h3. layoutControls

{div2:class=api-table}
||Description| The {{layoutControls}} subcomponent renders the controls for customizing the layout of the page.|
||Default implementation| {{[fluid.uiOptions.layoutControls|Layout Controls]}} |
||Example| {code:javascript}
fluid.uiOptions.fullPreview(".myContainer", {
    layoutControls: {
        options: {
            listeners: {
                onUIOptionsRefresh: myRefreshListener
            }
        }
    }
});
{code} |
||See also|[Layout Controls] |
{div2}

h3. linksControls

{div2:class=api-table}
||Description| The {{linksControls}} subcomponent renders the controls for customizing the appearance of links on the page.|
||Default implementation| {{[fluid.uiOptions.linksControls|Links Controls]}} |
||Example| {code:javascript}
fluid.uiOptions.fullPreview(".myContainer", {
    linksControls: {
        options: {
            listeners: {
                onUIOptionsRefresh: myRefreshListener
            }
        }
    }
});
{code} |
||See also|[Links Controls] |
{div2}

h3. preview

{div2:class=api-table}
||Description| The {{preview}} subcomponent is responsible for rendering the live preview. |
||Default implementation| {{[fluid.uiOptions.preview|Preview]}} |
||Example| {code:javascript}
fluid.uiOptions.fullPreview(".myContainer", {
    preview: {
        options: {
            templateUrl: "../templates/CustomPreviewTemplate.html"
        }
    }
});
{code} |
||See also|[Preview] |
{div2}

h3. previewEnhancer

{div2:class=api-table}
||Description| The {{previewEnhancer}} subcomponent is the UI Enhancer that is applied to the preview. |
||Default implementation| {{[fluid.uiEnhancer|UI Enhancer]}} |
||Example| {code:javascript}
fluid.uiOptions.fullPreview(".myContainer", {
    previewEnhancer: {
        options: {
            classnameMap: {
                theme: {
                    "default": "site-theme"
                }
            }
        }
    }
});
{code} |
||See also|[UI Enhancer] |
{div2}

h3. templateLoader

{div2:class=api-table}
||Description| The {{templateLoader}} subcomponent is responsible for fetching HTML templates for the various controls. |
||Default implementation| {{[fluid.uiOptions.templateLoader|Template Loader]}} |
||Example| {code:javascript}
fluid.uiOptions.fullPreview(".myContainer", {
    templateLoader: {
        options: {
            templates: {
                linksControls: "../templates/CustomLinksTemplate.html"
            }
        }
    }
});
{code} |
||See also|[Template Loader] |
{div2}

h3. textControls

{div2:class=api-table}
||Description| The {{textControls}} subcomponent renders the controls for customizing the appearance of text on the page.|
||Default implementation| {{[fluid.uiOptions.textControls|Text Controls]}} |
||Example| {code:javascript}
fluid.uiOptions.fullPreview(".myContainer", {
    textControls: {
        options: {
            listeners: {
                onUIOptionsRefresh: myRefreshListener
            }
        }
    }
});
{code} |
||See also|[Text Controls] |
{div2}

h3. uiOptions

{div2:class=api-table}
||Description| The {{uiOptions}} subcomponent is responsible for the main rendering of the controls. |
||Default implementation| {{[fluid.uiOptions|UI Options]}} |
||Example| {code:javascript}
fluid.uiOptions.fullPreview(".myContainer", {
    uiOptions: {
        options: {
            autoSave: false
        }
    }
});
{code} |
||See also|[UI Options] |
{div2}

{div}