This repository has been archived by the owner on Apr 18, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathhtml-gui.html
460 lines (428 loc) · 51.4 KB
/
html-gui.html
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
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="sites/saros-project.org/themes/saros/favicon.ico.html" type="image/vnd.microsoft.icon" />
<link rel="shortlink" href="node/168.html" />
<link rel="canonical" href="html-gui.html" />
<meta name="Generator" content="Drupal 7 (http://drupal.org)" />
<title>Saros HTML GUI | Saros</title>
<style type="text/css" media="all">
@import url("modules/system/system.base.css");
@import url("modules/system/system.menus.css");
@import url("modules/system/system.messages.css");
@import url("modules/system/system.theme.css");
</style>
<style type="text/css" media="all">
@import url("sites/all/modules/ldap/ldap_user/ldap_user.css");
@import url("modules/book/book.css");
@import url("modules/comment/comment.css");
@import url("modules/field/theme/field.css");
@import url("modules/node/node.css");
@import url("modules/search/search.css");
@import url("sites/all/modules/toc_filter/toc_filter.css");
@import url("modules/user/user.css");
@import url("modules/forum/forum.css");
</style>
<style type="text/css" media="all">
@import url("sites/all/modules/ctools/css/ctools.css");
@import url("sites/all/modules/ldap/ldap_servers/ldap_servers.admin.css");
</style>
<style type="text/css" media="all">
@import url("sites/saros-project.org/themes/touch/style.css");
@import url("sites/saros-project.org/themes/saros/saros_style.css");
</style>
<script type="text/javascript" src="misc/jquery.js%3Fv=1.4.4.html"></script>
<script type="text/javascript" src="misc/jquery.once.js%3Fv=1.2.html"></script>
<script type="text/javascript" src="misc/drupal.js%3Fp9abym.html"></script>
<script type="text/javascript" src="sites/all/modules/toc_filter/toc_filter.js%3Fp9abym.html"></script>
<script type="text/javascript" src="sites/saros-project.org/themes/touch/js/scrolltopcontrol.js%3Fp9abym.html"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"saros","theme_token":"XqUaRjIMUB3yAJzjQrkXsVqkISwhLX-aqvpa-cQRjhU","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"sites\/all\/modules\/toc_filter\/toc_filter.js":1,"sites\/saros-project.org\/themes\/touch\/js\/scrolltopcontrol.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"sites\/all\/modules\/ldap\/ldap_user\/ldap_user.css":1,"modules\/book\/book.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"sites\/all\/modules\/toc_filter\/toc_filter.css":1,"modules\/user\/user.css":1,"modules\/forum\/forum.css":1,"sites\/all\/modules\/ctools\/css\/ctools.css":1,"sites\/all\/modules\/ldap\/ldap_servers\/ldap_servers.admin.css":1,"sites\/saros-project.org\/themes\/touch\/style.css":1,"sites\/saros-project.org\/themes\/saros\/saros_style.css":1}},"toc_filter_smooth_scroll_duration":"","urlIsAjaxTrusted":{"\/html-gui":true}});
//--><!]]>
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="html not-front not-logged-in one-sidebar sidebar-first page-node page-node- page-node-168 node-type-book" >
<div id="wrapper" class="clearfix">
<div id="header-top" class="clearfix">
<div id="logo"><!--start logo-->
<a id="site_name_link" href="index.html" title="Home">
<img src="sites/saros-project.org/files/saros-logo-100x100.png" alt="Home" />
</a>
<div id="name_slogan">
<a id="site-name" href="index.html" title="Home" rel="home"><span>Saros</span></a>
<br/>
<a id="site-slogan" id="site-name" href="index.html" title="Home" rel="home"><span>Distributed Party Programming</span></a>
</div><!--end name_slogan-->
<!--div id="site-slogan">Distributed Party Programming</div><!--site slogan-->
</div><!--end logo-->
<!-- / start search box region -->
<div class="search-box">
<div class="region region-search-box">
<div id="block-search-form" class="block block-search">
<div class="content">
<form action="html-gui.html" method="post" id="search-block-form" accept-charset="UTF-8"><div><div class="container-inline">
<h2 class="element-invisible">Search form</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<label class="element-invisible" for="edit-search-block-form--2">Search </label>
<input title="Enter the terms you wish to search for." type="text" id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text" />
</div>
<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Search" class="form-submit" /></div><input type="hidden" name="form_build_id" value="form-hobPiBty94TgvqB0ylKBpbelEQuRK7fvNqJk-5FPWxU" />
<input type="hidden" name="form_id" value="search_block_form" />
</div>
</div></form> </div>
</div> <!-- /.block -->
</div>
<!-- /.region -->
</div> <!-- / end search box region -->
</div><!--end header-top-->
<div id="header" class="clearfix"><!--start header-->
<div id="main-menu">
<ul class="menu"><li class="first leaf"><a href="home.html" title="Frontpage">Home</a></li>
<li class="expanded"><a href="node/66.html">About Saros</a><ul class="menu"><li class="first leaf"><a href="features.html" title="List of Saros features">Features</a></li>
<li class="leaf"><a href="screenshots.html" title="Get impressions with screenshots">Screenshots</a></li>
<li class="leaf"><a href="host-comic.html">Saros Host Comic</a></li>
<li class="leaf"><a href="what-others-say.html" title="Information about where Saros has been mentioned">What others say</a></li>
<li class="last leaf"><a href="history.html" title="Development history and people involved">History</a></li>
</ul></li>
<li class="expanded"><a href="setup.html" title="Learn how to use Saros">Installation & Set-Up</a><ul class="menu"><li class="first expanded"><a href="installation.html" title="Installing Saros in Eclipse">Install Saros</a><ul class="menu"><li class="first last leaf"><a href="setupXMPP.html" title="Setup your own XMPP Server (Advanced Users)">Setup own XMPP Server</a></li>
</ul></li>
<li class="last leaf"><a href="GettingStarted.html">Getting Started with Saros</a></li>
</ul></li>
<li class="expanded"><a href="support_home.html">Support</a><ul class="menu"><li class="first leaf"><a href="mailing-list-chat.html" title="Information on how to reach the Saros team via mailing lists">Mailing Lists</a></li>
<li class="leaf"><a href="troubleshooting.html" title="Known problems when using Saros">Troubleshooting</a></li>
<li class="leaf"><a href="faq.html" title="Frequently asked questions">Saros FAQ</a></li>
<li class="leaf"><a href="compatibility.html">Plugin Compatibility</a></li>
<li class="last leaf"><a href="feedback.html" title="Information about the feature feedback">User Survey & Statistics</a></li>
</ul></li>
<li class="expanded active-trail"><a href="getinvolved.html" title="Learn how to develop on Saros" class="active-trail">Develop on Saros</a><ul class="menu"><li class="first expanded"><a href="checkout-and-first-steps.html">Check-Out and First Steps</a><ul class="menu"><li class="first expanded"><a href="setup-dev-environment.html">Set up development environment</a><ul class="menu"><li class="first leaf"><a href="dev-environment-reqs.html">Environment Requirements</a></li>
<li class="leaf"><a href="install-subclipse.html">Install Subclipse for building Saros/E</a></li>
<li class="leaf"><a href="install-egit.html">Install EGit</a></li>
<li class="leaf"><a href="our-dev-workflow.html">Our workflow</a></li>
<li class="leaf"><a href="gerrit-login.html">Log in to Gerrit</a></li>
<li class="leaf"><a href="eclipse-setup-git.html">Setting your name and email address for using Gerrit</a></li>
<li class="leaf"><a href="eclipse-setup-ssh.html">Create and configure an SSH key for using Gerrit</a></li>
<li class="leaf"><a href="get-source-code.html">Get Saros source code</a></li>
<li class="leaf"><a href="import-code-style-profiles.html">Import code style profiles</a></li>
<li class="last leaf"><a href="run-saros-as-dev.html">Run your Saros</a></li>
</ul></li>
<li class="last expanded"><a href="make-first-change.html">Making changes to Saros</a><ul class="menu"><li class="first leaf"><a href="node/124.html">Create a new local branch</a></li>
<li class="leaf"><a href="node/125.html">Doing your first change</a></li>
<li class="leaf"><a href="commit-and-push-first-change.html">Commit and push your change</a></li>
<li class="last leaf"><a href="node/127.html">Abandon your change in Gerrit</a></li>
</ul></li>
</ul></li>
<li class="expanded active-trail"><a href="ongoing-work.html" class="active-trail">Ongoing Work</a><ul class="menu"><li class="first collapsed"><a href="saros-for-intellij.html">Saros for IntelliJ</a></li>
<li class="leaf active-trail"><a href="html-gui.html" class="active-trail active">Saros HTML GUI</a></li>
<li class="leaf"><a href="build-server-migration.html">Build Server Migration</a></li>
<li class="leaf"><a href="stf-cross-ide.html">STF across IDEs</a></li>
<li class="last collapsed"><a href="saros-for-netbeans.html">Saros for Netbeans</a></li>
</ul></li>
<li class="expanded"><a href="guidelines.html">Guidelines</a><ul class="menu"><li class="first leaf"><a href="contribution.html">Contribution Rules</a></li>
<li class="collapsed"><a href="coderules.1.html" title="Coding Guidelines and Rules">Coding Conventions</a></li>
<li class="leaf"><a href="usability.html" title="Guidelines to ensure Usability">Usability Guidelines</a></li>
<li class="leaf"><a href="TicketGuidelines.html">Ticket Guidelines</a></li>
<li class="last leaf"><a href="ci-rules.html">Jenkins Rules</a></li>
</ul></li>
<li class="collapsed"><a href="tools.html">Tools</a></li>
<li class="expanded"><a href="processes.html" title="Processes in Saros">Processes</a><ul class="menu"><li class="first leaf"><a href="review.html" title="Information about the review process">Review</a></li>
<li class="leaf"><a href="ReleaseProcess.html" title="Our Release Process">Release</a></li>
<li class="expanded"><a href="testing.html" title="Information about the testing process">Testing</a><ul class="menu"><li class="first last leaf"><a href="jenkins.html">Jenkins and Saros</a></li>
</ul></li>
<li class="leaf"><a href="bugtracker.html" title="Watch the bug tracker">Bug Tracking</a></li>
<li class="last leaf"><a href="documentation.html" title="Information about the documentation process">Documentation</a></li>
</ul></li>
<li class="leaf"><a href="mailingslists.html">Mailinglists</a></li>
<li class="leaf"><a href="https://sourceforge.net/p/dpp/bugs/" title="">Bug Tracker</a></li>
<li class="leaf"><a href="https://sourceforge.net/projects/dpp/" title="Visit Saros at Sourceforge">Saros@Sourceforge</a></li>
<li class="collapsed"><a href="gsoc.1.html">Google Summer of Code</a></li>
<li class="last expanded"><a href="node/129.html">FAQ in daily practice</a><ul class="menu"><li class="first leaf"><a href="node/132.html" title="A change was integrated to master. How can I update my local code?">Update local code to master</a></li>
<li class="leaf"><a href="node/130.html" title="I messed up my local copy of Saros. How can I reset/clean up/revert my changes?">Revert local changes</a></li>
<li class="leaf"><a href="upload-new-patch-set.html" title="Someone discovered an error/failure/typo. How can I upload a new patch set?">Upload a new patch set</a></li>
<li class="leaf"><a href="node/133.html" title="My build failed. What's wrong with my change?">Building in Gerrit failed!</a></li>
<li class="leaf"><a href="gerrit-checkout-patch.html" title="Someone uploaded a change to Gerrit. How can I test this change?">Get & run someones change</a></li>
<li class="leaf"><a href="node/145.html" title="What is a Change? Patch set? Submit?">Change? Patch set? Submit?</a></li>
<li class="leaf"><a href="gerrit-groups-and-permissions.html" title="Which permissions do I have?">Check Gerrit permissions</a></li>
<li class="leaf"><a href="node/142.html" title="How to delete an unwanted local branch in EGit?">Delete local branch</a></li>
<li class="leaf"><a href="node/136.html">Duplicate Location Error</a></li>
<li class="leaf"><a href="gerrit-review.html" title="Someone wants that I review a change. How to review a change?">Review a change</a></li>
<li class="leaf"><a href="node/140.html" title="How to run Saros STF tests locally?">Run STF tests locally</a></li>
<li class="leaf"><a href="node/139.html" title="I ran an STF test (located in test/stf) and get an error! What's wrong?">STF tests fail</a></li>
<li class="leaf"><a href="node/138.html" title="How to set up Saros for running local STF tests?">Set up STF tests</a></li>
<li class="leaf"><a href="node/144.html" title="I want automate my testing process. How to write my own STF tests?">Write STF tests</a></li>
<li class="last leaf"><a href="git-recipes.html">Git use-cases</a></li>
</ul></li>
</ul></li>
<li class="expanded"><a href="techdoc.html" title="Technical Documentation">Technical Documentation</a><ul class="menu"><li class="first leaf"><a href="architectureDocumentation.html">Architecture Documentation</a></li>
<li class="leaf"><a href="specoverview.html">Overview</a></li>
<li class="leaf"><a href="concurrency.html" title="Information about Concurrency">Concurrency</a></li>
<li class="leaf"><a href="eclipsebridge.html">Eclipse Bridge</a></li>
<li class="leaf"><a href="packageFeedback.html" title="Information about the feedback feature">Feedback</a></li>
<li class="leaf"><a href="invitation.html" title="Information about invitation">Invitation</a></li>
<li class="leaf"><a href="networklayer.html" title="Information about the network layer">Network Layer</a></li>
<li class="expanded"><a href="sharedsession.html" title="Information about shared session">Shared Session</a><ul class="menu"><li class="first last leaf"><a href="activities.html" title="Information about activities">Activities</a></li>
</ul></li>
<li class="last leaf"><a href="ui.html" title="Information about user interface">User Interface</a></li>
</ul></li>
<li class="expanded"><a href="research.html" title="Research">Research</a><ul class="menu"><li class="first leaf"><a href="bibliography.html" title="Saros related literature">Bibliography</a></li>
<li class="last leaf"><a href="relatedwork.html">Related Work</a></li>
</ul></li>
<li class="last leaf"><a href="contact.html">Contact</a></li>
</ul></div><!-- end main-menu -->
</div> <!-- /#header -->
<div id="content-body">
<div class="breadcrumb"><h2 class="element-invisible">You are here</h2><nav class="breadcrumb"><a href="index.html">Home</a> » <a href="getinvolved.html" title="Learn how to develop on Saros">Develop on Saros</a> » <a href="ongoing-work.html">Ongoing Work</a> » Saros HTML GUI</nav></div>
<section id="main" role="main" class="clear">
<a id="main-content"></a>
<h1 class="title" id="page-title">Saros HTML GUI</h1> <div class="region region-content">
<div id="block-system-main" class="block block-system">
<div class="content">
<span property="dc:title" content="Saros HTML GUI" class="rdf-meta element-hidden"></span><span property="sioc:num_replies" content="0" datatype="xsd:integer" class="rdf-meta element-hidden"></span>
<div class="content">
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>Since we're working on <a href="saros-for-intellij.html">Saros for IntelliJ</a>, the question arose how to handle the two different GUI frameworks of Eclipse (which uses SWT) and IntelliJ (which uses Swing). Our answer is to embed a web browser in the IDE which can display HTML elements that are styled via CSS and made interactive through JavaScript.</p>
<p>This page explains the basic things you need to know if you want to further the development of the Saros HTML GUI.</p>
<a name="top" class="toc-filter-top"></a><div class="toc-filter toc-filter-bullet"><div class="toc-filter-content"><div class="item-list"><ul class="toc-filter-links"><li class="first"><a href="html-gui.html#activating-the-html-gui">Activating the HTML GUI</a></li>
<li><a href="html-gui.html#installing-dependencies">Installing dependencies</a></li>
<li><a href="html-gui.html#building-the-javascript-application">Building the JavaScript application</a></li>
<li><a href="html-gui.html#getting-to-know-the-code-of-the-html-gui">Getting to know the code of the HTML GUI</a></li>
<li><a href="html-gui.html#providing-functionality-the-java-part">Providing functionality: The Java part</a></li>
<li><a href="html-gui.html#providing-the-user-interface-the-html-and-javascript-part">Providing the user interface: The HTML and JavaScript part</a></li>
<li><a href="html-gui.html#ease-the-development-process-tips-and-tools">Ease the development process: Tips and tools</a></li>
<li class="last"><a href="html-gui.html#-a-name-ide-challenges-id-ide-challenges-a-running-in-the-ide-special-challenges">Running in the IDE: Special challenges</a></li>
</ul></div></div></div>
<div class="toc-filter-back-to-top first"><a href="html-gui.html#top">Back to top</a></div><h2 class="toc-header toc-header-bullet"><a name="activating-the-html-gui" id="activating-the-html-gui" class="toc-bookmark" rel="bookmark" title="Activating the HTML GUI"></a>Activating the HTML GUI</h2>
<p>The usage of the HTML version of Saros is guarded by a feature toggle.</p>
<h3>Eclipse</h3>
<p>In Eclipse you have to uncomment the <code>SarosViewBrowserVersion</code> view in <a href="https://github.com/saros-project/saros/blob/master/de.fu_berlin.inf.dpp/plugin.xml#L21"><code>de.fu_berlin.inf.dpp/plugin.xml</code></a> and provide the Java property</p>
<pre>saros.swtbrowser=true</pre><p>by changing the corresponding line in <a href="https://github.com/saros-project/saros/blob/master/de.fu_berlin.inf.dpp/saros.properties#L41"><code>de.fu_berlin.inf.dpp/saros.properties</code></a>.</p>
<p>To be able to see the HTML GUI in eclipse when running Saros, you have to open the Saros view in eclipse via Window > Show View > Other > Saros > Saros View.</p>
<h3>IntelliJ</h3>
<p>In IntelliJ you just have to provide</p>
<pre>-Dsaros.swtbrowser=true</pre><p>as VM Option (in the Run Configurations dialog). For further information about developing the HTML GUI in IntelliJ please see <a href="https://www.saros-project.org/setup-intellij-environment">here</a>.</p>
<div class="toc-filter-back-to-top"><a href="html-gui.html#top">Back to top</a></div><h2 class="toc-header toc-header-bullet"><a name="installing-dependencies" id="installing-dependencies" class="toc-bookmark" rel="bookmark" title="Installing dependencies"></a>Installing dependencies</h2>
<p>To develop the Saros GUI JavaScript application, the <a href="http://nodejs.org">NodeJS</a> package manager, <a href="https://www.npmjs.com/">NPM</a> is required. NPM is responsible for providing external JavaScript resources and tools for tasks like running unit tests and building the application. For more information about installing NodeJS and NPM see <a href="http://nodejs.org">here</a>.</p>
<p>You may try the most recent LTE version of NodeJS (i.e. from the 4.2.* line), but there are <a href="http://article.gmane.org/gmane.comp.ide.eclipse.saros.devel/1694">occassional problems with newer NodeJS version under Windows 8+</a>. If you encounter such problems, the newest fall-back version is <a href="https://nodejs.org/download/release/v0.10.41/">NodeJS 0.10.41</a>.</p>
<p>Before you are able to run the build tasks you have to navigate to <code>de.fu_berlin.inf.dpp.ui.frontend/html/</code> and run <code>npm install</code> to download and install external dependencies.</p>
<p>Required dependencies and tools as well as convenient script definitions are defined in <a href="https://github.com/saros-project/saros/blob/master/de.fu_berlin.inf.dpp.ui.frontend/html/package.json"><code>de.fu_berlin.inf.dpp.ui.frontend/html/package.json</code></a>, see <a href="https://docs.npmjs.com/files/package.json">here</a> for a detailed documentation.</p>
<div class="toc-filter-back-to-top"><a href="html-gui.html#top">Back to top</a></div><h2 class="toc-header toc-header-bullet"><a name="building-the-javascript-application" id="building-the-javascript-application" class="toc-bookmark" rel="bookmark" title="Building the JavaScript application"></a>Building the JavaScript application</h2>
<p>Currently, the building of the JavaScript application is NOT integrated in the general Saros build process and must therefore be executed separately. To build the JavaScript application, navigate to <code>de.fu_berlin.inf.dpp.ui.frontend/html/</code> and run <code>npm run build</code>. Alternatively it is also possible to run <code>npm run watch</code>, which builds the application once and then listens to any future changes and automatically rebuilds everytime (read <a href="html-gui.html#watch-script">here</a> for more information).</p>
<div class="toc-filter-back-to-top"><a href="html-gui.html#top">Back to top</a></div><h2 class="toc-header toc-header-bullet"><a name="getting-to-know-the-code-of-the-html-gui" id="getting-to-know-the-code-of-the-html-gui" class="toc-bookmark" rel="bookmark" title="Getting to know the code of the HTML GUI"></a>Getting to know the code of the HTML GUI</h2>
<p>The code consists of four parts</p>
<ul><li>the Java part which defines the interface between the core module and the GUI, which is located in the <a href="https://github.com/saros-project/saros/tree/master/de.fu_berlin.inf.dpp.ui"><code>de.fu_berlin.inf.dpp.ui</code></a> module,</li>
<li>the actual GUI code (HTML, CSS and JavaScript resources), which is located in the <a href="https://github.com/saros-project/saros/tree/master/de.fu_berlin.inf.dpp.ui.frontend"><code>de.fu_berlin.inf.dpp.ui.frontend</code></a> module,</li>
<li>the Eclipse-specific part in the package <a href="https://github.com/saros-project/saros/tree/master/de.fu_berlin.inf.dpp/src/de/fu_berlin/inf/dpp/ui/browser"><code>de.fu_berlin.inf.dpp.ui.browser</code></a> and the class <a href="https://github.com/saros-project/saros/blob/master/de.fu_berlin.inf.dpp/src/de/fu_berlin/inf/dpp/ui/views/SarosViewBrowserVersion.java"><code>SarosViewBrowserVersion</code></a>,</li>
<li>the IntelliJ-specific part in the package <a href="https://github.com/saros-project/saros/tree/master/de.fu_berlin.inf.dpp.intellij/src/de/fu_berlin/inf/dpp/intellij/ui/swt_browser"><code>de.fu_berlin.inf.dpp.intellij.ui.swt_browser</code></a>.</li>
</ul><p>As the IDE-specific parts are only concerned with the embedding of the browser in the IDE and the creation of dialog windows, they probably do not have to change for regular development in the GUI. See the following figure for the relations between the relevant modules.</p>
<p style="text-align: center;"><img alt="" src="sites/saros-project.org/files/ui-osgi-modules.png" style="width: 100%; max-width: 700px;" /></p>
<div class="toc-filter-back-to-top"><a href="html-gui.html#top">Back to top</a></div><h2 class="toc-header toc-header-bullet"><a name="providing-functionality-the-java-part" id="providing-functionality-the-java-part" class="toc-bookmark" rel="bookmark" title="Providing functionality: The Java part"></a>Providing functionality: The Java part</h2>
<p>In this section, the structure of the <code>de.fu_berlin.inf.dpp.ui</code> module and the interface between Java and JavaScript will be explained.</p>
<h3>JBusTour</h3>
<p>In addition to the information below it might be useful to take the JBusTour "Extending the HTML GUI", which takes you directly to the relevant code segments.</p>
<h3>Communicating with the Saros core</h3>
<p>The only way that JavaScript code can call Java code is via so-called browser functions that have to be injected into the website.</p>
<pre>new JavascriptFunction("function_name_in_js") {
@Override
public Object function(Object[] arguments) {
// JAVA code to be executed
// return a value back to JavaScript (often null)
}
}
</pre><p>The code above shows the general template. The <code>JavascriptFunction</code> is an SWT-independent abstraction for a browser function. It contains a <code>browser</code> property that may be used to make calls back to JavaScript like this:</p>
<pre><span _fck_bookmark="1" style="display: none;"> </span>browser.run("alert('Invalid input')");<span _fck_bookmark="1" style="display: none;"> </span></pre><p>The Java code inside the function will probably do parameter checking and conversion and then call a Saros core method. It is important to know that the callback happens on the UI thread. Use the PicoContainer to get references to core classes. Read on for information about how to structure your browser functions.</p>
<h4>Structure of the Java code</h4>
<p>The image below shows a selection of the relevant classes. It may be a useful illustration while reading this section.<br />The classes for the browser functions are left out as they are basically just a list of anonymous classes and their grouping may be changed often.</p>
<p style="text-align: center;"><img alt="" src="sites/saros-project.org/files/browser_pages_0.png" style="width: 100%; max-width: 700px;" /></p>
<p>There is already a mechanism to inject the browser functions into the corresponding websites. Each website is represented by a implementation of the <code>BrowserPage</code> interface.</p>
<p><span _fck_bookmark="1" style="display: none;"> </span>The Java class <code>de.fu_berlin.inf.dpp.ui.webpages.SarosMainPage</code> represents the Saros main view including the roster and session tree, for example. Each <code>BrowserPage</code> implementation contains three pieces of information:</p>
<ul><li>Where the corresponding HTML is located: <code>public String getWebpage()</code></li>
<li>A list of the needed browser functions: <code>List<JavascriptFunction> getJavascriptFunctions()</code></li>
<li>A list of the renderers (more about that later on): <code>List<Renderer> getRenderer()</code></li>
</ul><p>So to inject a browser function into the webpage it just has to be contained in the list returned by <code>getJavascriptFunctions()</code>. However, the browser functions should not be declared in the <code>BrowserPage</code> classes themselves. The <code>BrowserPage</code>s only bundle and group browser functions declared in separate classes for each webpage. The classes containing browser functions are located in the package<code>de.fu_berlin.inf.dpp.ui.browser_functions</code>.</p>
<p>There are two criteria for splitting the browser functions and both have to be considered. Firstly, according to the dependent core classes and, secondly, according to their usage in different websites. Functions like <code>createAccount</code> may be used in different websites. As main objective the BrowserFunction classes should declare the functions in such a way that each function is declared only once. Therefore the introduction of a new feature might lead to the creation of a new BrowserFunction class. For bundling the dependencies to core classes, facades in the package <code>de.fu_berlin.inf.dpp.ui.core_facades</code> can be introduced or extended. The structure of both BrowserFunction classes and CoreFacade classes depends heavily on the code in the Saros core and the features already implemented in HTML. So it is difficult to give a general guideline yet.</p>
<p><b>The important thing to note here</b> is that the current partition into one BrowserFunction class for each webpage was just by chance and can be adapted as the GUI evolves. If you want to copy a browser function definition to another class, extract it instead and use the extracted code in both classes. Each <code>BrowserPage</code> can use multiple BrowserFunction classes.</p>
<p>A side note: It is also possible to leave the separation into one BrowserFunction class per webpage. Then, however, an additional layer has to be introduced which contains the actual implementation of the callback and bundles them to the aforementioned criteria to avoid code duplication. This approach can help to collect the browser functions for the BrowserPage (otherwise in complex scenarios you would have to iterate over multiple lists and collect their elements... which is also manageable).</p>
<h3>Displaying application state in the browser</h3>
<p>Up until now we have only looked at the other direction, calling Java from JavaScript. Now we will see how to call JavaScript from Java and this is pretty easy:</p>
<pre>Future res = browser.run("javascript-command");</pre><p>There are basically two methods <code>browser.run(String javascript)</code> and <code>browser.syncRun(String javascript)</code>.</p>
<p><b>Note:</b> You should not simply execute arbitrary JavaScript code here because we want a clean interface with predictable behaviour. Therefore, there is an event bus provided by the SarosApi module, see section <a href="html-gui.html#providing-the-user-interface-the-html-and-javascript-part">Providing the user interface: The HTML and JavaScript part</a> for more information. In the future, the execution of JavaScript code should be abstracted completely, by using the class <a href="https://github.com/saros-project/saros/blob/master/de.fu_berlin.inf.dpp.ui/src/de/fu_berlin/inf/dpp/ui/JavaScriptAPI.java"><code>de.fu_berlin.inf.dpp.ui/src/de/fu_berlin/inf/dpp/ui/JavaScriptAPI.java</code></a>.</p>
<p>The first one returns a <code>Future</code> with the result (you have to call <code>get()</code> to be informed about exceptions) whereas <code>syncRun</code> might block. <b>Important:</b> do NOT make a blocking call on the UI thread (you can use <code>browser.isLoadingCompleted()</code> to check whether the call will block). The reason for the delayed execution is that the browser waits until JavaScript objects have been initialised, otherwise the calls would be unreliable. There is also a <code>run(String, CallbackFunction)</code> method which might be more convenient depending on the use-case.</p>
<p>The Renderer classes in the package <a href="https://github.com/saros-project/saros/tree/master/de.fu_berlin.inf.dpp.ui/src/de/fu_berlin/inf/dpp/ui/renderer"><code>de.fu_berlin.inf.dpp.ui.renderer</code></a> are responsible for making calls to JavaScript and supplying it with the Saros state. There may be more than one renderer per BrowserPage. The existing renderers should give you a pretty good idea about how to render application state. There are different approaches on how to render something: <code>ContactListRenderer</code> is informed by Listeners (see <code>de.fu_berlin.inf.dpp.ui.manager.ContactListManager</code>) about state changes whereas the <code>AccountRenderer</code> has to query the state explicitly because there are no account changed events (yet).</p>
<h3>PicoContainer</h3>
<p>As almost all HTML GUI classes are managed by PicoContainer, do not forget to update <code>de.fu_berlin.inf.dpp.SarosHTMLUIContextFactory</code> after recreating classes.</p>
<h3>GUI model</h3>
<p>The package <code>de.fu_berlin.inf.dpp.ui.model</code> contains a presentation-oriented representation of the Saros state. The classes are intended to be converted into JSON-Strings (Saros uses GSON for that) and are immutable. If you can new functionality to the GUI, you most likely will have to add new model classes as well. The conversion of these model classes into JSON-Strings happens in the renderers.</p>
<div class="toc-filter-back-to-top"><a href="html-gui.html#top">Back to top</a></div><h2 class="toc-header toc-header-bullet"><a name="providing-the-user-interface-the-html-and-javascript-part" id="providing-the-user-interface-the-html-and-javascript-part" class="toc-bookmark" rel="bookmark" title="Providing the user interface: The HTML and JavaScript part"></a>Providing the user interface: The HTML and JavaScript part</h2>
<p>The design of the GUI itself is done in HTML, CSS, and JavaScript and resembles standard web development. These files are located in <a href="https://github.com/saros-project/saros/tree/master/de.fu_berlin.inf.dpp.ui.frontend/html"><code>de.fu_berlin.inf.dpp.ui.frontend/html</code></a>. This part describes the architecture of the <a href="https://github.com/saros-project/saros/tree/master/de.fu_berlin.inf.dpp.ui.frontend"><code>de.fu_berlin.inf.dpp.ui.frontend</code></a> module. That module contains the relevant HTML, CSS and JavaScript resources and provides them to the <code>de.fu_berlin.inf.dpp.ui</code> module.</p>
<h3>Technologies, Libraries and Frameworks</h3>
<p>The JavaScript application is based on <a href="http://ampersandjs.com/">AmpersandJS</a>, a framework available via NPM and originally built upon <a href="http://backbonejs.org/">BackboneJS</a>. The most important components of AmpersandJS used in the Saros GUI are <a href="https://github.com/AmpersandJS/ampersand-state">ampersand-state</a>, <a href="https://github.com/AmpersandJS/ampersand-collection">ampersand-collection</a> and <a href="https://github.com/AmpersandJS/ampersand-view">ampersand-view</a>, so you should check out their documentation. For a convenient entrance and some general documentation, check out <a href="http://ampersandjs.com/learn">this</a> and <a href="http://ampersandjs.com/docs">that</a>.</p>
<p>For accessing and bundling the dependencies, <a href="http://browserify.org/">Browserify</a> or <a href="https://github.com/substack/watchify">Watchify</a> (for <code>npm run watch</code>) is utilised. They enable you to use <code>require('module-name')</code> to load and use a given module. For example, if you want to use <code>ampersand-state</code> to define your own state object, you can do it like that:</p>
<pre>var AmpersandState = require('ampersand-state');
module.exports = AmpersandState.extend({
props: {
name: ['string'true],
otherProperty: ['number'],
}
});
</pre><p>The so defined module (must be saved in its own file) can be required in the same way, given the relative path to the file as module name.</p>
<p>To ease the use of appealing visual components (like dropdown menus, buttons etc.) <a href="http://getbootstrap.com/">Bootstrap</a> is used.</p>
<p><a name="jade" id="jade"></a>As HTML template engine <a href="http://handlebarsjs.com/">Handlebars.js</a> is used.</p>
<h3>Project structure</h3>
<p>To make it easy for developers to find the source code responsible for a specific component, the source directory (<code>html/src</code>) is structured in four directories, which either contain all files of a specific type (<code>/fonts</code>, <code>/images</code>), feature (<code>/elements</code>) or page (<code>/pages</code>). The elements' and pages' directories each hold several subdirectories which are named after the component that the including files describe. These files are the respective modules and templates.</p>
<p>The templates describe the concrete DOM representation of a view-module and are written for Handlebars.js.</p>
<p>The modules directly inside of each folder are those views, which are responsible for managing the specific part of the GUI. In some elements' directories (e.g. <code>/account</code> or <code>/contact</code>) there is another subdirectory called <code>/models</code>, in which models and/or collections (data representations) used by the view-modules can be found. The views have to synchronise the data between models and their representation in the DOM.</p>
<p>The convention is that every JavaScript file in the project holds exactly one module. An exception to that is the entrance point of the application, <code>html/src/app.js</code>, which therefore also doesn't need to be provided as a module.</p>
<p>Furthermore, inside of each page's directory there is exactly one HTML file, which is responsible for rendering the corresponding content. Pages are different to elements as the view of a page always represents a closed entity in the Saros GUI, while the view of an element is contained by one or more other views.</p>
<p>In the following figure, the relations between the named components of the application are visualised.</p>
<p style="text-align: center;"><img alt="" src="sites/saros-project.org/files/ui-component-relations_0.png" style="width: 100%; max-width: 700px;" /></p>
<p>In <code>html/css</code> one can find the internal CSS definitions (<code>html/src/css/saros.css</code>) as well as external. Unit tests are specified in <code>html/test</code>. The application bundle generated by the build process is placed in <code>html/dist/bundle</code>. All files, which are needed for the built ui-frontend OSGi module have to be copied to <code>html/dist</code>. This is done by the <code>copysrcs</code> script which is run automatically after every <code>npm run build</code> or right before every <code>npm run watch</code>. If new sources, which might not fit in the above described project structure, are added please make sure that they are handled by the script.</p>
<h3>The JavaScript SarosApi module</h3>
<p>The interface between Java and JavaScript on JavaScript-side is completely encapsulated in the SarosApi JavaScript object, afterwards called SarosApi, which lives in <code>html/js/saros-api.js</code>. The SarosAPI takes a role as a facade via hiding the injected functions provided by Java behind convenient functions. That way for example, instead of calling <code>__java_connect(account)</code> one can require the SarosApi and call the corresponding function like this:</p>
<pre>var SarosApi = require('./saros-api');
SarosApi.connect(account);
</pre><p>In the other direction, the Java-to-JavaScript interface, the SarosApi serves as an event bus. Every JavaScript call made from Java should be done via triggering an event and passing data via <code>SarosApi.trigger('eventName', data)</code>. The JavaScript application can listen and respond to such events via <code>SarosApi.on('eventName', callbackFunction)</code>.The following figure visualises the interface between the ui module and the Saros GUI JavaScript application, schematically. The SarosApi serves as a middleware for the communication between the Java and JavaScript part. See <code>html/src/saros-api.js</code> for a list of currently used events.</p>
<p style="text-align: center;"><img alt="" src="sites/saros-project.org/files/ui-ui-frontend-architecture.png" style="width: 100%; max-width: 700px;" /></p>
<div class="toc-filter-back-to-top"><a href="html-gui.html#top">Back to top</a></div><h2 class="toc-header toc-header-bullet"><a name="ease-the-development-process-tips-and-tools" id="ease-the-development-process-tips-and-tools" class="toc-bookmark" rel="bookmark" title="Ease the development process: Tips and tools"></a>Ease the development process: Tips and tools</h2>
<h3>Make sure to be able to develop standalone</h3>
<p>It is recommended to develop the HTML and JavaScript part in such a way that the webpage can be viewed in standalone web browsers. This way, the whole set of tools for regular web development, including debugging support, can be used. Otherwise JavaScript development in the embedded browser is rather cumbersome. To be able to do so you have to provide some data to the application, which is quite easy via the SarosApi object. For example, check the following code snippet which can be put into the <code>init</code> function in <code>html/src/app.js</code> (or you can run it in your browser console, for example):</p>
<pre>SarosApi.trigger('updateState', {
"activeAccount": {
"username": "someUser",
"domain": "saros-con.imp.fu-berlin.de",
"jid": {
"jid": "someUser@saros-con.imp.fu-berlin.de/Saros"
}
},
"contactList": [
{
"displayName": "Alice",
"presence": "Offline",
"addition": "",
"jid": "alice@saros-con.imp.fu-berlin.de"
},
{
"displayName": "bob@saros-con.imp.fu-berlin.de",
"presence": "Online",
"addition": "",
"jid": "bob@saros-con.imp.fu-berlin.de"
}
],
"connectionState": "CONNECTED"
});
</pre><p>That way, you can fake the state of the application to be able to test certain components/states. In this case you are connected with the user "someUser", and have two contacts in your contact list, one being offline and one being online.</p>
<p>After the code works standalone, it can be integrated into Saros. <b>But do not do that too late! There are some quirks when running the application inside the IDE!</b> For more information about such quirks, see <a href="html-gui.html#ide-challenges">here</a>.</p>
<h3>Tools</h3>
<p>The following tools/scripts can be run via navigating to <code>de.fu_berlin.inf.dpp.ui.frontend/html/</code> and executing the corresponding command. They are defined in the <code>scripts</code> property in <code>html/package.json</code>.</p>
<h4>Building the application</h4>
<p>To build the application run <code>npm run build</code>. This will precompile the JADE templates, bundle all internal and external required JavaScript files into <code>html/dist/bundle/bundle.js</code>, create the <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a> and copy all relevant files to <code>html/dist/</code>, which is the directory which will be provided to the <code>de.fu_berlin.inf.dpp.ui</code> module.</p>
<h4><a name="watch-script" id="watch-script"></a>Automatic building: Watch</h4>
<p>For a better workflow it is recommended to run <code>npm run watch</code> instead of <code>npm run build</code>. This will initialize the building once (as described above) and then listens to all changes in the directly and indirectly required modules and templates by <code>app.js</code> afterwards. After every detected change the <code>bundle.js</code> file will be updated automatically and faster than <code>build</code> without having to run the command after every minor change.</p>
<p>Please note, that all files, which are not explicitly "required" by app.js or any child of it are not listened to. This means, that e.g. CSS or image files are not automatically copied into the <code>/dist</code> folder after any change. If such a non-referenced file is modified the build or watch script has to be run manually again.</p>
<h4>Testing the application: Mocha</h4>
<p>To run the unit tests run <code>npm run test</code>. For unit-testing <a href="http://mochajs.org/">Mocha</a> is used. The test specification are present in <code>html/test/</code>.</p>
<h4>Take care of your code: Auto-formatting</h4>
<p>Run <code>npm run format</code> to auto-format your code. The according rules are defined in <code>html/.jscsrc</code>. The tool <a href="http://jscs.info/">JSCS</a> is used. Currently, only a small set of rules is defined, which may be extended in the future.</p>
<div class="toc-filter-back-to-top"><a href="html-gui.html#top">Back to top</a></div><h2 class="toc-header toc-header-bullet"><a name="-a-name-ide-challenges-id-ide-challenges-a-running-in-the-ide-special-challenges" id="-a-name-ide-challenges-id-ide-challenges-a-running-in-the-ide-special-challenges" class="toc-bookmark" rel="bookmark" title="Running in the IDE: Special challenges"></a><a name="ide-challenges" id="ide-challenges"></a>Running in the IDE: Special challenges</h2>
<h3>Handling multiple jQuery instances</h3>
<p>Currently, there is one jQuery instance injected by the utilised SWT-browser which is to old to satisfy all other dependencies. Therefore, we use our own additional jQuery instance. To avoid namespace problems we load the jQuery instance in the <code>$$</code> namespace (that is done in html/js/app.js). Thus, when referring jQuery in the application, <code>$$</code> should be used, currently. In the future, it may be reasonable to utilise a browser-widget without an extension for jQuery or updating the injected jQuery version, but this should be evaluated in more depth.</p>
<h3>Handling DOM events</h3>
<p>There seems to be an issue with the propagation of DOM events when running the application inside the browser-widget which occurred when opening the context menu (provided by an external Bootstrap plugin). When the application is running in a browser, stand-alone, everything works as expected. When running it inside an IDE, the context menu is shown on the mousedown event, as expected, but on the following mouseup event it is removed again, instantly. Debugging revealed, that the property which of the jQuery event object is not working correctly, which may be in relation to this issue. The problem is fixed via introducing an offset when showing the context menu such that the cursor is focusing the context menu element.</p>
<div class="toc-filter-back-to-top last"><a href="html-gui.html#top">Back to top</a></div></div></div></div> </div>
<footer>
</footer>
</div>
</div> <!-- /.block -->
</div>
<!-- /.region -->
</section> <!-- /#main -->
<aside id="sidebar-first" role="complementary" class="sidebar clearfix">
<div class="region region-sidebar-first">
<div id="block-menu-block-1" class="block block-menu-block">
<h2 >Develop on Saros</h2>
<div class="content">
<div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-2">
<ul class="menu"><li class="first expanded menu-mlid-572"><a href="checkout-and-first-steps.html">Check-Out and First Steps</a><ul class="menu"><li class="first leaf has-children menu-mlid-574"><a href="setup-dev-environment.html">Set up development environment</a></li>
<li class="last leaf has-children menu-mlid-592"><a href="make-first-change.html">Making changes to Saros</a></li>
</ul></li>
<li class="expanded active-trail menu-mlid-916"><a href="ongoing-work.html" class="active-trail">Ongoing Work</a><ul class="menu"><li class="first leaf has-children menu-mlid-694"><a href="saros-for-intellij.html">Saros for IntelliJ</a></li>
<li class="leaf active-trail active menu-mlid-872"><a href="html-gui.html" class="active-trail active">Saros HTML GUI</a></li>
<li class="leaf menu-mlid-917"><a href="build-server-migration.html">Build Server Migration</a></li>
<li class="leaf menu-mlid-936"><a href="stf-cross-ide.html">STF across IDEs</a></li>
<li class="last leaf has-children menu-mlid-924"><a href="saros-for-netbeans.html">Saros for Netbeans</a></li>
</ul></li>
<li class="expanded menu-mlid-374"><a href="guidelines.html">Guidelines</a><ul class="menu"><li class="first leaf menu-mlid-375"><a href="contribution.html">Contribution Rules</a></li>
<li class="leaf has-children menu-mlid-432"><a href="coderules.1.html" title="Coding Guidelines and Rules">Coding Conventions</a></li>
<li class="leaf menu-mlid-343"><a href="usability.html" title="Guidelines to ensure Usability">Usability Guidelines</a></li>
<li class="leaf menu-mlid-433"><a href="TicketGuidelines.html">Ticket Guidelines</a></li>
<li class="last leaf menu-mlid-692"><a href="ci-rules.html">Jenkins Rules</a></li>
</ul></li>
<li class="expanded menu-mlid-931"><a href="tools.html">Tools</a><ul class="menu"><li class="first leaf menu-mlid-357"><a href="jtourbus.html" title="Get involved with JTourBus">JTourBus</a></li>
<li class="leaf menu-mlid-932"><a href="archnemesis.html">Archnemesis</a></li>
<li class="leaf menu-mlid-934"><a href="sia.html">Sia</a></li>
<li class="last leaf menu-mlid-933"><a href="sonarqube-gerrit-bridge.html">SonarQube-Gerrit-Bridge</a></li>
</ul></li>
<li class="expanded menu-mlid-341"><a href="processes.html" title="Processes in Saros">Processes</a><ul class="menu"><li class="first leaf menu-mlid-351"><a href="review.html" title="Information about the review process">Review</a></li>
<li class="leaf menu-mlid-352"><a href="ReleaseProcess.html" title="Our Release Process">Release</a></li>
<li class="leaf has-children menu-mlid-353"><a href="testing.html" title="Information about the testing process">Testing</a></li>
<li class="leaf menu-mlid-356"><a href="bugtracker.html" title="Watch the bug tracker">Bug Tracking</a></li>
<li class="last leaf menu-mlid-354"><a href="documentation.html" title="Information about the documentation process">Documentation</a></li>
</ul></li>
<li class="leaf menu-mlid-430"><a href="mailingslists.html">Mailinglists</a></li>
<li class="leaf menu-mlid-388"><a href="https://sourceforge.net/p/dpp/bugs/" title="">Bug Tracker</a></li>
<li class="leaf menu-mlid-335"><a href="https://sourceforge.net/projects/dpp/" title="Visit Saros at Sourceforge">Saros@Sourceforge</a></li>
<li class="expanded menu-mlid-915"><a href="gsoc.1.html">Google Summer of Code</a><ul class="menu"><li class="first last leaf menu-mlid-832"><a href="gsoc/2015/ideas.html">2015 - Ideas</a></li>
</ul></li>
<li class="last expanded menu-mlid-615"><a href="node/129.html">FAQ in daily practice</a><ul class="menu"><li class="first leaf menu-mlid-610"><a href="node/132.html" title="A change was integrated to master. How can I update my local code?">Update local code to master</a></li>
<li class="leaf menu-mlid-606"><a href="node/130.html" title="I messed up my local copy of Saros. How can I reset/clean up/revert my changes?">Revert local changes</a></li>
<li class="leaf menu-mlid-614"><a href="upload-new-patch-set.html" title="Someone discovered an error/failure/typo. How can I upload a new patch set?">Upload a new patch set</a></li>
<li class="leaf menu-mlid-612"><a href="node/133.html" title="My build failed. What's wrong with my change?">Building in Gerrit failed!</a></li>
<li class="leaf menu-mlid-608"><a href="gerrit-checkout-patch.html" title="Someone uploaded a change to Gerrit. How can I test this change?">Get & run someones change</a></li>
<li class="leaf menu-mlid-678"><a href="node/145.html" title="What is a Change? Patch set? Submit?">Change? Patch set? Submit?</a></li>
<li class="leaf menu-mlid-670"><a href="gerrit-groups-and-permissions.html" title="Which permissions do I have?">Check Gerrit permissions</a></li>
<li class="leaf menu-mlid-672"><a href="node/142.html" title="How to delete an unwanted local branch in EGit?">Delete local branch</a></li>
<li class="leaf menu-mlid-674"><a href="node/136.html">Duplicate Location Error</a></li>
<li class="leaf menu-mlid-630"><a href="gerrit-review.html" title="Someone wants that I review a change. How to review a change?">Review a change</a></li>
<li class="leaf menu-mlid-668"><a href="node/140.html" title="How to run Saros STF tests locally?">Run STF tests locally</a></li>
<li class="leaf menu-mlid-666"><a href="node/139.html" title="I ran an STF test (located in test/stf) and get an error! What's wrong?">STF tests fail</a></li>
<li class="leaf menu-mlid-664"><a href="node/138.html" title="How to set up Saros for running local STF tests?">Set up STF tests</a></li>
<li class="leaf menu-mlid-676"><a href="node/144.html" title="I want automate my testing process. How to write my own STF tests?">Write STF tests</a></li>
<li class="last leaf menu-mlid-874"><a href="git-recipes.html">Git use-cases</a></li>
</ul></li>
</ul></div>
</div>
</div> <!-- /.block -->
</div>
<!-- /.region -->
</aside> <!-- /#sidebar-first -->
</div> <!-- end content-body -->
<div class="clear"></div>
<div id="footer" class="clearfix">
<div class="clear"></div>
<div class="region region-footer">
<div id="block-block-2" class="block block-block">
<div class="content">
<p><a href="http://www.mi.fu-berlin.de/fb/impressum/" target="_blank">Impressum</a> — <a href="index.html%3Fq=user.html">Internal login</a></p>
</div>
</div> <!-- /.block -->
</div>
<!-- /.region -->
<div class="clear"></div>
<div id="copyright">Copyright © 2019, Saros</div>
</div> <!-- /#footer -->
</div> <!-- /#wrapper -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
<!--//--><![CDATA[// ><!--
jQuery(document).ready( function($) {
$( ".known-issue-box" ).accordion({
active: false,
heightStyle: "content",
collapsible: true
});
$( ".known-issue-box" ).css( "visibility", "visible" ); });
//--><!]]>
</script> </body>
</html>