checkbox group problems

Hi
I am having trouble getting a checkbox group to work.
When the XForm loads up all checkboxes are ticked. When I uncheck even one of them all the checkbox get unchecked.

I would like to have the following behaviour:
1) I should be able to select 1 or 2 or 3 or 4 or 5 of  5 checkboxes in the checkbox group.
2) They are not mutually exclusive.


This is my code for the checkbox:

Instance:

<fe:select_one_of_five_a_info_check_boxes>
                                                <fe:a_info_choice>
                                                        <fe:tickOrNoTick>Y</fe:tickOrNoTick>
                                                        <fe:identifier>Source has given information in the past which has led to arrest and/or conviction:</fe:identifier>
                                                </fe:a_info_choice>       
                                                <fe:a_info_choice>
                                                        <fe:tickOrNoTick>Y</fe:tickOrNoTick>
                                                        <fe:identifier>Source 1</fe:identifier>
                                                </fe:a_info_choice>
                                                <fe:a_info_choice>
                                                        <fe:tickOrNoTick>Y</fe:tickOrNoTick>
                                                        <fe:identifier>Source 2</fe:identifier>
                                                </fe:a_info_choice>
                                                <fe:a_info_choice>
                                                        <fe:tickOrNoTick>Y</fe:tickOrNoTick>
                                                        <fe:identifier>Source 3</fe:identifier>
                                                </fe:a_info_choice>
                                                <fe:a_info_choice>
                                                        <fe:tickOrNoTick>Y</fe:tickOrNoTick>
                                                        <fe:identifier>Source 4</fe:identifier>
                                                </fe:a_info_choice>
                                        </fe:select_one_of_five_a_info_check_boxes>

-------------------



<xhtml:tr>
        <xhtml:td class="form-td">
             <xhtml:div style="background-color:#CCCCCC">
  <xforms:select appearance="full" id="control-id-a-info" ref="instance('taskoutput')/fe:select_one_of_five_a_info_check_boxes">
                <xforms:itemset nodeset="fe:a_info_choice">
                                                                                                                                                                          <xforms:label ref="fe:identifier"/> 
                                                                                                                                                                       <xforms:value ref="fe:tickOrNoTick"/>
                                                                                                                                                           </xforms:itemset>
</xforms:select>
</xhtml:div> 
</xhtml:td>       
</xhtml:tr>       


---------
Thanks in advance.

hi ilan,
(...)

It seems that you're mixing up boolean inputs with the contruction of a
select control. The user selection doesn't change the value of the
selected choice, as it would be the case when selecting / unselecting a
boolean-value checkbox. Instead, it tries to write the value of the
selected choice into the referenced instance element. This won't work if
you use the same value for all your choices. Instead, you will have to
use individual values so in a later phase of processing the selection
could get identified.

Because only the referenced element should be changed, there's no need
to include the choices into the instance that will finally get
submitted. You could either put the choices into the xforms control as
demonstrated in the docs [1] or the xforms specs [2], or you can put
them into an additional "control" instance (as in the xforms controls
example [3]). The second (example) way has the advantage that you could
load the choices dynamically from a database or a file and reference
them from different controls.

Both the doc and the W3 specification also includes a xforms:choices
element, but i suppose this isn't mandatory if there's only one level of
choices (no nesting of choices into others parallel to HTML optgroup).

[1] http://www.orbeon.com/ops/doc/reference-xforms-ng#xforms-controls-list
[2] http://www.w3.org/TR/2007/REC-xforms-20071029/#ui-selectMany
[3] http://www.orbeon.com/ops/source-viewer/xforms-controls/


HTH
florian



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Hi Florian
Thanks for your detailed. I rewrote my code yesterday after I submitted my question to the list and it seems to work.

I gave up on the boolean inputs just as you suggested. And the I created the below instance (the 'control' instance?)

<xforms:instance id="affidavit_info_checks_box_group">
                        <fe:select_one_of_five_affidavit_info_check_boxes>
                            <fe:affidavit_info_choice>
                            <fe:tickOrNoTick></fe:tickOrNoTick>
                            <fe:identifier>Source 1.</fe:identifier>
                        </fe:affidavit_info_choice>   
                        <fe:affidavit_info_choice>
                            <fe:tickOrNoTick/>
                            <fe:identifier>Source 2 <fe:identifier/>
                        </fe:affidavit_info_choice>
                        <fe:affidavit_info_choice>
                            <fe:tickOrNoTick/>
                            <fe:identifier>Source 3</fe:identifier/>
                        </fe:affidavit_info_choice>
                     
                    </fe:select_one_of_five_affidavit_info_check_boxes>    

