Posted
over 11 years
ago
by
[email protected] (Max Barkley)
In my last post, I talked about Errai CDI Events and began showing how they can be used to implement part of a typical lobby page for a multiplayer web-game. Near the end we encountered a typical use case that could not be handled by Events. As
... [More]
promised, I will now discuss how the Errai Message Bus can be used by the server to target a subset of the connected clients.The ProblemTo quickly recap: we have a set of clients in a game room lobby. We want Client A to invite Client B to a game. We've already figured out how to send an invitation event from Client A to the server, but we need a way to relay this invitation to Client B without broadcasting it to all the other clients.Some Message Bus BasicsService EndpointsThe Errai Message Bus is used to send messages between service endpoints. Defining a service endpoint requires only two things:
Subject: A string (not necessarily unique), used by senders to address messages to this endpoint
Callback: A method to be invoked by Errai when a message to this endpoint is received
When an endpoint is created we say that code has subscribed to the given subject. It is possible to dynamically define service endpoints, but as with most features of the framework the declarative syntax is preferable. Here is an example declaring a service in Errai.
It is also possible to annotate methods, such that a class may offer multiple services. Sending a Message
To send a message we construct it with the MessageBuilder and then send it with the MessageBus like so.
It is possible to send objects with a message by adding parts. In the following example we will send a Greeting object to everyone subscribed to the subject "LonelyPeople". Message Visibility
As with Errai CDI Events, there is only one degree of visibility of message. If the server sends a message to the subject "ErraiLovers", every subscriber to this subject will receive the message. But if a client sends a message to "ErraiLovers", only subscribers on that same client and the server will receive it.Back to the LobbyAs you may have already guessed, a simple way to deliver messages to a single client is to dynamically subscribe them to a unique service endpoint.Using Unique IdsHere is the simple model used in Errai Block Drop that can be used to establish a direct line of communication to a single client.
When a client first joins the lobby in Block Drop, they fire a CDI Event to the server
The server generates a unique id and adds the client to the lobby
The server fires back the unique id using a Conversational Event (which will only be observed by the original client)
The client observes the event and subscribes to the subject "clientid
(For those who prefer the concrete, here are the implementations of this pattern in block-drop: server side, client side, and shared code. You'll note that the client side code uses dynamic subscription, since the client's unique id cannot be known at compile time.)
Finishing the Invitation
With services based on unique ids setup for each player, it is now possible for server to target individual players in an invitation by accessing their unique ids. The relayed invitations are sent using the MessageBuilder as previously demonstrated. (Once again, here is the Block Drop implementation.)
Final Note
I hope this helps you to understand the power and flexibility that the Errai Bus provides. This is just one example out of the plethora of potential use cases that the Message Bus could fulfill. When you want the loose-coupling of CDI Events, but need a more fine-grained (or dynamic) control over recipients, Errai Messaging might be the right fit for the job.
[Less]
|
Posted
over 11 years
ago
by
[email protected] (mbarkley)
In my last post, I talked about Errai CDI Events and began showing how they can be used to implement part of a typical lobby page for a multiplayer web-game. Near the end we encountered a typical use case that could not be handled by Events. As
... [More]
promised, I will now discuss how the Errai Message Bus can be used by the server to target a subset of the connected clients.The ProblemTo quickly recap: we have a set of clients in a game room lobby. We want Client A to invite Client B to a game. We've already figured out how to send an invitation event from Client A to the server, but we need a way to relay this invitation to Client B without broadcasting it to all the other clients.Some Message Bus BasicsService EndpointsThe Errai Message Bus is used to send messages between service endpoints. Defining a service endpoint requires only two things:Subject: A string (not necessarily unique), used by senders to address messages to this endpointCallback: A method to be invoked by Errai when a message to this endpoint is receivedWhen an endpoint is created we say that code has subscribed to the given subject. It is possible to dynamically define service endpoints, but as with most features of the framework the declarative syntax is preferable. Here is an example declaring a service in Errai.It is also possible to annotate methods, such that a class may offer multiple services. Sending a MessageTo send a message we construct it with the MessageBuilder and then send it with the MessageBus like so.It is possible to send objects with a message by adding parts. In the following example we will send a Greeting object to everyone subscribed to the subject "LonelyPeople". Message VisibilityAs with Errai CDI Events, there is only one degree of visibility of message. If the server sends a message to the subject "ErraiLovers", every subscriber to this subject will receive the message. But if a client sends a message to "ErraiLovers", only subscribers on that same client and the server will receive it.Back to the LobbyAs you may have already guessed, a simple way to deliver messages to a single client is to dynamically subscribe them to a unique service endpoint.Using Unique IdsHere is the simple model used in Errai Block Drop that can be used to establish a direct line of communication to a single client.When a client first joins the lobby in Block Drop, they fire a CDI Event to the serverThe server generates a unique id and adds the client to the lobbyThe server fires back the unique id using a Conversational Event (which will only be observed by the original client)The client observes the event and subscribes to the subject "clientid" where id is the unique id received from the server(For those who prefer the concrete, here are the implementations of this pattern in block-drop: server side, client side, and shared code. You'll note that the client side code uses dynamic subscription, since the client's unique id cannot be known at compile time.)Finishing the InvitationWith services based on unique ids setup for each player, it is now possible for server to target individual players in an invitation by accessing their unique ids. The relayed invitations are sent using the MessageBuilder as previously demonstrated. (Once again, here is the Block Drop implementation.)Final NoteI hope this helps you to understand the power and flexibility that the Errai Bus provides. This is just one example out of the plethora of potential use cases that the Message Bus could fulfill. When you want the loose-coupling of CDI Events, but need a more fine-grained (or dynamic) control over recipients, Errai Messaging might be the right fit for the job. [Less]
|
Posted
over 11 years
ago
by
[email protected] (Erik-Jan de Wit)
Recently we had quite some discussions on our IRC channel about mobile user interface design with Errai. I think that what we've discussed will be interesting for a larger audience. The question that came up was: Should hybrid applications be
... [More]
designed and behave like native mobile applications? The mobile applications you develop with Errai are so called "hybrid apps", basically a native “shell” that executes HTML and Javascript. So, the UI will look and feel more or less the same on all supported devices (factoring out rendering differences) and will not be geared towards a specific platform. We could try and emulate native behaviour but this could lead to what is know as the Uncanny valley, a term from robotics and animation that refers to the problem of an interaction or feature designed to mimic human behaviour that just doesn’t feel right to actual human observers. So, rather than providing a good user experience it causes a repulsive effect that occurs when you get very close to real human behaviour, but not quite there. Have a look at the scary android, to 'feel' exactly what I'm talking about! Simulating the native look and feel in hybrid applications could lead to that same negative effect. This is one of the reasons why jquery mobile is designed independently of specific platforms, although some fork it and make it look native again.One way to easily create something that feels mobile without trying to look native is to use a CSS framework. The latest Twitter bootstrap and Foundation 4 embrace what they call "Mobile First" where you first build your user interface for mobile and then add more "complexity" later on. Errai UI is great when it comes to use CSS frameworks like these because you can quickly create your mockups and then reuse these in your app. Here is one I've created with Twitter bootstrap for example. I'm not a designer and found it easy to build this mobile UI. I am sure anyone can create something in plain HTML and CSS that “feels” like a mobile app using these tools. On the other hand, if you want to build a quick prototype of an mobile app you might want to combine Errai with something like mgwt. One of the reasons for frameworks to start emulate the native UIs is that users will automatically know how your app works. There are also some popular applications that are avoiding these issues altogether by relying on their own custom look and feel (e.g. Skype and GMail). They focus on having their own brand identity aligned on all devices. If you work with good designers you can have a brand that looks great on all platforms. So, what do you think? Should we support both hybrid and native applications with Errai? Even though there is this uncanny valley your app might fall into? Do you still want to create a mobile app that looks native? We would love to hear what you think! [Less]
|
Posted
over 11 years
ago
by
[email protected] (Erik Jan de Wit)
Recently we had quite some discussions on our IRC channel about mobile user interface design with Errai. I think that what we've discussed will be interesting for a larger audience. The question that came up was: Should hybrid applications be
... [More]
designed and behave like native mobile applications? The mobile applications you develop with Errai are so called "hybrid apps", basically a native “shell” that executes HTML and Javascript. So, the UI will look and feel more or less the same on all supported devices (factoring out rendering differences) and will not be geared towards a specific platform. We could try and emulate native behaviour but this could lead to what is know as the Uncanny valley, a term from robotics and animation that refers to the problem of an interaction or feature designed to mimic human behaviour that just doesn’t feel right to actual human observers. So, rather than providing a good user experience it causes a repulsive effect that occurs when you get very close to real human behaviour, but not quite there. Have a look at the scary android, to 'feel' exactly what I'm talking about! Simulating the native look and feel in hybrid applications could lead to that same negative effect. This is one of the reasons why jquery mobile is designed independently of specific platforms, although some fork it and make it look native again.One way to easily create something that feels mobile without trying to look native is to use a CSS framework. The latest Twitter bootstrap and Foundation 4 embrace what they call "Mobile First" where you first build your user interface for mobile and then add more "complexity" later on. Errai UI is great when it comes to use CSS frameworks like these because you can quickly create your mockups and then reuse these in your app. Here is one I've created with Twitter bootstrap for example. I'm not a designer and found it easy to build this mobile UI. I am sure anyone can create something in plain HTML and CSS that “feels” like a mobile app using these tools. On the other hand, if you want to build a quick prototype of an mobile app you might want to combine Errai with something like mgwt. One of the reasons for frameworks to start emulate the native UIs is that users will automatically know how your app works. There are also some popular applications that are avoiding these issues altogether by relying on their own custom look and feel (e.g. Skype and GMail). They focus on having their own brand identity aligned on all devices. If you work with good designers you can have a brand that looks great on all platforms. So, what do you think? Should we support both hybrid and native applications with Errai? Even though there is this uncanny valley your app might fall into? Do you still want to create a mobile app that looks native? We would love to hear what you think! [Less]
|
Posted
over 11 years
ago
by
[email protected] (Erik Jan de Wit)
Recently we had quite some discussions on our IRC channel about mobile user interface design with Errai. I think that what we've discussed will be interesting for a larger audience. The question that came up was: Should hybrid applications be
... [More]
designed and behave like native mobile applications? The mobile applications you develop with Errai are so called "hybrid apps", basically a native “shell” that executes HTML and Javascript. So, the UI will look and feel more or less the same on all supported devices (factoring out rendering differences) and will not be geared towards a specific platform. We could try and emulate native behaviour but this could lead to what is know as the Uncanny valley, a term from robotics and animation that refers to the problem of an interaction or feature designed to mimic human behaviour that just doesn’t feel right to actual human observers. So, rather than providing a good user experience it causes a repulsive effect that occurs when you get very close to real human behaviour, but not quite there. Have a look at the scary android, to 'feel' exactly what I'm talking about! Simulating the native look and feel in hybrid applications could lead to that same negative effect. This is one of the reasons why jquery mobile is designed independently of specific platforms, although some fork it and make it look native again.One way to easily create something that feels mobile without trying to look native is to use a CSS framework. The latest Twitter bootstrap and Foundation 4 embrace what they call "Mobile First" where you first build your user interface for mobile and then add more "complexity" later on. Errai UI is great when it comes to use CSS frameworks like these because you can quickly create your mockups and then reuse these in your app. Here is one I've created with Twitter bootstrap for example. I'm not a designer and found it easy to build this mobile UI. I am sure anyone can create something in plain HTML and CSS that “feels” like a mobile app using these tools. On the other hand, if you want to build a quick prototype of an mobile app you might want to combine Errai with something like mgwt. One of the reasons for frameworks to start emulate the native UIs is that users will automatically know how your app works. There are also some popular applications that are avoiding these issues altogether by relying on their own custom look and feel (e.g. Skype and GMail). They focus on having their own brand identity aligned on all devices. If you work with good designers you can have a brand that looks great on all platforms. So, what do you think? Should we support both hybrid and native applications with Errai? Even though there is this uncanny valley your app might fall into? Do you still want to create a mobile app that looks native? We would love to hear what you think! [Less]
|
Posted
over 11 years
ago
by
[email protected] (mbizzle88)
Three months ago I became the Red Hat intern for Errai. Shortly afterwards I embarked on a modest task: to make a demo showing the world how awesome Errai is. I am now happy to present Block Drop, a simple multi-player, Tetris-like web game for the
... [More]
desktop or touch screen browsers.If you're new to Errai, Block Drop is a great example of how Errai can be used to simplify the task of making rich and interactive web applications. In particular, Block Drop made use of the following elements of Errai:CDI EventsMessage BusErrai UIData BindingIn this post I will cover some basic use cases of CDI Events with examples from Block Drop. (Note that code snippets below may be slightly modified for readability and clarity. You can check out the full source here.)CDI EventsMaking a Simple Game LobbyIn Block Drop players must log into a lobby page before they can begin playing. From this page we want players to be able to do the following tasks:See other idle playersSee current games being playedStart new games, possibly inviting other players to themJoin currently existing gamesFurthermore, the lobby state will frequently be changing, and we want all clients to have up-to-date information.CDI Events to the RescueIn order to satisfy (1) and (2) above, we need a way to broadcast a list of players and a list of games to all connected clients. Thankfully this task is a piece of cake with Errai. First we need an object to store the information we need for transit. For the sake of simplicity, I have chosen to send the entire lobby state on each update, but in a real-world application one might prefer to send an incremental update./** * A portable bean for transmitting lists of players in lobby and games in progress. */ @Portable public class LobbyUpdate { /** A map player ids to Player objects (of players in lobby). */ private Map<Integer, Player> playerMap = null; /** A map of game ids to Game objects (of games in progress). */ private Map<Integer, GameRoom> gameMap = null; /** * Construct a LobbyUpdate instance. * * @param playerMap * A map of player ids to players, for all the players in the lobby. * * @param gameMap * A map of game ids to games, for all the currently in progress games. */ public LobbyUpdate(Map<Integer, Player> players, Map<Integer, GameRoom> games) { this.playerMap = players; this.gameMap = games; } // Getters and setters omittedLike the name suggests, a LobbyUpdate object exists for the sole purpose of transmitting information about the state of the lobby. You'll notice that:playerMap contains the idle playersgameMap contains the current gamesBoth of these fields have getters and setters (omitted here for brevity)The class is annotated with @PortableThe Portable annotation is what will allow us to send and receive this object over the network. What we need next is way to send LobbyUpdates to clients. Since we want to broadcast this update to all clients indiscriminately, we'll use a CDI Event.In it's simplest case, a CDI Event in Errai is a simple way for a server to send an object to all of the connected clients. By using an Event object, we will be able to fire LobbyUpdate objects to all clients with one simple command. /** Used for sending lobby updates to clients. */ @Inject private Event<LobbyUpdate> lobbyUpdate; /** * Fire an LobbyUpdate to connected clients. This should result in clients * refreshing their lobby lists. */ public void sendLobbyList() { lobbyUpdate.fire(new LobbyUpdate(lobbyPlayers, games)); }The above is an excerpt from the game's Server class. The private field, lobbyUpdate, is the Event object used in the method sendLobbyList to transmit LobbyUpdates. The @Inject annotation tells Errai to assign an event to the lobbyUpdate field when the server is started.So what happens when this event is sent to the clients? On the client side we need tell the clients to observe LobbyUpdate. So in the Lobby class we add the following method. /** * Update the lobby list model and display with newest lobby update from the server. */ public void updateLobby(@Observes LobbyUpdate update) { // Updating logic goes here }The @Observes tells the framework that this method should be called when an Event containing a LobbyUpdate is received. And that's all it takes to transmit the state of the lobby.CDI Events from the ClientTo go about task (3), we need to send an invitation from one client to a subset of the other connected clients. From the previous code examples, you might be expecting something like this:@Override public void onClick(ClickEvent event) { Invitation invite = new Invitation(); // Invitation setup logic goes here... gameInvitation.fire(invite); }This click handler is called in the lobby when a user presses the "New Game" button. The Invitation object is a @Portable class with setters and getters as its only methods, much like the LobbyUpdate class shown previously. On the last line, the event is fired using gameInvitation, an Event object, which was created using the @Inject annotation as in the previous example.This is a good start, but the only hiccup is that a CDI Event fired from a client will only go to the server. So we'll need a method to catch and relay this event at the server./** * Respond to an invitation by relaying it to the appropriate client. */ public void handleInvitation(@Observes Invitation invitation) { // Relaying logic goes here }Limitations of CDI EventsBut what exactly is the relaying logic that will go in the handleInvitation method above? Can we target specific clients with events? The answer is that we cannot. At least, not with events as we've seen them so far.In my next post, I'll discuss the Errai Message Bus and how it can be used to relay messages to specific clients as well as lots of other neat things. [Less]
|
Posted
over 11 years
ago
by
[email protected] (Max Barkley)
Three months ago I became the Red Hat intern for Errai. Shortly afterwards I embarked on a modest task: to make a demo showing the world how awesome Errai is. I am now happy to present Block Drop, a simple multi-player, Tetris-like web game for the
... [More]
desktop or touch screen browsers.If you're new to Errai, Block Drop is a great example of how Errai can be used to simplify the task of making rich and interactive web applications. In particular, Block Drop made use of the following elements of Errai:
CDI Events
Message Bus
Errai UI
Data Binding
In this post I will cover some basic use cases of CDI Events with examples from Block Drop. (Note that code snippets below may be slightly modified for readability and clarity. You can check out the full source here.)CDI EventsMaking a Simple Game LobbyIn Block Drop players must log into a lobby page before they can begin playing. From this page we want players to be able to do the following tasks:
See other idle players
See current games being played
Start new games, possibly inviting other players to them
Join currently existing games
Furthermore, the lobby state will frequently be changing, and we want all clients to have up-to-date information.
CDI Events to the Rescue
In order to satisfy (1) and (2) above, we need a way to broadcast a list of players and a list of games to all connected clients. Thankfully this task is a piece of cake with Errai. First we need an object to store the information we need for transit. For the sake of simplicity, I have chosen to send the entire lobby state on each update, but in a real-world application one might prefer to send an incremental update.
/** * A portable bean for transmitting lists of players in lobby and games in progress. */ @Portable public class LobbyUpdate { /** A map player ids to Player objects (of players in lobby). */ private Map playerMap = null; /** A map of game ids to Game objects (of games in progress). */ private Map gameMap = null; /** * Construct a LobbyUpdate instance. * * @param playerMap * A map of player ids to players, for all the players in the lobby. * * @param gameMap * A map of game ids to games, for all the currently in progress games. */ public LobbyUpdate(Map players, Map games) { this.playerMap = players; this.gameMap = games; } // Getters and setters omittedLike the name suggests, a LobbyUpdate object exists for the sole purpose of transmitting information about the state of the lobby. You'll notice that:
playerMap contains the idle players
gameMap contains the current games
Both of these fields have getters and setters (omitted here for brevity)
The class is annotated with @Portable
The Portable annotation is what will allow us to send and receive this object over the network. What we need next is way to send LobbyUpdates to clients. Since we want to broadcast this update to all clients indiscriminately, we'll use a CDI Event.In it's simplest case, a CDI Event in Errai is a simple way for a server to send an object to all of the connected clients. By using an Event object, we will be able to fire LobbyUpdate objects to all clients with one simple command. /** Used for sending lobby updates to clients. */ @Inject private Event lobbyUpdate; /** * Fire an LobbyUpdate to connected clients. This should result in clients * refreshing their lobby lists. */ public void sendLobbyList() { lobbyUpdate.fire(new LobbyUpdate(lobbyPlayers, games)); }The above is an excerpt from the game's Server class. The private field, lobbyUpdate, is the Event object used in the method sendLobbyList to transmit LobbyUpdates. The @Inject annotation tells Errai to assign an event to the lobbyUpdate field when the server is started.So what happens when this event is sent to the clients? On the client side we need tell the clients to observe LobbyUpdate. So in the Lobby class we add the following method. /** * Update the lobby list model and display with newest lobby update from the server. */ public void updateLobby(@Observes LobbyUpdate update) { // Updating logic goes here }The @Observes tells the framework that this method should be called when an Event containing a LobbyUpdate is received. And that's all it takes to transmit the state of the lobby.CDI Events from the ClientTo go about task (3), we need to send an invitation from one client to a subset of the other connected clients. From the previous code examples, you might be expecting something like this:@Override public void onClick(ClickEvent event) { Invitation invite = new Invitation(); // Invitation setup logic goes here... gameInvitation.fire(invite); }This click handler is called in the lobby when a user presses the "New Game" button. The Invitation object is a @Portable class with setters and getters as its only methods, much like the LobbyUpdate class shown previously. On the last line, the event is fired using gameInvitation, an EventThis is a good start, but the only hiccup is that a CDI Event fired from a client will only go to the server. So we'll need a method to catch and relay this event at the server./** * Respond to an invitation by relaying it to the appropriate client. */ public void handleInvitation(@Observes Invitation invitation) { // Relaying logic goes here }Limitations of CDI EventsBut what exactly is the relaying logic that will go in the handleInvitation method above? Can we target specific clients with events? The answer is that we cannot. At least, not with events as we've seen them so far.In my next post, I'll discuss the Errai Message Bus and how it can be used to relay messages to specific clients as well as lots of other neat things. [Less]
|
Posted
over 11 years
ago
by
[email protected] (mbarkley)
Three months ago I became the Red Hat intern for Errai. Shortly afterwards I embarked on a modest task: to make a demo showing the world how awesome Errai is. I am now happy to present Block Drop, a simple multi-player, Tetris-like web game for the
... [More]
desktop or touch screen browsers.If you're new to Errai, Block Drop is a great example of how Errai can be used to simplify the task of making rich and interactive web applications. In particular, Block Drop made use of the following elements of Errai:CDI EventsMessage BusErrai UIData BindingIn this post I will cover some basic use cases of CDI Events with examples from Block Drop. (Note that code snippets below may be slightly modified for readability and clarity. You can check out the full source here.)CDI EventsMaking a Simple Game LobbyIn Block Drop players must log into a lobby page before they can begin playing. From this page we want players to be able to do the following tasks:See other idle playersSee current games being playedStart new games, possibly inviting other players to themJoin currently existing gamesFurthermore, the lobby state will frequently be changing, and we want all clients to have up-to-date information.CDI Events to the RescueIn order to satisfy (1) and (2) above, we need a way to broadcast a list of players and a list of games to all connected clients. Thankfully this task is a piece of cake with Errai. First we need an object to store the information we need for transit. For the sake of simplicity, I have chosen to send the entire lobby state on each update, but in a real-world application one might prefer to send an incremental update./** * A portable bean for transmitting lists of players in lobby and games in progress. */ @Portable public class LobbyUpdate { /** A map player ids to Player objects (of players in lobby). */ private Map<Integer, Player> playerMap = null; /** A map of game ids to Game objects (of games in progress). */ private Map<Integer, GameRoom> gameMap = null; /** * Construct a LobbyUpdate instance. * * @param playerMap * A map of player ids to players, for all the players in the lobby. * * @param gameMap * A map of game ids to games, for all the currently in progress games. */ public LobbyUpdate(Map<Integer, Player> players, Map<Integer, GameRoom> games) { this.playerMap = players; this.gameMap = games; } // Getters and setters omittedLike the name suggests, a LobbyUpdate object exists for the sole purpose of transmitting information about the state of the lobby. You'll notice that:playerMap contains the idle playersgameMap contains the current gamesBoth of these fields have getters and setters (omitted here for brevity)The class is annotated with @PortableThe Portable annotation is what will allow us to send and receive this object over the network. What we need next is way to send LobbyUpdates to clients. Since we want to broadcast this update to all clients indiscriminately, we'll use a CDI Event.In it's simplest case, a CDI Event in Errai is a simple way for a server to send an object to all of the connected clients. By using an Event object, we will be able to fire LobbyUpdate objects to all clients with one simple command. /** Used for sending lobby updates to clients. */ @Inject private Event<LobbyUpdate> lobbyUpdate; /** * Fire an LobbyUpdate to connected clients. This should result in clients * refreshing their lobby lists. */ public void sendLobbyList() { lobbyUpdate.fire(new LobbyUpdate(lobbyPlayers, games)); }The above is an excerpt from the game's Server class. The private field, lobbyUpdate, is the Event object used in the method sendLobbyList to transmit LobbyUpdates. The @Inject annotation tells Errai to assign an event to the lobbyUpdate field when the server is started.So what happens when this event is sent to the clients? On the client side we need tell the clients to observe LobbyUpdate. So in the Lobby class we add the following method. /** * Update the lobby list model and display with newest lobby update from the server. */ public void updateLobby(@Observes LobbyUpdate update) { // Updating logic goes here }The @Observes tells the framework that this method should be called when an Event containing a LobbyUpdate is received. And that's all it takes to transmit the state of the lobby.CDI Events from the ClientTo go about task (3), we need to send an invitation from one client to a subset of the other connected clients. From the previous code examples, you might be expecting something like this:@Override public void onClick(ClickEvent event) { Invitation invite = new Invitation(); // Invitation setup logic goes here... gameInvitation.fire(invite); }This click handler is called in the lobby when a user presses the "New Game" button. The Invitation object is a @Portable class with setters and getters as its only methods, much like the LobbyUpdate class shown previously. On the last line, the event is fired using gameInvitation, an Event object, which was created using the @Inject annotation as in the previous example.This is a good start, but the only hiccup is that a CDI Event fired from a client will only go to the server. So we'll need a method to catch and relay this event at the server./** * Respond to an invitation by relaying it to the appropriate client. */ public void handleInvitation(@Observes Invitation invitation) { // Relaying logic goes here }Limitations of CDI EventsBut what exactly is the relaying logic that will go in the handleInvitation method above? Can we target specific clients with events? The answer is that we cannot. At least, not with events as we've seen them so far.In my next post, I'll discuss the Errai Message Bus and how it can be used to relay messages to specific clients as well as lots of other neat things. [Less]
|
Posted
over 11 years
ago
by
[email protected] (Erik Jan de Wit)
As you may know, GWT supports some cool CSS tools. They have extended CSS and made it all more dynamic, that way your css can be more compact and GWT will create a permutation of your css just as it does for your Javascript. Now in Errai, we have
... [More]
our own approach to building user interfaces based on plain HTML5 templates. These templates can come directly from your designer our brand team. So supporting some of that dynamic behaviour is not feasible as we would loose the ability to directly preview the templates in the browser without first running them through a template engine. But, GWT is not the only dynamic CSS language. That is why we added support for LESS. It's already used by web designers, so they are familiar with it. You can convert it using javascript so that it you can still look at your templates in a browser. On top of that Errai will find all the LESS stylesheets in your project and convert them to CSS automatically and with this generated CSS it will perform some optimizations:OptimizationsBasic minification.div { /* This is the default background color */ background: blue;}.empty {}Would generate: .div{background:blue;}Selector merging.div {prop: value;}.div {foo: bar;}Is converted into: .div {prop:value;foo:bar;} Property merging.a {background: blue;}.b {background: blue;}would give .a,.b{background:blue;}Finally the last thing it does is obfuscating the class selectors. For that to work it will go through your templates and find where these selectors are used and change them. To be able to use your CSS classes in your Java code, there is a utility that you can inject to access the selectors. public class MyComponent extends Component { @Inject private LessStyle lessStyle;... @PostCreate private void init() { textBox.setStyleName(lessStyle.get("input")); }}Errai will also inject this generated stylesheet into the head of your page. So, to use this, all you have to do is put a LESS file in your classpath and in true Errai fashion it will do the rest for you. This is available in the latest 3.0-SNAPSHOTs and 2.4-SNAPSHOTs. Give it a spin and let us know what you think. What we could do next is automatically add variables to your LESS stylesheet so that you can have logic based on browser for instance. [Less]
|
Posted
over 11 years
ago
by
[email protected] (Erik Jan de Wit)
As you may know, GWT supports some cool CSS tools. They have extended CSS and made it all more dynamic, that way your css can be more compact and GWT will create a permutation of your css just as it does for your Javascript. Now in Errai, we have
... [More]
our own approach to building user interfaces based on plain HTML5 templates. These templates can come directly from your designer our brand team. So supporting some of that dynamic behaviour is not feasible as we would loose the ability to directly preview the templates in the browser without first running them through a template engine. But, GWT is not the only dynamic CSS language. That is why we added support for LESS. It's already used by web designers, so they are familiar with it. You can convert it using javascript so that it you can still look at your templates in a browser. On top of that Errai will find all the LESS stylesheets in your project and convert them to CSS automatically and with this generated CSS it will perform some optimizations:OptimizationsBasic minification.div { /* This is the default background color */ background: blue;}.empty {}Would generate: .div{background:blue;}Selector merging.div {prop: value;}.div {foo: bar;}Is converted into: .div {prop:value;foo:bar;} Property merging.a {background: blue;}.b {background: blue;}would give .a,.b{background:blue;}Finally the last thing it does is obfuscating the class selectors. For that to work it will go through your templates and find where these selectors are used and change them. To be able to use your CSS classes in your Java code, there is a utility that you can inject to access the selectors. public class MyComponent extends Component { @Inject private LessStyle lessStyle;... @PostCreate private void init() { textBox.setStyleName(lessStyle.get("input")); }}Errai will also inject this generated stylesheet into the head of your page. So, to use this, all you have to do is put a LESS file in your classpath and in true Errai fashion it will do the rest for you. This is available in the latest 3.0-SNAPSHOTs and 2.4-SNAPSHOTs. Give it a spin and let us know what you think. What we could do next is automatically add variables to your LESS stylesheet so that you can have logic based on browser for instance. [Less]
|