Versions Compared

Old Version 1

changes.mady.by.user Anastasia Cheetham

Saved on

compared with

New Version Current

changes.mady.by.user Anastasia Cheetham

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

{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]| {{[

Div
classcomponent-api-page
Wiki Markup
Span
classsmall
Production Status: PREVIEW

Insert excerpt
_UIO and UIE overview
_UIO and UIE overview
nopaneltrue

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 Page
_UIO new in 1.4
_UIO new in 1.4

Anchor
top
top

Div
classsummary-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| {{

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.

Creator

Span
classback-to-top
back to top

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

Div
classapi-table

Method

fluid.uiOptions.fullPreview(container,

options);

}} | ||Description| Instantiate a

Description

Instantiate a full-page

version

of

the

UI

Options

component,

with

a

live

Preview.

| ||Parameters| _{{container}}_\\ A

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}



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 Block
javascript
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=
Notes
 
See also
 Full Page UI Options
 Fat Panel UI Options 
Options
 Span
classback-to-top
}[
back 
 
 to 
 top|#top]{span}
{include:_options intro}

{code:javascript}
top
 Include Page
_options intro
_options intro
 Code Block
javascript
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}
The options supported by Full Page UI Options (with Preview) are described below.
prefix
 Include Page
_UIO prefix option
_UIO prefix option
Configurable Subcomponents
 Include Page
_configurable subcomponents intro
_configurable subcomponents intro
To learn about the specific options for each subcomponent, visit the default implementation's API page.
layoutControls
 Div
classapi-table
Description
 The layoutControls subcomponent renders the controls for customizing the layout of the page.
Default implementation
 fluid.uiOptions.layoutControls 
Example
 Code Block
javascript
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}
See also
Layout Controls 
linksControls
 Div
classapi-table
Description
 The linksControls subcomponent renders the controls for customizing the appearance of links on the page.
Default implementation
 fluid.uiOptions.linksControls 
Example
 Code Block
javascript
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}
See also
Links Controls 
preview
 Div
classapi-table
Description
 The preview subcomponent is responsible for rendering the live preview. 
Default implementation
 fluid.uiOptions.preview 
Example
 Code Block
javascript
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}
See also
Preview 
previewEnhancer
 Div
classapi-table
Description
 The previewEnhancer subcomponent is the UI Enhancer that is applied to the preview. 
Default implementation
 fluid.uiEnhancer 
Example
 Code Block
javascript
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}
See also
UI Enhancer 
templateLoader
 Div
classapi-table
Description
 The templateLoader subcomponent is responsible for fetching HTML templates for the various controls. 
Default implementation
 fluid.uiOptions.templateLoader 
Example
 Code Block
javascript
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}
See also
Template Loader 
textControls
 Div
classapi-table
Description
 The textControls subcomponent renders the controls for customizing the appearance of text on the page.
Default implementation
 fluid.uiOptions.textControls 
Example
 Code Block
javascript
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}
See also
Text Controls 
uiOptions
 Div
classapi-table
Description
 The uiOptions subcomponent is responsible for the main rendering of the controls. 
Default implementation
 fluid.uiOptions 
Example
 Code Block
javascript
javascript

fluid.uiOptions.fullPreview(".myContainer", {
    uiOptions: {
        options: {
            autoSave: false
        }
    }
});

{code} |
||See also|[UI Options] |
{div2}


See also
UI Options