In a separate instance I created a similar element as below:
<fe:select_one_of_five_affidavit_info_check_boxes/>  

I then used these elements in my select box.

It works. Now when you explain things so clearly, I understand what I had been doing wrong.



The problem I face now is: I need to have a clear space between the checkbox and its label.

What are your suggestions on that?

thanks
ilango

Florian Schmitt <[hidden email]> wrote:

hi ilan,

> This is my code for the checkbox:
>
> Instance:
>
>
>
> Y
> Source has given information in the past which has led
> to arrest and/or conviction:
>

(...)

It seems that you're mixing up boolean inputs with the contruction of a
select control. The user selection doesn't change the value of the
selected choice, as it would be the case when selecting / unselecting a
boolean-value checkbox. Instead, it tries to write the value of the
selected choice into the referenced instance element. This won't work if
you use the same value for all your choices. Instead, you will have to
use individual values so in a later phase of processing the selection
could get identified.

Because only the referenced element should be changed, there's no need
to include the choices into the instance that will finally get
submitted. You could either put the choices into the xforms control as
demonstrated in the docs [1] or the xforms specs [2], or you can put
them into an additional "control" instance (as in the xforms controls
example [3]). The second (example) way has the advantage that you could
load the choices dynamically from a database or a file and reference
them from different controls.

Both the doc and the W3 specification also includes a xforms:choices
element, but i suppose this isn't mandatory if there's only one level of
choices (no nesting of choices into others parallel to HTML optgroup).

[1] http://www.orbeon.com/ops/doc/reference-xforms-ng#xforms-controls-list
[2] http://www.w3.org/TR/2007/REC-xforms-20071029/#ui-selectMany
[3] http://www.orbeon.com/ops/source-viewer/xforms-controls/


HTH
florian


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

---

OMG, Sweet deal for Yahoo! users/friends: Get A Month of Blockbuster Total Access, No Cost. W00t

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

hi ilan,

> The problem I face now is: I need to have a clear space between the
> checkbox and its label.
>
> What are your suggestions on that?

You could use CSS to style the label. For example, if you add a class
sttribute to the xforms:select,

<xforms:select ref="flavor" appearance="full" navindex="8"
class="spaced-labels">
     <xforms:label class="fixed-width">Flavor:</xforms:label>
     <xforms:itemset nodeset="instance('flavors-instance')/flavor">
         <xforms:label ref="label"/>
         <xforms:value ref="@value"/>
     </xforms:itemset>
</xforms:select>

the following code is the result:

<span id="xforms-element-120" class="spaced-labels xforms-control
xforms-select xforms-incremental xforms-select-appearance-full">
     <span>
         <input id="xforms-element-120-opsitem0"
name="xforms-element-120" value="v" checked="checked" tabindex="8"
type="checkbox">
         <label for="xforms-element-120-opsitem0">
             Vanilla
         </label>
     </span>
     <span>
         <input id="xforms-element-120-opsitem1"
name="xforms-element-120" value="s" type="checkbox">
         <label for="xforms-element-120-opsitem1">
             Strawberry
         </label>
     </span>
     <span>
         <input id="xforms-element-120-opsitem2"
name="xforms-element-120" value="c" checked="checked" type="checkbox">
         <label for="xforms-element-120-opsitem2">
             Chocolate
         </label>
     </span>
</span>
<span id="xforms-select-template-xforms-element-120"
class="xforms-select-template">
     <span>
         <input id="xforms-element-120-opsitem$xforms-item-index$"
name="xforms-element-120" value="$xforms-template-value$" type="checkbox">
         <label for="xforms-element-120-opsitem$xforms-item-index$">
             $xforms-template-label$
         </label>
     </span>
</span>


So you could define a CSS rule for the labels inside elements with
class="spaced-label":

.spaced-labels label { color:lightgreen; background-color:gray;
padding-left:5em; padding-right:4em; }

(looks ugly, but only to demontstrate the effect).

The code above is from the xforms-controls example, again.

HTH
florian



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

I tried your suggestions. But it did not work.
Perhaps it is because I am not doing something right.

fs(ops-users) wrote

hi ilan,

> The problem I face now is: I need to have a clear space between the
> checkbox and its label.
>
> What are your suggestions on that?

You could use CSS to style the label. For example, if you add a class
sttribute to the xforms:select,

