Thursday, June 11, 2009

SweetDev Docking a Window Part 6

Another thing that you are able to do with the SweetDev tool is to create docking windows.
In this page, you have three windows that you have created. You can set an attribute that will allow you to minimize the window or expand the window. The big advantage is that you are allowed to move the window to a new location on the page. See following screen shot.

You can see that the programmersweblog page has been moved to a new location.

Here is the code that would create these docking windows for your jsp page.





<%@ 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>Docking Example</title>
<ria:resourcesImport importResources="true"/>
<style type="text/css">
.ideo-acc-mycontent{
border : 1px dashed #CCDAFF;
}
</style>
</head>
<body>
<br><br>
<ria:dockinglayout spliterStyle="background-color : black;"
minWidth="200" minHeight="20" height="600px" width="90%">

<ria:dockingcolumn width="58%" styleClass="blue">

<ria:newwindow id="window2" title="The Programmers Weblog"
url="http://www.theprogrammersweblog.com/" message="Programmer" maximize="true" minimize="true"/>
<ria:newwindow id="window1" title="Google"
url="http://www.google.fr" message="Google Page" maximize="false" minimize="false"/>
</ria:dockingcolumn>

<ria:dockingcolumn width="20%" styleClass="red">
<ria:newwindow id="window3" title="Custom content" maximize="false" minimize="false">
Hello World !!
</ria:newwindow>
</ria:dockingcolumn>

<ria:dockingcolumn width="38%" styleClass="yellow">
</ria:dockingcolumn>

</ria:dockinglayout>
<br/>

</body>
</html>



The custom window will allow you to put the data that you want in the window.

Go To Part 7

0 comments: