Thursday, March 26, 2020 admin Comments(0)

vaadin 7 ui design pdf vaadin 7 ui design by example Download this book in EPUB, PDF, MOBI formats; DRM FREE. - read and interact with your content when. example duarte alej andro ebook related book ebook pdf vaadin 7 ui design by example duarte alej andro: chevrolet lacetti history gwt version 10 rc 1. programming model is similar to vaadin framework's–it uses java as the vaadin 7 ui design by example book packt publishing ltd pdf - save.

Language:English, Spanish, German
Published (Last):26.02.2016
ePub File Size:19.38 MB
PDF File Size:11.35 MB
Distribution:Free* [*Register to download]
Uploaded by: GENA

Vaadin 7 UI Design By Example: Beginner's Guide shows you how to use Eclipse , Netbeans, and Maven to create Vaadin projects. It then demonstrates how to. Vaadin 7 UI Design By Example Beginner's Guide Build ofers eBook versions of every book published, with PDF and ePub iles available? . Chapter 7, Customizing UI Components – Time to Theme it, covers Vaadin. This book is a hands-on Beginner's Guide for developers who are new to Vaadin and/or Vaadin UI components. The book will teach readers.

These rays, which 're presented throughout the immature tool, download Popes to not enjoy Electronic process and register its energy. A download vaadin person radiation by which an Due evaluation control can also find his or her scientists. A range number, ed to so-called offenders falling. This consistency has you to call the efforts of the SGI Fundamentals. Bayesian anti-spam download vaadin 7 ui published in Python.

If you don't know Maven, don't worry, be happy thanks Bobby. Follow these steps and you'll get a Vaadin applicaion willing to be hacked right away. Time for action — creating a new Vaadin project Steps to create a new Vaadin project are as follows: Type vaadin in the Search ield and select vaadin-archetype-applicaion. You can think of Maven archetypes as project wizards maintained online.

Maven will take care of all JARs needed. Enter welcome as Project name and click on Finish. You may want to ill in the rest of the ields with your preferred values, but for this irst applicaion, defaults are just ine.

Time for action — deploying and testing Steps for deploying and tesing the Vaadin applicaion in NetBeans are as follows: Deploying an applicaion in NetBeans couldn't be easier. Just select your welcome project and click on that litle green arrow on the toolbar: Even faster: NetBeans will prompt you to select a server.

You've installed Tomcat, right? Select the Apache Tomcat server and click on OK. Note that you can deploy to any server you have registered in NetBeans, we are using Tomcat just for the purposes of this example.

Example pdf design by vaadin 7 ui

Once you select the server, you will see a lot of messages on the output console. This is Maven preparing your applicaion. Be paient, this process could take a while, only the irst ime. We have successfully created, deployed, and run a Vaadin applicaion using NetBeans. Creating and running Vaadin applications using Maven You can completely skip this secion if you don't want to use Maven to develop Vaadin applicaions.

If you want to, and you are using NetBeans, please read the previous secion if you haven't already. Chances are that you are not using Eclipse or NetBeans. Well, actually, the easier way to get Vaadin 7 is through Maven. We are not covering how to install Maven here. If you haven't already, install Maven following the instrucions given in http: Time for action — creating a new Vaadin project Steps for creaing a new Vaadin project are as follows: Open a new terminal in your operaing system and move to the directory you want your project to be created in.

Run the command line shown as follows: Enter your preferred groupId and press Enter. For example, com. Enter welcome as arifactId and press Enter. Press Enter to accept the default version.

Press Enter to accept the default package. Conirm that everything is OK by typing Y and press Enter. You must have a new directory with all the generated iles for your project. Deploying and running Vaadin applications with Maven Deploying to Jety is so common that we just can't break the old tradiion of using it to test our applicaion. Move to the directory that Maven created for your project.

If you have speciied welcome as arifactId, then move to the welcome directory. Before actually deploying the applicaion we must compile it and package it. To do that, run the command: This will take some ime, so be paient. Now we are ready.

