Learning Ajax framework-dojo: section 9-Details of FloatingPane widgets (with source code)

The previous section 8 describes the layout widget used for page layout of the Dojo widget. Layout widgets include nine widgets. Section 8 illustrates the usage of these nine widgets, but does not go into depth. With continuous learning and application, we have a deeper understanding of every widget. In this section, the usage of the FloatingPane widget is described through examples.

 

Part 1: FloatingPane widget Concept

FloatingPane widgets are floating panels that can simulate windows.

Floating: It means you can drag and drop on the page at will;

Simulate windows window Effect: It has the characteristics of windows. For example, it has the most basic features such as minimization, restoration, maximization, and closing buttons. It can be changed in size and can be nested in internal windows, other pages can be opened.

 

 

The second part introduces the FloatingPane widget

Note: Introduce the dojo. js package and write src Based on the path you have created. Introduce FloatingPane and still use dojo. require. Example:

<Script type = "text/javascript">
Var djConfig = {
IsDebug: true
};
</Script>
<Script type = "text/javascript" src ="Dojo-0.3.1-ajax/dojo. js">
</Script>
<Script language = "JavaScript" type = "text/javascript">
Dojo. require("Dojo. widget. FloatingPane");

</Script>

 

 

Part 3: FloatingPane widget simulates basic properties of windows

Note: Pay attention to the parameters used. After running the example, you can see the role of each parameter.

 

Case 1: directly load a FloatingPane

When running the page, the FloatingPane is directly displayed at the top of the page, which is equivalent to onload. So how should FloatingPane be applied here? Example:

<Div id = "floatingpane"DojoType= "FloatingPane"Title= "Outer window"Constraintoiner= "True" "style =" width: 300px; height: 200px; left: 200px ">
This is the first FloatingPane.

Main panel with <a href = "http://www.dojotoolkit.org/%22%3Ea link </a>
</Div>

 

Case 2: A FloatingPane is directly loaded on the page. The title bar contains an image icon.

When running the page, the FloatingPane is directly displayed at the top of the page, and the title bar contains an image icon. The key property value isIconSrc. Example:

<Div id = "floatingpane2" dojoType = "FloatingPane" title = "Outer window" constraintoiner = "true"IconSrc= "Images/check.gif" style = "width: 300px; height: 200px; left: 200px">
This is the second FloatingPane.

Main panel with <a href = "http://www.dojotoolkit.org/%22%3Ea link </a>
</Div>

Note: The iconSrc Path depends on the path you have created.

 

Case 3: load a FloatingPane directly on the page,The title bar contains image icons.With the function of minimizing, restoring, maximizing, and disabling

When running the page, the function of minimizing, restoring, maximizing, and disabling FloatingPane is added based on case2. What are the key attribute values? See the following example:

<Div id = "floatingpane3"

DojoType = "FloatingPane"
Title = "Resizable window w/shadow"
Constraw.container = "true"
DisplayMinimizeAction= "True"
DisplayMaximizeAction= "True"
DisplayCloseAction= "True"
IconSrc = "images/note.gif"
Style = "width: 300px; height: 200px; left: 600px ;"
>
This is the third FloatingPane.

</Div>

 

Case 4: load a FloatingPane directly on the page,The title bar contains image icons.Can be minimized, restored, maximized, or disabled, and can be changed at the same time.FloatingPaneSize

When running the page, the function of changing the FloatingPane size is added based on case3. What are the key attribute values? See the following example:

<Div id = "floatingpane4"

DojoType = "FloatingPane"
Title = "Resizable window w/shadow"
Constraw.container = "true"
HasShadow = "true"
Resizable= "True"
DisplayMinimizeAction = "true"
DisplayMaximizeAction = "true"
DisplayCloseAction = "true"
IconSrc = "images/note.gif"
Style = "width: 300px; height: 200px; left: 600px ;"
>
This is the forth FloatingPane.

</Div>

 

 

Part 4: nesting of FloatingPane Widgets

FloatingPane nesting mode is similar to the previous nesting mode. For example, in the layout widget of the Dojo widget, nesting can be used to hold the CotentPane of the page. Generally, it is added to a container in LayoutContainer, SplitContainer, TabContainer, and AccordionContainer. FloatingPane is no exception. Many widgets can be nested as child components.

Note: When nesting other widgets, You need to introduce the corresponding Widgets. For the method, see the second part of this section.

Case 1: load a FloatingPane on the page and load anotherFloatingPane

