How can I have a TAB inside my JSP

[Prasanth Pillai]

My application is developed using struts. Can I have a TAB format inside my JSP?

[Prasanth Pillai]

any idea about this?

[Prasanth Pillai]

this is my requirement. I wanted to have tab in my screen.Currently my application is having around 120 fields in the screen, to see all those field, the user has to scroll down. I wanted to have a more user friendly look for the page. Is there is any other option than TAB, please let me know.

regards,
prasanth

[Merrill Higginson]

Originally posted by Prasanth Pillai:
My application is developed using struts. Can I have a TAB format inside my JSP?

Yes, you can have a tabbed format whether you're using Struts or not.

It's important to understand something, though: In an HTML page, tabs are nothing more than an optical illusion. When users click on a tab, they are in reality clicking on a link that goes to another HTML page. The graphics designer just designs graphic images that look like tabs at the top of the page, with the currently selected tab showing up in a brighter color than the non-selected tabs. In reality, each tab is a separate HTML page.

If you've got too much data on a single page, then yes, using this tabbed or what is sometimes called a "wizard" approach might be a good idea.

[Tom Williamson]

Prasanth:

A tabbed display does not require a call back to the server, i.e., it does not have to be an "illusion". All tabs can indeed be loaded up front, i.e., you might divide the 120 fields into separate tabbed <DIV>'s - grouping by some meaningful to your application. You then control the display with "dynamic HTML" calls - suce as style="display:none" and style="display:inline".

I have built several well received apps this way - it does require some fairly heavy javaScript. I too was wondering peripherally how it would be accomplished with STRUTS/Tiles.

[Prasanth Pillai]

thanks Tom and Merrill for the tip. Now how will I implement the same in my application? I mean currently I have a JSP page with 120 number of fields. I am not sure whether the application will work, if I use the simple DHTML scripts.

[Merrill Higginson]

Since Struts has no pre-fabricated "tabbed panel" control, if you want tabs in Struts, you will have to build everything yourself. You will have to create some graphics that look like tabs with labels on them. If you decide to use the method Tom describes, you will have to divide your page into different <div> elements and use JavaScript and CSS to display or hide them as the user clicks on tabs. If you use the method I described earlier, you will have to create several pages, all with the same graphics on top, except that the one tab that applies to the current page will show in a brighter color. You must then create links for each tab that will submit the current form and navigate to the page associated with the tab clicked.

[Ram kovis]

Prasanth

YOu can use this link for tab pages with CSS

[Chris Boldon]

Allow me:

Javascript:

function clearAllTabs() {
for(k=1;k<=5;k++) {
 
document.getElementById('link'+k).className='normal';
document.getElementById('tab'+k).style.display='none';
}
}
function selectTab(id) {
clearAllTabs();
document.getElementById('link'+id).className='current';
document.getElementById('tab'+id).style.display='inline';
}

CSS:

#header{
height:20%;
width:100%;
}
 
#center{
width:20%;
heigh:80%;
}
 
#footer {
width:100%;
height:20%;
}
 

#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
 
#navlist li a:link {
color: #FFFFFF;
background: #666666;
}
 
#navlist li a:visited { 
color: #FFFFFF; 
background: #666666;
}
 
#navlist li a:hover {
color: #666666;
background: #FFFFFF;
border-color: #666666;
}
 
#navlist li a, #navlist li a.normal {
padding: 2px 0.5em 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
 
text-decoration: none;
}
 
#navlist li a:active {
color: #666666;
background: #FFFFFF;
border-bottom: 1px solid white;
}
 
#navlist li a.current {
color: #666666;
background: #FFFFFF;
border-bottom: 1px solid white;
}

Of course you will have to change the CSS up for your look and feel.

