12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- ---
- title: Example Application Walkthrough
- order: 2
- layout: page
- ---
-
- [[intro.walkthrough]]
- = Example Application Walkthrough
-
- Let us follow the long tradition of first saying "Hello World!" when learning a
- new programming framework.
- First, using the primary server-side API.
-
- [source, java]
- ----
- import com.vaadin.server.VaadinRequest;
- import com.vaadin.ui.Label;
- import com.vaadin.ui.UI;
-
- @Title("My UI")
- public class HelloWorld extends UI {
- @Override
- protected void init(VaadinRequest request) {
- // Create the content root layout for the UI
- VerticalLayout content = new VerticalLayout();
- setContent(content);
-
- // Display the greeting
- content.addComponent(new Label("Hello World!"));
-
- // Have a clickable button
- content.addComponent(new Button("Push Me!",
- click -> Notification.show("Pushed!")));
- }
- }
- ----
-
- A Vaadin application has one or more __UI__s that extend the
- [classname]#com.vaadin.ui.UI# class. A UI is a part of the web page in which the
- Vaadin application runs. An application can have multiple UIs in the same page,
- especially in portals, or in different windows or tabs. A UI is associated with
- a user session, and a session is created for each user who uses the application.
- In the context of our Hello World UI, it is sufficient to know that the
- underlying session is created when the user first accesses the application by
- opening the page, and the [methodname]#init()# method is invoked at that time.
-
- The page title, which is shown in the caption of the browser window or tab, is
- defined with an annotation. The example uses a layout component as the root
- content of the UI, as that is the case with most Vaadin applications, which
- normally have more than one component. It then creates a new [classname]#Label#
- user interface component, which displays simple text, and sets the text to
- "Hello World!". The label is added to the layout.
-
- The example also shows how to create a button and handle button click events.
- Event handling is described in
- <<../architecture/architecture-events#architecture.events,"Events and Listeners">> and on the practical side in <<../application/application-events#application.events,"Handling Events with Listeners">>.
- In Java 8, you can implement listeners with lambda expressions, which simplifies the handler code significantly.
-
- The result of the Hello World application, when opened in a browser, is shown in
- <<figure.intro.walkthrough>>.
-
- [[figure.intro.walkthrough]]
- .Hello World Application
- image::img/HelloWorld.png[scaledwidth=70%]
-
- To run a program, you need to package it as a web application WAR package and
- deploy it to a server, as explained in
- <<../application/application-environment#application.environment,"Deploying
- an Application">>. During development, you typically deploy to an application
- server integrated with the IDE.
|