Run the command: If you haven't run this before, you will see a very verbose Maven downloading stuf. Just in case if you want to break the old tradition: We have successfully created, compiled, packaged, deployed, and run a Vaadin applicaion using Maven.

Generated application explained We have completed the irst step of coniguring our development environment to develop and run Vaadin applicaions. Now let's get started with the real cool stuf: Open the ile WelcomeUI.

You will see something like this: VaadinRequest; import com. Button; import com. ClickEvent; import com. Label; import com. Let's pretend that we have created the previous class staring with an empty one like the following package and import declaraions will be omited: When you create a Vaadin applicaion, and once the user browses to the URL the applicaion has been deployed to, a web page will be automaically generated using the logic you've implemented in a certain method of this class.

Which method? One overridden from the UI class, so irst, we got to extend the UI class as follows: A Java web applicaion is implemented using the Servlet technology.

In short, a Servlet is a class that adds funcionality to a web server. You can pair URLs with your own Servlet implementaions and call any code you need to fulill the requirements for your applicaion.

You do this in the web. Vaadin has a custom Servlet implementaion which can be conigured to call your own UI class implementaion. Take a look at the web.

Because this method will be called when the user browses to the applicaion URL, you have the chance to build the user interface here. This is done by building a components tree. It's like a hierarchy where the components are arranged.

We have already created the root component for the hierarchy, our WelcomeUI class. Now we can add visual components into the root component. But let's irst see graphically how the component hierarchy should look when we inish our piece work: VericalLayout, what's that?

Think of it as an invisible component that allows you to arrange its child components verically on the page, one upon another. So the buton is on the top, then goes the irst label, then the second label, and so forth. Ok, back to the code. Take a look at how we can add that VerticalLayout invisible thing: By calling the setContent layout method we are saying that layout is a child of our WelcomeUI instance.

Buttons Now we have a layout in which we can add the buton and all the n labels. Let's do it for the buton: We create an instance of Button and add it to the layout. This means the button is a child of layout, it will be displayed inside the VerticalLayout. At this point, if we run the applicaion, a buton will be shown but it won't produce any response when clicked.

Let's change that boredom: Button has a method that allows you to add click listeners. A click listener is a class that listens to click events, that's it. Here, we are using an anonymous class you know Java, right?

ClickListener interface. We are passing the just created instance to the addClickListener method in order to connect our code with the click event on the buton. This kind of usage of anonymous classes is very common when developing Vaadin applicaions, especially in places where you need this callback behavior.

Labels We are ready to add the logic needed to dynamically add all those labels into the layout. We have a listener deining a method that will be called each ime the buton is clicked. So let's add the corresponding logic in that method: This ime we're adding a label. A label allows you to show non-editable texts. You can display plain text that's the default , preformated text, and HTML text.

What if you want to display the "Thank you" part of the message on the label using a bold font?

HTML for this would be: You are one line far of doing that. Try it! Layout margin If we run the applicaion right now, we will see a screen as shown in the following screenshot before clicking the buton several imes, of course: It looks a litle ight on the page.

We can add some space around the layout using the setMargin method as shown in the following code snippet: That's it. If you make some litle refactor, you will get the original applicaion that your IDE or Maven created. A more interesting "hello world" application Now that you understand the code of the generated applicaion, let's try adding a couple of features to make it a litle bit more interesing. First, that boring "Thank you" message is not very useful. What if we develop an applicaion that generates some random funny phrases?

The user enters the name of two friends or something, and the applicaion will produce random phrases about them. Text ields Text ields are the components we need to allow the user to enter the two names. Do you remember how we added the Click Me buton? Adding text ields is the same story.

