Skip to content

Latest commit

 

History

History
114 lines (77 loc) · 4.75 KB

gwt_component_sample.adoc

File metadata and controls

114 lines (77 loc) · 4.75 KB
Raw
Creating a GWT component

In this section, we will cover the creation of a simple GWT component (a rating field consisting of 5 stars) and its usage in application screens.

rating field component

Create a new project in CUBA Studio and name it ratingsample.

Click the Create web-toolkit module link in the Project properties navigator section.

Click the New UI component link. The UI component generation page will open. Select the New GWT component value in the Component type section.

studio gwt component wizard

Enter RatingFieldServerComponent in the Vaadin component class name field.

Deselect the Integrate into Generic UI flag. The process of integration into the Generic UI is the same as described at [vaadin_addon_sample_gui], so we won’t repeat it here.

After clicking the OK button Studio generates the following files:

  • RatingFieldWidget.java - a GWT widget in web-toolkit module.

  • RatingFieldServerComponent.java - a Vaadin component class.

  • RatingFieldState.java - a component state class.

  • RatingFieldConnector.java - a connector that links the client code with the server component.

  • RatingFieldServerRpc.java - a class that defines a server API for the client.

Let’s look at the generated files and make necessary changes in them.

  • RatingFieldWidget is a GWT widget. Replace its content with the following code:

    link:../../../../../source/ui_component/gwt/RatingFieldWidget.java[role=include]

    A widget is a client-side class responsible for displaying the component in the web browser and handling events. It defines interfaces for working with the server side. In our case these are the setValue() method and the StarClickListener interface.

  • RatingFieldServerComponent is a Vaadin component class. It defines an API for the server code, accessor methods, event listeners and data sources connection. Developers use the methods of this class in the application code.

    link:../../../../../source/ui_component/gwt/RatingFieldServerComponent.java[role=include]

  • The RatingFieldState state class defines what data are sent between the client and the server. It contains public fields that are automatically serialized on server side and deserialized on the client.

    link:../../../../../source/ui_component/gwt/RatingFieldState.java[role=include]

  • The RatingFieldServerRpc interface defines a server API that is used from the client-side. Its methods may be invoked by the RPC mechanism built into Vaadin. We will implement this interface in the component.

    link:../../../../../source/ui_component/gwt/RatingFieldServerRpc.java[role=include]

  • The RatingFieldConnector connector links client code with the server.

    link:../../../../../source/ui_component/gwt/RatingFieldConnector.java[role=include]

The RatingFieldWidget class does not define the component appearance, it only assigns style names to key elements. To define an appearance of the component, we’ll create stylesheet files. Click Manage themes → Create theme extension on the Project properties navigator section. Select the halo theme in the dialog. Studio creates SCSS files for the theme extension in the themes directory of the web module. The halo theme uses FontAwesome font glyphs instead of icons. We’ll use this fact.

It is recommended to put component styles into a separate file componentname.scss in the components/componentname directory in the form of SCSS mixture. Create the components/ratingfield directories structure in the themes/halo directory of the web module. Then create the ratingfield.scss file inside the ratingfield directory:

gwt theme ext structure 
link:../../../../../source/ui_component/gwt/ratingfield.scss[role=include]

Include this file in the halo-ext.scss main theme file:

link:../../../../../source/ui_component/gwt/halo-ext.scss[role=include]

To demonstrate how the component works let’s create a new screen in the web module.

Name the screen file rating-screen.xml.

gwt rating screen designer

Open the rating-screen.xml file in the IDE. We need a container for our component. Declare it in the screen XML:

link:../../../../../source/ui_component/gwt/rating-screen.xml[role=include]

Open the RatingScreen.java screen controller and add the code that puts the component to the screen.

link:../../../../../source/ui_component/gwt/RatingScreen.java[role=include]

Start the application server and see the result.

rating screen result