Javascript code to struts2

Question

how to write the below code using struts2 tag library. since struts2 have many tags like iterator, if etc. but how the below code can be achieved using that?

how we can initialize variable in struts2 tag and after that how to apply increment or decrements operation like the code shown below?

int j=-1;
for(int i=0;i<4;i++)
{
j++;
if(j==0)
{
}
if(j==1)
{
}
if(j==2)
{
j=-1;
}
}

This is my jsp page where i used the java code within the scriplet tags

<h3>Our Latest Projects</h3>
<%! int j = -1; %>

<%
  for (int i = 0; i < 4; i++) {
    j++;
%>
  <% if (j == 0) { %>
<div class="wrapper">
  <article class="grid_4 alpha">
    <h4 class="p2">Project 1</h4>
    <figure><a href="#"><img class="img-border" src="images/page4-img1.jpg" alt=""/></a></figure>
    <div class="box" style="height: 20px; width: 257px;">
      <div class="padding">
        <a href="#">View Details</a>
      </div>
    </div>
  </article>
  <% } %>

  <% if (j == 1) { %>
  <article class="grid_4">
    <div class="indent-left4">
      <h4 class="p2">Project 2</h4>
      <figure><a href="#"><img class="img-border" src="images/page4-img2.jpg" alt=""/></a></figure>
      <div class="box" style="height: 20px; width: 257px;">
        <div class="padding">
          <a href="#">View Details</a>
        </div>
      </div>
    </div>
  </article>
  <% } %>
  <% if (j == 2) { %>
  <article class="grid_4 omega">
    <div class="indent-left3">
      <h4 class="p2">Project 3</h4>
      <figure><a href="#"><img class="img-border" src="images/page4-img3.jpg" alt=""/></a></figure>
      <div class="box" style="height: 20px; width: 257px;">
        <div class="padding">
          <a href="#">View Details</a>
        </div>
      </div>
    </div>
  </article>
</div>
<br><br>
<% j = -1; %>
<% } %>
<% } %>

Answer 1

What a disaster.

Here's everything except for the article > div styling since it wasn't clear how it was related to anything else; you should be able to figure it out based on the rest of this code.

<div class="wrapper">
  <s:iterator begin="1" end="#session.count" status="stat">
    <s:set var="artClass" value="#stat.first ? 'alpha' : #stat.last ? 'omega' : ''" />

    <article class="grid_4 <s:property value="#artClass"/>">
      <div> <!-- Not really sure what you want here for the class. -->
        <h4 class="p2">Project <s:property value="#stat.count"/></h4>
        <figure><a href="#"><img class="img-border" src="images/page4-img<s:property value="#stat.count"/>.jpg" alt=""/></a></figure>
        <div class="box" style="height: 20px; width: 257px;">
          <div class="padding">
            <a href="#">View Details</a>
          </div>
        </div>
      </div>
    </article>
  </s:iterator>
</div>

Also, if "alpha" and "omega" are for the first and last columns, and not the first/last items in the list, you'd want to change this up somewhat. Personally, I would split the list up into a list of threes in the Java code and do a double-iteration:

<s:iterator value="listOfLists" var="list">
  <s:iterator value="list" status="stat">
    <s:set var="artClass" value="#stat.first ? 'alpha' : #stat.last ? 'omega' : ''" />

    <article class="grid_4 <s:property value="#artClass"/>">
      <div> <!-- Not really sure what you want here for the class. -->
        <h4 class="p2">Project <s:property value="#stat.count"/></h4>
        <figure><a href="#"><img class="img-border" src="images/page4-img<s:property value="#stat.count"/>.jpg" alt=""/></a></figure>
        <div class="box" style="height: 20px; width: 257px;">
          <div class="padding">
            <a href="#">View Details</a>
          </div>
        </div>
      </div>
    </article>
  </s:iterator>
  <br/><br/> <!-- Use CSS. -->
</s:iterator>

You could also encapsulate this in a custom tag and utility method and make things very clean.