When the page is running, load a FloatingPane embedded with FloatingPane

<Div dojoType ="FloatingPane"
Title = "inner window w/shadow"
Constraw.container = "true"
HasShadow = "true"
Resizable = "true"
DisplayMinimizeAction = "true"
DisplayMaximizeAction = "true"
DisplayCloseAction = "true"
IconSrc = "images/note.gif"
Style = "width: 300px; height: 200px; left: 600px ;"
>
Outer floatingpane.

<Div dojoType ="FloatingPane"
Title = "Inner window"
Constraintoiner = "1"
Style = "left: 20px; top: 60px; width: 120px; height: 80px ;"
>
 Inner floatingpane.
</Div>

</Div>

 

Case 2: load a FloatingPane on the page and load the TabContainer inside it.

When the page is running, load a FloatingPane embedded with two tabs

<Div dojoType ="FloatingPane"Id =" tfp "title =" Tabbed Floating Pane "hasShadow =" true "resizable =" true "style =" width: 300px; height: 300px; ">
<Div dojoType ="TabContainer"Id =" tabs "layoutAlign =" client ">
<Div dojoType ="ContentPane"Label =" tab1 "> Tab1 Content </div>
<Div dojoType ="ContentPane"Label =" tab2 "> Tab2 Content </div>
</Div>
</Div>

 

Case 3: load a FloatingPane on the page and load the LayoutContainer inside it.

When the page is running, load a FloatingPane embedded with LayoutContainer

<Div dojoType ="FloatingPane"
Title = "Layout window w/shadow"
Constraw.container = "true"
HasShadow = "true"
Resizable = "true"
DisplayMinimizeAction = "true"
DisplayMaximizeAction = "true"
IconSrc = "images/save.gif"
Style = "width: 300px; height: 200px; top: 600px; left: 400px ;"
>
<Div dojoType ="ContentPane"LayoutAlign= "Top" style = "border: solid white;"> TOP </div>
<Div dojoType = "ContentPane" layoutAlign = "bottom" style = "border: solid white;"> BOTTOM </div>
<Div dojoType = "ContentPane" layoutAlign = "left" style = "border: solid white;"> LEFT </div>
<Div dojoType = "ContentPane" layoutAlign = "right" style = "border: solid white;"> RIGHT </div>
<Div dojoType = "ContentPane" layoutAlign = "client" style = "border: solid white;"> CENTER </div>
</Div>

Case 4: load a FloatingPane on the page and load the Tree inside it

When the page is running, load a FloatingPane embedded in the Tree

<Div dojoType ="FloatingPane"
Title = "Content pane is tree"
Constraw.container = "true"
HasShadow = "true"
Resizable = "true"
DisplayMinimizeAction = "true"
DisplayMaximizeAction = "true"
ContentWrapper = "none"
Style = "width: 300px; height: 200px; top: 100px; left: 400px ;"
>
<Div dojoType ="Tree"PublishSelectionTopic =" treeSelected "toggle =" fade "widgetId =" firstTree ">
<Div dojoType = "TreeNode" title = "Item 1">
<Div dojoType = "TreeNode" title = "Item 1.1"> <br/> </div>
<Div dojoType = "TreeNode" title = "item1.2">
<Div dojoType = "TreeNode" title = "Item 1.2.1"> </div>
<Div dojoType = "TreeNode" title = "Item 1.2.2"> </div>
</Div>
<Div dojoType = "TreeNode" title = "item1.3">
<Div dojoType = "TreeNode" title = "Item 1.3.1"> </div>
<Div dojoType = "TreeNode" title = "Item 1.3.2"> </div>
</Div>
<Div dojoType = "TreeNode" title = "item1.4">
<Div dojoType = "TreeNode" title = "Item 1.4.1"> </div>
</Div>
</Div>
</Div>
</Div>

 

Case 5: load a FloatingPane on the page and load another page inside it

When the page is running, load a FloatingPane embedded with the content of another page

<Div dojoType ="FloatingPane"Style =" width: 300px; height: 300px; left: 100px; top: 100px ;"Href= "Doc0.html" executeScripts = "true" title = "externally loaded">

</Div>

 

Case 6: load a FloatingPane on the page and load the Button inside it.

When the page is running, load a FloatingPane embedded with the button

<Div dojoType ="FloatingPane"Style =" width: 300px; height: 300px; left: 100px; top: 100px ;"Href= "Doc0.html" executeScripts = "true" title = "externally loaded">

