123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- ---
- 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 Framework is based on. This knowledge is not necessary for using Vaadin Framework, but
- provides some background if you need to make low-level extensions to the framework.
-
- [[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]#++<div> ... </div>++#. Vaadin Framework 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 the framework 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 Framework 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 Framework 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
- <<dummy/../../../framework/themes/themes-overview.asciidoc#themes.overview,"Themes">>,
- 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]]
- == GWT
-
- ((("Google Web
- Toolkit")))
- The client-side of Vaadin Framework is based on 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 the framework 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 Framework also allows developing pure client-side
- applications, as described in
- <<dummy/../../../framework/clientsideapp/clientsideapp-overview.asciidoc#clientsideapp.overview,"Client-Side
- Applications">>.
-
- See
- <<dummy/../../../framework/architecture/architecture-client-side#architecture.client-side,"Client-Side
- Engine">> for a description of how the client-side framework based on GWT is
- used in the Client-Side Engine of Vaadin Framework.
- <<dummy/../../../framework/clientside/clientside-overview.asciidoc#clientside.overview,"Client-Side
- Vaadin Development">> provides information about the client-side development,
- and
- <<dummy/../../../framework/gwt/gwt-overview.asciidoc#gwt.overview,"Integrating
- with the Server-Side">> 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>>.
-
- [[figure.architecture.technology.servlet]]
- .Java Web Applications and Servlets
- image::img/java-servlet.png[width=80%, scaledwidth=100%]
-
- 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
- deployment descriptor, which defines the servlet
- classes and also the mappings from request URL paths to the servlets.
-
- 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
- <<dummy/../../../framework/application/application-overview.asciidoc#application.overview,"Writing
- a Server-Side Web Application">>. The class is given as a parameter to the
- Vaadin Servlet in the deployment descriptor.
-
- The Client-Side Engine of Vaadin Framework as well as any client-side extension 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.
- It is normally automatically compiled to include the default widget set, as well as any installed add-ons and custom widgets.
|