Window widget
Specifications
- Widget/Class name: DHTMLSuite.windowWidget
- Demos:
- Css:
- [THEMES_FOLDER]/css/window.css and
- [THEMES_FOLDER]/css/window-theme-windows.css
Configuration
The first thing you need to do is to include the javascript files in your HTML file. This can be done by including the entire dhtml-suite-for-applications.js or by using the include mechanism and include the Javascript files needed for the windowWidget that way. Example:
<script type="text/javascript" src="../js/dhtmlSuite-common.js"></script>
<script type="text/javascript">
DHTMLSuite.include("windowWidget");
</SCRIPT>
Creating a window
We should now be ready to create our window. There are several ways to do that. The first method is to create it from HTML markup. What we do is to add some nested divs to our page which describes the window.
Example:
<div id="myWindow"
windowProperties="title:My window,width:440,height:380,maxWidth:900,cookieName:window,
xPos:5,yPos:170,minWidth:365,minHeight:250,activeTabId:windowTab2">
<div id="windowTab1" class="DHTMLSuite_windowContent" tabProperties="tabTitle:This is a tab,overflow:hidden">
Content of second window
</div>
<div id="windowTab2" class="DHTMLSuite_windowContent" tabProperties="tabTitle:This is also a tab,overflow:hidden,contentUrl:myFile.html">
</div>
</div>
This code describes a window with two tabs. Properties for the window are inserted into the custom attribute "windowProperties" of the main DIV. It's a comma separated list of different properties. These are the available properties:
- isVisible - Is the window visible - default = true (Optional)
- isClosable - Is the window closable - default = true (Optional)
- isDragable - Is the window dragable - default = true (Optional)
- isResizable - Is the window resizable - default = true (Optional)
- isMinimizable - Is the window minimizable - default = true (Optional)
- cookieName - Cookie name where properties are remembered (Optional)
- title - Title inside title bar
- icon - Icon in window title bar
- width - Initial width of window - this value may be overridden by value stored in cookie
- height - Initial height of window - this value may be overridden by value stored in cookie
- xPos - X position of window
- yPos - Y position of window
- activeTabId - Id of active window tab (Optional)
- minWidth - Minimium width of window (Optional)
- maxWidth - Maximum width of window (Optional)
- minHeight - Min height of window (Optional)
- maxHeight - Max height of window (Optional)
- windowsTheme - Display window with windows theme (true or false) (Optional)
- callbackOnClose - Call back to execute when the window is closed. (Optional)
As you can see, there are a lot of attributes to choose from. However, you don't have to specify all of them. Almost all attributes are optional and will be assigned to default values in case you omit them.
You should also notice that the window DIV has it's unique id.
Window tabs are described by divs inside the main window div. Properties for a tab is defined in the custom attribute "tabProperties". These are the supported attributes:
- tabTitle - Title of tab
- contentUrl - Url to load from the server (Optional)
- id - Id of tab
- htmlElementId - Id of HTML element. (Optional)
- isDeleted - Is the tab flagged as deleted, i.e. not visible(Optional)
- overflow - What to do when content is wider or higher than the window - css overflow attribute like "auto","scroll" or "hidden". Default is "auto" (Optional)
In the code above, we will have two tabs. The content of the first window will simply be "Content of second window", i.e. the content inside the DIV tag. The second window will be populated with the content of the file myFile.html(the contentUrl attribute).
We are now ready to write the Javascript code needed to create the window. It looks like this:
<SCRIPT type="text/javascript">
var windowModel = new DHTMLSuite.windowModel();
windowModel.createWindowModelFromMarkUp('myWindow');
var colorWindow = new DHTMLSuite.windowWidget();
colorWindow.setLayoutThemeWindows();
colorWindow.addWindowModel(windowModel);
colorWindow.init();
</SCRIPT>
windowModel is an object which stores information about our window. We fill it with information by pointing it to the window markup we added before. This is done by the createWindowModelFromMarkUp method. As you can see, we are sending in the id of the main DIV.
The last thing we have to do is to create the window widget object. This is done in the last four lines. The first line
var colorWindow = new DHTMLSuite.windowWidget();
creates the window widget object. setLayoutThemeWindows is used to define that I want a "windows style" sub theme of zune. Each window got two sub themes, so you have actually 8 themes to choose from.
addWindowModel is used to connect our window widget with our window model. Finally, we call init() to initalize and display the window.
Create window without use of HTML markup.
You can also create a window with Javascript only. This is useful if you need to create it dynamically at runtime, i.e. after the content of your page has been rendered by the browser. Example: when a user clicks on a link on your page.
This is example of how to do that:
<script type="text/javascript">
function createNewWindow()
{
var newWindowModel = new DHTMLSuite.windowModel({windowsTheme:true,id:'newWindow',title:'New dynamically created window',xPos:200,yPos:200,minWidth:100,minHeight:100 } );
newWindowModel.addTab({ id:'myTab',htmlElementId:'myTab',tabTitle:'tab1',
textContent:'Hello' } );
var newWindowWidget = new DHTMLSuite.windowWidget(newWindowModel);
newWindowWidget.setLayoutThemeWindows()
newWindowWidget.init();
}
</script>
<a href="#" onclick="createNewWindow();return false">Create window</A>
You have the same properties to work with here as you had when you created a window from markup. The difference is that you send them directly to the objects in associative arrays.
NB! It's not possible to display windows with different themes on the same web page. All windows on a web page has to use the same theme.
For more information, please see the class documentation.
