Multiple tab panel in Orbeon

Hi All,
I am new to Orbeon. I have 15 tabs in a tab panel. My requirement is to display this panel into two line i.e., first panel should have 10 tabs and second panel should have 5 tabs. I am using
    <widget:tabs>
      <widget:tab>
       ---------------
       ---------------
      </widget:tab>
   </widget:tabs>

I tried but I couldn't make it. please help me.

Thanks & regards,
Ingoba

Anybody please help.

Ingoba wrote

Hi All,
I am new to Orbeon. I have 15 tabs in a tab panel. My requirement is to display this panel into two line i.e., first panel should have 10 tabs and second panel should have 5 tabs. I am using
    <widget:tabs>
      <widget:tab>
       ---------------
       ---------------
      </widget:tab>
   </widget:tabs>

I tried but I couldn't make it. please help me.

Thanks & regards,
Ingoba

Ingoba,

Ingoba wrote

I am new to Orbeon. I have 15 tabs in a tab panel. My requirement is to display this panel into two line i.e., first panel should have 10 tabs and second panel should have 5 tabs.

Showing tabs in multiple rows is not something the <widget:tabs> does right now. But note that this was implemented (in a pre-XBL world) with XSLT, in resources/config/xforms-widgets.xsl. So you should be able to extend this stylesheet to match your requirement.

Alex

Thanks Alex. But can you please explain in detail how to do this? I tried but failed to achieve my requirement.

Thanks,
Ingoba

Alessandro Vernet wrote

Ingoba,

Ingoba wrote

I am new to Orbeon. I have 15 tabs in a tab panel. My requirement is to display this panel into two line i.e., first panel should have 10 tabs and second panel should have 5 tabs.

Showing tabs in multiple rows is not something the <widget:tabs> does right now. But note that this was implemented (in a pre-XBL world) with XSLT, in resources/config/xforms-widgets.xsl. So you should be able to extend this stylesheet to match your requirement.

Alex

Ingoba,

Ingoba wrote

Thanks Alex. But can you please explain in detail how to do this? I tried but failed to achieve my requirement.

Have you located the file resources/config/xforms-widgets.xsl? It is pretty much a transformation from the widget:tabs/widget:tab markup to XHTML + XForms. You can compare what it generates with what you have in the HTML page served to your web browser. First you need to figure out how you want to render the tabs in HTML, how it is different than what is done now, and how to modify xforms-widgets.xsl to do so. I hope this helps,

Alex

Thanks once agian Alex. yes I can locate the /resources/config/xforms-widgets.xsl.

1. Once the page is generated in HTML I found a strange thing.
There is a sylesheet link i.e., /config/theme/xforms-widgets.css in which the theme folder is not at all in the Orbeon 3.6.0 distribution.

2. I am using seperate deployment. I have a page in <my-app>/xforms-jsp/config.jsp which used the widget-tabs and widget-tab  and would like to be processed by orbeon. So which stylesheet file in orbeon will take care of the styles in this page? Will it be taken care by resources/config/xforms-widgets.xsl?
  My problem is I have 15 tabs and would like to fit in the window without scroll bar which means the tabs will wrap up in two panels. this wrapping up of tabs is not happening.

Please help me.

Thanks,
Ingoba

Alessandro Vernet wrote

Ingoba,

Ingoba wrote

Thanks Alex. But can you please explain in detail how to do this? I tried but failed to achieve my requirement.

Have you located the file resources/config/xforms-widgets.xsl? It is pretty much a transformation from the widget:tabs/widget:tab markup to XHTML + XForms. You can compare what it generates with what you have in the HTML page served to your web browser. First you need to figure out how you want to render the tabs in HTML, how it is different than what is done now, and how to modify xforms-widgets.xsl to do so. I hope this helps,

Alex

Ingoba,

Ingoba wrote

1. Once the page is generated in HTML I found a strange thing.
There is a sylesheet link i.e., /config/theme/xforms-widgets.css in which the theme folder is not at all in the Orbeon 3.6.0 distribution.

You'll find this file in the one of the orbeon*.jar file (not sure exactly which jar file it is, as I don't have in mind the structure the Orbeon jar files with 3.6; as usual, I'd recommend you upgrade to the latest build, as 3.6 is now quite old). You can override this file by placing your file under the same path in the WEB-INF/resources directory.

Ingoba wrote