A code snippet of how you would go about using this:

  <div id="navcontainer">
    <ul id="navlist">
      <li><a id="link1" href="javascript:selectTab('1')" class="current">Summary</a></li>
      <li><a id="link2" href="javascript:selectTab('2')">Some Text1</a></li>
      <li><a id="link3" href="javascript:selectTab('3')">Some Text2</a></li>
      <li><a id="link4" href="javascript:selectTab('4')">Some Text3</a></li>
      <li><a id="link5" href="javascript:selectTab('5')">Some Text4</a></li>
    </ul>
  </div>
  <div id="content"></div>
  <div id="tab1">
Some text and html that will be displayed on a tab.
</div>
  <div id="tab2" style="display: none">
blah blah
</div>

[Prasanth Pillai]

thanks for all the inputs. I got it done. The following link gives the simplest way to achieve the same.

http://phrogz.net/JS/Tabtastic/index.html#overview

[Prasanth Pillai]

oh, I was wrong. It is working only for HTML pages. For some reason when I place the same code in side a JSP & after deploying it in server (using .war file )trying to access from brower, I am not getting the desired TAB format. I have placed all the required files in the correct location. If anyone know the reason please let me know.

[Tong Wang]

Why reinvent the wheel?

Try Struts-Layout tag library, which has a built-in tab control and many others:

http://struts.application-servers.com/

[Prasanth Pillai]

thank you for the useful link. But at this point of time I can not change the whole code with the new set of jars. I am not sure I have done it correctly or not. I just need to implement the TAB feature only for 2 jsps. After downloading the Struts-Layout-1.2.jar and making the changes, I am getting many errors while accessing the pages.

Can I do the changes only for 2 JSP's without affecting rest of the code?

[Tong Wang]

I haven't used their tags control myself, but I've used the date (calendar), select, form, row, column controls, etc. And actually, in the web app I am working on, I only use struts-layout for the new features, the remaining app still runs old style JSPs. So, just include layout tags in those two JSPs and leave other JSPs untouched.

Also, make sure to put struts-layout.properties under WEB-INF/classes and enter directory information there for both images and config (depending on where you put them). This step is missing from their installation instructions.

There is a Yahoo group for struts-layout: http://tech.groups.yahoo.com/group/struts-layout/

Also, if you still want to use <head> <body> tags, you have to include <layout:skin/> in the head part.

[Prasanth Pillai]

oh yeah, thats true, that part is missing. let me try with that also. But as per the instruction I need to do only few steps.

To start a new web projet with Struts-Layout, the following steps must be followed:
Configure Struts


Configure Struts-Layout actions

Configure the Struts-Layout treeview and sort action in your struts-config.xml

<action path="/sort"
type="fr.improve.struts.taglib.layout.sort.SortAction"
scope="request"
validate="false">
</action>

<action path="/treeview"
type="fr.improve.struts.taglib.layout.treeview.TreeviewAction"
scope="request"
validate="false">
</action>


If forward to Tiles definition are to be used with sorting or paging on the server, the Struts-Layout request processor must be used and declared in struts-config.xml :

<controller processorClass = "fr.improve.struts.taglib.layout.workflow.LayoutRequestProcessor"/>


the Tiles definitions must also have a dot in their names.
Copy the static resources

Copy the the "config" and "images" directory from the "resources" folder of the Struts-Layout archive to your webapp root folder
Copy the Struts-Layout jar

Copy the struts-layout.jar file into the WEB-INF/lib directory. This file is located into the "src/library" of the Struts-Layout distribution archive.

and now the steps which you told. Is that all?

[Prasanth Pillai]

Can anyone tell me the difference between accessing a jsp file through the server directory listing & same page through application.

when I access the jsp page from server directory list, it works fine.
for example, http://localhost:8080/location/folder1/NewService.jsp ( this works fine). I can see the desired tabs in the screen.

If I access the same JSP file through my application, that means when I invoke the jsp from other JSP or through any other file, I am not able to see any TAB format.

I have placed all the related files in the same directory as the JSP file & put some alert messages to make sure that nothing went wrong with the file location. I see all the alert messages in both cases. Only TAB is not coming. looks weird !!!

please let me know if you have any idea.