6 Replies Latest reply: Nov 30, 2012 4:49 AM by Prasad K T RSS

    Tabs not working in ADF

    975391
      Hello all,

      We are creating a jspx page which will contain 2 tabs (one for search and the other for details). The first tab is working properly but the 2nd tab does not get activated once we click on it.
      We are using PanelTabbed and PanelStretchLayout for this purpose and using JDeveloper 11.1.2.1.0




      The code we wrote is as follows:


      *<af:panelStretchLayout id="psl1" binding="#{backingBeanScope.backing_Details.psl1}" startWidth="258px" topHeight="100px"*
      inlineStyle="height:464px; width:590px;" endWidth="50px">
      *<f:facet name="bottom"/>*
      *<f:facet name="center">*
      *<af:panelGroupLayout layout="scroll" id="pgl1"*
      *binding="#{backingBeanScope.backing_Details.pgl1}">*
      *<af:panelTabbed id="pt1" binding="#{backingBeanScope.backing_Details.pt1} "*
      *inlineStyle="width:352px; height:387px;">*
      *<af:showDetailItem text="SEARCH" id="sdi2"*
      *binding="#{backingBeanScope.backing_Details.sdi2}">*
      *<af:selectOneListbox label="Search" requiredMessageDetail="Select One Option"*
      *size="2" id="sol1"*
      *binding="#{backingBeanScope.backing_Details.sol1}" required="true">*
      *<af:selectItem label="Option 1" value="1" id="si1"*
      *binding="#{backingBeanScope.backing_Details.si1}"/>*
      *<af:selectItem label="Option 2" value="2" id="si2"*
      *binding="#{backingBeanScope.backing_Details.si2}"/>*
      *</af:selectOneListbox>*
      *</af:showDetailItem>*




      *<af:showDetailItem text="VIEW DETAILS" id="sdi3"*
      *binding="#{backingBeanScope.backing_Details.sdi3}">*
      *<af:panelHeader text="Tab2" id="ph1"*
      *binding="#{backingBeanScope.backing_Details.ph1}">*

      *</af:panelHeader>*
      *</af:showDetailItem>*
      *</af:panelTabbed>*
      *</af:panelGroupLayout>*
      *</f:facet>*
      *<f:facet name="start"/>*
      *<f:facet name="end"/>*
      *<!-- <f:facet name="top"/>-->*

      *</af:panelStretchLayout>*
        • 1. Re: Tabs not working in ADF
          Mohammad Jabr
          Is there any validation failure in the first showDetailItem ?
          Can you try to set the immediate property to true for the second showDetailItem ?
          • 2. Re: Tabs not working in ADF
            975391
            Hello All,
            Setting immediate property to true does not enable the tab. Seems we will have to look for other solutions. Please can any one post any tutorial to implement multiple tabs in ADF.



            Thanks in advance
            • 3. Re: Tabs not working in ADF
              Prasad K T
              Hi.,

              You have given as

              contain 2 tabs (one for search and the other for details). The first tab is working properly but the 2nd tab does not get activated once we click on it.

              You are trying to say that you will be performing search in one tab and the result will appear in 2nd tab right?

              If this is the case, The problem is that you are not getting the result in 2nd tab, so the code which have wrote in backing bean,check it. It must be the problem.

              It would be helpful for us if u give us the full detail of your problem with the log , if there is any error log printed.

              Thanks,
              Prasad K T
              • 4. Re: Tabs not working in ADF
                975391
                No actually we have to do the search in one tab and the result in the other. But we simply created two dummy tabs without writing any code in the backing bean, just to see if both the tabs are getting active properly or not. This is where our problem is originating, the second tab is not getting activated when we click on it. If anyone can help me create multiple tabs, it would be helpful.
                • 5. Re: Tabs not working in ADF
                  975391
                  No actually we have to do the search in one tab and the result in the other. But we simply created two dummy tabs without writing any code in the backing bean, just to see if both the tabs are getting active properly or not. This is where our problem is originating, the second tab is not getting activated when we click on it. If anyone can help me create multiple tabs, it would be helpful.
                  • 6. Re: Tabs not working in ADF
                    Prasad K T
                    Hi,

                    This is the code which i have used for me its working fine!

                    Am using jdeveloper 11.1.2.1.0
                    <af:panelStretchLayout id="psl1">
                                    <f:facet name="bottom"/>
                                    <f:facet name="center">
                                        <af:panelGroupLayout id="pgl1">
                                            <af:panelTabbed id="pt1" styleClass="AFStretchWidth">
                                                <af:showDetailItem text="showDetailItem 1" id="sdi1">
                                                    <af:table value="#{bindings.Employees1.collectionModel}" var="row"
                                                              rows="#{bindings.Employees1.rangeSize}"
                                                              emptyText="#{bindings.Employees1.viewable ? 'No data to display.' : 'Access Denied.'}"
                                                              fetchSize="#{bindings.Employees1.rangeSize}" rowBandingInterval="0"
                                                              filterModel="#{bindings.Employees1Query.queryDescriptor}"
                                                              queryListener="#{bindings.Employees1Query.processQuery}" filterVisible="true"
                                                              varStatus="vs"
                                                              selectedRowKeys="#{bindings.Employees1.collectionModel.selectedRow}"
                                                              selectionListener="#{bindings.Employees1.collectionModel.makeCurrent}"
                                                              rowSelection="single" id="t1" partialTriggers="::cb1 ::cb2">
                                                        <af:column sortProperty="#{bindings.Employees1.hints.EmployeeId.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees1.hints.EmployeeId.label}" id="c1">
                                                            <af:inputText value="#{row.bindings.EmployeeId.inputValue}"
                                                                          label="#{bindings.Employees1.hints.EmployeeId.label}"
                                                                          required="#{bindings.Employees1.hints.EmployeeId.mandatory}"
                                                                          columns="#{bindings.Employees1.hints.EmployeeId.displayWidth}"
                                                                          maximumLength="#{bindings.Employees1.hints.EmployeeId.precision}"
                                                                          shortDesc="#{bindings.Employees1.hints.EmployeeId.tooltip}"
                                                                          id="it1">
                                                                <f:validator binding="#{row.bindings.EmployeeId.validator}"/>
                                                                <af:convertNumber groupingUsed="false"
                                                                                  pattern="#{bindings.Employees1.hints.EmployeeId.format}"/>
                                                            </af:inputText>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees1.hints.FirstName.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees1.hints.FirstName.label}" id="c2">
                                                            <af:inputText value="#{row.bindings.FirstName.inputValue}"
                                                                          label="#{bindings.Employees1.hints.FirstName.label}"
                                                                          required="#{bindings.Employees1.hints.FirstName.mandatory}"
                                                                          columns="#{bindings.Employees1.hints.FirstName.displayWidth}"
                                                                          maximumLength="#{bindings.Employees1.hints.FirstName.precision}"
                                                                          shortDesc="#{bindings.Employees1.hints.FirstName.tooltip}"
                                                                          id="it2">
                                                                <f:validator binding="#{row.bindings.FirstName.validator}"/>
                                                            </af:inputText>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees1.hints.LastName.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees1.hints.LastName.label}" id="c3">
                                                            <af:inputText value="#{row.bindings.LastName.inputValue}"
                                                                          label="#{bindings.Employees1.hints.LastName.label}"
                                                                          required="#{bindings.Employees1.hints.LastName.mandatory}"
                                                                          columns="#{bindings.Employees1.hints.LastName.displayWidth}"
                                                                          maximumLength="#{bindings.Employees1.hints.LastName.precision}"
                                                                          shortDesc="#{bindings.Employees1.hints.LastName.tooltip}"
                                                                          id="it3">
                                                                <f:validator binding="#{row.bindings.LastName.validator}"/>
                                                            </af:inputText>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees1.hints.Email.name}" filterable="true"
                                                                   sortable="true" headerText="#{bindings.Employees1.hints.Email.label}"
                                                                   id="c4">
                                                            <af:inputText value="#{row.bindings.Email.inputValue}"
                                                                          label="#{bindings.Employees1.hints.Email.label}"
                                                                          required="#{bindings.Employees1.hints.Email.mandatory}"
                                                                          columns="#{bindings.Employees1.hints.Email.displayWidth}"
                                                                          maximumLength="#{bindings.Employees1.hints.Email.precision}"
                                                                          shortDesc="#{bindings.Employees1.hints.Email.tooltip}" id="it4">
                                                                <f:validator binding="#{row.bindings.Email.validator}"/>
                                                            </af:inputText>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees1.hints.PhoneNumber.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees1.hints.PhoneNumber.label}" id="c5">
                                                            <af:inputText value="#{row.bindings.PhoneNumber.inputValue}"
                                                                          label="#{bindings.Employees1.hints.PhoneNumber.label}"
                                                                          required="#{bindings.Employees1.hints.PhoneNumber.mandatory}"
                                                                          columns="#{bindings.Employees1.hints.PhoneNumber.displayWidth}"
                                                                          maximumLength="#{bindings.Employees1.hints.PhoneNumber.precision}"
                                                                          shortDesc="#{bindings.Employees1.hints.PhoneNumber.tooltip}"
                                                                          id="it5">
                                                                <f:validator binding="#{row.bindings.PhoneNumber.validator}"/>
                                                            </af:inputText>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees1.hints.HireDate.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees1.hints.HireDate.label}" id="c6">
                                                            <f:facet name="filter">
                                                                <af:inputDate value="#{vs.filterCriteria.HireDate}" id="id1">
                                                                    <af:convertDateTime pattern="#{bindings.Employees1.hints.HireDate.format}"/>
                                                                </af:inputDate>
                                                            </f:facet>
                                                            <af:inputDate value="#{row.bindings.HireDate.inputValue}"
                                                                          label="#{bindings.Employees1.hints.HireDate.label}"
                                                                          required="#{bindings.Employees1.hints.HireDate.mandatory}"
                                                                          columns="#{bindings.Employees1.hints.HireDate.displayWidth}"
                                                                          shortDesc="#{bindings.Employees1.hints.HireDate.tooltip}"
                                                                          id="id2">
                                                                <f:validator binding="#{row.bindings.HireDate.validator}"/>
                                                                <af:convertDateTime pattern="#{bindings.Employees1.hints.HireDate.format}"/>
                                                            </af:inputDate>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees1.hints.JobId.name}" filterable="true"
                                                                   sortable="true" headerText="#{bindings.Employees1.hints.JobId.label}"
                                                                   id="c7">
                                                            <af:inputText value="#{row.bindings.JobId.inputValue}"
                                                                          label="#{bindings.Employees1.hints.JobId.label}"
                                                                          required="#{bindings.Employees1.hints.JobId.mandatory}"
                                                                          columns="#{bindings.Employees1.hints.JobId.displayWidth}"
                                                                          maximumLength="#{bindings.Employees1.hints.JobId.precision}"
                                                                          shortDesc="#{bindings.Employees1.hints.JobId.tooltip}" id="it6">
                                                                <f:validator binding="#{row.bindings.JobId.validator}"/>
                                                            </af:inputText>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees1.hints.Salary.name}" filterable="true"
                                                                   sortable="true" headerText="#{bindings.Employees1.hints.Salary.label}"
                                                                   id="c8">
                                                            <af:inputText value="#{row.bindings.Salary.inputValue}"
                                                                          label="#{bindings.Employees1.hints.Salary.label}"
                                                                          required="#{bindings.Employees1.hints.Salary.mandatory}"
                                                                          columns="#{bindings.Employees1.hints.Salary.displayWidth}"
                                                                          maximumLength="#{bindings.Employees1.hints.Salary.precision}"
                                                                          shortDesc="#{bindings.Employees1.hints.Salary.tooltip}" id="it7">
                                                                <f:validator binding="#{row.bindings.Salary.validator}"/>
                                                            </af:inputText>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees1.hints.CommissionPct.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees1.hints.CommissionPct.label}" id="c9">
                                                            <af:inputText value="#{row.bindings.CommissionPct.inputValue}"
                                                                          label="#{bindings.Employees1.hints.CommissionPct.label}"
                                                                          required="#{bindings.Employees1.hints.CommissionPct.mandatory}"
                                                                          columns="#{bindings.Employees1.hints.CommissionPct.displayWidth}"
                                                                          maximumLength="#{bindings.Employees1.hints.CommissionPct.precision}"
                                                                          shortDesc="#{bindings.Employees1.hints.CommissionPct.tooltip}"
                                                                          id="it8">
                                                                <f:validator binding="#{row.bindings.CommissionPct.validator}"/>
                                                            </af:inputText>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees1.hints.ManagerId.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees1.hints.ManagerId.label}" id="c10">
                                                            <af:inputText value="#{row.bindings.ManagerId.inputValue}"
                                                                          label="#{bindings.Employees1.hints.ManagerId.label}"
                                                                          required="#{bindings.Employees1.hints.ManagerId.mandatory}"
                                                                          columns="#{bindings.Employees1.hints.ManagerId.displayWidth}"
                                                                          maximumLength="#{bindings.Employees1.hints.ManagerId.precision}"
                                                                          shortDesc="#{bindings.Employees1.hints.ManagerId.tooltip}"
                                                                          id="it9">
                                                                <f:validator binding="#{row.bindings.ManagerId.validator}"/>
                                                                <af:convertNumber groupingUsed="false"
                                                                                  pattern="#{bindings.Employees1.hints.ManagerId.format}"/>
                                                            </af:inputText>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees1.hints.DepartmentId.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees1.hints.DepartmentId.label}" id="c11">
                                                            <af:inputText value="#{row.bindings.DepartmentId.inputValue}"
                                                                          label="#{bindings.Employees1.hints.DepartmentId.label}"
                                                                          required="#{bindings.Employees1.hints.DepartmentId.mandatory}"
                                                                          columns="#{bindings.Employees1.hints.DepartmentId.displayWidth}"
                                                                          maximumLength="#{bindings.Employees1.hints.DepartmentId.precision}"
                                                                          shortDesc="#{bindings.Employees1.hints.DepartmentId.tooltip}"
                                                                          id="it10">
                                                                <f:validator binding="#{row.bindings.DepartmentId.validator}"/>
                                                                <af:convertNumber groupingUsed="false"
                                                                                  pattern="#{bindings.Employees1.hints.DepartmentId.format}"/>
                                                            </af:inputText>
                                                        </af:column>
                                                    </af:table>
                                                    <af:commandButton actionListener="#{bindings.CreateInsert.execute}" text="CreateInsert"
                                                                      disabled="#{!bindings.CreateInsert.enabled}" id="cb1"/>
                                                    <af:commandButton actionListener="#{bindings.Delete.execute}" text="Delete"
                                                                      disabled="#{!bindings.Delete.enabled}" id="cb2"/>
                                                    <af:commandButton actionListener="#{bindings.Commit.execute}" text="Commit"
                                                                      disabled="#{!bindings.Commit.enabled}" id="cb3"/>
                                                </af:showDetailItem>
                                                <af:showDetailItem text="showDetailItem 2" id="sdi2">
                                                    <af:table value="#{bindings.Employees11.collectionModel}" var="row"
                                                              rows="#{bindings.Employees11.rangeSize}"
                                                              emptyText="#{bindings.Employees11.viewable ? 'No data to display.' : 'Access Denied.'}"
                                                              fetchSize="#{bindings.Employees11.rangeSize}" rowBandingInterval="0"
                                                              filterModel="#{bindings.Employees1Query.queryDescriptor}"
                                                              queryListener="#{bindings.Employees1Query.processQuery}" filterVisible="true"
                                                              varStatus="vs"
                                                              selectedRowKeys="#{bindings.Employees11.collectionModel.selectedRow}"
                                                              selectionListener="#{bindings.Employees11.collectionModel.makeCurrent}"
                                                              rowSelection="single" id="t2" partialTriggers="::cb1 ::cb2">
                                                        <af:column sortProperty="#{bindings.Employees11.hints.EmployeeId.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees11.hints.EmployeeId.label}" id="c12">
                                                            <af:outputText value="#{row.EmployeeId}" id="ot1">
                                                                <af:convertNumber groupingUsed="false"
                                                                                  pattern="#{bindings.Employees11.hints.EmployeeId.format}"/>
                                                            </af:outputText>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees11.hints.FirstName.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees11.hints.FirstName.label}" id="c13">
                                                            <af:outputText value="#{row.FirstName}" id="ot2"/>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees11.hints.LastName.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees11.hints.LastName.label}" id="c14">
                                                            <af:outputText value="#{row.LastName}" id="ot3"/>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees11.hints.Email.name}" filterable="true"
                                                                   sortable="true" headerText="#{bindings.Employees11.hints.Email.label}"
                                                                   id="c15">
                                                            <af:outputText value="#{row.Email}" id="ot4"/>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees11.hints.PhoneNumber.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees11.hints.PhoneNumber.label}" id="c16">
                                                            <af:outputText value="#{row.PhoneNumber}" id="ot5"/>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees11.hints.HireDate.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees11.hints.HireDate.label}" id="c17">
                                                            <f:facet name="filter">
                                                                <af:inputDate value="#{vs.filterCriteria.HireDate}" id="id3">
                                                                    <af:convertDateTime pattern="#{bindings.Employees11.hints.HireDate.format}"/>
                                                                </af:inputDate>
                                                            </f:facet>
                                                            <af:outputText value="#{row.HireDate}" id="ot6">
                                                                <af:convertDateTime pattern="#{bindings.Employees11.hints.HireDate.format}"/>
                                                            </af:outputText>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees11.hints.JobId.name}" filterable="true"
                                                                   sortable="true" headerText="#{bindings.Employees11.hints.JobId.label}"
                                                                   id="c18">
                                                            <af:outputText value="#{row.JobId}" id="ot7"/>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees11.hints.Salary.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees11.hints.Salary.label}" id="c19">
                                                            <af:outputText value="#{row.Salary}" id="ot8"/>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees11.hints.CommissionPct.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees11.hints.CommissionPct.label}" id="c20">
                                                            <af:outputText value="#{row.CommissionPct}" id="ot9"/>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees11.hints.ManagerId.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees11.hints.ManagerId.label}" id="c21">
                                                            <af:outputText value="#{row.ManagerId}" id="ot10">
                                                                <af:convertNumber groupingUsed="false"
                                                                                  pattern="#{bindings.Employees11.hints.ManagerId.format}"/>
                                                            </af:outputText>
                                                        </af:column>
                                                        <af:column sortProperty="#{bindings.Employees11.hints.DepartmentId.name}"
                                                                   filterable="true" sortable="true"
                                                                   headerText="#{bindings.Employees11.hints.DepartmentId.label}" id="c22">
                                                            <af:outputText value="#{row.DepartmentId}" id="ot11">
                                                                <af:convertNumber groupingUsed="false"
                                                                                  pattern="#{bindings.Employees11.hints.DepartmentId.format}"/>
                                                            </af:outputText>
                                                        </af:column>
                                                    </af:table>
                                                </af:showDetailItem>
                                            </af:panelTabbed>
                                        </af:panelGroupLayout>
                                    </f:facet>
                                    <f:facet name="start"/>
                                    <f:facet name="end"/>
                                    <f:facet name="top"/>
                                </af:panelStretchLayout>
                    Hope this would be usefull for u!

                    Thanks,
                    Prasad K T