In this tutorial we will create an application where any user can send a | In this tutorial we will create an application where any user can send a | ||||
broadcast message to all other active users. We will start from a | broadcast message to all other active users. We will start from a | ||||
project where push has been enabled (see link:EnablingServerPush.asciidoc[Enabling | |||||
server push] for details). | |||||
project where push has been enabled (see <<EnablingServerPush#, Enabling | |||||
server push>> for details). | |||||
For simplicity, we will use a static `Broadcaster` which is shared between | For simplicity, we will use a static `Broadcaster` which is shared between | ||||
all users and all sessions. Each UI will register itself to this | all users and all sessions. Each UI will register itself to this |
In this tutorial we create a simple extension that can be attached to a | In this tutorial we create a simple extension that can be attached to a | ||||
`PasswordField`, displaying a floating notification if the user's Caps | `PasswordField`, displaying a floating notification if the user's Caps | ||||
Lock seems to be enabled. We assume the reader is already familiar with | Lock seems to be enabled. We assume the reader is already familiar with | ||||
the link:CreatingAUIExtension.asciidoc[Creating a UI extension] | |||||
the <<CreatingAUIExtension#, Creating a UI extension>> | |||||
tutorial. | tutorial. | ||||
This extension has almost no server-side functionality; the whole Extension | This extension has almost no server-side functionality; the whole Extension |
More examples on URI fragments and parameters can be found at: | More examples on URI fragments and parameters can be found at: | ||||
* link:UsingURIFragments.asciidoc[Using URI fragments] | |||||
* <<UsingURIFragments#, Using URI fragments>> |
= Integrating a JavaScript library as an extension | = Integrating a JavaScript library as an extension | ||||
JavaScript can also be used for creating Extensions e.g. for integrating | JavaScript can also be used for creating Extensions e.g. for integrating | ||||
existing JavaScript libraries. See link:CreatingAUIExtension.asciidoc[Creating a UI extension] for general information about Extensions. The main | |||||
existing JavaScript libraries. See <<CreatingAUIExtension#, Creating a UI extension>> for general information about Extensions. The main | |||||
difference when using JavaScript is that you extend | difference when using JavaScript is that you extend | ||||
`AbstractJavaScriptExtension`, that your shared state class should | `AbstractJavaScriptExtension`, that your shared state class should | ||||
extend `JavaScriptExtensionState` and then of course that your | extend `JavaScriptExtensionState` and then of course that your | ||||
client-side implementation is written in JavaScript. See link:IntegratingAJavaScriptComponent.asciidoc[Integrating a | |||||
JavaScript component] for basic information about how to use JavaScript | |||||
client-side implementation is written in JavaScript. See <<IntegratingAJavaScriptComponent#, Integrating a | |||||
JavaScript component>> for basic information about how to use JavaScript | |||||
for your client-side logic. | for your client-side logic. | ||||
This tutorial will create a simple Extension for integrating | This tutorial will create a simple Extension for integrating |
`@StyleSheet({"redbutton.css"})` on the class `com.example.RedButton` will | `@StyleSheet({"redbutton.css"})` on the class `com.example.RedButton` will | ||||
cause the file `com/example/redbutton.css` on the classpath to be loaded | cause the file `com/example/redbutton.css` on the classpath to be loaded | ||||
in the browser. `@JavaScript` works in exactly the same way - see | in the browser. `@JavaScript` works in exactly the same way - see | ||||
link:IntegratingAJavaScriptComponent.asciidoc[Integrating a JavaScript component] | |||||
<<IntegratingAJavaScriptComponent#, Integrating a JavaScript component>> | |||||
for a practical example. | for a practical example. | ||||
[source,java] | [source,java] |
.... | .... | ||||
(`MyComponentServerRpc` is introduced in | (`MyComponentServerRpc` is introduced in | ||||
link:SendingEventsFromTheClientToTheServerUsingRPC.asciidoc[Sending | |||||
events from the client to the server using RPC]. `Window` here is | |||||
<<SendingEventsFromTheClientToTheServerUsingRPC#, Sending | |||||
events from the client to the server using RPC>>. `Window` here is | |||||
`com.google.gwt.user.client.Window`, _not_ `com.vaadin.ui.Window`.) | `com.google.gwt.user.client.Window`, _not_ `com.vaadin.ui.Window`.) | ||||
Finally, in *MyComponent* we use the RPC via a proxy: | Finally, in *MyComponent* we use the RPC via a proxy: |
executor service handle the iteration and interval (e.g. `Executors.newScheduledThreadPool(1).scheduleAtFixedRate(...)`). | executor service handle the iteration and interval (e.g. `Executors.newScheduledThreadPool(1).scheduleAtFixedRate(...)`). | ||||
For more information on how to enable push or polling in your | For more information on how to enable push or polling in your | ||||
application, see link:EnablingServerPush.asciidoc[Enabling server push] or link:UsingPolling.asciidoc[Using polling]. | |||||
application, see <<EnablingServerPush#, Enabling server push>> or <<UsingPolling#, Using polling>>. |
image:http://vaadinongrails.com/img/recompile-idea.png[Recompile IDEA] | image:http://vaadinongrails.com/img/recompile-idea.png[Recompile IDEA] | ||||
Now you can continue with | Now you can continue with | ||||
link:VaadinOnGrailsDatabaseAccess.asciidoc[Vaadin | |||||
on Grails - Database access] | |||||
<<VaadinOnGrailsDatabaseAccess#, Vaadin | |||||
on Grails - Database access>> |
_Versions used in this tutorial: Grails 2.3.x, Vaadin 7.1.x. News and | _Versions used in this tutorial: Grails 2.3.x, Vaadin 7.1.x. News and | ||||
updates about Vaadin on Grails are available on | updates about Vaadin on Grails are available on | ||||
https://twitter.com/VaadinOnGrails[VaadinOnGrails]. This is continuation | https://twitter.com/VaadinOnGrails[VaadinOnGrails]. This is continuation | ||||
of link:VaadinOnGrailsCreateProjectInIntelliJIDEA.asciidoc[Vaadin | |||||
on Grails - Create project in IntelliJ IDEA]_ | |||||
of <<VaadinOnGrailsCreateProjectInIntelliJIDEA#, Vaadin | |||||
on Grails - Create project in IntelliJ IDEA>>_ | |||||
We are going to create persistence a domain class that is automatically | We are going to create persistence a domain class that is automatically | ||||
mapped into a database through Hibernate. GORM from Grails framework | mapped into a database through Hibernate. GORM from Grails framework |
_Versions used in this tutorial: Grails 2.3.x, Vaadin 7.1.x. News and | _Versions used in this tutorial: Grails 2.3.x, Vaadin 7.1.x. News and | ||||
updates about Vaadin on Grails are available on | updates about Vaadin on Grails are available on | ||||
https://twitter.com/VaadinOnGrails[VaadinOnGrails]. This is continuation | https://twitter.com/VaadinOnGrails[VaadinOnGrails]. This is continuation | ||||
of link:VaadinOnGrailsDatabaseAccess.asciidoc[Vaadin on Grails - Database access]_ | |||||
of <<VaadinOnGrailsDatabaseAccess#, Vaadin on Grails - Database access>>_ | |||||
In `grails-app/conf/VaadinConfig.groovy`, we can change URL mapping to | In `grails-app/conf/VaadinConfig.groovy`, we can change URL mapping to | ||||
UI. Also, we can define multiple UIs to be accessible from one Grails | UI. Also, we can define multiple UIs to be accessible from one Grails |
https://vaadin.com/api/com/vaadin/data/Container.html[Container API]. | https://vaadin.com/api/com/vaadin/data/Container.html[Container API]. | ||||
You can pretty easily write a totally custom version for your specific | You can pretty easily write a totally custom version for your specific | ||||
use case, but the strongly suggested method is to use helpers like | use case, but the strongly suggested method is to use helpers like | ||||
https://vaadin.com/web/matti/blog/-/blogs/connecting-large-amounts-of-data-to-ui[LazyList] | |||||
or https://vaadin.com/addon/lazy-query-container[LazyQueryContainer] | |||||
LazyList or https://vaadin.com/addon/lazy-query-container[LazyQueryContainer] | |||||
instead. | instead. | ||||
[[structuring_your_ui_code]] | [[structuring_your_ui_code]] |
To create your own variation of the Valo theme, start by creating a new | To create your own variation of the Valo theme, start by creating a new | ||||
custom theme for your project. See | custom theme for your project. See | ||||
the link:CreatingAThemeUsingSass.asciidoc[Creating a theme using Sass] | |||||
the <<CreatingAThemeUsingSass#, Creating a theme using Sass>> | |||||
tutorial to get that done. | tutorial to get that done. | ||||
Change your theme import and include from Reindeer to Valo: | Change your theme import and include from Reindeer to Valo: |
articles are presented as written by the author. Vaadin does not edit or maintain them. | articles are presented as written by the author. Vaadin does not edit or maintain them. | ||||
Pull requests welcome! | Pull requests welcome! | ||||
NOTE: All contributions are very welcome! Just write your article in link:asciidoctor.org/docs/asciidoc-writers-guide[AsciiDoc], | |||||
NOTE: All contributions are very welcome! Just write your article in link:https://asciidoctor.org/docs/asciidoc-writers-guide[AsciiDoc], | |||||
put it in this directory and send us a pull request. Updates to existing articles | put it in this directory and send us a pull request. Updates to existing articles | ||||
are great, too. | are great, too. | ||||
There are three more specific types of components. | There are three more specific types of components. | ||||
Field Components:: allow user to edit a value in the UI. All extend [classname]#AbstractField#. Field components are described in detail in | Field Components:: allow user to edit a value in the UI. All extend [classname]#AbstractField#. Field components are described in detail in | ||||
<<dummy/../../../framework/component/components-fields.asciidoc#components.fields,"Field Components">>. | |||||
<<dummy/../../../documentation/components/components-fields#components.fields,"Field Components">>. | |||||
Selection Component:: show a list of data that the user can select from. All extend [classname]#AbstractListing#. Selection components are described in detail in | Selection Component:: show a list of data that the user can select from. All extend [classname]#AbstractListing#. Selection components are described in detail in | ||||
<<dummy/../../../framework/component/components-selection.asciidoc#components.selection,"Selection Components">>. | |||||
<<dummy/../../../documentation/components/components-selection#components.selection,"Selection Components">>. | |||||
Layouts and Component Containers:: Components that can contain other components. All layouts and containers implement the [interfacename]#HasComponents# interface. Layout components are described in detail in | Layouts and Component Containers:: Components that can contain other components. All layouts and containers implement the [interfacename]#HasComponents# interface. Layout components are described in detail in | ||||
<<dummy/../../../framework/layout/layout-overview.asciidoc#layout.overview,"Managing | |||||
<<dummy/../../../documentation/layout/layout-overview#layout.overview,"Managing | |||||
Layout">>. | Layout">>. | ||||
((("Sampler"))) | ((("Sampler"))) | ||||
add-ons, either from the Vaadin Directory or from independent sources. Both | add-ons, either from the Vaadin Directory or from independent sources. Both | ||||
commercial and free components exist. The installation of add-ons is described | commercial and free components exist. The installation of add-ons is described | ||||
in | in | ||||
<<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using | |||||
<<dummy/../../../documentation/addons/addons-overview#addons.overview,"Using | |||||
Vaadin Add-ons">>. | Vaadin Add-ons">>. | ||||
//// | //// | ||||
at https://vaadin.com/refcard. | at https://vaadin.com/refcard. | ||||
==== | ==== | ||||
//// | |||||
//// |