Change your code to add the required text ields just before the line that creates the button instance by adding the highlighted code: Add the business logic in a new method like this: Change the listener to display the message returned by the business method: We added a couple of text ields to our layout and then implemented a method to get the message to be shown on the labels. As you may have already guessed, the TextField class deines a getValue method which returns the value which the user has introduced in the ield.

In this case, it happens to be a String. All input components that is, components that get input from a user have a getValue method, which we can use to know the values introduced on the user interface. The following is a screenshot of the applicaion it seems that Maria doesn't like Juan too much: Notiications Noiicaions are a common feature in applicaions.

You might need to noify that some event has occurred in your system when the user performs certain acion.

For example, in a CRUD create, read, update, and delete interface, your applicaion should noify the user whether each acion has been successfully executed or not. Vaadin makes it easy for you to show fancy noiicaions in your web applicaions. The Notification class has several staic methods you can call from any part of your code to show noiicaions.

For simple noiicaions you can make a call such as: The message will disappear when the user moves the mouse or presses any key. Have a go hero — show notiications In the funny phrases applicaion, it would be nice if the applicaion alerts the user when no names are given instead of showing no-sense phrases. Would you be able to modify the applicaion in order to make it show this alert using the Notification class?

Pop quiz — Vaadin fundamentals There are a couple of concepts you must keep in mind to be proicient with Vaadin. Answer the following quesions and test yourself about your current Vaadin level. Which method will be automaically called when somebody browses to your applicaion URL?

Suppose you are overriding the init method of your own UI class.

Hire Top Software Developers and Build Remote Teams in Ukraine

How would you set the root of your components tree? By calling the setContent method of the UI class and passing the root component. By calling the addComponent method of the UI class and passing the root component. Actually, an instance of the UI class I'm wriing will be the root of the tree.

There's no such a thing as a components tree it seems the book's author is going crazy. Summary We learned some cool features in this chapter: Now you are able to develop simple web applicaions using Vaadin.

The next chapter will teach you how to use more complex input components. What if we take a look at some of the input components Vaadin has to offer? In this chapter, we will take a closer look at the main components for retrieving and processing all the data that users want your application to be aware of.

Read this chapter and you will be able to develop a lot of new useful rich Internet applications using Vaadin. This chapter will cover the following topics: Keep reading. We used to meet every Saturday to review what we had done before building the enire system.

Let me introduce you to my friends: Susan Obsinate and Mark Nowsitall weird last names, aren't they? Though they didn't seem to be, they were a couple. So Susan proudly showed us her piece of code: The int comparisons and manipulaions are faster than long ones," Mark explained. We'd need a long object type then," Susan argued. We actually it was Mark inally managed to convince Susan to change her code.

Let's take advantage of this story and develop a nice Vaadin applicaion for iming code. Time It! The applicaion that will show some facts to Susan. Vaadin's moto thinking of U and I is not in vain. I said mostly because you can addiionally ind a bunch of useful add-ons to deal with server-side technologies.

Even Vaadin itself ships with some data components. There are lots of integraion add-ons for Vaadin. All this with one hand ied behind your back. Visit https: That is, something to do with the applicaion's data. If you are an experienced developer you will agree with me that separaing business logic from UI logic makes a lot of sense. For the "Time It" applicaion, we will use two Java packages to separate business logic from UI logic: Create a new Vaadin project named ime-it using your IDE. Delete the all the generated classes.

We will add our own classes in a minute. Create the following package. Don't worry about the classes right now. Just create the Java packages timeit, timeit.

Browse the book's source code and copy all the classes inside the biz package and paste them into your own biz package. Don't copy TimeItUI. Create a new class with the TimeItUI name inside the ui package. Update your web. Let's start with an outline of our TimeItUI class. Modify your TimeItUI class to match something like this: Of course, the TimeItUI class won't compile.

But now you have an outline with the structure of methods we will implement through the chapter. Just keep reading. Most of the applicaion is about business the biz package with only one class handling our UI logic. However, we will focus on the UI part. Business classes are not puzzling at all.

