* Update clientsideapp-entrypoint.asciidoc Adding missing ```[source, java]```tags/8.7.0.beta1
Consider the following application: | Consider the following application: | ||||
[source, java] | |||||
---- | ---- | ||||
package com.example.myapp.client; | package com.example.myapp.client; | ||||
Module Descriptor">>. The descriptor is an XML file with suffix | Module Descriptor">>. The descriptor is an XML file with suffix | ||||
[filename]#.gwt.xml#. | [filename]#.gwt.xml#. | ||||
[source, xml] | |||||
---- | ---- | ||||
<?xml version="1.0" encoding="UTF-8"?> | <?xml version="1.0" encoding="UTF-8"?> | ||||
<!DOCTYPE module PUBLIC | <!DOCTYPE module PUBLIC |
page__ by including it with a [literal]#++<script>++# tag, for example as | page__ by including it with a [literal]#++<script>++# tag, for example as | ||||
follows: | follows: | ||||
[source, html] | |||||
---- | ---- | ||||
<html xmlns="http://www.w3.org/1999/xhtml"> | <html xmlns="http://www.w3.org/1999/xhtml"> | ||||
<head> | <head> |
Consider the following client-side application: | Consider the following client-side application: | ||||
[source, java] | |||||
---- | ---- | ||||
public class HelloWorld implements EntryPoint { | public class HelloWorld implements EntryPoint { | ||||
@Override | @Override |
For example, [classname]#TextRenderer# is implemented simply as follows: | For example, [classname]#TextRenderer# is implemented simply as follows: | ||||
[source, java] | |||||
---- | ---- | ||||
public class TextRenderer implements Renderer<String> { | public class TextRenderer implements Renderer<String> { | ||||
@Override | @Override | ||||
[classname]#ClickableRenderer# with the data type accepted by the renderer. The | [classname]#ClickableRenderer# with the data type accepted by the renderer. The | ||||
data type also must be given for the superclass constructor. | data type also must be given for the superclass constructor. | ||||
[source, java] | |||||
---- | ---- | ||||
public class TextRenderer extends AbstractRenderer<String> { | public class TextRenderer extends AbstractRenderer<String> { | ||||
public TextRenderer() { | public TextRenderer() { | ||||
The client-side and server-side renderer need to be connected with a connector | The client-side and server-side renderer need to be connected with a connector | ||||
extending from [classname]#AbstractRendererConnector#. | extending from [classname]#AbstractRendererConnector#. | ||||
[source, java] | |||||
---- | ---- | ||||
@Connect(com.vaadin.ui.renderer.TextRenderer.class) | @Connect(com.vaadin.ui.renderer.TextRenderer.class) | ||||
public class TextRendererConnector | public class TextRendererConnector |
foremost intended for integration with the server-side components, but some may | foremost intended for integration with the server-side components, but some may | ||||
prove useful for client-side applications as well. | prove useful for client-side applications as well. | ||||
[source, java] | |||||
---- | ---- | ||||
public class MyEntryPoint implements EntryPoint { | public class MyEntryPoint implements EntryPoint { | ||||
@Override | @Override |
from user interaction and changes received from the server. A connector also has | from user interaction and changes received from the server. A connector also has | ||||
a number of routine infrastructure methods which need to be implemented. | a number of routine infrastructure methods which need to be implemented. | ||||
[source,java] | |||||
---- | ---- | ||||
@Connect(MyComponent.class) | @Connect(MyComponent.class) | ||||
public class MyComponentConnector | public class MyComponentConnector |
For example, let us have a trivial example with an extension that takes no | For example, let us have a trivial example with an extension that takes no | ||||
special parameters, and illustrates the three alternative APIs: | special parameters, and illustrates the three alternative APIs: | ||||
[source,java] | |||||
---- | ---- | ||||
public class CapsLockWarning extends AbstractExtension { | public class CapsLockWarning extends AbstractExtension { | ||||
// You could pass it in the constructor | // You could pass it in the constructor | ||||
The extension could then be added to a component as follows: | The extension could then be added to a component as follows: | ||||
[source,java] | |||||
---- | ---- | ||||
PasswordField password = new PasswordField("Give it"); | PasswordField password = new PasswordField("Give it"); | ||||
listens for changes in Caps Lock state and displays a floating warning element | listens for changes in Caps Lock state and displays a floating warning element | ||||
over the extended component if the Caps Lock is on. | over the extended component if the Caps Lock is on. | ||||
[source,java] | |||||
---- | ---- | ||||
@Connect(CapsLockWarning.class) | @Connect(CapsLockWarning.class) | ||||
public class CapsLockWarningConnector | public class CapsLockWarningConnector |
For example: | For example: | ||||
[source,java] | |||||
---- | ---- | ||||
public interface MyComponentServerRpc extends ServerRpc { | public interface MyComponentServerRpc extends ServerRpc { | ||||
public void clicked(String buttonName); | public void clicked(String buttonName); | ||||
[methodname]#RpcProxy.create()#. This is usually done transparently by using [methodname]#getRpcProxy()#. After that, you can make calls through the | [methodname]#RpcProxy.create()#. This is usually done transparently by using [methodname]#getRpcProxy()#. After that, you can make calls through the | ||||
server RPC interface that you defined, for example as follows: | server RPC interface that you defined, for example as follows: | ||||
[source,java] | |||||
---- | ---- | ||||
@Connect(MyComponent.class) | @Connect(MyComponent.class) | ||||
public class MyComponentConnector | public class MyComponentConnector | ||||
interface. The call and its parameters are serialized and passed to the server | interface. The call and its parameters are serialized and passed to the server | ||||
in an RPC request transparently. | in an RPC request transparently. | ||||
[source,java] | |||||
---- | ---- | ||||
public class MyComponent extends AbstractComponent { | public class MyComponent extends AbstractComponent { | ||||
private MyComponentServerRpc rpc = | private MyComponentServerRpc rpc = |
<<dummy/../../../framework/gwt/gwt-shared-state#gwt.shared-state,"Shared | <<dummy/../../../framework/gwt/gwt-shared-state#gwt.shared-state,"Shared | ||||
State">>. | State">>. | ||||
[source, java] | |||||
---- | ---- | ||||
public class MyComponent extends AbstractComponent { | public class MyComponent extends AbstractComponent { | ||||
public MyComponent() { | public MyComponent() { |
[classname]#AbstractComponentState#. The member variables should normally be | [classname]#AbstractComponentState#. The member variables should normally be | ||||
declared as public. | declared as public. | ||||
[source, java] | |||||
---- | ---- | ||||
public class MyComponentState extends AbstractComponentState { | public class MyComponentState extends AbstractComponentState { | ||||
public String text; | public String text; | ||||
For example, you could have the following definitions in the | For example, you could have the following definitions in the | ||||
[filename]#.gwt.xml# descriptor: | [filename]#.gwt.xml# descriptor: | ||||
[source, xml] | |||||
---- | ---- | ||||
<source path="client" /> | <source path="client" /> | ||||
<source path="shared" /> | <source path="shared" /> | ||||
implementation with one that returns the shared state object cast to the proper | implementation with one that returns the shared state object cast to the proper | ||||
type, as follows: | type, as follows: | ||||
[source, java] | |||||
---- | ---- | ||||
@Override | @Override | ||||
public MyComponentState getState() { | public MyComponentState getState() { | ||||
You can then use the [methodname]#getState()# to access the shared state object | You can then use the [methodname]#getState()# to access the shared state object | ||||
with the proper type. | with the proper type. | ||||
[source, java] | |||||
---- | ---- | ||||
public MyComponent() { | public MyComponent() { | ||||
getState().setText("This is the initial state"); | getState().setText("This is the initial state"); | ||||
The access should be read-only. It is required that you override the base | The access should be read-only. It is required that you override the base | ||||
implementation with one that returns the proper shared state type, as follows: | implementation with one that returns the proper shared state type, as follows: | ||||
[source, java] | |||||
---- | ---- | ||||
@Override | @Override | ||||
public MyComponentState getState() { | public MyComponentState getState() { | ||||
method in the connector is called. You should always call the superclass | method in the connector is called. You should always call the superclass | ||||
method before anything else to handle changes to common component properties. | method before anything else to handle changes to common component properties. | ||||
[source, java] | |||||
---- | ---- | ||||
@Override | @Override | ||||
public void onStateChanged(StateChangeEvent stateChangeEvent) { | public void onStateChanged(StateChangeEvent stateChangeEvent) { | ||||
We can replace the [methodname]#onStateChange()# method in the earlier connector | We can replace the [methodname]#onStateChange()# method in the earlier connector | ||||
example with the following: | example with the following: | ||||
[source, java] | |||||
---- | ---- | ||||
@OnStateChange("text") | @OnStateChange("text") | ||||
void updateText() { | void updateText() { | ||||
property of the same name and type, by calling the respective setter for the | property of the same name and type, by calling the respective setter for the | ||||
property in the widget. | property in the widget. | ||||
[source, java] | |||||
---- | ---- | ||||
public class MyComponentState extends AbstractComponentState { | public class MyComponentState extends AbstractComponentState { | ||||
@DelegateToWidget | @DelegateToWidget | ||||
If you want to delegate a shared state property to a widget property of another | If you want to delegate a shared state property to a widget property of another | ||||
name, you can give the property name as a string parameter for the annotation. | name, you can give the property name as a string parameter for the annotation. | ||||
[source, java] | |||||
---- | ---- | ||||
public class MyComponentState extends AbstractComponentState { | public class MyComponentState extends AbstractComponentState { | ||||
@DelegateToWidget("description") | @DelegateToWidget("description") | ||||
widgets. References to components can be made by referring to their connectors | widgets. References to components can be made by referring to their connectors | ||||
(all server-side components implement the [interfacename]#Connector# interface). | (all server-side components implement the [interfacename]#Connector# interface). | ||||
[source, java] | |||||
---- | ---- | ||||
public class MyComponentState extends AbstractComponentState { | public class MyComponentState extends AbstractComponentState { | ||||
public Connector otherComponent; | public Connector otherComponent; | ||||
You could then access the component on the server-side as follows: | You could then access the component on the server-side as follows: | ||||
[source, java] | |||||
---- | ---- | ||||
public class MyComponent { | public class MyComponent { | ||||
public void MyComponent(Component otherComponent) { | public void MyComponent(Component otherComponent) { | ||||
Let us begin with the server-side API: | Let us begin with the server-side API: | ||||
[source, java] | |||||
---- | ---- | ||||
public class MyComponent extends AbstractComponent { | public class MyComponent extends AbstractComponent { | ||||
... | ... | ||||
On the client-side, you can then get the URL of the resource with | On the client-side, you can then get the URL of the resource with | ||||
[methodname]#getResourceUrl()#. | [methodname]#getResourceUrl()#. | ||||
[source, java] | |||||
---- | ---- | ||||
@Override | @Override | ||||
public void onStateChanged(StateChangeEvent stateChangeEvent) { | public void onStateChanged(StateChangeEvent stateChangeEvent) { | ||||
The widget could then use the URL, for example, as follows: | The widget could then use the URL, for example, as follows: | ||||
[source, java] | |||||
---- | ---- | ||||
public class MyWidget extends Label { | public class MyWidget extends Label { | ||||
... | ... |
For example, you could style a composite widget with an overall style and with | For example, you could style a composite widget with an overall style and with | ||||
separate styles for the sub-widgets as follows: | separate styles for the sub-widgets as follows: | ||||
[source, java] | |||||
---- | ---- | ||||
public class MyPickerWidget extends ComplexPanel { | public class MyPickerWidget extends ComplexPanel { | ||||
public static final String CLASSNAME = "mypicker"; | public static final String CLASSNAME = "mypicker"; |