1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ClientApi.aspx.cs" Inherits="ZeeControls2Demo.WebLayout.Advanced.ClientApi" Theme="Default" %>
2
3 <%@ Register Assembly="ZettaCube.ZeeControls" Namespace="ZettaCube.ZeeControls" TagPrefix="cc1" %>
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6
7 <html xmlns="http://www.w3.org/1999/xhtml" >
8 <head id="Head1" runat="server">
9 <title>Client API</title>
10
11 <script type="text/javascript" src="../../common.js"></script>
12
13 </head>
14 <body>
15 <form id="form1" runat="server">
16 <div>
17
18 <script type="text/javascript">
19
20 var standaloneContainerId, iframePanelId;
21
22 function $(e){
23 return document.getElementById(e);
24 };
25
26 function RefreshValues() {
27 var dim;
28 var topContainer = ZCWS.GetTopmostContainer();
29 var panel2 = ZCWS.GetPanel(iframePanelId);
30 var container = ZCWS.GetContainer(standaloneContainerId);
31
32 dim = topContainer.GetDimensions();
33 $('TopDim').innerHTML = [dim.width, dim.height].join(',');
34
35 dim = topContainer.GetContentDimensions();
36 $('TopContentDim').innerHTML = [dim.width, dim.height].join(',');
37
38 $('PanelCount').innerHTML = topContainer.GetPanelCount();
39
40 dim = container.GetDimensions();
41 $('SCDim').innerHTML = [dim.width, dim.height].join(',');
42 $('SCWidth').value = dim.width;
43 $('SCHeight').value = dim.height;
44
45 dim = container.GetContentDimensions();
46 $('SCContentDim').innerHTML = [dim.width, dim.height].join(',');
47
48 $('SCPanelCount').innerHTML = container.GetPanelCount();
49
50 dim = panel2.GetDimensions();
51 $('PanelDim').innerHTML = [dim.width, dim.height].join(',');
52
53 dim = panel2.GetContentDimensions();
54 $('PanelContentDim').innerHTML = [dim.width, dim.height].join(',');
55
56 $('PanelState').options[panel2.GetState()].selected = true;
57 }
58
59 function UpdatePanelState() {
60 var ddl = $('PanelState');
61 var panel2 = ZCWS.GetPanel(iframePanelId);
62
63 panel2.SetState(ddl.options[ddl.selectedIndex].value);
64 }
65
66 function SetIFrameUrl() {
67 ZCWS.GetPanel(iframePanelId).SetIFrameUrl($('IFrameUrl').value);
68 }
69
70 function SetContainerDim() {
71 var container = ZCWS.GetContainer(standaloneContainerId);
72 var w = parseInt($('SCWidth').value);
73 var h = parseInt($('SCHeight').value);
74
75 if ((w > 0) && (h > 0) && (w <= 500) && (h <= 500)) {
76 container.SetDimensions(w, h);
77 RefreshValues();
78 } else {
79 alert("Width and height must be greater than 0 and not greater than 500 (in this demo only).");
80 }
81 }
82
83 </script>
84
85 <cc1:WebLayout ID="WebLayout1" runat="server" Height="665px"
86 Width="749px" FitParent="FitWindow" Orientation="Horizontal"><Panels>
87 <cc1:WebLayoutPanel runat="server" ID="WebLayoutPanel1" PreferredSize="80" >
88 <Content>
89 <strong>Client API</strong> <span style="font-size: 8pt">(# not available in WebLayoutLite)</span> <br /><br />
90 The buttons below will trigger JavaScript on the browser only. No postback will
91 be generated.<br />
92 (For demonstration purpose, only selected methods are available below.)<br /><br />
93 </Content>
94 </cc1:WebLayoutPanel>
95 <cc1:WebLayoutPanel runat="server" Filled="True" ID="WebLayoutPanel3" >
96
97 <Content>
98
99 <cc1:WebLayout ID="WebLayout2" runat="server" FitParent="FitParentContainer">
100 <Panels>
101 <cc1:WebLayoutPanel runat="server" PreferredSize="350">
102 <Content>
103 <asp:Panel ID="Panel1" runat="server">
104 Selected methods on topmost container:<asp:Panel ID="Panel2" runat="server" CssClass="indent">
105 GetDimensions():
106 <span id="TopDim"></span><br />
107 GetContentDimensions():
108 <span id="TopContentDim"></span><br />
109 GetPanelCount():
110 <span id="PanelCount"></span><br />
111 </asp:Panel>
112 </asp:Panel>
113 <asp:Panel ID="Panel5" runat="server">
114 Selected methods on StandaloneContainer:<asp:Panel ID="Panel6" runat="server" CssClass="indent">
115 GetDimensions():
116 <span id="SCDim"></span><br />
117 GetContentDimensions():
118 <span id="SCContentDim"></span><br />
119 GetPanelCount():
120 <span id="SCPanelCount"></span><br />
121 SetDimensions(W, H):
122 <input id="SCWidth" style="width: 25px" type="text" size="20" />
123 <input id="SCHeight" style="width: 25px" type="text" />
124 <input type="button" value="Set" onclick="SetContainerDim();" /></asp:Panel>
125 </asp:Panel>
126 <asp:Panel ID="Panel3" runat="server">
127 Selected methods on IFRAME panel:<asp:Panel ID="Panel4" runat="server" CssClass="indent">
128 GetDimensions():
129 <span id="PanelDim"></span><br />
130 GetContentDimensions():
131 <span id="PanelContentDim"></span><br />
132 Get/SetPanelState():
133 <select id="PanelState" onchange="UpdatePanelState();">
134 <option value="0" selected="selected">Normal</option>
135 <option value="1">ForwardCollapsed</option>
136 <option value="2">BackwardCollapsed</option>
137 <option value="3">Hidden</option>
138 </select>
139 <br />
140 IFrameUrl:
141 <input id="IFrameUrl" type="text" />
142 <input type="button" value="Set" onclick="SetIFrameUrl();" /></asp:Panel>
143 </asp:Panel>
144 <input id="Refresh" type="button" value="Refresh" onclick="RefreshValues();" />
145
146 </Content>
147 </cc1:WebLayoutPanel>
148 <cc1:WebLayoutPanel runat="server" Filled="True">
149
150 <Content>
151 Below is StandaloneContainer:<br />
152
153 <cc1:WebLayout ID="StandaloneContainer" runat="server" Height="300px" Width="350px" FitParent="None">
154 <Panels>
155 <cc1:WebLayoutPanel runat="server">
156 <Content>
157 Left panel
158 <div id="blah1" class="blah"></div>
159 </Content>
160 </cc1:WebLayoutPanel>
161 <cc1:WebLayoutPanel runat="server">
162 <Content>
163 Right panel
164 </Content>
165 </cc1:WebLayoutPanel>
166 </Panels>
167 </cc1:WebLayout>
168
169 </Content>
170
171 </cc1:WebLayoutPanel>
172 </Panels>
173
174
175 </cc1:WebLayout>
176
177 </Content>
178
179 </cc1:WebLayoutPanel>
180 <cc1:WebLayoutPanel runat="server" ID="IFramePanel" IFrameUrl="http://www.zettacube.com/" PreferredSize="200" >
181 </cc1:WebLayoutPanel>
182 </Panels>
183 </cc1:WebLayout>
184
185 <script type="text/javascript">
186 GenLongContent('blah1', 1);
187 standaloneContainerId = '<%= StandaloneContainer.ClientID %>';
188 iframePanelId = '<%= IFramePanel.ClientID %>';
189
190 setTimeout('RefreshValues();', 500);
191 </script>
192
193 </div>
194 </form>
195 </body>
196 </html>
197