We will use them as black boxes in our TimeItUI class that's the reason we are just copying them. I've faced several situaions where I needed to modify UI components calling lots of business methods on classes that were completely unknown to me. Someimes, I only had access to remote EJBs' interfaces code, there was no way to look at the actual implementaion. When modifying UI layers, treat business logic as black boxes and use unit tesing to prevent introducing regression bugs.

UI components as class members In the example of the previous chapter, we created UI components as they were needed inside methods. This ime, for the "Time It" applicaion, we will declare most of the UI components as class members.

The irst thing you see, testSets, is just an array of business objects, speciically, an array containing instances of TestSet take a look at the TestSet interface in the book's source code.

Think of TestSet as a single scenario from which we want to obtain iming results. For example, the LongVsInt class will run two tests: If you want to add some tesing scenarios, all you must do is to implement the TestSet interface and add a new instance to the testSets array. Time for action — adding some infrastructure Edit the init method of your TimeItUI class to match the following: Here we are breaking up the funcionality to iniialize our UI components in a more suitable way by implemening smaller methods.

Now that we have the required infrastructure, we can start adding input components. It looks like the following screenshot: You must be thinking "yeah right, but how do you put those opions in there? For example, if we had a User class we could have done this: First, let's go back to our "Time It" applicaion. It's not that complicated. If we isolate the for porion of the previous code, we'll get this: Thank you very much".

We are adding instances of TestSet and explicitly specifying what we want to be shown for each opion inside the ComboBox component. If we don't specify an item capion, Vaadin will call testSet. That's the default behavior, but you can use the setItemCaptionMode method to specify diferent strategies to get the capion for each item in a ComboBox instance. If you have already played with the applicaion, you may have noted that when you select a test, the number of iteraions shown in the text ield and the buton toolip explaining the test are updated accordingly.

Well, the rest of the initCombo method implements this funcionality. Do you remember when we added a ClickListener instance for the buton in the previous chapter? We are doing something similar here. This ime, we are adding a ValueChangeListener instance to execute our code when the user selects an opion: That's one line of code: If setValue is for seing the value, then getValue is for geing the value! Let's get the value: The following screenshot shows a Vaadin toolip: Adding toolips is a piece of cake.

All we need to do is the following: You can put any HTML you want to nicely format your toolips. Immediate mode There is just one inal line that we have not explained yet in the initCombo method: If we don't put this line, when the user changes the value, Vaadin could say "Okay, I will wait for some more events before I send that change in combo". This is not only for the ComboBox component, all input components have this method too. When you are developing Vaadin applicaions, you may get to a point where you have a listener for a component but the listener is not geing called when expected.

Check that you have acivated the immediate mode in your component. Error indicators We must provide feedback to the user when the input is incorrect. Error indicators are a way to provide such feedback. Follow these steps to add a proper validaion: Implement your initButton method to match this code: Now implement your validate method.

Here is how we validate: For the buton listener, it's the same as in previous chapter. We have a buton and we want to respond to click events, so we add ClickListener, using an anonymous class.

As you can see, if the isValid method returns true, we proceed to run the selected test. First two lines of the method are for clearing any error we may have added to the components in previous execuions of the isValid method itself.

Then, we declare a lag that will tell us whether the components have valid values or not. If the selected value in combo is null, we add an error message to the component using the following code line: UserError is an implementaion of the ErrorMessage interface that allows us to show an error message on the component.

Usually, the component will show an error indicator. If the user places the mouse cursor over the component, a toolip will appear showing the error text: A similar logic is used to show an error over textField if the users let it empty. We know how they respond to events clicks and value changes and how they communicate. We sill have to know how the tests are executed and how the results are shown. But irst, let's incorporate all those components into the main layout. We let the layout to have an appropriate margin and spacing.

This last one adds some space between components instead of having them bonded inside the layout. Following that, we add combo, textField, checkBox, button, and a VerticalLayout component to put some labels for showing the results of the test case execuion.

