[Architecture] UIO integration questions

Cheetham, Anastasia acheetham at ocadu.ca
Tue Jan 15 13:31:07 EST 2013


Hi, Stoyan,

Thanks for your email. I just realized that we haven't been including the list on this discussion. I'm cc'ing them now, so that others can stay up-to-date on this work. [Most of the full thread is included at the bottom of this email, for people who want to catch up. My responses to the most recent email are inline here.]


On 2013-01-14, at 9:26 AM, Stoyan Dimitrov wrote:

> You will be able to see the current interface if you clone the branch PCP_UI and open the "index.html" file with a browser.

Ah, ok. I was trying to access the file through localhost, but now I see that straight file access works. Thanks.

> In fact, I don't need the UIEnhancer component (it is included, only because the UIOptions component can't be used without the Enhancer). Our task is just to use the good-looking fluid UI components (for example, the sliders). Because of that, I want to write a function that generate UI, according to the arguments we pass it( for example: Give me a slider, a textfield and then another slider).

Regarding UIEnhancer:
UIOptions uses UIEnhancer because the UIOptions interface itself must respond to the preferences (for example: if a user needs large font, the UIOptions interface will need to be displayed in large font, too).

Regarding customizing the controls that UIO presents:
I recommend working with UIO as-is to start, and focusing on getting the end-to-end persistence working with it. The persistence is pluggable: The default technique is based on browser cookies (see Store.js), but any other storage method can be substituted so long as it implements the basic fetch and save functionality. For example, we also define a temporary storage method that is sometimes used for testing and debugging. Both components are defined in Store.js, and you can see documentation for them here:

    http://wiki.fluidproject.org/display/docs/Cookie+Settings+Store
    http://wiki.fluidproject.org/display/docs/Temporary+Settings+Store

These two components can serve as a model for how to create a component for your persistence. I can work with you on that.

Once you've got the default UIO functioning, I can work with you to add additional 'panels' that can be used to for other controls. We already have experience with this, with our VideoPlayer component: We added a panel that controls preferences for captions, volume, etc. You'll need the latest version of Infusion for this, though: We made some modifications to the framework to support this customization.

You'll find the VideoPlayer code here:
    https://github.com/fluid-project/videoPlayer

The UIOptions developers are currently working on making UIOptions more modular, more easy to customize. As that work progresses, we can work on better configuring the UIO interface to suit the context.


> I suppose this can be done using the "Guidelines for building a custom preview", Step 5 from the link you sent me: http://wiki.fluidproject.org/display/fluid/Tutorial+-+UI+Options+and+UI+Enhancer , but I don't know how to implement such function.

Actually, those instructions are for something different than what you're working on; they're for implementing a preview functionality – a frame with a sample of a page that changes as the user adjust the preferences. You can see what I mean here, on the right side of the page:

    http://build.fluidproject.org/infusion/demos/uiOptions/html/uiOptionsFullWithPreview.html

>         Finnaly, in relation to the last question: Yes, I mean the default value of the "min-text-size".
> What I am trying is :
> /////////////////
> fluid.pageEnhancer({
>         tocTemplate: "infusion-1.4/components/tableOfContents/html/TableOfContents.html"
>         defaultSiteSettings:{textFont: "10",
>                                       textSize: "10"} 
>     }); 
> /////////////////
> 
> It is not working, maybe because fluid.pageEnhancer() is different from fluid.uiEnhancer(document, options);
> However, in my code, I don't use fluid.uiEnhancer and it is working. Maybe the default options are used. Where I can find these default options(for example defaultSiteSettings or classNameMap).

Oh, ok, first, let me clarify something: The text size that UIOptions sets is actually a multiplication factor, not an actual font size. It ranges from 1 to 2. The factor will be applied to whatever the font sizes on the page already are. Try setting "textSize" to 1.5 (for example) and see if that works.

You can see all the default values in Store.js, where "defaultSiteSettings", and you can see all the possible values in UIEnhancer.js, where "classnameMap" is defined.


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





On 2013-01-14, at 9:26 AM, Stoyan Dimitrov wrote:

