1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
|
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chat Demo | Ice for JavaScript</title>
<!-- Bundle with all the stylesheets used to build the user interface,
see assets/Makefile in your distribution for details -->
<link rel="stylesheet" type="text/css" href="../../assets/common.css" />
<link rel="icon" type="image/x-icon" href="../../assets/favicon.ico">
</head>
<body>
<!-- Header section that contains title and navigation bar -->
<section id="header">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="../../index.html">Ice for JavaScript</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li><a href="#" id="viewReadme">Readme</a></li>
<li><a href="#" id="viewSource">Source</a></li>
</ul>
</section>
</nav>
<ul class="breadcrumbs">
<li><a href="../../index.html">Ice</a></li>
<li><a href="../index.html">Demos</a></li>
<li class="current"><a href="#">Chat Demo</a></li>
</ul>
</section>
<!-- Main section that contains the user interface -->
<section role="main" id="body">
<!-- Sign In Form -->
<div class="row" id="signin-form">
<div class="large-12 medium-12 columns">
<form>
<div class="row">
<div class="small-4 medium-3 columns">
<label class="right inline" for="username">Username:</label>
</div>
<div class="small-8 medium-9 columns">
<input type="text" id="username"/>
</div>
</div>
<div class="row">
<div class="small-4 medium-3 columns">
<label class="right inline" for="password">Password:</label>
</div>
<div class="small-8 medium-9 columns">
<input type="password" id="password"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<a href="#" class="button small right" id="signin">Sign in</a>
</div>
</div>
</form>
</div>
</div>
<!-- Error Alert -->
<div class="row" style="display:none;opacity:0;" id="signin-alert">
<div class="large-12 medium-12 columns">
<div data-alert class="alert-box warning round">
<span class="error-message"></span>
</div>
</div>
</div>
<!-- Loading Indicator -->
<div class="row" id="loading" style="display:none;opacity:0;">
<div class="large-12 medium-12 columns">
<div class="panel">
<h3>Loading Please Wait...</h3>
<div class="progress radius round">
<span class="meter" style="width:0%"></span>
</div>
</div>
</div>
</div>
<!-- Chat Form -->
<div class="row" id="chat-form" style="display:none;opacity:0;">
<div class="large-12 medium-12 columns">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">Chat Demo</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="has-form">
<a href="#" id="signout" class="button">Sign out</a>
</li>
</ul>
</section>
</nav>
<form>
<div class="row">
<div class="large-2 columns">
<ul id="users" class="side-nav"></ul>
</div>
<div class="large-10 columns">
<textarea id="output" class="disabled" readonly></textarea>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" id="input" autocomplete="off"/>
</div>
</div>
</form>
</div>
</div>
</section>
<!-- Modal dialog to show the client README -->
<div id="readme-modal" class="reveal-modal" data-reveal>
<h4>Chat Demo Readme</h4>
<hr/>
<p>This demo implements a push client for the
<a href="http://www.zeroc.com/chat/index.html">ZeroC's Chat Demo Application</a>. You can use the
<a href="#" class="chatbutton">Live Client</a> if you don't want to setup your own server.
</p>
<p>To set up the server follow the instructions from the
<a href="http://www.zeroc.com/chat/download.html">Chat Demo Distribution</a>.</p>
<p>You will need to update the Glacier2 configuration to include WSS endpoints.
Edit <code>ChatDemo-1.4.0/config/config.glacier2router</code>
and update the <code>Glacier2.Client.Endpoints</code> property with the value shown below:</p>
<p>
<code style="color:#858585;font-weight:normal;font-size:80%;">
Glacier2.Client.Endpoints=ssl -p 4064 -t 10000 -h 127.0.0.1:tcp -p 4502 -t 10000 -h 127.0.0.1:wss -p 5064 -t 10000 -h 127.0.0.1
</code>
</p>
<p>After making those modifications to the Glacier2 router configuration, you can start the Chat Demo
server and Glacier2 router as documented in the Chat Demo distribution.</p>
<div class="panel callout radius">
<p>You must configure your environment to run IceWS applications as documented in the Ice
<a href="http://doc.zeroc.com/display/Rel/Ice+3.6b+Release+Notes">Release Notes</a>.</p>
</div>
<p>Once you have configured and started the Chat Demo server and router,
you can log into the chat using the sign-in form below.</p>
<h4>Using the minified scripts</h4>
<p>When the demo is built with optimizations enabled, it creates a minified
script <code>browser/Client.min.js</code> that includes:
</p>
<ul>
<li>Ice.js (The Ice run-time library)</li>
<li>Glacier2.js (The Glacier2 library)</li>
<li>Chat.js & ChatSession.js (The generated code for this demo)</li>
<li>Client.js (The client application)</li>
</ul>
<p>To use the minified version you should edit the <code>demo/ChatDemo/index.html</code>
file and comment out the non-optimized scripts:</p>
<pre>
<!-- Scripts used during development, for optimized builds
comment the following scripts and uncomment browser/Client.min.js
below -->
<!-- Ice.js (Ice run-time library) -->
<script type="text/javascript" src="../../../lib/Ice.js"></script>
<!-- Glacier2.js (Glacier2 run-time library) -->
<script type="text/javascript" src="../../../lib/Glacier2.js"></script>
<!-- Chat.js (Demo generated code) -->
<script type="text/javascript" src="Chat.js"></script>
<!-- ChatSession.js (Demo generated code) -->
<script type="text/javascript" src="ChatSession.js"></script>
<!-- Client.js (Chat Demo Application) -->
<script type="text/javascript" src="Client.js"></script>
</pre>
<p>Then uncomment the script tag for the minified version</p>
<pre>
<!-- Uncomment the following script to use a minified version of the
scripts that includes: the Ice and Glacier2 run-time libraries,
the generated code and the demo application. -->
<!--<script src="Client.min.js"></script>-->
</pre>
<a class="close-reveal-modal">×</a>
</div>
<!-- Modal dialog to show the client source code -->
<div id="source-modal" class="reveal-modal" data-reveal>
<a class="close-reveal-modal">×</a>
<dl class="tabs" data-tab>
<dt></dt>
<dd class="active"><a href="#panel2-1">Slice</a></dd>
<dd><a href="#panel2-2">JavaScript</a></dd>
<dd><a href="#panel2-3">HTML</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<h6>File: ChatDemo/Chat.ice</h6>
<pre class="source language-c" data-code="Chat.ice"></pre>
<h6>File: ChatDemo/ChatSession.ice</h6>
<pre class="source language-c" data-code="ChatSession.ice"></pre>
</div>
<div class="content" id="panel2-2">
<h6>File: ChatDemo/Client.js</h6>
<pre class="source" data-code="Client.js"></pre>
</div>
<div class="content" id="panel2-3">
<h6>File: ChatDemo/index.html</h6>
<pre class="source" data-code="index.html"></pre>
</div>
</div>
</div>
<!-- Footer section -->
<section id="footer">
<div class="logo">
<h4><strong>ZeroC</strong></h4>
</div>
<div class="copyright">
<h6>© 2014 ZeroC, Inc. All rights reserved.</h6>
</div>
</section>
<!-- Bundle with all the scripts used to build the user interface,
see assets/Makefile in your distribution for details -->
<script type="text/javascript" src="../../assets/common.min.js"></script>
<!-- Scripts used during development, for optimized builds
comment the following scripts and uncomment Client.min.js
below -->
<!-- Ice.js (Ice run-time library) -->
<script type="text/javascript" src="../../lib/Ice.js"></script>
<!-- Glacier2.js (Glacier2 run-time library) -->
<script type="text/javascript" src="../../lib/Glacier2.js"></script>
<!-- Chat.js (Demo generated code) -->
<script type="text/javascript" src="Chat.js"></script>
<!-- ChatSession.js (Demo generated code) -->
<script type="text/javascript" src="ChatSession.js"></script>
<!-- Client.js (Chat Demo Application) -->
<script type="text/javascript" src="Client.js"></script>
<!-- Uncomment the following script to use a minified version of the
scripts that includes: the Ice and Glacier2 run-time libraries,
the generated code and the demo application. -->
<!--<script type="text/javascript" src="Client.min.js"></script>-->
<script type="text/javascript">
$(".chatbutton").click(
function(e)
{
window.open("https://demo.zeroc.com/chat/js/index.html", "ChatDemo",
"width=800,height=600,location=no,directories=no,status=yes," +
"menubar=no,scrollbars=yes,resizable=yes,toolbar=no");
return false;
});
if(["http:", "https:"].indexOf(document.location.protocol) !== -1)
{
checkGenerated(["Chat.js"]);
}
</script>
</body>
</html>
|
