Multiple complex controls

**Joined:** Sun Jan 25, 2009 3:55 pm **Posts:** 4

I typical use case is to have multiple complex controls based on the YUI widgets.
I am trying to create a page with two date controls including synchronization with text input controls using http://developer.yahoo.com/yui/examples ... clean.html as the template.

Code:

       
           var oButton = new YAHOO.widget.Button({
                  type: "menu",
                  id: "calendarpicker",
                  label: "Choose A Date",
                  menu: oCalendarMenu,
                  container: "datefields" });

            var oButton2 = new YAHOO.widget.Button({
                                                type: "menu",
                                                id: "calendarpicker2",
                                                label: "Choose A Date",
                                                menu: oCalendarMenu2,
                                                container: "datefields2" });

Styling for CSS:

Code:

    
#calendarpicker button,  #calendarpicker2 button {

        background: url(css/button/calendar_icon.gif) center center no-repeat;
        text-align: left;
        text-indent: -10em;
        overflow: hidden;
        *margin-left: 10em; /* For IE */
        *padding: 0 3em;    /* For IE */
        white-space: nowrap;

    }

But this approach quickly gets very ugly, violating the DRY principle big time!
Skimming the docs in button.js, I don't spot anything in the html I can use for styling across conceptually similar buttons.
styling on id attribute selector like: button[id~=datepicker] doesn't work

Any tips out there for a better approach!?
Also when it comes to setting up all the event handlers etc. for each control it gets very "dirty"!. Yikes! :O

So far I have used some CSS attribute selectors with success...

Code:

    input[month], input[day] {

        width: 2em;

    }

    input[year] {

        width: 3em;

    }

   ...

            <label for="month-field">Month: </label> <input id="month-field" type="text" name="month" month>
            <label for="day-field">Day:</label> <input id="day-field" type="text" name="day" day>
            <label for="year-field">Year: </label> <input id="year-field" type="text" name="year" year>

I wish you would include some examples demonstrating useful patterns for having multiple complex controls on the same page. Perhaps this is better supported in 3.x ?

Re: Multiple complex controls **Posted:** Sun Jan 25, 2009 6:07 pm +0-

What about adding a class to the button when they are created?

Also, you can create a default method for certain events and have all the buttons reference the same method.

Does that make sense?

Example attached..

Button Example

Click here to see the revision history on this Gist.

**Joined:** Sun Jan 25, 2009 3:55 pm **Posts:** 4

Hi Dave,

I have solved the css issue, no problem. I am creating a custom taglib for YUI controls for use with the Grails (Groovy on Rails) framework. An example:

Code:

        out << "<script language='javascript'>\n"
        out << "function initPushButton_${buttonName}() {\n"
        out << "    var Button = YAHOO.widget.Button;\n"
        out << "    var oPushButton = new Button('pushbutton_${buttonName}', { onclick: { fn: onPushButton_${buttonName}_Click } });\n"
        out << "}\n"
   out << "YAHOO.util.Event.addListener(window, 'load', initPushButton_${buttonName});\n"
   out << "</script>\n"

I need a javascript call to each controls init function when the page has finished loading (or a container element).
I need something like this:

Code:

YAHOO.util.Event.addListener(window, 'load', initPushButton_${buttonName});

But I can't make it work.
I see this approach in the examples:

Code:

YAHOO.util.Event.onContentReady("radiobuttonsfrommarkup", function () { ...

But this is not really suitable for my use case.
Can I somehow dynamically add functions to be called to the onContentReady event handler for a given container?

Pseudo code:

Code:

YAHOO.util.Event.onContentReady("radiobuttonsfrommarkup").add(initPushButton_${buttonName})

**Joined:** Sun Jan 25, 2009 3:55 pm **Posts:** 4

Thanx for helping out

Sorry, the init call works on window load (must have been some other javascript bug sabotaging it b4)

I have another problem. I have a slider set up to be synchronized with two text input fields. It works in the direction from slider to input but not the other way around. I have problems adding an onblur or onchange handler to the inputs to update the slider to reflect the change.

Do I use Event.on(from, ... Event.on('slider1_from', ... or from.subscribe(... or sth. else entirely?
Nothing seems to work?
Is it better to add the handler directly on the input element in the markup!?

Code:

<script language='javascript'>
YAHOO.namespace("example.slider");
function initSlider_slider1() {
    ...
    from    = Dom.get('slider1_from'),
    to      = Dom.get('slider1_to');
    ...
    slider.subscribe('change',slider.updateHighlight,slider,true);
    slider.subscribe('ready', updateUI);
    slider.subscribe('ready', slider.updateHighlight);
    slider.subscribe('change', updateUI);

    var updateSlider = function () {
        alert('update');
        var sliderPos = new calcSliderPositions(from.value, to.value, cf, sliderRange.min);
        slider.setValues(sliderPos.min,sliderPos.max);
    }
    var Event = YAHOO.util.Event;    
    from[/b].subscribe('blur',updateSlider);
    Event.on(to.element,'change', updateSlider);
    Event.on(to,'change', updateSlider);
}
YAHOO.util.Event.addListener(window, 'load', initSlider_slider1);
</script>

Code:

<label>Level 
<input type='text' id='slider1_from' size='4' maxlength='4' value='' >  to  
<input type='text' id='slider1_to' size='4' maxlength='4' value=''></label>

<div id='slider1Container' class='yui-h-slider' title='Age'>
    <span id='slider1_highlight' class='slider-fill'></span>
    <div id='slider1_min_thumb' class='yui-slider-thumb'>
        <img border='0' src='/MyTestApp/images/l-thumb-round.gif' />     </div>
     <div id='slider1_max_thumb' class='yui-slider-thumb'>
        <img border='0' src='/MyTestApp/images/r-thumb-round.gif' />     </div>
</div>

Re: Multiple complex controls **Posted:** Tue Jan 27, 2009 6:53 am +0-

You should be able to do this:

Example

Click here to see the revision history on this Gist.

Forums