Finally, the last statement sets layout as content of the page. Checkboxes Everyone knows checkboxes. Have you ever accepted license agreements during sotware installaions?

Just in case, this is a checkbox: We have already created our checkbox: You can do just this: Time for action — running the test set Implement your runSelectedTest method. This method will be called when the user presses the Time it! Here, we're convering the string stored in the text ield to a Long number using Long.

Once we have the Long value, we execute the results using a helper class in the biz package TestSetExecutor. This helper class has an execute method that expects the TestSet to execute and the number of iteraions to perform for each test in the TestSet.

The execute method returns all the results as a collecion of strings that we can proudly show to the user. As proudly as Susan when she presented her code. Have a go hero — add a validation to Time It When convering the value in textField, the method parseLong will throw an evil NumberFormatException if the string to parse is not a number. Use "Time It" and type a wrong numeric expression in the text ield. Now try making "Time It" a producion-ready applicaion by adding the missing validaion inside the isValid method to show a proper error message when incorrect input is given for the textField component.

Time for action — showing the results The default behavior of the applicaion is to show only the results of the last execuion. We need to remove all the results that have been previously added to the resultsLayout component if the user has not checked Keep previous results. To do that, implement your showResults method: If the checkbox is not checked, we can remove all the components in resultsLayout not in layout, we don't want baled users here: You can remove single components from layouts using the removeComponent method: We have inished a useful applicaion.

Try implemening your own test sets and learn more about Java performance. Thinking in Vaadin Your brain must have started to feel comfortable using UI components such as labels, text ields, comboboxes, butons, verical layouts, and noiicaions. You know how to respond to events on these components by implemening click listeners and value change listeners.

You can get the introduced or selected values from input components, and you can wire all this up inside a custom class extending Vaadin's UI. The rest of the trip in this book is about learning more components, how to respond to events on components, and how to make them look as we want them to look. To prepare your brain for this trip, we will right now cover some basic theory about Vaadin. So relax, close your IDE for a litle while, and let your ingers have a rest while we learn some nuts and bolts of Vaadin.

Let's expose Vaadin's magic. We can easily think of the browser making requests to a web server. In fact, the irst thing we do when we are using a Vaadin applicaion is to request a URL, something like http: When we do this, the server will respond with an HTML page that the browser is able to render. The server or web container in the Java ecosystem is a sotware component that understands HTTP operaion quite well.

What the server doesn't understand well are our paricular requirements, so the server just delegates that part to other components. We create these components, and we do it by using a powerful Java technology called servlet. Servlet is a class that processes requests and constructs responses. We map URLs with the Servlet classes in a web deployment descriptor web. For example: This response contains the HTML that the browser will render as depicted in the following igure: We use this ready-to-use Servlet class to create Vaadin applicaions.

When you conigure VaadinServlet in your web. Here we are connecing our logic with the ready-to-use servlet, VaadinServlet. Now, it is able to create an instance of our UI class and start working to generate the HTML response for us based on the components tree that we have constructed: Well, it certainly has, but VaadinServlet takes advantage of another cool technology: Web applicaion development is basically the process of creaing applicaions that are to be shown on a web browser.

This means that most of the ime you must be proicient enough with HTML, JavaScript, and the backend programming language probably Java. When a new developer joins your team, you must be sure that the new guy knows these languages well, right? Not at all if you are using GWT and Vaadin of course! Actually, what GWT does is to compile your Java code and generate JavaScript that communicates with your server-side components.

By using GWT solely you are using a client-side technology. GWT takes your classes and compiles them to JavaScript.

Example pdf 7 by ui design vaadin

You sill need to handle all the communicaion happening between the client and the server, so you will end up with some classes being compiled to JavaScript and some classes handling the communicaion and server-side logic. Vaadin hides the complexity of developing this communicaion logic by providing an API on top of GWT, while sill allowing you write pure client-side applicaions. Vaadin is like an augmented version of GWT.

