SweetDev Tutorial Accordion Part 3
This is an example on implementing the accordion functionality using the SweetDev libraries.
You can see my prior posts on configuring SweetDev, and my other posts on setting up a Java application in eclipse. I will be referencing my UserBook tutorial application in my prior posts.
To implement the accordion functionality, you first need to add a couple of libraries that aren't included in the sweetdev core libraries. You can get these libraries from the SweetDev example war file that I had you download in my previous posts. If you open up the %Catalina_Home%\webapps\sweetdev-ria-gettingStarted-3.2-bugfixed\WEB-INF\lib, you will see velocity-1.5.jar and the velocity-tools-generic-1.2.jar files. Copy those over to your applications lib folder.
In the UserBook application, you can use the viewreport.jsp for your accordion example. Copy the following code for the accordion example.
viewreport.jsp
<%@ taglib prefix="ria" uri="http://sweetdev-ria.ideotechnologies.com" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Accordion Sample</title>
<ria:resourcesImport importResources="true"/>
<style type="text/css">
.ideo-acc-mycontent{
border : 1px dashed #CCDAFF;
}
</style>
</head>
<body>
<ria:accordion id="accordion" width="20%">
<ria:accordionItem id="accordion_item1" title="First Section" contentStyleClass="ideo-acc-mycontent">
First section content
</ria:accordionItem>
<ria:accordionItem id="accordion_item2" title="Second Section" contentStyleClass="ideo-acc-mycontent">
Second section content
</ria:accordionItem>
<ria:accordionItem id="accordion_item3" title="Last Section" openAtStartup="true" contentStyleClass="ideo-acc-mycontent">
Last section, opened at startup
</ria:accordionItem>
</ria:accordion>
<!-- CODE SOURCE END-->
</div>
</div>
<br/>
</body>
</html>
You will use ria:accordion tag to define your accordion area and ria:accordionItem which will be each section of your accordion.
Go To Part 4
0 comments:
Post a Comment