tomahawk radio index gives IndexOutOfBoundsException exception

Question

i have the following code but i dont know why i get the error. it seems to suggest that i havent populated my data object properly, but i have hardcoded it and cant see what is wrong with the xhtml code.

 <h:panelGrid id="aaaaa" columns="2" border="0" cellpadding="5"
                        cellspacing="15" style="width:100%;border: 1px solid;">
      <f:facet name="header">
                            <h:outputLabel value="#{messages['hwdetail.header.aaaaa]}"/>

                        </f:facet>
                    <h:panelGrid columns="2" style="width:90%; margin: 8px 4px;">
                        <h:panelGroup>
                            <t:selectOneRadio id="radioButtons" layout="spread" forceId="true" forceIdIndex="false" value="#{objabbbbb.selectedCard}">
                                <s:selectItems value="#{objabbbbb.availableCards}" var="v" />
                                <!--  <f:converter converterId="cardJsfConverter" /> -->
                            </t:selectOneRadio>
                            <t:dataTable var="sim" style="width:50%;" value="#{objabbbbb.availableCards}" rowIndexVar="index">
                                <h:column>
                                    <t:radio   for=":mainform:radioButtons"    index="#{index}" />
                                </h:column>
                                <h:column>
                                    <b><h:outputLabel value="#{messages[bbb.i18nKey]}" /></b>
                                </h:column>
                                <h:column>
                                <h:outputLabel value="#{messages[ccc.currency.doll']}"/> <h:outputText value = "getDiscountedPrice(orderController.duration.duratioPLACEHOLDER"/>                                 </h:column>
                            </t:dataTable>
                        </h:panelGroup>
                    </h:panelGrid>

                   </h:panelGrid> 

the problem seems to be in section :

                        <t:selectOneRadio id="radioButtons" layout="spread" forceId="true" forceIdIndex="false" value="#{objabbbbb.selectedCard}">
                            <s:selectItems value="#{objabbbbb.availableCards}" var="v" />
                            <!--  <f:converter converterId="cardJsfConverter" /> -->
                        </t:selectOneRadio>
                        <t:dataTable var="sim" style="width:50%;" value="#{objabbbbb.availableCards}" rowIndexVar="index">
                            <h:column>
                                <t:radio   for=":mainform:radioButtons"    index="#{index}" />

1. how do i debug this kind of problem in jsf to find out where exactly is the problem .

2. more improtantly what am i doing wrong in terms of configuring to the backened object to render the radio buttons correctly ? i have the bankend code (objabbbbb ) as follows:

   private List<SelectItem> selectedCard;
   private List<SelectItem> availableCards;  
   public objabbbbb() {      
   setAvailableCards(new ArrayList<SelectItem>());
       availableCards.add(new SelectItem("Micro "));
       availableCards.add(new SelectItem("Mini (Stand) "));
       availableCards.add(new SelectItem("Nano "));
       availableCards.add(new SelectItem("None"));
   
   }
   public List<SelectItem> getAvailableCards() {
       return availableCards;
   }
   public void setAvailableCards(List<SelectItem> availableCards) {
       this.availableCards = availableCards;
   

the exception is

Caused by java.lang.IndexOutOfBoundsException with message: "index 0 >= 0" 
org.apache.myfaces.renderkit.html.ext.HtmlRadioRenderer.renderRadio(HtmlRadioRenderer.java:131)
org.apache.myfaces.renderkit.html.ext.HtmlRadioRenderer.encodeEnd(HtmlRadioRenderer.java:79)
javax.faces.component.UIComponentBase.encodeEnd(UIComponentBase.java:875)
org.apache.myfaces.shared_tomahawk.renderkit.RendererUtils.renderChild(RendererUtils.java:540)