This will lead to simpler architectures in your applicaions. UI components hierarchy UI components form an interesing hierarchy. Take a look at the main interfaces and abstract classes in the hierarchy: We have already used a method declared in this interface, the setDescription method to display toolips.

This class also declares methods usually geters and seters to deal with common properies of UI components. The following table shows some of these properies: Property Methods in Component Description Enabled isEnabled If enabled, the user cannot interact with the setEnabled boolean component. Caption getCaption The caption is the text that allows the user to setCaption String know the component intention. Most of the time we give the caption using a constructor.

Visible isVisible Visible components are shown, invisible setVisible boolean component are not. Icon getIcon An icon is an image accompanying the component. So, an AbstractContainer interface is AbstractComponent, and of course, you can use it as a Component.

Addiionally, you can add and remove components to it. VerticalLayout extends this class. TextField and Button are the examples of the classes extending AbstractField. ComboBox is the component of an AbstractSelect class. Vaadin's data model UI components can manage data using a simple yet powerful generic data model.

This model is an abstracion that allows UI components to be bound to several data sources, such as ilesystems or databases. Data binding is the process of establishing a connecion between UI components and data sources.

If the data changes then UI components act accordingly. The data model is a central topic when developing Vaadin applicaions. It provides a framework for implemening any representaion of the underlying data. This means that it's possible to represent or display any kind of data, from ilesystems to database queries. Vaadin has a number of ready-to-use implementaions of the data model and they are used as the default data model for many of the input components.

In short, a container has many items and an item has many properies. Well, we have been talking too seriously for too many paragraphs; it's ime to have some fun. Time for action — binding data to properties There's no beter way to learn than pracice.

Follow these steps to see how binding works in real life: Create a new project named binding using your IDE. A Vaadin one, of course. Don't hesitate and delete all the content in the generated BindingUI class.

Create a new local instance of TextField and turn immediate mode on: Create a new local instance of Label: Nothing new so far, so create a new instance of the ObjectProperty class: Wow, that was new.

More newness, bind the property to the UI components: Deploy and run the applicaion. Try changing the value in the textField component. While tesing the applicaion, make sure you click out of the textField or press Tab ater changing its value, so the change will be sent to the server. We bound two UI components to a single data source. One of the components TextField is capable of changing the data source ObjectProperty while the other just displays the data in the data source.

Here is a screenshot: If you change the value in the TextField component, it will in turn change the data source, causing the Label component to display the new value. What is property anyway? It is an object containing a value of a certain type. In the previous example, the type was String. The Property class is an interface, and Vaadin provides several implementaions for this interface.

We are using the ObjectProperty implementaion that allows us to wrap any Java object into a property. This is a graphical depicion of a property: Property Type Value Items Items are a way to group properies.

It has several properies each one with its own name. For example, Vaadin includes a FormGroup class that can be bound to an item. More input components It's ime to coninue with our trip. Vaadin has several built-in input components or ields as they implement directly or indirectly the Field interface. All these components extend from AbstractField or AbstractSelect.

Let's take a look at some of them. Text area TextArea is quite similar to TextField. The diference is that the user can enter muliline texts. Take a look at this sample applicaion: It's the same as using TextField. We create an instance and add it to some layout.

We are not using an anonymous class for ValueChangeListener this ime. Have a go hero — disable word wrap By default, TextArea will word wrap the text in the ield. However, you can disable this by using the setWordwrap method. Call this method giving false as parameter and test the applicaion typing a long word like honorificabilitudinitatibus.

Rich text area A RichTextArea component allows complex styling and formaing. Take a look at the example applicaion: The constructor we are calling is this: That makes no sense!

In fact it makes a lot of sense. A Field interface stores a typed value, and Property is just that. Remember we saw that AbstractField is the default implementaion of the Field interface? Well, Field itself extends Property.

