struts-user mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Dudley Irish <>
Subject Re: tiles and tabs; post instead of link
Date Wed, 09 Jul 2003 16:27:11 GMT
I have just finished converting the example from the tiles examples
from links to submits.  It is a little more complex than just changing
the code that generates the links to generate submits, though you have
to do that too.

First let me describe what I was trying to do.  I have a form which
has a number of tabs each of which contains inputs.  So there is the
"header" of the form that has a few inputs, then several tabs that all
have inputs.  My idea was to use the formbean to carry all this
information around and repopulate fields as necessary.  Please note: I
am not sure this is the best way to do this and I haven't gotten all
of my functionality working, so I will happily take advice on how to
do it.  Given that, this is how I did it.

I started with tabsLayout.jsp from the examples.  Using a tiles
definition like the following:

    <definition name=".population.tabs" path="/common/layouts/tabsLayout.jsp" >
      <put name="formaction"  value="/" />
      <put name="focus"  value="name" />
      <put name="selectedIndex"  value="0" />
      <put name="parameterName"  value="selected" />
      <put name="tabbody"   value="/Population.jsp" />
      <putList name="tabList" >
	<item value="One"	link="/filler1.jsp" />
	<item value="Two"	link="/filler2.jsp" />
	<item value="Three"	link="/filler3.jsp" />
	<item value="Four"	link="/filler4.jsp" />

Notice the addition of "formaction" and "focus".  You must also add
useAttribute takes for these like so:

  <tiles:useAttribute name="formaction" classname="java.lang.String"/>
  <tiles:useAttribute name="focus" classname="java.lang.String"/>

Then in tabsLayout.jsp you start the form with:

  <html:form action="<%=formaction%>" focus="<%=focus%>">

Notice the use of formaction and focus, though I think that focus
might be better off as a form parameter rather than as a tile

Next you add

  <bean:define id="selected"

to give your Java code access to the form parameter that identifies
the selected tab.  I have not included the details of the ActionForm,
but you do need to add selected to your form.  We will get to how this
is set below.

The following snipet of code is used to check the value of selected.
It shows some modifications that have not been fully tested.  In
particular, I am in the process of removing the selectedIndex tile

    String selectedColor="#98ABC7";
    String notSelectedColor="#C0C0C0";

    int index = 0; // Loop index
    int selectedIndex = 0;

    try {
      selectedIndex = Integer.parseInt(selected);
    catch( java.lang.NumberFormatException ex ) {
     // do nothing
    // Check selectedIndex bounds
    if( selectedIndex < 0 || selectedIndex >= tabList.size() ) selectedIndex = 0;
    String selectedBody = ((org.apache.struts.tiles.beans.MenuItem)tabList.get(selectedIndex)).getLink();
// Selected body

Then we insert the tabbody, or the "header" as per the tile
definition.  We have to do this here in order to keep it and all of
the tabs in the same html:form definition.

  <%-- Insert the tab body --%>
  <tiles:insert attribute="tabbody" flush="true"/>

Then we insert the tabs.

  <%-- Insert the tab pages --%>
  <table border="0"  cellspacing="0" cellpadding="0">
    <%-- Draw tabs --%>
    <td width="10">&nbsp;</td>
      <table border="0"  cellspacing="0" cellpadding="5">
  <logic:iterate id="tab" name="tabList" type="org.apache.struts.tiles.beans.MenuItem"
    String color = notSelectedColor;
    if( index == selectedIndex )
	  selectedBody = tab.getLink();
	  color = selectedColor;
	  } // enf if
    <td bgcolor="<%=color%>">
    <input type="submit" value="<%=tab.getValue()%>" name="tab"/>
    <td width="1" ></td>

    <td width="10" >&nbsp;</td>

This is actually a little simpler than the tiles example.

Next we insert the selected tab:

  <%-- Draw body --%>
  <tiles:insert name="<%=selectedBody%>" flush="true" />

And close the form:

  <%-- End the form --%>

All of this will make more sense when you are looking at the
tabsLayout.jsp from the examples.  Now the final piece the Action.
Here is the code that I have been testing with:

  public ActionForward executeAction(ActionMapping mapping,
				     ActionForm form,
				     HttpServletRequest request,
				     HttpServletResponse response)
    throws ClientException, Exception {
    String tab = request.getParameter("tab");
    PopulationForm popForm = (PopulationForm) form;

    try {
      if (tab == null) {
      } else if (tab.equals("One")) {
      } else if (tab.equals("Two")) {
      } else if (tab.equals("Three")) {
      } else if (tab.equals("Four")) {
      } else {
    catch (Exception e) {
      setException(request, e);
      catchException(mapping, form, request, response);

    log.debug("TabsBaseAction, executeAction running, tab "+tab+
	      ", selected "+popForm.getSelected());

    return mapping.findForward("success");
  } // executeAction()

Ignoring the stuff that is specific to my environment the key is the
processing of the tab request parameter.  As you can see this is
translated from the UI specific labels into the tab indexes.  I choose
to do it this way because I wanted the value of the submit to be
application specific not tabs specific.  Anyway, you can probably
eliminate this step except for initializing "selected" to zero.  In
the final version of my code a piece of tab specific code will be
called for each tab.

Now as I said above, I just barely made this modification and have
gotten it working.  This approach works, but I don't claim that it is
the best approach and I hope to refine it in future.  So if you work
out some better ways to do this, I would like to see them.  In
any case, this should get you started.

Dudley Irish
Ars Magna, Inc.

To unsubscribe, e-mail:
For additional commands, e-mail:

View raw message