2. I am using seperate deployment. I have a page in <my-app>/xforms-jsp/config.jsp which used the widget-tabs and widget-tab  and would like to be processed by orbeon. So which stylesheet file in orbeon will take care of the styles in this page? Will it be taken care by resources/config/xforms-widgets.xsl?

Yes, exactly, it will be processed by xforms-widgets.xsl.

Alex

Thanks Alex. I have tried lots of things in this file but I couldn't get the desired result. Please help me.

Ingoba

Alessandro Vernet wrote

Ingoba,

Ingoba wrote

1. Once the page is generated in HTML I found a strange thing.
There is a sylesheet link i.e., /config/theme/xforms-widgets.css in which the theme folder is not at all in the Orbeon 3.6.0 distribution.

You'll find this file in the one of the orbeon*.jar file (not sure exactly which jar file it is, as I don't have in mind the structure the Orbeon jar files with 3.6; as usual, I'd recommend you upgrade to the latest build, as 3.6 is now quite old). You can override this file by placing your file under the same path in the WEB-INF/resources directory.

Ingoba wrote

2. I am using seperate deployment. I have a page in <my-app>/xforms-jsp/config.jsp which used the widget-tabs and widget-tab  and would like to be processed by orbeon. So which stylesheet file in orbeon will take care of the styles in this page? Will it be taken care by resources/config/xforms-widgets.xsl?

Yes, exactly, it will be processed by xforms-widgets.xsl.

Alex

Ingoba,

Ingoba wrote

Thanks Alex. I have tried lots of things in this file but I couldn't get the desired result. Please help me.

There is only so much we can do through the mailing list, and you would have to share with us some very specific problems you're having for us to be able to help.

Alex

Thanks for your reply Alex. I am attaching some image for my problem.

I tried to fix the size of the tab panel in the xforms-widgets.xsl file. The code snippet is as follows:

 <xsl:template match="widget:tabs">
        <xsl:variable name="tabs-element" select="."/>
        <xsl:variable name="tabs" select="widget:tab"/>
        <xhtml:table class="widget-tabs" cellpadding="0" cellspacing="0" border="0" size="700px">
 --------
 --------
</xsl:template>
But it is not fixing the size of the panel.

Please help me to fixed the size of the panel.

Regards,
Ingoba

Attachment :

Ingoba,

Ingoba wrote

Thanks for your reply Alex. I am attaching some image for my problem.

I tried to fix the size of the tab panel in the xforms-widgets.xsl file. The code snippet is as follows:

 <xsl:template match="widget:tabs">
        <xsl:variable name="tabs-element" select="."/>
        <xsl:variable name="tabs" select="widget:tab"/>
        <xhtml:table class="widget-tabs" cellpadding="0" cellspacing="0" border="0" size="700px">
 --------
 --------
</xsl:template>
But it is not fixing the size of the panel.

Right, adding a width on the table won't help. If you have too many things in a line, they just will end up taking too much horizontal space. So you'll have to change this code to generate multiple lines, where right now it generates only one line. Maybe a simple algorithm would be to place a max of x tabs on every single line. I.e. if x = 5 and you have 13 tabs, you place 5 on the first 2 lines, and 3 on the third. You need to be fairly familiar with XSLT and HTML for this, and you'll need to change xforms-widgets.xsl to do this.

Alex

Hi Ingoba,

Have you solved this issue?. If so can you share with us. I had the same problem. I solved this. I can share with you if you need.

Thanks,
Vijay

Ingoba wrote

Hi All,
I am new to Orbeon. I have 15 tabs in a tab panel. My requirement is to display this panel into two line i.e., first panel should have 10 tabs and second panel should have 5 tabs. I am using
    <widget:tabs>
      <widget:tab>
       ---------------
       ---------------
      </widget:tab>
   </widget:tabs>

I tried but I couldn't make it. please help me.

Thanks & regards,
Ingoba

Hi Vijay,

I haven't solved this problem. Please share me the solution. Thanks in advance.

Regards,
Ingoba

Ingoba wrote

Hi All,
I am new to Orbeon. I have 15 tabs in a tab panel. My requirement is to display this panel into two line i.e., first panel should have 10 tabs and second panel should have 5 tabs. I am using
    <widget:tabs>
      <widget:tab>
       ---------------
       ---------------
      </widget:tab>
   </widget:tabs>

I tried but I couldn't make it. please help me.

Thanks & regards,
Ingoba

Hi Vijaya,

Please share me the solution if you have.

Thanks,
Ingoba