Table Of Contents<\/h3>\n\n- 1. The tools<\/a><\/dt>\n
- 2. Introduction<\/a><\/dt>\n
- 3. Prerequisites<\/a><\/dt>\n
- 4. Set up the project<\/a><\/dt>\n
- 5. Coding the example<\/a><\/dt>\n
- \n
\n- 5.1 jQuery<\/a><\/dt>\n
- \n
\n- 5.1.1 Download jQuery<\/a><\/dt>\n
- 5.1.2 Include jQuery in the Vaadin project<\/a><\/dt>\n
- 5.1.3 Import jQuery in the Vaadin project<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.2 Styles<\/a><\/dt>\n
- 5.3 Java Code<\/a><\/dt>\n
- \n
\n- 5.3.1 Main Layout<\/a><\/dt>\n
- 5.3.2 Buttons Layout<\/a><\/dt>\n
- 5.3.3 The Label<\/a><\/dt>\n
- 5.3.4 Change background color button<\/a><\/dt>\n
- 5.3.5 Change Opacity button<\/a><\/dt>\n
- 5.3.6 Change width button<\/a><\/dt>\n
- 5.3.7 Animate Button<\/a><\/dt>\n
- 5.3.8 Change text button<\/a><\/dt>\n
- 5.3.9 Change html text button<\/a><\/dt>\n
- 5.3.10 Center text button<\/a><\/dt>\n
- 5.3.11 Justify text left button<\/a><\/dt>\n
- 5.3.12 Add widgets to layout<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n<\/dd>\n
- 6. The complete source code<\/a><\/dt>\n
- \n
\n- 6.1 Styles<\/a><\/dt>\n
- 6.2 Main Class<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 7. Running the example<\/a><\/dt>\n
- 8. Results<\/a><\/dt>\n
- \n
\n- 8.1 Start application<\/a><\/dt>\n
- 8.2 Change label color<\/a><\/dt>\n
- 8.3 Change label opacity<\/a><\/dt>\n
- 8.4 Change label width<\/a><\/dt>\n
- 8.5 Animate label<\/a><\/dt>\n
- 8.6 Change text<\/a><\/dt>\n
- 8.7 HTML text<\/a><\/dt>\n
- 8.8 Center text<\/a><\/dt>\n
- 8.9 Justify text left<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 9. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. The tools<\/h2>\n\n- Java JDK 8<\/li>\n
- Latest Eclipse Mars<\/li>\n
- Vaadin 7.6.8<\/li>\n
- Tomcat Server 8<\/li>\n<\/ul>\n
<\/a>2. Introduction<\/h2>\nIn this example we are going to use jQuery to manipulate some UI elements. jQuery works on the client side and when you use it, you don’t get the server calls that you usually get with the Vaadin widgets. Here we are going to create a label and manipulate the label with jQuery inside a Vaadin application.<\/p>\n
<\/a>3. Prerequisites<\/h2>\n\n- JDK installed<\/li>\n
- Eclipse Mars installed and working<\/li>\n
- Vaadin plug-in installed<\/li>\n
- Tomcat 8 installed and running<\/li>\n<\/ul>\n
<\/a>4. Set up the project<\/h2>\nIn 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>1 New Project<\/figcaption><\/figure><\/p>\nNow 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>2 Vaadin Project<\/figcaption><\/figure><\/p>\nClick next and name your project then press finish.<\/p>\n
<\/a>5. The example<\/h2>\n<\/a>5.1 jQuery<\/h3>\n<\/a>5.1.1 Download jQuery<\/h4>\nGo to: Download jQuery<\/a> and download the latest jQuery.<\/p>\n![\"3](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/08\/3-Download-jQuery.png\")
<\/a>3 Download jQuery<\/figcaption><\/figure><\/p>\n<\/a>5.1.2 Include jQuery in the Vaadin project<\/h4>\nPlace the downloaded library inside the Vaadin Project. In the folder: [PROJECT-NAME]->WebContent->VAADIN->jquery<\/p>\n
![\"4](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/08\/4-jQuery-location.png\")
<\/a>4 jQuery location<\/figcaption><\/figure><\/p>\n<\/a>5.1.3 Import jQuery in the Vaadin project<\/h4>\nImport the jQuery library using the annotation @JavaScript<\/code><\/p>\nImport jQuery<\/em><\/span><\/p>\n@JavaScript({\"vaadin:\/\/jquery\/jquery-3.1.0.min.js\"})\n<\/pre>\n<\/a>5.2 Styles<\/h3>\nEdit the styles file and add a style for the label.<\/p>\n
[PROJECT-NAME]->WebContent->VAADIN->themes->[project-name]->[projectname].scss<\/p>\n
![\"5](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/08\/5-Styles.png\")
<\/a>5 Styles<\/figcaption><\/figure><\/p>\njava<\/em><\/span><\/p>\n.v-label-mylabelstyle {\n color: black;\n text-align: left;\n background-color: lightblue;\n}\n<\/pre>\ncolor: black; <\/code>Changes the color of the text to black.
\ntext-align: left;<\/code>Aligns the text to the left.
\nbackground-color: lightblue.<\/code>Changes the background color to a light blue.<\/p>\n<\/a>5.3 Java Code<\/h3>\n<\/a>5.3.1 Main Layout<\/h4>\nMain Layout<\/em><\/span><\/p>\n\t\tfinal VerticalLayout layout = new VerticalLayout();\n\t\tlayout.setMargin(true);\n\t\tlayout.setSpacing(true);\n\t\tsetContent(layout);\n<\/pre>\nfinal VerticalLayout layout = new VerticalLayout(); <\/code>Creates a vertical layout.
\nlayout.setMargin(true); <\/code>Enables the margin of the layout.<\/p>\nlayout.setSpacing(true); <\/code>Enables the spacing of the layout.
\nsetContent(layout); <\/code>Sets the main content to the vertical layout.<\/p>\n<\/a>5.3.2 Buttons Layout<\/h4>\nButtons layouts<\/em><\/span><\/p>\n\t\tHorizontalLayout buttonLayout1 = new HorizontalLayout();\n\t\tHorizontalLayout buttonLayout2 = new HorizontalLayout();\n<\/pre>\nHorizontalLayout buttonLayout1 = new HorizontalLayout(); <\/code>Creates an horizontal layout for the first row of buttons.
\nHorizontalLayout buttonLayout2 = new HorizontalLayout(); <\/code>Creates an horizontal layout for the second row of buttons.<\/p>\n<\/a>5.3.3 The Label<\/h4>\nThe label<\/em><\/span><\/p>\n\t\tLabel theLabel = new Label(\"This is a label\");\n\t\ttheLabel.setWidth(\"400px\");\n\t\ttheLabel.setHeight(\"50px\");\n\t\ttheLabel.setId(\"theLabel\");\n\t\ttheLabel.addStyleName(\"mylabelstyle\");\n<\/pre>\nLabel theLabel = new Label(\"This is a label\"); <\/code>Creates a new label.
\ntheLabel.setWidth(\"400px\"); <\/code>Sets the width of the label.<\/p>\ntheLabel.setHeight(\"50px\"); <\/code>Sets the height of the label.
\ntheLabel.setId(\"theLabel\"); <\/code>Assigns an id to the label.<\/p>\ntheLabel.addStyleName(\"mylabelstyle\"); <\/code>Adds a style to the label.<\/p>\n<\/a>5.3.4 Change background color button<\/h4>\nChange background color button<\/em><\/span><\/p>\n\t\tButton backgroundButton = new Button(\"Color\");\n\t\tbackgroundButton.setWidth(\"100px\");\n\t\tbackgroundButton.addClickListener(new ClickListener() {\n\t\t\t@Override\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({width: '400px'});\");\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({opacity: 1.0}, 100);\");\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').css('background-color', 'green').css('color', 'white');\");\n\t\t\t}\n\t\t});\n<\/pre>\nButton backgroundButton = new Button(\"Color\");<\/code> Creates a button to change the color.
\nbackgroundButton.setWidth(\"100px\");<\/code> Sets the width of the button. <\/div> <\/div><\/p>\nbackgroundButton.addClickListener(new ClickListener() {<\/code> Adds a click listener to the button.
\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({width: '400px'});\");<\/code> Executes the jQuery code.<\/p>\nThis jQuery code animates the width of the label to be 400 pixels.
\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({opacity: 1.0}, 100);\");<\/code> Animates the opacity of the label to be entirely opaque.<\/p>\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').css('background-color', 'green').css('color', 'white');\");<\/code> Changes the background color of the label using the CSS selector of jQuery.<\/p>\n<\/a>5.3.5 Change Opacity button<\/h4>\nChange Opacity button<\/em><\/span><\/p>\n\t\tButton opacityButton = new Button(\"Opacity\");\n\t\topacityButton.setWidth(\"100px\");\n\t\topacityButton.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({width: '400px'});\");\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({height: '50px'});\");\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({opacity: 0.2}, 1500);\");\n\t\t\t}\n\t\t});\n<\/pre>\nButton opacityButton = new Button(\"Opacity\"); <\/code>Creates a new button to change the opacity.
\nopacityButton.setWidth(\"100px\"); <\/code>Sets the width of the button.<\/p>\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({width: '400px'});\"); <\/code>Animates the width of the label using jQuery.
\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({height: '50px'});\"); <\/code>Animates the height of the label using jQuery.<\/p>\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({opacity: 0.2}, 1500);\"); <\/code>Animates the opacity of the label to be almost transparent.<\/p>\n<\/a>5.3.6 Change width button<\/h4>\nChange width button<\/em><\/span><\/p>\n\t\tButton widthButton = new Button(\"Width\");\n\t\twidthButton.setWidth(\"100px\");\n\t\twidthButton.addClickListener(new ClickListener() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({opacity: 1.0}, 100);\");\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({width: '200px'});\");\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({height: '50px'});\");\n\t\t\t}\n\t\t});\n<\/pre>\nButton widthButton = new Button(\"Width\"); <\/code>Creates a button to change the width of the label.
\nwidthButton.setWidth(\"100px\"); <\/code>Sets the width of the button.<\/p>\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({opacity: 1.0}, 100);\"); <\/code>Sets the label opaque using jQuery.
\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({width: '200px'});\"); <\/code>Animates the width of the label to be 200 pixels, using jQuery.<\/p>\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({height: '50px'});\"); <\/code>This jQuery animates the height of the label.<\/p>\n<\/a>5.3.7 Animate Button<\/h4>\nAnimate button<\/em><\/span><\/p>\n\t\tButton animateButton = new Button(\"Animate\");\n\t\tanimateButton.setWidth(\"100px\");\n\t\tanimateButton.addClickListener(new ClickListener() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tStringBuilder sb = new StringBuilder(\"$('#theLabel').animate({\");\n\t\t\t\tsb.append(\"opacity: '0.5',\");\n\t\t\t\tsb.append(\"height: '150px',\");\n\t\t\t\tsb.append(\"width: '150px'\");\n\t\t\t\tsb.append(\"});\");\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(sb.toString());\n\t\t\t}\n\t\t});\n<\/pre>\nButton animateButton = new Button(\"Animate\"); <\/code>Creates a button to animate the label.
\nanimateButton.setWidth(\"100px\"); <\/code>Sets the width of the button.<\/p>\nStringBuilder sb = new StringBuilder(\"$('#theLabel').animate({\"); <\/code>Creates a string builder to build the jQuery string.
\nsb.append(\"opacity: '0.5',\"); <\/code>Appends the opacity property of the animation.<\/p>\nsb.append(\"height: '150px',\"); <\/code>Appends the height property of the animation.
\nsb.append(\"width: '150px'\"); <\/code>Appends the width property of the animation.<\/p>\nsb.append(\"});\"); <\/code>Appends the controls characters to complete the jQuery string
\ncom.vaadin.ui.JavaScript.getCurrent().execute(sb.toString()); <\/code>Executes the jQuery animation.<\/p>\n<\/a>5.3.8 Change text button<\/h4>\n
- \n
- 5.1 jQuery<\/a><\/dt>\n
- \n
- \n
- 5.1.1 Download jQuery<\/a><\/dt>\n
- 5.1.2 Include jQuery in the Vaadin project<\/a><\/dt>\n
- 5.1.3 Import jQuery in the Vaadin project<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.2 Styles<\/a><\/dt>\n
- 5.3 Java Code<\/a><\/dt>\n
- \n
- \n
- 5.3.1 Main Layout<\/a><\/dt>\n
- 5.3.2 Buttons Layout<\/a><\/dt>\n
- 5.3.3 The Label<\/a><\/dt>\n
- 5.3.4 Change background color button<\/a><\/dt>\n
- 5.3.5 Change Opacity button<\/a><\/dt>\n
- 5.3.6 Change width button<\/a><\/dt>\n
- 5.3.7 Animate Button<\/a><\/dt>\n
- 5.3.8 Change text button<\/a><\/dt>\n
- 5.3.9 Change html text button<\/a><\/dt>\n
- 5.3.10 Center text button<\/a><\/dt>\n
- 5.3.11 Justify text left button<\/a><\/dt>\n
- 5.3.12 Add widgets to layout<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n<\/dd>\n
- 6. The complete source code<\/a><\/dt>\n
- \n
- \n
- 6.1 Styles<\/a><\/dt>\n
- 6.2 Main Class<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 7. Running the example<\/a><\/dt>\n
- 8. Results<\/a><\/dt>\n
- \n
- \n
- 8.1 Start application<\/a><\/dt>\n
- 8.2 Change label color<\/a><\/dt>\n
- 8.3 Change label opacity<\/a><\/dt>\n
- 8.4 Change label width<\/a><\/dt>\n
- 8.5 Animate label<\/a><\/dt>\n
- 8.6 Change text<\/a><\/dt>\n
- 8.7 HTML text<\/a><\/dt>\n
- 8.8 Center text<\/a><\/dt>\n
- 8.9 Justify text left<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 9. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. The tools<\/h2>\n
- \n
- Java JDK 8<\/li>\n
- Latest Eclipse Mars<\/li>\n
- Vaadin 7.6.8<\/li>\n
- Tomcat Server 8<\/li>\n<\/ul>\n
<\/a>2. Introduction<\/h2>\n
In this example we are going to use jQuery to manipulate some UI elements. jQuery works on the client side and when you use it, you don’t get the server calls that you usually get with the Vaadin widgets. Here we are going to create a label and manipulate the label with jQuery inside a Vaadin application.<\/p>\n
<\/a>3. Prerequisites<\/h2>\n
- \n
- JDK installed<\/li>\n
- Eclipse Mars installed and working<\/li>\n
- Vaadin plug-in installed<\/li>\n
- Tomcat 8 installed and running<\/li>\n<\/ul>\n
<\/a>4. Set up the project<\/h2>\n
In the file menu choose File -> New -> Other<\/p>\n
<\/a>1 New Project<\/figcaption><\/figure><\/p>\n Now from the list choose Vaadin 7 project<\/p>\n
<\/a>2 Vaadin Project<\/figcaption><\/figure><\/p>\n Click next and name your project then press finish.<\/p>\n
<\/a>5. The example<\/h2>\n
<\/a>5.1 jQuery<\/h3>\n
<\/a>5.1.1 Download jQuery<\/h4>\n
Go to: Download jQuery<\/a> and download the latest jQuery.<\/p>\n
<\/a>3 Download jQuery<\/figcaption><\/figure><\/p>\n <\/a>5.1.2 Include jQuery in the Vaadin project<\/h4>\n
Place the downloaded library inside the Vaadin Project. In the folder: [PROJECT-NAME]->WebContent->VAADIN->jquery<\/p>\n
<\/a>4 jQuery location<\/figcaption><\/figure><\/p>\n <\/a>5.1.3 Import jQuery in the Vaadin project<\/h4>\n
Import the jQuery library using the annotation
@JavaScript<\/code><\/p>\nImport jQuery<\/em><\/span><\/p>\n
@JavaScript({\"vaadin:\/\/jquery\/jquery-3.1.0.min.js\"})\n<\/pre>\n<\/a>5.2 Styles<\/h3>\n
Edit the styles file and add a style for the label.<\/p>\n
[PROJECT-NAME]->WebContent->VAADIN->themes->[project-name]->[projectname].scss<\/p>\n
<\/a>5 Styles<\/figcaption><\/figure><\/p>\n java<\/em><\/span><\/p>\n
.v-label-mylabelstyle {\n color: black;\n text-align: left;\n background-color: lightblue;\n}\n<\/pre>\ncolor: black; <\/code>Changes the color of the text to black.
\ntext-align: left;<\/code>Aligns the text to the left.
\nbackground-color: lightblue.<\/code>Changes the background color to a light blue.<\/p>\n<\/a>5.3 Java Code<\/h3>\n
<\/a>5.3.1 Main Layout<\/h4>\n
Main Layout<\/em><\/span><\/p>\n
\t\tfinal VerticalLayout layout = new VerticalLayout();\n\t\tlayout.setMargin(true);\n\t\tlayout.setSpacing(true);\n\t\tsetContent(layout);\n<\/pre>\n
final VerticalLayout layout = new VerticalLayout(); <\/code>Creates a vertical layout.
\nlayout.setMargin(true); <\/code>Enables the margin of the layout.<\/p>\nlayout.setSpacing(true); <\/code>Enables the spacing of the layout.
\nsetContent(layout); <\/code>Sets the main content to the vertical layout.<\/p>\n<\/a>5.3.2 Buttons Layout<\/h4>\n
Buttons layouts<\/em><\/span><\/p>\n
\t\tHorizontalLayout buttonLayout1 = new HorizontalLayout();\n\t\tHorizontalLayout buttonLayout2 = new HorizontalLayout();\n<\/pre>\n
HorizontalLayout buttonLayout1 = new HorizontalLayout(); <\/code>Creates an horizontal layout for the first row of buttons.
\nHorizontalLayout buttonLayout2 = new HorizontalLayout(); <\/code>Creates an horizontal layout for the second row of buttons.<\/p>\n<\/a>5.3.3 The Label<\/h4>\n
The label<\/em><\/span><\/p>\n
\t\tLabel theLabel = new Label(\"This is a label\");\n\t\ttheLabel.setWidth(\"400px\");\n\t\ttheLabel.setHeight(\"50px\");\n\t\ttheLabel.setId(\"theLabel\");\n\t\ttheLabel.addStyleName(\"mylabelstyle\");\n<\/pre>\n
Label theLabel = new Label(\"This is a label\"); <\/code>Creates a new label.
\ntheLabel.setWidth(\"400px\"); <\/code>Sets the width of the label.<\/p>\ntheLabel.setHeight(\"50px\"); <\/code>Sets the height of the label.
\ntheLabel.setId(\"theLabel\"); <\/code>Assigns an id to the label.<\/p>\ntheLabel.addStyleName(\"mylabelstyle\"); <\/code>Adds a style to the label.<\/p>\n<\/a>5.3.4 Change background color button<\/h4>\n
Change background color button<\/em><\/span><\/p>\n
\t\tButton backgroundButton = new Button(\"Color\");\n\t\tbackgroundButton.setWidth(\"100px\");\n\t\tbackgroundButton.addClickListener(new ClickListener() {\n\t\t\t@Override\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({width: '400px'});\");\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({opacity: 1.0}, 100);\");\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').css('background-color', 'green').css('color', 'white');\");\n\t\t\t}\n\t\t});\n<\/pre>\nButton backgroundButton = new Button(\"Color\");<\/code> Creates a button to change the color.
\nbackgroundButton.setWidth(\"100px\");<\/code> Sets the width of the button.<\/div> <\/div><\/p>\nbackgroundButton.addClickListener(new ClickListener() {<\/code> Adds a click listener to the button.
\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({width: '400px'});\");<\/code> Executes the jQuery code.<\/p>\nThis jQuery code animates the width of the label to be 400 pixels.
\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({opacity: 1.0}, 100);\");<\/code> Animates the opacity of the label to be entirely opaque.<\/p>\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').css('background-color', 'green').css('color', 'white');\");<\/code> Changes the background color of the label using the CSS selector of jQuery.<\/p>\n<\/a>5.3.5 Change Opacity button<\/h4>\n
Change Opacity button<\/em><\/span><\/p>\n
\t\tButton opacityButton = new Button(\"Opacity\");\n\t\topacityButton.setWidth(\"100px\");\n\t\topacityButton.addClickListener(new Button.ClickListener() {\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({width: '400px'});\");\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({height: '50px'});\");\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({opacity: 0.2}, 1500);\");\n\t\t\t}\n\t\t});\n<\/pre>\nButton opacityButton = new Button(\"Opacity\"); <\/code>Creates a new button to change the opacity.
\nopacityButton.setWidth(\"100px\"); <\/code>Sets the width of the button.<\/p>\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({width: '400px'});\"); <\/code>Animates the width of the label using jQuery.
\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({height: '50px'});\"); <\/code>Animates the height of the label using jQuery.<\/p>\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({opacity: 0.2}, 1500);\"); <\/code>Animates the opacity of the label to be almost transparent.<\/p>\n<\/a>5.3.6 Change width button<\/h4>\n
Change width button<\/em><\/span><\/p>\n
\t\tButton widthButton = new Button(\"Width\");\n\t\twidthButton.setWidth(\"100px\");\n\t\twidthButton.addClickListener(new ClickListener() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({opacity: 1.0}, 100);\");\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({width: '200px'});\");\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({height: '50px'});\");\n\t\t\t}\n\t\t});\n<\/pre>\nButton widthButton = new Button(\"Width\"); <\/code>Creates a button to change the width of the label.
\nwidthButton.setWidth(\"100px\"); <\/code>Sets the width of the button.<\/p>\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({opacity: 1.0}, 100);\"); <\/code>Sets the label opaque using jQuery.
\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({width: '200px'});\"); <\/code>Animates the width of the label to be 200 pixels, using jQuery.<\/p>\ncom.vaadin.ui.JavaScript.getCurrent().execute(\"$('#theLabel').animate({height: '50px'});\"); <\/code>This jQuery animates the height of the label.<\/p>\n<\/a>5.3.7 Animate Button<\/h4>\n
Animate button<\/em><\/span><\/p>\n
\t\tButton animateButton = new Button(\"Animate\");\n\t\tanimateButton.setWidth(\"100px\");\n\t\tanimateButton.addClickListener(new ClickListener() {\n\t\t\t\n\t\t\t@Override\n\t\t\tpublic void buttonClick(ClickEvent event) {\n\t\t\t\tStringBuilder sb = new StringBuilder(\"$('#theLabel').animate({\");\n\t\t\t\tsb.append(\"opacity: '0.5',\");\n\t\t\t\tsb.append(\"height: '150px',\");\n\t\t\t\tsb.append(\"width: '150px'\");\n\t\t\t\tsb.append(\"});\");\n\t\t\t\tcom.vaadin.ui.JavaScript.getCurrent().execute(sb.toString());\n\t\t\t}\n\t\t});\n<\/pre>\nButton animateButton = new Button(\"Animate\"); <\/code>Creates a button to animate the label.
\nanimateButton.setWidth(\"100px\"); <\/code>Sets the width of the button.<\/p>\nStringBuilder sb = new StringBuilder(\"$('#theLabel').animate({\"); <\/code>Creates a string builder to build the jQuery string.
\nsb.append(\"opacity: '0.5',\"); <\/code>Appends the opacity property of the animation.<\/p>\nsb.append(\"height: '150px',\"); <\/code>Appends the height property of the animation.
\nsb.append(\"width: '150px'\"); <\/code>Appends the width property of the animation.<\/p>\nsb.append(\"});\"); <\/code>Appends the controls characters to complete the jQuery string
\ncom.vaadin.ui.JavaScript.getCurrent().execute(sb.toString()); <\/code>Executes the jQuery animation.<\/p>\n<\/a>5.3.8 Change text button<\/h4>\n
- 8.2 Change label color<\/a><\/dt>\n
- 6.2 Main Class<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 5.3.2 Buttons Layout<\/a><\/dt>\n
- 5.1.2 Include jQuery in the Vaadin project<\/a><\/dt>\n
- \n