SweetDev Tutorial Part 4 Splinter Layout
Now I am going to explain the Splinter Layout used with SweetDev. A splinter allows you to resize columns which can greatly enhance a user interface. Below is the example code to create the current splinter layout. Make sure you have configured SweetDev from my prior posts.
SplinterLayout.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>Splitter Layout</title>
<ria:resourcesImport importResources="true"/>
</head>
<body>
<br><br>
<ria:spliterlayout style="border:1px solid black"
spliterStyle="background-color : black"
minWidth="200"
minHeight="30"
height="600px">
<ria:slcolumn width="43%">
<ria:slCell height="18%" style="background-color:#FFD24D">
Top left cell
</ria:slCell>
<ria:slCell height="19%" style="background-color:#C6B3FF">
Middle left cell
</ria:slCell>
<ria:slCell height="59%">
Bottom left cell
</ria:slCell>
</ria:slcolumn>
<ria:slcolumn style="background-color:#CCDAFF" width="29%">Middle column</ria:slcolumn>
<ria:slcolumn style="background-color:white" width="24%">Right column</ria:slcolumn>
</ria:spliterlayout>
</div>
</div>
<br/>
</body>
</html>
<%@ 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>Splitter Layout</title>
<ria:resourcesImport importResources="true"/>
</head>
<body>
<br><br>
<ria:spliterlayout style="border:1px solid black"
spliterStyle="background-color : black"
minWidth="200"
minHeight="30"
height="600px">
<ria:slcolumn width="43%">
<ria:slCell height="18%" style="background-color:#FFD24D">
Top left cell
</ria:slCell>
<ria:slCell height="19%" style="background-color:#C6B3FF">
Middle left cell
</ria:slCell>
<ria:slCell height="59%">
Bottom left cell
</ria:slCell>
</ria:slcolumn>
<ria:slcolumn style="background-color:#CCDAFF" width="29%">Middle column</ria:slcolumn>
<ria:slcolumn style="background-color:white" width="24%">Right column</ria:slcolumn>
</ria:spliterlayout>
</div>
</div>
<br/>
</body>
</html>
You can see that the spliterlayout will start with this tag: ria:spliterlayout. Each column is separated by this tag: ria:slcolumn
and each cell within the column is separated by this tag: ria:slCell.
Go To Part 5
0 comments:
Post a Comment