- \n
- Java JDK 8<\/li>\n
- Latest Eclipse Mars<\/li>\n
- Vaadin 7.6.4<\/li>\n
- Tomcat Server 8<\/li>\n<\/ul>\n
2. Introduction<\/h2>\n
In this example I am going to show you how yo use the Vaadin button, the
Button<\/code> class is simple and straightforward, you create your button, place it on the UI and associate a click event to it, thats it!. Vaadin is a server side framework and traditional client side events like mouseover and mouseout event listeners create too much overhead just because every action performed have to reach the server, if you need additional functionality you can use a plugin or implement it for yourself.<\/p>\n3. Prerequisites<\/h2>\n
- \n
- JDK installed<\/li>\n
- Eclipse Mars installed and working<\/li>\n
- Vaadin 7.6.4 plugin installed<\/li>\n
- Tomcat 8 installed and running<\/li>\n<\/ul>\n
4. Set up the project<\/h2>\n
In the file menu choose File -> New -> Other<\/p>\n
![\"01](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/01-New-Project-1.png\")
<\/a>01 New Project<\/figcaption><\/figure><\/p>\n Now from the list choose Vaadin 7 project<\/p>\n
![\"02](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/02-Vaadin-Project-1.png\")
<\/a>02 Vaadin Project<\/figcaption><\/figure><\/p>\n Hit next and name your project then hit finish.<\/p>\n
5. Coding the example<\/h2>\n
5.1 The layout<\/h3>\n
Layout<\/em><\/span><\/p>\n
\t\tfinal VerticalLayout layout = new VerticalLayout();\n\t\tlayout.setWidth(\"100%\");\n\t\tlayout.setMargin(true);\n\t\tsetContent(layout);\n\t\t\n\t\tGridLayout gridLayout = new GridLayout(3 ,6);\n\t\tgridLayout.setSpacing(true);\n<\/pre>\n
A
VerticalLayout<\/code> is the main layout and inside of it I put aGridLayout<\/code> to put the ui widgets, its a nested layout.<\/p>\n5.2 Information label<\/h3>\n
Information Label<\/em><\/span><\/p>\n
\t\tLabel myLabel = new Label(\"No clicks yet...\");\n\t\tmyLabel.setCaption(\"Current Button\");\n\t\tmyLabel.addStyleName(\"h1\");\n\t\tmyLabel.addStyleName(\"mylabelstyle\");\n\t\tmyLabel.setWidth(\"100%\");\n<\/pre>\n
I create a Label to show what button is clicked, I put on it some styles to change its look and feel, the
h1<\/code> style is like a H1 html tag and is premade in Vaadin.<\/p>\n5.2.1 Label Style<\/h4>\n
I created
mylabelstyle<\/code>, if your project is namedVaadinButton<\/code> then to create the style, open the file VaadinButton->WebContent->VAADIN->themes->vaadinbutton->vaadinbutton.scss<\/p>\n![\"03](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/04\/03-Edit-Styles.png\")
<\/a>03 Edit Styles<\/figcaption><\/figure><\/p>\n and add the following styles:<\/p>\n
v-label-mylabelstyle<\/em><\/span><\/p>\n
.v-label-mylabelstyle {\n color: white;\n text-align: center;\n background-color: black;\t\n border-color: white;\n font-weight: bold;\n}\n<\/pre>\nThis change the color of the text to white, the background to black, center the text, make the font bold and the borders of the label white.<\/p>\n
5.3 Button.ClickListener<\/h3>\n
Button.ClickListener<\/em><\/span><\/p>\n
\t\tButton.ClickListener myClickListener = new Button.ClickListener() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tString btCaption = event.getButton().getCaption();\n\t\t\t\tmyLabel.setValue(btCaption + \" clicked\");\n\t\t\t}\n\t\t};\n<\/pre>\nI created a single click listener for all the buttons in the page, I get the button that fired the event with
event.getButton()<\/code> and then get the Caption to change the value of the label and show what button is firing the event.<\/p>\n5.4 Creating the buttons<\/h3>\n
5.4.1 Tiny Button<\/h4>\n
Tiny Button<\/em><\/span><\/p>\n
\t\tButton tinyButton = new Button(\"Tiny Button\");\n\t\ttinyButton.addStyleName(\"tiny\");\n\t\ttinyButton.addClickListener(myClickListener);\n\n<\/pre>\n
A very little button, just little enough to read the text, for these situations when you need more space in the screen. The kind of button is changed using a predefined Vaadin style for buttons, in this case the style is
tinyButton.addStyleName(\"tiny\");<\/code>, I created the button then add the style, just add not replace and associate the generic button listener to it.<\/p>\n5.4.2 Small Button<\/h4>\n
Small Button<\/em><\/span><\/p>\n
\t\tButton smallButton = new Button(\"Small Button\");\n\t\tsmallButton.addStyleName(\"small\");\n\t\tsmallButton.addClickListener(myClickListener);\n\n<\/pre>\n
A button just a little more bigger than the tiny button the style name is
small<\/code><\/p>\n5.4.3 Normal Button<\/h4>\n
Normal Button<\/em><\/span><\/p>\n
\t\tButton normalButton = new Button(\"Normal Button\");\n\t\tnormalButton.addClickListener(myClickListener);\n\n<\/pre>\n
The normal predefined Vaading normal button, this is the button that Vaadin uses when you didn’t specify any styles, is the next in size after the small button.<\/p>\n
5.4.4 Large Button<\/h4>\n
Large Button<\/em><\/span>
<\/div> <\/div><\/p>\n\t\tButton largeButton = new Button(\"Large Button\");\n\t\tlargeButton.addStyleName(\"large\");\n\t\tlargeButton.addClickListener(myClickListener);\n\n<\/pre>\n
A large button a little bigger than the normal button, the style is
large<\/code>.<\/p>\n5.4.5 Huge Button<\/h4>\n
Huge Button<\/em><\/span><\/p>\n
\t\tButton hugeButton = new Button(\"Huge Button\");\n\t\thugeButton.addStyleName(\"huge\");\n\t\thugeButton.addClickListener(myClickListener);\n\n<\/pre>\n
The huge button is for these situation when you need to say “here is a button”, is the biggest premaded button and the style used is
huge<\/code>.<\/p>\n5.4.6 Disabled Button<\/h4>\n
Disabled Button<\/em><\/span><\/p>\n
\t\tButton disabledButton = new Button(\"Disabled Button\");\n\t\tdisabledButton.setDescription(\"This button cannot be clicked\");\n\t\tdisabledButton.setEnabled(false);\n\n<\/pre>\n
When you need to prevent that the user click on a button then you disable it, in this case no style is used and you can enable\/disable a button with the method
setEnabled()<\/code>, using true to enable the button and false to disable it.<\/p>\n5.4.7 Danger Button<\/h4>\n
Danger Button<\/em><\/span><\/p>\n
\t\tButton dangerButton = new Button(\"Danger Button\");\n\t\tdangerButton.addStyleName(\"danger\");\n\t\tdangerButton.addClickListener(myClickListener);\n\n<\/pre>\n
The danger button is used when the intended action is important or potentially dangerous, is a red button and red means danger so use it when you are going to perform important tasks with a button click, to prevent the user that the action need special attention. the style
danger<\/code> is used in this case.<\/p>\n5.4.8 Friendly Button<\/h4>\n
Friendly Button<\/em><\/span><\/p>\n
\t\tButton friendlyButton = new Button(\"Friendly Button\");\n\t\tfriendlyButton.addStyleName(\"friendly\");\n\t\tfriendlyButton.addClickListener(myClickListener);\n\n<\/pre>\n
A green button when you need to give some color to a button to get the user attention in this case green means a friendly action that can be performed without any risks,
friendly<\/code> is the style used.<\/p>\n5.4.9 Primary Button<\/h4>\n
Primary Button<\/em><\/span><\/p>\n
\t\tButton primaryButton = new Button(\"Primary Button\");\n\t\tprimaryButton.addStyleName(\"primary\");\n\t\tprimaryButton.addClickListener(myClickListener);\n\n<\/pre>\n
The primary button generally is the default button an a page, the button that gets the focus when you press enter in your keyboard,
primary<\/code> style is used.<\/p>\n5.4.10 Native Button<\/h4>\n
Native Button<\/em><\/span><\/p>\n
\t\tNativeButton nativeButton = new NativeButton(\"Native Button\");\n\t\tnativeButton.addClickListener(myClickListener);\n\n<\/pre>\n
The native button get the look and feel from the host machine running your application, in Windows you get Windows native buttons, in OSX you get OSx native buttons, in Linux you get GTK, KDE, … native buttons and so on. The native button have its own class and to create it you need to use instances of the
NativeButton<\/code> class.<\/p>\n5.4.11 Icon Right Button<\/h4>\n
Icon Right Button<\/em><\/span><\/p>\n
\t\tButton iconRightButton = new Button(\"Icon Align Right Button\");\n\t\ticonRightButton.setIcon(FontAwesome.ALIGN_RIGHT);\n\t\ticonRightButton.setWidth(\"250px\");\n\t\ticonRightButton.addStyleName(\"icon-align-right\");\n\t\ticonRightButton.addClickListener(myClickListener);\n\n<\/pre>\n
You can add an icon to your button with the
setIcon<\/code> method, in this case I am using a FontAwesome icon, tho show the icon to the right the styleicon-align-right<\/code> is used.<\/p>\n5.4.12 Icon Left Button<\/h4>\n
Icon Left Button<\/em><\/span><\/p>\n
\t\tButton iconLeftButton = new Button(\"Icon Align Left Button\");\n\t\ticonLeftButton.setIcon(FontAwesome.ALIGN_LEFT);\n\t\ticonLeftButton.addClickListener(myClickListener);\n\n<\/pre>\n
By default the icon is added to the left of the button so there is no need to add any extra style, just add the icon to the button and its added to the left of the text.<\/p>\n
5.4.13 Icon Top Button<\/h4>\n
Icon Top Button<\/em><\/span><\/p>\n
\t\tButton iconTopButton = new Button(\"Icon Align Top Button\");\n\t\ticonTopButton.setIcon(FontAwesome.STAR);\n\t\ticonTopButton.addStyleName(\"icon-align-top\");\n\t\ticonTopButton.addClickListener(myClickListener);\n\n<\/pre>\n
When you need an icon on top of the text, the style used is
icon-align-top<\/code><\/p>\n5.4.14 Border less Button<\/h4>\n
Border less Button<\/em><\/span><\/p>\n
\t\tButton borderlessButton = new Button(\"BorderLess Button\");\n\t\tborderlessButton.addStyleName(\"borderless\");\n\t\tborderlessButton.addClickListener(myClickListener);\n\n<\/pre>\n
A button without borders in those cases when you need to have a cleaner screen, it shows the borders when you click it, the style used is
borderless<\/code>.<\/p>\n5.4.15 Link Button<\/h4>\n
Link Button<\/em><\/span><\/p>\n
\t\tButton linkButton = new Button(\"Link Button\");\n\t\tlinkButton.addStyleName(\"link\");\n\t\tlinkButton.addClickListener(myClickListener);\n\n<\/pre>\n
A link button to simulate a traditional html link, the style used is
link<\/code>.<\/p>\n5.4.16 Quiet Button<\/h4>\n
Quiet Button<\/em><\/span><\/p>\n
\t\tButton quietButton = new Button(\"Quiet Button\");\n\t\tquietButton.addStyleName(\"quiet\");\n\t\tquietButton.addClickListener(myClickListener);\n\n<\/pre>\n
A button that show its borders when you hover the mouse over it,
quiet<\/code> style is used in this case.<\/p>\n5.4.17 Custom Button<\/h4>\n
Custom Button<\/em><\/span><\/p>\n
\t\tButton customButton = new Button(\"Custom Button\");\n\t\tcustomButton.addStyleName(\"mystyle\");\n\t\tcustomButton.addClickListener(myClickListener);\n\n<\/pre>\n
You can also create your own buttons with vaadin using styles, this button have the look and feel defined in the style
mystyle<\/code>, in the same file opened to make the label style, you define this style:[ulp id=’YBvYYzEYBUrADqmI’]<\/p>\nmystyle<\/em><\/span><\/p>\n
.v-button-mystyle {\n background-color: lightblue;\t\n font-size: 12pt;\n font-weight: bold;\n color: red;\n border-color: black;\n border-radius: 0px;\n border-width: 4px;\n background-image: none;\t \t\n}\n\n<\/pre>\nThe background color is lightblue, the font size is 12 pt and is a bold font of red color, I get rid of the border radius and the background image to get an square flat button, also increased the border to get an ugly retro button, In general I prefer to use Vaadin premade buttons that are made by designers and have a nice look an fill, but if you need more control in the application styles you can do it very easy.<\/p>\n
5.4.18 Custom Image Button<\/h4>\n