3 DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS HEADER.
5 Copyright 2013-2014 Oracle and/or its affiliates. All rights reserved.
7 Oracle and Java are registered trademarks of Oracle and/or its affiliates.
8 Other names may be trademarks of their respective owners.
10 The contents of this file are subject to the terms of either the GNU
11 General Public License Version 2 only ("GPL") or the Common
12 Development and Distribution License("CDDL") (collectively, the
13 "License"). You may not use this file except in compliance with the
14 License. You can obtain a copy of the License at
15 http://www.netbeans.org/cddl-gplv2.html
16 or nbbuild/licenses/CDDL-GPL-2-CP. See the License for the
17 specific language governing permissions and limitations under the
18 License. When distributing the software, include this License Header
19 Notice in each file and include the License file at
20 nbbuild/licenses/CDDL-GPL-2-CP. Oracle designates this
21 particular file as subject to the "Classpath" exception as provided
22 by Oracle in the GPL Version 2 section of the License file that
23 accompanied this code. If applicable, add the following below the
24 License Header, with the fields enclosed by brackets [] replaced by
25 your own identifying information:
26 "Portions Copyrighted [year] [name of copyright owner]"
30 The Original Software is NetBeans. The Initial Developer of the Original
31 Software is Oracle. Portions Copyright 2013-2014 Oracle. All Rights Reserved.
33 If you wish your version of this file to be governed by only the CDDL
34 or only the GPL Version 2, indicate your decision by adding
35 "[Contributor] elects to include this software in this distribution
36 under the [CDDL or GPL Version 2] license." If you do not indicate a
37 single choice of license, a recipient has the option to distribute
38 your version of this file under either the CDDL, the GPL Version 2 or
39 to extend the choice of license to its licensees as provided above.
40 However, if you add GPL Version 2 code and therefore, elected the GPL
41 Version 2 license, then the option applies only if the new code is
42 made subject to such option by the copyright holder.
48 <title>HTML for Java APIs</title>
49 <meta charset="UTF-8">
50 <meta name="viewport" content="width=device-width, initial-scale=1.0">
54 Use Java to write application logic; Use HTML5 to render the UI;
55 {@link net.java.html.json.Model Animate an HTML page from Java};
56 Use {@link net.java.html.json.OnReceive REST} or
57 <a href="net/java/html/json/doc-files/websockets.html">WebSockets</a>;
58 interact with <a href="net/java/html/js/package-summary.html">JavaScript</a>;
59 Get the best of both worlds!
61 The goal of these APIs is to use full featured Java runtime
62 (like real <a href="http://wiki.apidesign.org/wiki/HotSpot">HotSpot VM</a>),
63 but still rely on a very lightweight rendering technology
64 (so it can potentially fit
65 <a href="http://bck2brwsr.apidesign.org">Bck2Brwsr</a> and definitely
66 to various types of phones). What can be more lightweight
67 (from a browser perspective) than
68 <a href="http://wiki.apidesign.org/wiki/HTML">HTML</a>!?
69 By default we use {@link net.java.html.boot.fx JavaFX's WebView}
70 component to display the <a href="http://wiki.apidesign.org/wiki/HTML">HTML</a>.
71 We eliminate the need to manipulate the DOM directly,
72 there is a special {@link net.java.html.json Java to Knockout.js binding}.
73 As a result the <a href="http://wiki.apidesign.org/wiki/Knockout4Java">HTML uses Knockout.js syntax</a>,
74 yet the application code can be written in Java.
77 <h3>Interesting Entry Points</h3>
79 <p>Learn how to {@link net.java.html.json.Model animate an HTML page from Java}
80 without referencing single HTML element from the Java code.
82 <p>Use {@link net.java.html.json.OnReceive JSON} to communicate
83 with REST based server API.
85 <p>Use <a href="net/java/html/json/doc-files/websockets.html">WebSockets</a>
88 <p>Call JavaScript methods from Java and vice versa, via
89 <a href="net/java/html/js/package-summary.html">JavaScriptBody</a>.
92 <h3>Getting Started</h3>
94 There are many ways to start developing
95 <a href="http://html.java.net">Html for Java</a> application.
96 However to be sure one chooses the most recent setup, it is recommended
97 to switch to good old command line and use a
98 <a href="http://wiki.apidesign.org/wiki/Knockout4Java">Maven archetype</a>
99 associated with every version of this project. Make sure at least
100 <em>JDK7</em> is your installed Java and type:
102 $ mvn archetype:generate \
103 -DarchetypeGroupId=org.apidesign.html \
104 -DarchetypeArtifactId=knockout4j-archetype \
105 -DarchetypeVersion=0.7.5 <em># or newer version, if available</em>
107 Answer few questions (for example choose myfirstbrwsrpage as artifactId)
110 $ cd myfirstbrwsrpage
111 $ mvn process-classes exec:java
113 In a few seconds (or minutes if
114 <a href="http://wiki.apidesign.org/wiki/Maven">Maven</a>
115 decides to download the whole Internet of dependencies) you should
116 see a sample Hello World application rendered in a
117 <a href="http://wiki.apidesign.org/wiki/JavaFX">JavaFX</a>
118 web view component (that of course requires your JDK to come
119 with <a href="http://wiki.apidesign.org/wiki/JavaFX">JavaFX</a>;
120 <a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">JDK7
121 and JDK8 from Oracle</a> contain everything that is needed).
122 The generated application is built around one
123 Java source (uses the {@link net.java.html.json.Model} annotation to
124 auto-generate another <code>Data.java</code> class during compilation)
125 and one HTML file (uses the <a href="http://knockoutjs.com">Knockout</a>
126 syntax to <code>data-bind</code> the HTML elements to the
127 generated <code>Data</code> model):
129 $ ls src/main/java/**/DataModel.java
130 $ ls src/main/webapp/pages/index.html
132 That is all you need to get started. Play with the sources,
133 modify them and enjoy
134 <a href="http://html.java.net">Html for Java</a>!
139 This API is part of <a target="_blank"
140 href="http://netbeans.org">NetBeans.org</a> project and as such
141 it works naturally with the <a target="_blank"
142 href="https://netbeans.org/features/index.html">NetBeans IDE</a>.
143 On the other hand, the API is using nothing NetBeans specific,
144 it builds on standard Java6 APIs and as such it shall work fine
149 A lot of work is done by
150 <a href="http://wiki.apidesign.org/wiki/AnnotationProcessor">
151 annotation processors</a>
152 that generate various boiler plate code during compilation. This
153 is a standard part of Java since JDK6, but for example Eclipse
154 is known not to deal with processors well and developers using
155 it need to be careful. IntelliJ users hasn't reported any issues
156 and of course, NetBeans IDE support for
157 <a href="http://wiki.apidesign.org/wiki/AnnotationProcessor">processors</a>
162 When using {@link net.java.html.js.JavaScriptBody} annotation, it is
163 useful to do a bit of post processing of classes. There is a
164 <a href="http://wiki.apidesign.org/wiki/Maven">Maven</a>
166 NetBeans IDE will invoke it when doing a build. Other IDEs may
167 need some hint to do so.
168 Anyway: If one does not see all (generated) sources or is getting
169 {@link java.lang.LinkageError}s when executing the application,
170 switch to command line and do clean build
173 <pre>$ mvn clean install</pre>
175 If that succeeds, your IDE of choice will hopefully
176 pick the generated sources up and present the result of the build
178 <a href="https://netbeans.org/downloads/">download NetBeans</a>,
179 you will be pleasantly
180 surprised - for example with our excellent
181 <a href="net/java/html/js/package-summary.html#debugging">Java/JavaScript
182 debugging</a> support.
186 <h2>Deploy Your Application</h2>
190 It is not goal of this documentation to list all possible ways
191 to package and deploy applications which use this API. However it is
192 important for new comers to see the benefits of using the
193 <a href="http://html.java.net">HTML for Java</a> API and as such
194 let's list at least few bundling options, known to work at the time of writing
199 First of all, this is a <em>client technology</em>. You write client applications
200 with it which may, but need not connect to a server. You don't need
201 Tomcat or WebLogic to deploy
202 <a href="http://html.java.net">HTML for Java</a> applications.
206 <img src='resources/javafx_logo.jpg' width="64"
207 height="64" align="left"/>
208 The sample project generated by
209 <code>org.apidesign.html knockout4j-archetype</code> is configured
210 to use <a href="http://wiki.apidesign.org/wiki/JavaFX">JavaFX</a>
211 as the rendering technology. This setup is primarily suitable for
212 development - it needs no special packaging, starts quickly and
213 allows you to use classical HotSpot VM debuggers. A final
214 artifact from the build is also a ZIP file which you can use
215 and distribute to your users. Good for desktop applications.
219 <img src='resources/netbeans_logo.jpg' width="64"
220 height="64" align="right"/>
221 <img src='resources/eclipse_logo.png' width="64"
222 height="64" align="right"/>
223 All the <a href="http://html.java.net">HTML for Java</a> libraries
224 are package as <a href="http://wiki.apidesign.org/wiki/OSGi">OSGi</a>
225 bundles and as such they can easily be run in NetBeans as well as
226 in Eclipse. As a result one can use
227 <a href="http://wiki.apidesign.org/wiki/OSGi">OSGi</a>
228 and have a common module system for both platforms and render using
229 HTML and have a common UI in both platforms. In such case
230 your application would be packaged as a set of
231 <a href="http://wiki.apidesign.org/wiki/OSGi">OSGi</a> bundles.
233 <a href="http://wiki.apidesign.org/wiki/HTML">more</a>...
237 <img src='resources/chrome_logo.png' width="64"
238 height="64" align="left"/>
239 <img src='resources/safari_logo.png' width="64"
240 height="64" align="left"/>
241 <img src='resources/ie_logo.png' width="64"
242 height="64" align="left"/>
243 <img src='resources/firefox_logo.png' width="64"
244 height="64" align="left"/>
246 There is more and more attempts to execute Java bytecode
247 in any browser, without any special Java plugin installed.
248 The <a href="http://html.java.net">HTML for Java</a> is
249 carefully designed to produce lightweight, well performing
250 applications even on such restricted environments. It uses
251 no reflection calls and that allows to statically pre-compile
252 the applications into JavaScript. One of such environments
253 is called <em>Bck2Brwsr</em>, another <em>TeaVM</em>. Both support the
254 {@link net.java.html.js.JavaScriptBody} annotation. Read
255 <a href="http://wiki.apidesign.org/wiki/Bck2BrwsrViaCLI">more</a> or play
256 a minesweeper game packaged for your browser
257 (of course <a target="_blank"
258 href="http://source.apidesign.org/hg/html~demo/file/ea79b73d590a/minesweeper/src/main/java/org/apidesign/demo/minesweeper/MinesModel.java">
259 written</a> in Java):
262 <script type="text/html" id="field">
263 <table class="field">
265 <!-- ko foreach: rows -->
267 <!-- ko foreach: columns -->
268 <td data-bind="css: style, click: $parents[1].click" >
269 <div data-bind='html: html'></div>
278 <div data-bind="template: { name : 'field', if: fieldShowing }"></div>
280 <!-- boot bck2brwsr -->
281 <script type="text/javascript" src="resources/teavm.js"></script>
284 vm.loadClass('org.apidesign.demo.minesweeper.MainBrwsr');
288 <img src='resources/android_logo.jpg' width="64"
289 height="64" align="right"/>
291 Now when we have seen that the
292 <a href="http://html.java.net">HTML for Java</a> applications
293 can run on any modern browser, we can ask whether they can also
294 fit into a phone!? Yes, they can and especially to phones
295 that can execute Java code already! Just by changing your
296 packaging you can create an APK file and deploy it to your
298 Read <a href="http://wiki.apidesign.org/wiki/DlvkBrwsr">more</a>...
301 Convinced it makes sense to use
302 <a href="http://html.java.net">HTML for Java</a>
303 APIs for writing applications that are
304 <em>written once, displayed anywhere</em>? Or do you have an
305 environment which is not supported? In such case you can bring
306 <a href="http://html.java.net">HTML for Java</a>
307 to your environment yourself. Just implement your own
308 {@link org.apidesign.html.boot.spi.Fn.Presenter}!
311 <h2>Other Resources</h2>
313 <img src="net/java/html/json/doc-files/DukeHTML.png" width="256" height="184" alt="Duke and HTML5. Together at last!" align="right"/>
315 The javadoc for latest and previous versions is also available
318 <li>Current <a target="_blank" href="http://bits.netbeans.org/html+java/dev/">development</a> version
319 <li>Version <a target="_blank" href="http://bits.netbeans.org/html+java/0.7.5">0.7.5</a>
322 <style type="text/css">
328 border: 1px solid black;
330 table.field td.UNKNOWN {
331 background-color: #D6E4E1;
334 table.field td.EXPLOSION {
335 background-color: #A31E39;
337 table.field td.DISCOVERED {
338 background-color: #9DB2B1;