From 99d6de546c74f0eed230ea8253dda6b85109d2e7 Mon Sep 17 00:00:00 2001 From: Markus Koivisto Date: Fri, 22 Jan 2016 14:55:18 +0200 Subject: Add documentation to master branch Change-Id: I2504bb10f1ae73ec0cbc08b7ba5a88925caa1674 --- .../clientsideapp/chapter-clientsideapp.asciidoc | 16 + .../clientsideapp/clientsideapp-compiling.asciidoc | 27 + .../clientsideapp-entrypoint.asciidoc | 83 + .../clientsideapp/clientsideapp-loading.asciidoc | 54 + .../clientsideapp/clientsideapp-overview.asciidoc | 90 + .../img/clientsideapp-architecture-hi.png | Bin 0 -> 167197 bytes .../img/clientsideapp-architecture-lo.png | Bin 0 -> 42920 bytes .../clientsideapp-architecture.svg | 1718 ++++++++++++++++++++ 8 files changed, 1988 insertions(+) create mode 100644 documentation/clientsideapp/chapter-clientsideapp.asciidoc create mode 100644 documentation/clientsideapp/clientsideapp-compiling.asciidoc create mode 100644 documentation/clientsideapp/clientsideapp-entrypoint.asciidoc create mode 100644 documentation/clientsideapp/clientsideapp-loading.asciidoc create mode 100644 documentation/clientsideapp/clientsideapp-overview.asciidoc create mode 100644 documentation/clientsideapp/img/clientsideapp-architecture-hi.png create mode 100644 documentation/clientsideapp/img/clientsideapp-architecture-lo.png create mode 100644 documentation/clientsideapp/original-drawings/clientsideapp-architecture.svg (limited to 'documentation/clientsideapp') diff --git a/documentation/clientsideapp/chapter-clientsideapp.asciidoc b/documentation/clientsideapp/chapter-clientsideapp.asciidoc new file mode 100644 index 0000000000..19b3cc1b7d --- /dev/null +++ b/documentation/clientsideapp/chapter-clientsideapp.asciidoc @@ -0,0 +1,16 @@ +[[clientsideapp]] +== Client-Side Applications + +This chapter describes how to develop client-side Vaadin applications. + +__We only give a brief introduction to the topic in this book. Please refer to +the GWT documentation for a more complete treatment of the many GWT features.__ + + +include::clientsideapp-overview.asciidoc[leveloffset=+2] + +include::clientsideapp-entrypoint.asciidoc[leveloffset=+2] + +include::clientsideapp-compiling.asciidoc[leveloffset=+2] + +include::clientsideapp-loading.asciidoc[leveloffset=+2] diff --git a/documentation/clientsideapp/clientsideapp-compiling.asciidoc b/documentation/clientsideapp/clientsideapp-compiling.asciidoc new file mode 100644 index 0000000000..fe790fa45e --- /dev/null +++ b/documentation/clientsideapp/clientsideapp-compiling.asciidoc @@ -0,0 +1,27 @@ +--- +title: Compiling and Running a Client-Side Application +order: 3 +layout: page +--- + +[[clientsideapp.compiling]] += Compiling and Running a Client-Side Application + +__Compilation of client-side modules other than widget sets with the Vaadin +Plugin for Eclipse has recent changes and limitations at the time of writing of +this edition and the information given here may not be accurate.__ + +The application needs to be compiled into JavaScript to run it in a browser. For +deployment, and also initially for the first time when running the Development +Mode, you need to do the compilation with the Vaadin Client Compiler, as +described in +<>. + +During development, it is easiest to use the SuperDevMode, which also quickly +launching the client-side code and also allows debugging. See +<> for more details. + + + diff --git a/documentation/clientsideapp/clientsideapp-entrypoint.asciidoc b/documentation/clientsideapp/clientsideapp-entrypoint.asciidoc new file mode 100644 index 0000000000..f13303bde4 --- /dev/null +++ b/documentation/clientsideapp/clientsideapp-entrypoint.asciidoc @@ -0,0 +1,83 @@ +--- +title: Client-Side Module Entry-Point +order: 2 +layout: page +--- + +[[clientsideapp.entrypoint]] += Client-Side Module Entry-Point + +A client-side application requires an __entry-point__ where the execution +starts, much like the [methodname]#init()# method in server-side Vaadin UIs. + +Consider the following application: + + +---- +package com.example.myapp.client; + +import com.google.gwt.core.client.EntryPoint; +import com.google.gwt.event.dom.client.ClickEvent; +import com.google.gwt.event.dom.client.ClickHandler; +import com.google.gwt.user.client.ui.RootPanel; +import com.vaadin.ui.VButton; + +public class MyEntryPoint implements EntryPoint { + @Override + public void onModuleLoad() { + // Create a button widget + Button button = new Button(); + button.setText("Click me!"); + button.addClickHandler(new ClickHandler() { + @Override + public void onClick(ClickEvent event) { + mywidget.setText("Hello, world!"); + } + }); + RootPanel.get().add(button); + } +} +---- + +Before compiling, the entry-point needs to be defined in a module descriptor, as +described in the next section. + +[[clientsideapp.entrypoint.descriptor]] +== Module Descriptor + +The entry-point of a client-side application is defined, along with any other +configuration, in a client-side module descriptor, described in +<>. The descriptor is an XML file with suffix +[filename]#.gwt.xml#. + + +---- + + + + + + + + + +---- + +You might rather want to inherit the [classname]#com.google.gwt.user.User# to +get just the basic GWT widgets, and not the Vaadin-specific widgets and classes, +most of which are unusable in pure client-side applications. + +You can put static resources, such as images or CSS stylesheets, in a +[filename]#public# folder (not a Java package) under the folder of the +descriptor file. When the module is compiled, the resources are copied to the +output folder. Normally in pure client-side application development, it is +easier to load them in the HTML host file or in a [classname]#ClientBundle# (see +GWT documentation), but these methods are not compatible with server-side +component integration, if you use the resources for that purpose as well. + + + + diff --git a/documentation/clientsideapp/clientsideapp-loading.asciidoc b/documentation/clientsideapp/clientsideapp-loading.asciidoc new file mode 100644 index 0000000000..1ac6ddce1a --- /dev/null +++ b/documentation/clientsideapp/clientsideapp-loading.asciidoc @@ -0,0 +1,54 @@ +--- +title: Loading a Client-Side Application +order: 4 +layout: page +--- + +[[clientsideapp.loading]] += Loading a Client-Side Application + +You can load the JavaScript code of a client-side application in an HTML __host +page__ by including it with a [literal]#++ + + +---- + +The JavaScript module is loaded in a [literal]#++