> Hi, Anastasia.
>        Maybe, you want to see a working PCP. We still haven't such. You will be able to see the current interface if you clone the branch PCP_UI and open the "index.html" file with a browser.
> As you will probably see,  I use exactly the "FullNoPreviewUIOptions.html" file.
>         In fact, I don't need the UIEnhancer component (it is included, only because the UIOptions component can't be used without the Enhancer). Our task is just to use the good-looking fluid UI components (for example, the sliders). Because of that, I want to write a function that generate UI, according to the arguments we pass it( for example: Give me a slider, a textfield and then another slider). I suppose this can be done using the "Guidelines for building a custom preview", Step 5 from the link you sent me: http://wiki.fluidproject.org/display/fluid/Tutorial+-+UI+Options+and+UI+Enhancer , but I don't know how to implement such function. Another suggestion is to 
> I am sorry, If it is still incomprehensible.
>         Finnaly, in relation to the last question: Yes, I mean the default value of the "min-text-size".
> What I am trying is :
> /////////////////
> fluid.pageEnhancer({
>         tocTemplate: "infusion-1.4/components/tableOfContents/html/TableOfContents.html"
>         defaultSiteSettings:{textFont: "10",
>                                       textSize: "10"} 
>     }); 
> /////////////////
> 
> It is not working, maybe because fluid.pageEnhancer() is different from fluid.uiEnhancer(document, options);
> However, in my code, I don't use fluid.uiEnhancer and it is working. Maybe the default options are used. Where I can find these default options(for example defaultSiteSettings or classNameMap).
> 
> We will continue this conversation, for sure. :)
> Thanks, again.
> Stoyan
> 
> On Thu, Jan 10, 2013 at 5:53 PM, Cheetham, Anastasia <acheetham at ocadu.ca> wrote:
> 
> On 2013-01-10, at 10:10 AM, Stoyan Dimitrov wrote:
> 
> > As I wrote I make commits here: https://github.com/S-Dimitrov/universal/tree/PCP_UI/gpii/node_modules/personalControlPanel/src/content
> 
> Stoyan, thanks for the link. I've got the code, but I'm not able to actually bring up the PCP in my setup. Could you give me some guidance as to how to view it? I imagine I'll need to log in as someone? Do I need to visit a particular URL to open the PCP?
> 
> >  The file "index_old" contains a basic interface, without using UIO.  In this file there is one form, which send the information to our server (action="pcp/update")
> > The new "index.html" uses "infusion1.4/components/uiOptions/html/UIOptionsTemplate-text.html" file, which contains the same basic interface, as you can see. I want to send successfully the values from the UIO components, with the help of the same form, but I don't know how to get these values using fluid.
> > In summary- I want to know how to use forms together with UI Options.
> 
> The file "UIOptionsTemplate-text.html" is one of several template files that are designed to be used inside a base template. It is not really intended to be used alone. You should try using "FullNoPreviewUIOptions.html" instead.
> 
> This demo:
>     http://build.fluidproject.org/infusion/demos/uiOptions/html/uiOptionsFullWithoutPreview.html
> show the base template "FullNoPreviewUIOptions.html," populated with the three "sub-templates":
>   "UIOptionsTemplate-text.html"
>   "UIOptionsTemplate-layout.html"
>   "UIOptionsTemplate-links.html"
> I imagine that this template would be a good starting point for the PCP.
> 
> If you look at the file "FullNoPreviewUIOptions.html," you'll see that the controls are wrapped in a <form>, the way your original PCP worked. If you use this template, you should be able to send the info to the server the same way, by setting the action of the form.
> 
> 
> > is there an easy way to set the fluid components you want to include in the UI Options? I suppose the text-controls layout is generated in the file : "infusion1.4/components/uiOptions/js/UIOptions.js"
> > However, I can't find a way to access directly the list that.model.selection there.
> 
> I'm not quite sure I understand this question; Could you explain a bit what you're trying to do?
> 
> 
> > My third question is how to change the initial value of the input with the id="min-text-size"(in the UIOptionsTemplate-text.html file ) When I set the value attribute of this input manually, nothing is changed.
> 
> If by "initial value" you mean the defaults, these would be customized by passing new defaults to fluid.pageEnhancer() in index.html with the "defaultSiteSettings" option. This demo
>     http://wiki.fluidproject.org/display/docs/UI+Options+-+Custom+Default+Site+Settings
> shows an example of this. You can see the code by clicking on "See JavaScript details" under the demo frame.
> 
> If you weren't asking about setting the defaults, then I'm not quite sure what you meant :-)
> 
> 
> > Thanks a lot for the help!
> 
> No problem! I'm excited to be helping. It's going to be great to see this come together. Let's keep this conversation going.


More information about the Architecture mailing list