<xforms:select ref="flavor" appearance="full" navindex="8"
class="spaced-labels">
     <xforms:label class="fixed-width">Flavor:</xforms:label>
     <xforms:itemset nodeset="instance('flavors-instance')/flavor">
         <xforms:label ref="label"/>
         <xforms:value ref="@value"/>
     </xforms:itemset>
</xforms:select>

the following code is the result:


     
         <input id="xforms-element-120-opsitem0"
name="xforms-element-120" value="v" checked="checked" tabindex="8"
type="checkbox">
         <label for="xforms-element-120-opsitem0">
             Vanilla
         </label>
     
     
         <input id="xforms-element-120-opsitem1"
name="xforms-element-120" value="s" type="checkbox">
         <label for="xforms-element-120-opsitem1">
             Strawberry
         </label>
     
     
         <input id="xforms-element-120-opsitem2"
name="xforms-element-120" value="c" checked="checked" type="checkbox">
         <label for="xforms-element-120-opsitem2">
             Chocolate
         </label>
     


     
         <input id="xforms-element-120-opsitem$xforms-item-index$"
name="xforms-element-120" value="$xforms-template-value$" type="checkbox">
         <label for="xforms-element-120-opsitem$xforms-item-index$">
             $xforms-template-label$
         </label>
     



So you could define a CSS rule for the labels inside elements with
class="spaced-label":

.spaced-labels label { color:lightgreen; background-color:gray;
padding-left:5em; padding-right:4em; }

(looks ugly, but only to demontstrate the effect).

The code above is from the xforms-controls example, again.

HTH
florian



--
You receive this message as a subscriber of the ops-users@ow2.org mailing list.
To unsubscribe: mailto:ops-users-unsubscribe@ow2.org
For general help: mailto:sympa@ow2.org?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

hi ilan,

> I tried your suggestions. But it did not work.
> Perhaps it is because I am not doing something right.

hmm - strange - adding the changes as described to the xforms-control example
will change the formatting of the labels. Maybe you could check using the
Firebug Add-on how the resulting html code looks like and which styles are
applied to the different controls?

florian



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Hi
This is what I got from FireBug.

 Hi Florian
This is what I got back from FireBug

<div>
       
           
                        <input id="control-id-affidavit-info-opsitem0" name="control-id-affidavit-info" value="" checked="checked" tabindex="9" type="checkbox">
                                <label for="control-id-affidavit-info-opsitem0">Source 1</label>
                       
                       
                                <input id="control-id-affidavit-info-opsitem1" name="control-id-affidavit-info" value="" checked="checked" type="checkbox">
                                <label for="control-id-affidavit-info-opsitem1">Source 2</label>
                       
                       
                                <input id="control-id-affidavit-info-opsitem2" name="control-id-affidavit-info" value="" checked="checked" type="checkbox">
                                <label for="control-id-affidavit-info-opsitem2">Source 3</label>
                       
                       
                                <input id="control-id-affidavit-info-opsitem3" name="control-id-affidavit-info" value="" checked="checked" type="checkbox">
                                <label for="control-id-affidavit-info-opsitem3">Source 4</label>
                       
                        <input id="control-id-affidavit-info-opsitem4" name="control-id-affidavit-info" value="" checked="checked" type="checkbox">
                                <label for="control-id-affidavit-info-opsitem4">Source 5</label>
                       
       
       
       
                <input id="control-id-affidavit-info-opsitem$xforms-item-index$" name="control-id-affidavit-info" value="$xforms-template-value$" type="checkbox">
                <label for="control-id-affidavit-info-opsitem$xforms-item-index$">$xforms-template-label$</label>
       
        <label class="xforms-alert-active xforms-alert" for="control-id-affidavit-info"></label>
        </div> 

I am inspecting this code closely and see if I come up with any clue?

thanks
ilango
       

fs(ops-users) wrote

hi ilan,

> I tried your suggestions. But it did not work.
> Perhaps it is because I am not doing something right.

hmm - strange - adding the changes as described to the xforms-control example
will change the formatting of the labels. Maybe you could check using the
Firebug Add-on how the resulting html code looks like and which styles are
applied to the different controls?

florian



--
You receive this message as a subscriber of the ops-users@ow2.org mailing list.
To unsubscribe: mailto:ops-users-unsubscribe@ow2.org
For general help: mailto:sympa@ow2.org?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Hi ilan,

did you add a own class attribute to the select control? If so, the input
elements should be nested inside a span element that has the same class. The
span is missing in the code you pasted. So the CSS rule can't apply. I don't
know why this is the case because i don't know your xforms source.

HTH
florian



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws