From a1b265c318dbda4a213cec930785b81e4c0f7d2b Mon Sep 17 00:00:00 2001 From: elmot Date: Fri, 25 Sep 2015 16:40:44 +0300 Subject: Framework documentation IN Change-Id: I767477c1fc3745f9e1f58075fe30c9ac8da63581 --- .../architecture/architecture-client-side.asciidoc | 43 + .../architecture/architecture-events.asciidoc | 74 + .../architecture/architecture-overview.asciidoc | 162 ++ .../architecture/architecture-technology.asciidoc | 208 ++ .../architecture/chapter-architecture.asciidoc | 16 + .../architecture/img/architecture-detailed-hi.png | Bin 0 -> 272529 bytes .../architecture/img/architecture-detailed-lo.png | Bin 0 -> 68280 bytes .../architecture/img/clientside-arch-hi.png | Bin 0 -> 211546 bytes .../architecture/img/clientside-arch-lo.png | Bin 0 -> 53612 bytes documentation/architecture/img/datamodel-sml.png | Bin 0 -> 67576 bytes .../architecture/img/datamodel-whitebg.png | Bin 0 -> 287119 bytes documentation/architecture/img/datamodel.png | Bin 0 -> 302313 bytes .../architecture/img/events-classdiagram-hi.png | Bin 0 -> 148293 bytes .../architecture/img/events-classdiagram-lo.png | Bin 0 -> 38557 bytes documentation/architecture/img/java-servlet-hi.png | Bin 0 -> 51698 bytes documentation/architecture/img/java-servlet-lo.png | Bin 0 -> 13589 bytes .../original-drawings/architecture-detailed.svg | 1999 ++++++++++++++ .../original-drawings/clientside-arch.svg | 2740 +++++++++++++++++++ .../clientside-arch.svg.2012_10_09_18_20_24.0.svg | 2879 ++++++++++++++++++++ .../clientside-arch.svg.2012_10_12_17_35_17.0.svg | 2735 +++++++++++++++++++ .../original-drawings/events-classdiagram.svg | 2565 +++++++++++++++++ .../original-drawings/java-servlet.svg | 2388 ++++++++++++++++ 22 files changed, 15809 insertions(+) create mode 100644 documentation/architecture/architecture-client-side.asciidoc create mode 100644 documentation/architecture/architecture-events.asciidoc create mode 100644 documentation/architecture/architecture-overview.asciidoc create mode 100644 documentation/architecture/architecture-technology.asciidoc create mode 100644 documentation/architecture/chapter-architecture.asciidoc create mode 100644 documentation/architecture/img/architecture-detailed-hi.png create mode 100644 documentation/architecture/img/architecture-detailed-lo.png create mode 100644 documentation/architecture/img/clientside-arch-hi.png create mode 100644 documentation/architecture/img/clientside-arch-lo.png create mode 100644 documentation/architecture/img/datamodel-sml.png create mode 100644 documentation/architecture/img/datamodel-whitebg.png create mode 100644 documentation/architecture/img/datamodel.png create mode 100644 documentation/architecture/img/events-classdiagram-hi.png create mode 100644 documentation/architecture/img/events-classdiagram-lo.png create mode 100644 documentation/architecture/img/java-servlet-hi.png create mode 100644 documentation/architecture/img/java-servlet-lo.png create mode 100644 documentation/architecture/original-drawings/architecture-detailed.svg create mode 100644 documentation/architecture/original-drawings/clientside-arch.svg create mode 100644 documentation/architecture/original-drawings/clientside-arch.svg.2012_10_09_18_20_24.0.svg create mode 100644 documentation/architecture/original-drawings/clientside-arch.svg.2012_10_12_17_35_17.0.svg create mode 100644 documentation/architecture/original-drawings/events-classdiagram.svg create mode 100644 documentation/architecture/original-drawings/java-servlet.svg (limited to 'documentation/architecture') diff --git a/documentation/architecture/architecture-client-side.asciidoc b/documentation/architecture/architecture-client-side.asciidoc new file mode 100644 index 0000000000..e16b003687 --- /dev/null +++ b/documentation/architecture/architecture-client-side.asciidoc @@ -0,0 +1,43 @@ +--- +title: Client-Side Engine +order: 3 +layout: page +--- + +[[architecture.client-side]] += Client-Side Engine + +((("Client-Side +Engine"))) +The user interface of a server-side Vaadin application is rendered in the +browser by the Vaadin Client-Side Engine. It is loaded in the browser when the +page with the Vaadin UI is opened. The server-side UI components are rendered +using __widgets__ (as they are called in Google Web Toolkit) on the client-side. +The client-side engine is illustrated in <>. + +[[figure.architecture.client-side]] +.Vaadin Client-Side Engine +image::img/clientside-arch-hi.png[] + +The client-side framework includes two kinds of built-in widgets: GWT widgets +and Vaadin-specific widgets. The two widget collections have significant +overlap, where the Vaadin widgets provide a bit different features than the GWT +widgets. In addition, many add-on widgets and their server-side counterparts +exist, and you can easily download and install them, as described in +<>. You can also develop your own widgets, as described in +<>. + +The rendering with widgets, as well as the communication to the server-side, is +handled in the [classname]#ApplicationConnection#. Connecting the widgets with +their server-side counterparts is done in __connectors__, and there is one for +each widget that has a server-side counterpart. The framework handles +serialization of component state transparently, and includes an RPC mechanism +between the two sides. Integration of widgets with their server-side counterpart +components is described in +<>. + + + diff --git a/documentation/architecture/architecture-events.asciidoc b/documentation/architecture/architecture-events.asciidoc new file mode 100644 index 0000000000..e832c581fe --- /dev/null +++ b/documentation/architecture/architecture-events.asciidoc @@ -0,0 +1,74 @@ +--- +title: Events and Listeners +order: 4 +layout: page +--- + +[[architecture.events]] += Events and Listeners + +Vaadin offers an event-driven programming model for handling user interaction. +When a user does something in the user interface, such as clicks a button or +selects an item, the application needs to know about it. Many Java-based user +interface frameworks follow the __Event-Listener pattern__ (also known as the +Observer design pattern) to communicate user input to the application logic. So +does Vaadin. The design pattern involves two kinds of elements: an object that +generates ("fires" or "emits") events and a number of listeners that listen for +the events. When such an event occurs, the object sends a notification about it +to all the listeners. In a typical case, there is only one listener. + +Events can serve many kinds of purposes. In Vaadin, the usual purpose of events +is handling user interaction in a user interface. Session management can require +special events, such as time-out, in which case the event would actually be the +lack of user interaction. Time-out is a special case of timed or scheduled +events, where an event occurs at a specific date and time or when a set time has +passed. + +To receive events of a particular type, an application must register a listener +object with the event source. The listeners are registered in the components +with an [methodname]#add*Listener()# method (with a method name specific to the +listener). + +Most components that have related events define their own event class and the +corresponding listener class. For example, the [classname]#Button# has +[classname]#Button.ClickEvent# events, which can be listened to through the +[classname]#Button.ClickListener# interface. + +In the following, we handle button clicks with a listener implemented as an +anonymous class: + + +[source, java] +---- +final Button button = new Button("Push it!"); + +button.addClickListener(new Button.ClickListener() { + public void buttonClick(ClickEvent event) { + button.setCaption("You pushed it!"); + } +}); +---- + +<> illustrates the case where an +application-specific class inherits the [classname]#Button.ClickListener# +interface to be able to listen for button click events. The application must +instantiate the listener class and register it with +[methodname]#addClickListener()#. It can be an anonymous class, such as the one +above. When an event occurs, an event object is instantiated, in this case a +[classname]#Button.ClickEvent#. The event object knows the related UI component, +in this case the [classname]#Button#. + +[[figure.eventlistenerdiagram]] +.Class Diagram of a Button Click Listener +image::img/events-classdiagram-hi.png[] + +In the ancient times of C programming, __callback functions__ filled largely the +same need as listeners do now. In object-oriented languages, we usually only +have classes and methods, not functions, so the application has to give a class +interface instead of a callback function pointer to the framework. + +<> goes into details of handling events in practice. + + + diff --git a/documentation/architecture/architecture-overview.asciidoc b/documentation/architecture/architecture-overview.asciidoc new file mode 100644 index 0000000000..4ff34c453c --- /dev/null +++ b/documentation/architecture/architecture-overview.asciidoc @@ -0,0 +1,162 @@ +--- +title: Overview +order: 1 +layout: page +--- + +[[architecture.overview]] += Overview + +Vaadin provides two development models for web applications: for the client-side +(the browser) and for the server-side. The server-driven development model is +the more powerful one, allowing application development solely on the +server-side, by utilizing an AJAX-based Vaadin Client-Side Engine that renders +the user interface in the browser. The client-side model allows developing +widgets and applications in Java, which are compiled to JavaScript and executed +in the browser. The two models can share their UI widgets, themes, and back-end +code and services, and can be mixed together easily. + +[[figure.architecture.detailed]] +.Vaadin Runtime Architecture +image::img/architecture-detailed-hi.png[] + +<> gives a basic illustration of the client-side +and server-side communications, in a running situation where the page with the +client-side code (engine or application) has been initially loaded in the +browser. + +Vaadin Framework consists of a __server-side API__, a __client-side API__, a +horde of __user interface components/widgets__ on the both sides, __themes__ for +controlling the appearance, and a __data model__ that allows binding the +server-side components directly to data. For client-side development, it +includes the Vaadin Compiler, which allows compiling Java to JavaScript. + +A server-side Vaadin application runs as a servlet in a Java web server, serving +HTTP requests. The [classname]#VaadinServlet# is normally used as the servlet +class. The servlet receives client requests and inteprets them as events for a +particular user session. Events are associated with user interface components +and delivered to the event listeners defined in the application. If the UI logic +makes changes to the server-side user interface components, the servlet renders +them in the web browser by generating a response. The client-side engine running +in the browser receives the responses and uses them to make any necessary +changes to the page in the browser. + +The major parts of the server-driven development architecture and their function +are as follows: + +User Interface:: Vaadin applications provide a user interface for the user to interface with the +business logic and data of the application. At technical level, the UI is +realized as a __UI__ class that extends [classname]#com.vaadin.ui.UI#. Its main +task is to create the initial user interface out of UI components and set up +event listeners to handle user input. The UI can then be loaded in the browser +using an URL, or can be embedded to any HTML page. For detailed information +about implementing a [classname]#UI#, see +<>. + ++ +Please note that the term "UI" is used throughout this book to refer both to the +general UI concept as well as the technical UI class concept. + +User Interface Components/Widgets:: ((("component"))) +((("widget"))) +((("field"))) +The user interface of a Vaadin application consists of components that are +created and laid out by the application. Each server-side component has a +client-side counterpart, a " __widget__", by which it is rendered in the browser +and with which the user interacts. The client-side widgets can also be used by +client-side applications. The server-side components relay these events to the +application logic. Field components that have a value, which the user can view +or edit, can be bound to a data source (see below). For a more detailed +description of the UI component architecture, see +<>. + +Client-Side Engine:: ((("Client-Side +Engine"))) +((("Google Web +Toolkit"))) +((("HTTP"))) +The Client-Side Engine of Vaadin manages the rendering of the UI in the web +browser by employing various client-side __widgets__, counterparts of the +server-side components. It communicates user interaction to the server-side, and +then again renders the changes in the UI. The communications are made using +asynchronous HTTP or HTTPS requests. See +<>. + +Vaadin Servlet:: ((("VaadinServlet"))) +Server-side Vaadin applications work on top of the Java Servlet API (see +<>). The Vaadin servlet, or more exactly the [classname]#VaadinServlet# +class, receives requests from different clients, determines which user session +they belong to by tracking the sessions with cookies, and delegates the requests +to their corresponding sessions. You can customize the Vaadin servlet by +extending it. + +Themes:: ((("theme"))) +((("CSS"))) +((("Sass"))) +((("HTML +templates"))) +Vaadin makes a separation between the appearance and component structure of the +user interface. While the UI logic is handled as Java code, the presentation is +defined in __themes__ as CSS or Sass. Vaadin provides a number of default +themes. User themes can, in addition to style sheets, include HTML templates +that define custom layouts and other resources, such as images and fonts. Themes +are discussed in detail in +<>. + +Events:: ((("events"))) +Interaction with user interface components creates events, which are first +processed on the client-side by the widgets, then passed all the way through the +HTTP server, Vaadin servlet, and the user interface components to the event +listeners defined in the application. See +<>. + +Server Push:: ((("server +push"))) +In addition to the event-driven programming model, Vaadin supports server push, +where the UI changes are pushed directly from the server to the client without a +client request or an event. This makes it possible to update UIs immediately +from other threads and other UIs, without having to wait for a request. See +<>. + +Data Binding:: ((("Data +Model"))) +((("Data +Binding"))) +In addition to the user interface model, Vaadin provides a __data model__ for +binding data presented in field components, such as text fields, check boxes and +selection components, to a data source. Using the data model, the user interface +components can update the application data directly, often without the need for +any control code. All the field components in Vaadin use this data model +internally, but any of them can be bound to a separate data source as well. +((("SQL"))) +For example, you can bind a table component to an SQL query response. For a +complete overview of the Vaadin Data Model, please refer to +<>. + +Client-Side Applications:: In addition to server-side web applications, Vaadin supports client-side +application modules, which run in the browser. Client-side modules can use the +same widgets, themes, and back-end services as server-side Vaadin applications. +They are useful when you have a need for highly responsive UI logic, such as for +games or for serving a large number of clients with possibly stateless +server-side code, and for various other purposes, such as offering an off-line +mode for server-side applications. Please see +<> for further details. + +Back-end:: Vaadin is meant for building user interfaces, and it is recommended that other +application layers should be kept separate from the UI. The business logic can +run in the same servlet as the UI code, usually separated at least by a Java +API, possibly as EJBs, or distributed to a remote back-end service. The data +storage is usually distributed to a database management system, and is typically +accessed through a persistence solution, such as JPA. + + + + + diff --git a/documentation/architecture/architecture-technology.asciidoc b/documentation/architecture/architecture-technology.asciidoc new file mode 100644 index 0000000000..39df9c3651 --- /dev/null +++ b/documentation/architecture/architecture-technology.asciidoc @@ -0,0 +1,208 @@ +--- +title: Technological Background +order: 2 +layout: page +--- + +[[architecture.technology]] += Technological Background + +((("Google Web +Toolkit"))) +((("Google Web +Toolkit"))) +This section provides an introduction to the various technologies and designs, +which Vaadin is based on. This knowledge is not necessary for using Vaadin, but +provides some background if you need to make low-level extensions to Vaadin. + +[[architecture.technology.html]] +== HTML and JavaScript + +((("HTML"))) +((("JavaScript"))) +The World Wide Web, with all its websites and most of the web applications, is +based on the use of the Hypertext Markup Language (HTML). HTML defines the +structure and formatting of web pages, and allows inclusion of graphics and +other resources. It is based on a hierarchy of elements marked with start and +end tags, such as [literal]#++
...
++#. Vaadin uses HTML version 5, +although conservatively, to the extent supported by the major browsers, and +their currently most widely used versions. + +((("DOM"))) +JavaScript, on the other hand, is a programming language for embedding programs +in HTML pages. JavaScript programs can manipulate a HTML page through the +Document Object Model (DOM) of the page. They can also handle user interaction +events. The Client-Side Engine of Vaadin and its client-side widgets do exactly +this, although it is actually programmed in Java, which is compiled to +JavaScript with the Vaadin Client Compiler. + +Vaadin largely hides the use of HTML, allowing you to concentrate on the UI +component structure and logic. In server-side development, the UI is developed +in Java using UI components and rendered by the client-side engine as HTML, but +it is possible to use HTML templates for defining the layout, as well as HTML +formatting in many text elements. Also when developing client-side widgets and +UIs, the built-in widgets in the framework hide most of HTML DOM manipulation. + + +[[architecture.technology.styling]] +== Styling with CSS and Sass + +((("CSS"))) +((("Sass"))) +While HTML defines the content and structure of a web page, __Cascading Style +Sheet__ (CSS) is a language for defining the visual style, such as colors, text +sizes, and margins. CSS is based on a set of rules that are matched with the +HTML structure by the browser. The properties defined in the rules determine the +visual appearance of the matching HTML elements. + + +[source, css] +---- +/* Define the color of labels in my view */ +.myview .v-label { + color: blue; +} +---- + +((("SCSS"))) +((("CSS3"))) +__Sass__, or __Syntactically Awesome Stylesheets__, is an extension of the CSS +language, which allows the use of variables, nesting, and many other syntactic +features that make the use of CSS easier and clearer. Sass has two alternative +formats, SCSS, which is a superset of the syntax of CSS3, and an older indented +syntax, which is more concise. The Vaadin Sass compiler supports the SCSS +syntax. + +((("themes"))) +Vaadin handles styling with __themes__ defined with CSS or Sass, and associated +images, fonts, and other resources. Vaadin themes are specifically written in +Sass. In development mode, Sass files are compiled automatically to CSS. For +production use, you compile the Sass files to CSS with the included compiler. +The use of themes is documented in detail in +<>, +which also gives an introduction to CSS and Sass. + + +[[architecture.technology.ajax]] +== AJAX + +((("AJAX"))) +((("XML"))) +((("JavaScript"))) +((("HTML +5"))) +((("CSS"))) +((("DOM"))) +((("XMLHttpRequest"))) +AJAX, short for Asynchronous JavaScript and XML, is a technique for developing +web applications with responsive user interaction, similar to traditional +desktop applications. Conventional web applications, be they JavaScript-enabled +or not, can get new page content from the server only by loading an entire new +page. AJAX-enabled pages, on the other hand, handle the user interaction in +JavaScript, send a request to the server asynchronously (without reloading the +page), receive updated content in the response, and modify the page accordingly. +This way, only small parts of the page data need to be loaded. This goal is +archieved by the use of a certain set of technologies: HTML, CSS, DOM, +JavaScript, and the XMLHttpRequest API in JavaScript. XML is just one way to +serialize data between the client and the server, and in Vaadin it is serialized +with the more efficient JSON. + +The asynchronous requests used in AJAX are made possible by the +[methodname]#XMLHttpRequest# class in JavaScript. The API feature is available +in all major browsers and is under way to become a W3C standard. + +The communication of complex data between the browser and the server requires +some sort of __serialization__ (or __marshalling__) of data objects. The Vaadin +servlet and the client-side engine handle the serialization of shared state +objects from the server-side components to the client-side widgets, as well as +serialization of RPC calls between the widgets and the server-side components. + + +[[architecture.technology.gwt]] +== Google Web Toolkit + +((("Google Web +Toolkit"))) +The client-side framework of Vaadin is based on the Google Web Toolkit (GWT). +Its purpose is to make it possible to develop web user interfaces that run in +the browser easily with Java instead of JavaScript. Client-side modules are +developed with Java and compiled into JavaScript with the Vaadin Compiler, which +is an extension of the GWT Compiler. The client-side framework also hides much +of the HTML DOM manipulation and enables handling browser events in Java. + +GWT is essentially a client-side technology, normally used to develop user +interface logic in the web browser. Pure client-side modules still need to +communicate with a server using RPC calls and by serializing any data. The +server-driven development mode in Vaadin effectively hides all the client-server +communications and allows handling user interaction logic in a server-side +application. This makes the architecture of an AJAX-based web application much +simpler. Nevertheless, Vaadin also allows developing pure client-side +applications, as described in +<>. + +See +<> for a description of how the client-side framework based on GWT is +used in the Client-Side Engine of Vaadin. +<> provides information about the client-side development, +and +<> about the integration of client-side widgets with the +server-side components. + + +[[architecture.technology.servlet]] +== Java Servlets + +A Java Servlet is a class that is executed in a Java web server (a __Servlet +container__) to extend the capabilities of the server. In practice, it is +normally a part of a __web application__, which can contain HTML pages to +provide static content, and JavaServer Pages (JSP) and Java Servlets to provide +dynamic content. This is illustrated in +<>. + +[[figure.architecture.technology.servlet]] +.Java Web Applications and Servlets +image::img/java-servlet-hi.png[] + +Web applications are usually packaged and deployed to a server as __WAR__ ( +__Web application ARchive__) files, which are Java JAR packages, which in turn +are ZIP compressed packages. The web application is defined in a +[filename]#WEB-INF/web.xml# deployment descriptor, which defines the servlet +classes and also the mappings from request URL paths to the servlets. This is +described in more detail in +<>. The class path for the servlets and their +dependencies includes the [filename]#WEB-INF/classes# and +[filename]#WEB-INF/lib# folders. The [filename]#WEB-INF# is a special hidden +folder that can not be accessed by its URL path. + +The servlets are Java classes that handle HTTP requests passed to them by the +server through the __Java Servlet API__. They can generate HTML or other content +as a response. JSP pages, on the other hand, are HTML pages, which allow +including Java source code embedded in the pages. They are actually translated +to Java source files by the container and then compiled to servlets. + +The UIs of server-side Vaadin applications run as servlets. They are wrapped +inside a [classname]#VaadinServlet# servlet class, which handles session +tracking and other tasks. On the initial request, it returns an HTML loader page +and then mostly JSON responses to synchronize the widgets and their server-side +counterparts. It also serves various resources, such as themes. The server-side +UIs are implemented as classes extending the [classname]#UI# class, as described +in +<>. The class is given as a parameter to the +Vaadin Servlet in the [filename]#web.xml# deployment descriptor. + +The Vaadin Client-Side Engine as well as client-side Vaadin applications are +loaded to the browser as static JavaScript files. The client-side engine, or +widget set in technical terms, needs to be located under the +[filename]#VAADIN/widgetsets# path in the web application. The precompiled +default widget set is served from the [filename]#vaadin-client-compiled# JAR by +the Vaadin Servlet. + + + + diff --git a/documentation/architecture/chapter-architecture.asciidoc b/documentation/architecture/chapter-architecture.asciidoc new file mode 100644 index 0000000000..60e0c57b09 --- /dev/null +++ b/documentation/architecture/chapter-architecture.asciidoc @@ -0,0 +1,16 @@ +[[architecture]] +== Architecture + +In +<>, +we gave a short introduction to the general architecture of Vaadin. This chapter +looks deeper into the architecture at a more technical level. + + +include::architecture-overview.asciidoc[leveloffset=+2] + +include::architecture-technology.asciidoc[leveloffset=+2] + +include::architecture-client-side.asciidoc[leveloffset=+2] + +include::architecture-events.asciidoc[leveloffset=+2] diff --git a/documentation/architecture/img/architecture-detailed-hi.png b/documentation/architecture/img/architecture-detailed-hi.png new file mode 100644 index 0000000000..190e4adac0 Binary files /dev/null and b/documentation/architecture/img/architecture-detailed-hi.png differ diff --git a/documentation/architecture/img/architecture-detailed-lo.png b/documentation/architecture/img/architecture-detailed-lo.png new file mode 100644 index 0000000000..4edc56f85c Binary files /dev/null and b/documentation/architecture/img/architecture-detailed-lo.png differ diff --git a/documentation/architecture/img/clientside-arch-hi.png b/documentation/architecture/img/clientside-arch-hi.png new file mode 100644 index 0000000000..f00d9db29c Binary files /dev/null and b/documentation/architecture/img/clientside-arch-hi.png differ diff --git a/documentation/architecture/img/clientside-arch-lo.png b/documentation/architecture/img/clientside-arch-lo.png new file mode 100644 index 0000000000..28fb6db3ef Binary files /dev/null and b/documentation/architecture/img/clientside-arch-lo.png differ diff --git a/documentation/architecture/img/datamodel-sml.png b/documentation/architecture/img/datamodel-sml.png new file mode 100644 index 0000000000..8087ffa7d8 Binary files /dev/null and b/documentation/architecture/img/datamodel-sml.png differ diff --git a/documentation/architecture/img/datamodel-whitebg.png b/documentation/architecture/img/datamodel-whitebg.png new file mode 100644 index 0000000000..803dd70c08 Binary files /dev/null and b/documentation/architecture/img/datamodel-whitebg.png differ diff --git a/documentation/architecture/img/datamodel.png b/documentation/architecture/img/datamodel.png new file mode 100644 index 0000000000..a639fa4a32 Binary files /dev/null and b/documentation/architecture/img/datamodel.png differ diff --git a/documentation/architecture/img/events-classdiagram-hi.png b/documentation/architecture/img/events-classdiagram-hi.png new file mode 100644 index 0000000000..a9df53c3c5 Binary files /dev/null and b/documentation/architecture/img/events-classdiagram-hi.png differ diff --git a/documentation/architecture/img/events-classdiagram-lo.png b/documentation/architecture/img/events-classdiagram-lo.png new file mode 100644 index 0000000000..91859d1353 Binary files /dev/null and b/documentation/architecture/img/events-classdiagram-lo.png differ diff --git a/documentation/architecture/img/java-servlet-hi.png b/documentation/architecture/img/java-servlet-hi.png new file mode 100644 index 0000000000..7d2f26928a Binary files /dev/null and b/documentation/architecture/img/java-servlet-hi.png differ diff --git a/documentation/architecture/img/java-servlet-lo.png b/documentation/architecture/img/java-servlet-lo.png new file mode 100644 index 0000000000..5985bb5492 Binary files /dev/null and b/documentation/architecture/img/java-servlet-lo.png differ diff --git a/documentation/architecture/original-drawings/architecture-detailed.svg b/documentation/architecture/original-drawings/architecture-detailed.svg new file mode 100644 index 0000000000..504ba28ac4 --- /dev/null +++ b/documentation/architecture/original-drawings/architecture-detailed.svg @@ -0,0 +1,1999 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + Web Application + + Server + + + + Web Browser + + Vaadin Client-Side Engine(Widget Set) + + + Client-Side UI + + + + + + Built-inWidgets + + + Add-onWidgets + + + CustomWidgets + + + + + Vaadin Servlet (or Portlet) + + + UserInterface + + + + Back-end + + Web Service + + + EJB + + + Persistence + + + BusinessLogic + + + Database + + HTTP(S) + + + + + + Built-inComponents + + + Add-onComponents + + + CustomComponents + + UI Changes + + + Themes + + Built-inThemes + + + UserTheme + + + + + + + + + + Custom Servlet + + Service + + + + + + + + + + UI Events + + + + + + + DataBinding + + + + Request Response + + + + + + + + + + + + + + diff --git a/documentation/architecture/original-drawings/clientside-arch.svg b/documentation/architecture/original-drawings/clientside-arch.svg new file mode 100644 index 0000000000..791fc794b2 --- /dev/null +++ b/documentation/architecture/original-drawings/clientside-arch.svg @@ -0,0 +1,2740 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + VariableOwner VariableOwner 1 + + + Vaadin Client-Side Engine + + + ApplicationConnection + com.vaadin.client + + + + ...Connector + + + + ...Connector + + + + ...Connector + + + Built-inWidget + + + Add-onWidget + + + CustomWidget + + + + JavaScriptConnector + + + JavaScriptLibrary + + XMLHttpRequest + + Server connection + HTTP(S) / JSON + + + + + Server-Side + + + + + CommunicationManager + com.vaadin.server + + + + Built-inComponent + + + Add-onComponent + + + CustomComponent + + + JavaComponent + + + + + diff --git a/documentation/architecture/original-drawings/clientside-arch.svg.2012_10_09_18_20_24.0.svg b/documentation/architecture/original-drawings/clientside-arch.svg.2012_10_09_18_20_24.0.svg new file mode 100644 index 0000000000..f372a405fa --- /dev/null +++ b/documentation/architecture/original-drawings/clientside-arch.svg.2012_10_09_18_20_24.0.svg @@ -0,0 +1,2879 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + Makes XMLHttpRequest + + + VariableOwner VariableOwner + Sizeable + Sizeable + VariableOwner + + AbstractComponent + + + + + Widget + + + + MyWidget + + + ... + + MyConnector + + + + Paintable + + + + ApplicationConnection + com.vaadin.terminal.gwt.client. + + + + 1 n + Client-Side Framework + + Client-Side Integration + + + CommunicationManager + com.vaadin.terminal.server. + + + + + + Paintable + com.vaadin.terminal. + + + + n + + + MyComponent + + + Server connection:UIDL / JSON / HTTP(S) + + + Component + com.vaadin.ui. + + + paint() + paintContent() + Must implementupdateFromUIDL()to deserialize statefrom server + + com.vaadin.terminal.gwt.client. + Server-Side Integration + Must implement changeVariables() fordeserialization andpaintContent() forserialization using thePaintTarget interface. + updateFromUIDL() + + + updateVariable() + Needs to callupdateVariable() toto serialize state toserver + 1 + + + + PaintTarget + com.vaadin.terminal. + + + addAttribute()addVariable() + ... An existing widgetor your own + + + + + VariableOwner + com.vaadin.terminal. + changeVariables() + + + + (Implements paint()) + + Sizeable + Sizeable + VariableOwner + + AbstractComponentConnector + + + «extends» + + Shared + + + + diff --git a/documentation/architecture/original-drawings/clientside-arch.svg.2012_10_12_17_35_17.0.svg b/documentation/architecture/original-drawings/clientside-arch.svg.2012_10_12_17_35_17.0.svg new file mode 100644 index 0000000000..52f367722e --- /dev/null +++ b/documentation/architecture/original-drawings/clientside-arch.svg.2012_10_12_17_35_17.0.svg @@ -0,0 +1,2735 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + VariableOwner VariableOwner 1 + + + Vaadin Client-Side Engine + + + ApplicationConnection + com.vaadin.client + + + + ...Connector + + + + ...Connector + + + + ...Connector + + + Built-inWidget + + + Add-onWidget + + + CustomWidget + + + JavaScriptLibrary + + + + JavaScriptConnector + + XMLHttpRequest + + Server connection + HTTP(S) / JSON + + + + + Server-Side + + + + + CommunicationManager + com.vaadin.server + + + + Built-inComponent + + + Add-onComponent + + + CustomComponent + + + Component + + + + + diff --git a/documentation/architecture/original-drawings/events-classdiagram.svg b/documentation/architecture/original-drawings/events-classdiagram.svg new file mode 100644 index 0000000000..f849d269f3 --- /dev/null +++ b/documentation/architecture/original-drawings/events-classdiagram.svg @@ -0,0 +1,2565 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + VariableOwner VariableOwner 1 + + Vaadin Framework + + + + UI Logic + + + + Component.Event + com.vaadin.ui + + + + Button.ClickListener + com.vaadin.ui + + + + Button.ClickEvent + com.vaadin.ui + + + + Button + com.vaadin.ui + + + + n + 1 + + + + + «extends» + + + MyListener + + + + + + «implements» + addClickListener() + buttonClick() + buttonClick() + + diff --git a/documentation/architecture/original-drawings/java-servlet.svg b/documentation/architecture/original-drawings/java-servlet.svg new file mode 100644 index 0000000000..71eecf7194 --- /dev/null +++ b/documentation/architecture/original-drawings/java-servlet.svg @@ -0,0 +1,2388 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + VariableOwner VariableOwner 1 + + Browser + HTTP(S) + + Servlet Container + + + + Web Application + + + HTMLPages + + + JSPPages + + + JavaServlets + + + -- cgit v1.2.3