UIOptions Endgame

[Cheetham, Anastasia]

On 2011-07-21, at 1:37 AM, Antranig Basman wrote:

> My idea is that we would like to be able to see the ability for users to configure all of the functionality that is present, by means of supplying options directly to the component.


I've been writing customizations of UI Options for the documentation, so I'll comment on my experiences. FYI, I'm working with Cindy's 4317 branch version of the code.

The things I've tried *can* be done through the top-level options, technically – but only by drilling down into subcomponent options, which required full knowledge of the subcomponent tree. You can see the code in a branch of my instructional-demos github repo:

    https://github.com/acheetham/Infusion-Instructional-Demos/tree/FLUID-4317-refactoring/src/webapp/demos/instructional/uiOptions/html

Note that all these customizations can also be accomplished with demands blocks, and those blocks are present in the files, commented out, for comparison.

I've tried to imagine what things in integrator might likely want to change. This list might serve as the starting point of a list of options we need to surface more elegantly. I'm interested in comments on these customizations, and suggestions for other things that integrators might want to configure?


The highlights: (these snippets are all from the options argument to the main component creator function)

Sliding panel button text:
If you want to change the text on the sliding panel show/hide button, the options hierarchy isn't too bad:
components: {
    slidingPanel: {
        options: {
            strings: {
                             ...

Slider ranges:
If you want to customize the min and max valued of the sliders
components: {
    uiOptionsLoader: {
        options: {
            components: {
                uiOptions: {
                    options: {
                        textSize: {
                             min: ...

Event listeners:
If you want to provide a listener for an event, say, the uiOptions onSave event
components: {
    uiOptionsLoader: {
        options: {
            components: {
                uiOptions: {
                    options: {
                        listeners: {
                            onSave: function(){
                             ...


Custom path to preview template:
If you want to provide a custom templateUrl for the preview
components: {
    uiOptionsLoader: {
        options: {
            components: {
                uiOptions: {
                    options: {
                        components: {
                            preview: {
                                options: {
                                    templateUrl: "../templates/CustomPreview.html"
                             ...

Adding items to the dropdown menus (e.g. another font family, or another theme):
components: {
    uiOptionsLoader: {
        options: {
            components: {
                uiOptions: {
                    options: {
                        components: {
                            textControls: {
                                options: {
                                    strings: {
                             ...




-- 
Anastasia Cheetham     Inclusive Design Research Centre
acheetham at ocad.ca            Inclusive Design Institute
                                        OCAD University