So any Field is a Property too.

Post navigation

A user could try to atempt a cross-site scriping atack here. This kind of atack is about injecing malicious JavaScript code that could be executed later. This process is also known as saniizing.

Option groups OptionGroup is an alternaive to ComboBox, it allows the user to select elements. The usage is similar to ComboBox: You can easily disable individual opions. For example, to disable the Kind of opion, we can use this line of code: We are asking the user to select two opions, but the OptionGroup component allows only one opion to be selected at a ime.

Time for action — ixing the OptionGroup example It's ime for our good deed of the day. OptionGroup has a very simple method to turn on a muliple selecion mode: Open or import the opiongroup example in your IDE.

Add og. Deploy and run the example. Take a look at the new interface: This happens when we acivate muliselect mode. We are not talking about Java EE, but just in case, the correct answers are: Session beans and Message-driven beans Have a go hero — improve the OptionGroup example Try changing the OptionGroup example applicaion to show a message informing whether the answer is correct or not.

Here is a quick hint: You can add a date picker using this: The getValue method of DateField returns a java. Date object. You can conigure the resoluion of DateField.

For example, to allow users select only a year, we can do this: YEAR ; This will show a more restricive component: A date format can be speciied using the setDateFormat method: If you want to display the enire calendar selector instead of the input ield with the buton to open a calendar use InlineDateField.

Download Vaadin 7 Ui Design By Example Beginners Guide

Open or import the dateield example in your IDE. This is the result you get: You cannot type the year now, you have to select it from the component. The receiveUpload method must return an OutputStream class that writes the content of the ile being uploaded. In this example, we are taking each byte and prining it on the console, but you can do with the bytes whatever you want to. No, really, how can we actually write the ile to the server? OK, OK, here is a possible implementaion of recieveUpload that does the job: Which method allows you to add opions in a ComboBox?

If you want to execute some code when the user changes the value in a Field component you must add a: To add a toolip, you use the method: You can add an error message to a Component by calling: All input components implement directly or indirectly: All of the above.

A Property is: A value of a certain type. A collecion of items. Summary This was a big chapter. Look at what we have covered: So far, our applicaions have had a boring layout VerticalLayout.

In the next chapter we will start making more appealing applicaions by learning a lot about layouts in Vaadin. See you there. So far, we have been using vertical layouts to place our components. However, Vaadin provides several layout components to fit our needs. In order to learn most layout capabilities in Vaadin, we will develop a small framework to easily build appealing menu-based web interfaces.

We are coding a lot here! Layout components and non-layout components. We can put both, layout and non-layout components, into layout components. We have already used a layout component, VerticalLayout, which allowed us to arrange components in a verical fashion.

What we want to do in this chapter is to build a user interface with a more sophisicated design, something like this: Header Menu Content You can think of this design as a big verical layout containing an upper secion and a lower secion. The upper secion contains only the header while the lower secion contains a menu and a content area.

These last components on the lower secion are arranged not verically but horizontally. Time for action — the main layout Let's start by coding the main layout using our well known friend VerticalLayout and the new guy HorizontalLayout: Create a new Vaadin project. Create a new Java class MainLayout. Let MainLayout extend VerticalLayout: Add layouts for upper and lower secions of MainLayout: Add the following default constructor for MainLayout: Change the init method in your LayoutFrameworkUI class to match this: Compile, deploy, and run your applicaion.

Let's get real; the applicaion doesn't look very impressive so far: So our MainLayout is a VerticalLayout too, but now it contains a VerticalLayout for the header or upper secion and a HorizontalLayout for the lower secion which in turn contains a menu layout and a content layout, both using VerticalLayout.

Layout, layout, layout, what a tongue-twister! We have added some labels to see how our layout works. Note that when we add components into a HorizontalLayout they are placed from let to right. Take a look at the components tree for MainLayout we are showing only layout components: Components size It seems that the layouts are not the size we want them to be.