<Div id = "modify" dojoType ="Button"Style =" width: 70px; height: 25px "> OK </div>

</Div>

..............................

The above lists only a few situations. You can apply more situations based on your actual needs.

 

 

Part 5: comprehensive application example of FloatingPane widget

Implemented functions:When the home page is loaded, a button is displayed, and the hidden FloatingPane is triggered when the button is clicked.

Analysis page content:Home page -- button (Display) -- click event -- JavaScript

Home page -- import package -- FloatingPane (hidden) -- button trigger

Sample Code:

1. method and content of package Introduction: See the second part of this section.

<Script language = "JavaScript" type = "text/javascript">
Dojo. require ("dojo. widget. FloatingPane ");

Dojo. require ("dojo. widget. Button ");
Dojo. require ("dojo. widget. TabContainer ");
</Script>

2. Click Event JavaScript:

<Script language = "JavaScript" type = "text/javascript">
Var fp;
Function init (e ){
Fp = dojo. widget. byId ("Floatpane");
}
Dojo.AddOnLoad(Init );
</Script>

3. button on the home page

<Input id = "dd" type ="Button"Value =" click to trigger a floating window "onClick =" javascript:Fp. show (); "/>

4. floatingpane on the home page

<Div id ="Floatpane"DojoType ="FloatingPane"Title =" Widget Settings "constraw.container =" true "iconSrc =" images/edit.gif "hasShadow =" true "resizable =" true "displayMinimizeAction =" true "displayMaximizeAction =" true "displayCloseAction = "true" style = "width: 530px; height: 400px; left: 200px;Display: none">
<Div id = "mainTabContainer" dojoType = "TabContainer" style = "width: 500px; height: 300px" selectedTab = "tab1">
<Div id = "tab1" dojoType = "ContentPane" label = "Settings">
<Table width = "400" border = "0" cellspacing = "0" cellpadding = "0">
<Tr height = "20px">
<Td>
</Td>
<Td>
</Td>
</Tr>
<Tr>
<Td width = "35">
</Td>
& Lt; td width = "350" & gt;
<Span class = "STYLE3">
<Label id = "color" title = "color">
Color: Widget Border Color
</Label>
</Span>
</Td>
</Tr>
<Tr>
<Td>
</Td>
<Td>
<Table width = "350" border = "0" height = "25px">
<Tr>
<Td>
<Input type = "text" value = "" id = "nowColor" style = "width: 400px; height: 25px"/>
</Td>
<Td>
<Div id = "pageColorViews" style = "background: #000; width: 50px; height: 30px;">
</Div>
</Td>
<Td>
</Td>
<Td>

</Td>
</Tr>
</Table>
</Td>
</Tr>
</Table>
</Div>
<Div id = "tab2" dojoType = "ContentPane" label = "Advanced">
<Table width = "400" border = "0" cellspacing = "0" cellpadding = "0">
<Tr height = "20px">
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td width = "35">
</Td>
& Lt; td width = "350" & gt;
<Span class = "STYLE3">
<Label id = "title" title = "title">
Title: Title of widget
</Label>
</Span>
</Td>
</Tr>
<Tr>
<Td> </td>
<Td>
<Input type = "text" id = "texttitle" style = "width: 350px; height: 25px"/>
</Td>
</Tr>
<Tr>
<Td> </td>
<Td>
<Span class = "STYLE3">
<Label id = "version" title = "version">
Version: Version of widget (1.0.0)
</Label>
</Span>
</Td>
</Tr>
<Tr>
<Td> </td>
<Td>
<Input type = "text" id = "textversion" style = "width: 350px; height: 25px" value = "1.2.0"/>
</Td>
</Tr>
</Table>
</Div>
</Div>
<Table width = "400" border = "0" cellspacing = "0" cellpadding = "0">
<Tr height = "20px" style = "width: 200px">
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td style = "width: 100px">
</Td>
<Td align = "center">
<Div id = "modify" dojoType = "Button" style = "width: 70px; height: 25px" onClick = "javascript: modifyTitle ();">
OK
</Div>
</Td>
<Td align = "center">
<Div id = "cancel" dojoType = "Button" style = "width: 70px; height: 25px" onClick = "javascript: modifyTitle ();">
Cancel
</Div>
</Td>
</Tr>
</Table>
</Div>
</Div>

 

Summary:

I have written so much about it. I hope you can understand it and hope it will help learners.