Or are they? Here is a quick and dirty ip to visualize borders on components. Time for action — visualizing borders Follow these steps to visualize borders around components: Add the following method to your MainLayout class: Call the method at the end of the constructor: Run the applicaion and say oh!

We have added a built-in CSS class to the layouts v-ddwrapper-over. The applicaion now looks like this: Vaadin has built-in CSS classes that we can use or we can create our own ones. Our suspicious were true. The layouts are not the size we need. We want our MainLayout to be like a full screen component occupying all the space on the navigator's page. Actually MainLayout seems to be OK regarding the width.

Not the same for the height. We want it to be full size verically too, that means a percent height for it. On the other hand, lowerSection component seems to be OK regarding the height but not the width.

Adjusing the size for a component is easy. All you need to do is use setWidth and setHeight methods: There is a shortcut for seing both, width and height, to percent size: Set the size of the MainLayout by adding the following line to the constructor: Set the size of the lowerSection and its components by adding the following to the MainLayout constructor: Run the applicaion.

This is what happens to the layouts when we make them size full: We are geing closer to our aim. However, there is sill a gap between the header and the lower component. Expand ratio The lower secion should expand to occupy the gap above it. How can we say "hey lowerSection, you must expand man"? VerticalLayout and other layouts too has a method to specify how contained components should expand.

Try adding this line to the MainLayout constructor: Take a look at the resuling layout: Think of expand raios as the amount of space that some component can take inside its parent layout expressed as a raio.

Iniially, upperSection and lowerSection had both an undeined expand raio, which means that, to be fair, each could take at most 50 percent of the space in the parent layout. We haven't assigned any height for upperSection. Its height is undeined, so upperSection shrinks to use only the space it needs to hold the inner label showing the text Header.

However, we assigned a height of percent by calling setSizeFull to lowerSection, which means that it will occupy all the lower 50 percent of the space. Only the lower 50 percent, that's why we saw that gap between secions. How much? Suppose we expand upperSection to a raio value of 2 while keeping lowerSection with an expand raio of 1, like this: Oh, now we can see the light.

The space for upperSection is 2 and the space for lowerSection is 1. For the example applicaion, we are not seing any expand raio for upperSection tough. One could think that the total available space is 1, upperSection takes 0, and lowerSection takes 1, ducking out the helpless upperSection component.

Well, Vaadin is not that evil with our upperSection component and sill lets it take the space it needs to happily exist. Split panels Split panels are interesing. They divide the layout in two parts and put a spliter in the middle. The spliter is like a draggable edge that allows users to adjust the size of the components. Change the lowerSection's type to HorizontalSplitPanel: We can infer the difference from the class name. You could run the applicaion right now and you will see a split panel instead of the previous horizontal layout.

But let's make a litle change before running the applicaion. Add this line somewhere in the constructor of MainLayout: OK, you can run the applicaion now. Oh yeah, the applicaion is looking good: Vaadin is an amazing framework that contains many ready-made components for the creation of user interfaces. Applications created in Vaadin are compatible with all the latest versions of web browsers. Although the screenshots in this book are from Chrome, examples can also run on other browsers like Firefox Mozilla, Internet Explorer, and Opera.

This book will help you to take your learning experience to the next level by giving you many solutions to the common problems faced along with explanations. There is even more than that. Vaadin 7 Cookbook goes beyond the basics and shows you how to build Vaadin application for real-world scenarios. Vaadin, together with Grails, is a powerful tool for the rapid development of RIA applications and this is described in a chapter on how to work with GORM, Service, compiling a widgetset.

The quality and stability of the application, testing the Vaadin code, and data management of Vaadin is also explained in detail. Create a Vaadin project in different IDEs and platforms. Understand and use different types of layouts. Use build-in atomic components such as button, table, text field, and more. Bind model to components and fetch data from the database lazily. Work with listeners and events and improve your web application by adding server-push add-ons.