<\/p>\n
1. The GUI we’ll Build<\/strong><\/h5>\nIt is always good to have a sketch of what you want to achieve when building a GUI. Hence, the figure below shows a simple GUI we would build. It is made up of three components.<\/p>\n
\n- Issue Panel for sending Issue Commands<\/li>\n
- Redeem Panel for sending Redeem Commands<\/li>\n
- Grid to display list of transaction<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.kindsonthegenius.com\/microservices\/wp-content\/uploads\/sites\/18\/2019\/11\/GiftCard-GUI-1024x536.jpg\")
<\/a><\/p>\nSo let’s get started!<\/p>\n
Important<\/strong><\/span>: Make sure that your vaadin version in your pom.xml is 8.4.1<\/p>\nStep 1:<\/strong> Create a java class in the gui package. Name it GiftCardGUI<\/p>\nStep 2:<\/strong> Make this class extend the Vaadin’s UI class<\/p>\nStep 3:<\/strong> Implement the init() method (right-click > generate > implement methods<\/p>\nStep 4:<\/strong> Annotate the class with the @SpringUI annotation<\/p>\n <\/p>\n
2. Add a Command Gateway<\/strong><\/h5>\nA command gateway is used to send commands from the UI to Axon asynchronously. We’ll do this through constructor injection.<\/p>\n
Step 1:<\/strong> Add a private final variable to the class of type CommandGateway<\/p>\nStep 2:<\/strong> Below it, type in the code below: (you can also just click on ‘add constructor parameter’. This displays\u00a0 when you click on the yellow light-bulb that pops up when you hover over the line.<\/p>\n<\/p>\n
public<\/span> GiftCardGUI<\/span>(<\/span>CommandGateway commandGateway)<\/span> {<\/span>\r\n this<\/span>.<\/span>commandGateway<\/span> =<\/span> commandGateway;<\/span>\r\n}<\/span>\r\n<\/pre>\n <\/p>\n
3. Create the Issue and Redeem Panels<\/strong><\/h5>\nStep 1<\/strong>: Copy and paste the code below to create the Issue panel<\/p>\nprivate<\/span> Panel issuePanel<\/span>()<\/span> {<\/span>\r\n \/\/Create the text fields and submit button<\/span>\r\n TextField id =<\/span> new<\/span> TextField(<\/span>\"id\"<\/span>);<\/span>\r\n TextField amount =<\/span> new<\/span> TextField(<\/span>\"amount\"<\/span>);<\/span>\r\n Button submit =<\/span> new<\/span> Button(<\/span>\"Submit\"<\/span>);<\/span>\r\n\r\n \/\/Add listener to the button<\/span>\r\n submit.<\/span>addClickListener<\/span>(<\/span>event -><\/span> {\r\n<\/span> \/\/Create a new IssueCommand using the text inputs<\/span>\r\n IssueCommand cmd =<\/span> new<\/span> IssueCommand(<\/span>\r\n id.<\/span>getValue<\/span>(),<\/span>\r\n Integer.<\/span>parseInt<\/span>(<\/span>amount.<\/span>getValue<\/span>())<\/span>\r\n );<\/span>\r\n\r\n \/\/Sent the command to Axon<\/span>\r\n commandGateway.<\/span>sendAndWait<\/span>(<\/span>cmd);<\/span>\r\n\r\n \/\/Display a success notification<\/span>\r\n Notification.<\/span>show<\/span>(<\/span>\"Success\"<\/span>,<\/span> Notification.<\/span>Type<\/span>.<\/span>HUMANIZED_MESSAGE<\/span>);<\/span>\r\n });<\/span>\r\n\r\n \/\/Create a form and add the textfields and button<\/span>\r\n FormLayout form =<\/span> new<\/span> FormLayout();<\/span>\r\n form.<\/span>setMargin<\/span>(<\/span>true<\/span>);<\/span>\r\n form.<\/span>addComponents<\/span>(<\/span>id,<\/span> amount,<\/span> submit);<\/span>\r\n \r\n \/\/Add the form to the panel<\/span>\r\n Panel panel =<\/span> new<\/span> Panel(<\/span>\"Issue\"<\/span>);<\/span>\r\n panel.<\/span>setContent<\/span>(<\/span>form);<\/span>\r\n\r\n return<\/span> panel;<\/span>\r\n}<\/span>\r\n<\/pre>\n <\/p>\n
Step 2:<\/strong> Copy and paste the code again\u00a0 for the Redeem panel<\/p>\nStep 3:<\/strong> Adjust the content of the second code for the Redeem\u00a0 panel<\/p>\n <\/p>\n
4. Create a Layout in the Init() Method<\/strong><\/h5>\nWe would not create a horizontal layout in the init() method. Then we add the two panels to the layout. Then we also add error handlers.<\/p>\n
@Override<\/span>\r\nprotected<\/span> void<\/span> init<\/span>(<\/span>VaadinRequest vaadinRequest)<\/span> {<\/span>\r\n HorizontalLayout commands =<\/span> new<\/span> HorizontalLayout();<\/span>\r\n commands.<\/span>setSizeFull<\/span>();<\/span>\r\n commands.<\/span>addComponents<\/span>(<\/span>issuePanel(),<\/span> redeemPanel());<\/span>\r\n\r\n VerticalLayout layout =<\/span> new<\/span> VerticalLayout();<\/span>\r\n layout.<\/span>setSizeFull<\/span>();<\/span>\r\n layout.<\/span>addComponents<\/span>(<\/span>commands);<\/span>\r\n\r\n setContent(<\/span>layout);<\/span>\r\n\r\n \/\/Error Handler<\/span>\r\n setErrorHandler(<\/span>new<\/span> DefaultErrorHandler(){<\/span>\r\n @Override<\/span>\r\n public<\/span> void<\/span> error<\/span>(<\/span>com.<\/span>vaadin<\/span>.<\/span>server<\/span>.<\/span>ErrorEvent<\/span> event)<\/span> {<\/span>\r\n Throwable cause =<\/span> event.<\/span>getThrowable<\/span>();<\/span>\r\n while<\/span> (<\/span>cause.<\/span>getCause<\/span>()<\/span> !=<\/span> null<\/span>)<\/span> cause =<\/span> cause.<\/span>getCause<\/span>();<\/span>\r\n Notification.<\/span>show<\/span>(<\/span>cause.<\/span>getMessage<\/span>(),<\/span> Notification.<\/span>Type<\/span>.<\/span>ERROR_MESSAGE<\/span>);<\/span>\r\n }<\/span>\r\n });<\/span>\r\n}<\/span>\r\n<\/pre>\n <\/p>\n
5. Test the Application<\/strong><\/h5>\nBefore you can run the application, you need to first create a run configuration. To do that follow the steps<\/p>\n
Step 1:<\/strong> Click on Run in the Menu. Edit Configuration as shown below<\/p>\n![\"\"](\"https:\/\/www.kindsonthegenius.com\/microservices\/wp-content\/uploads\/sites\/18\/2019\/11\/Edit-Configuration-in-IntellIj-300x146.jpg\")
<\/a><\/p>\n <\/p>\n
Step 2:<\/strong> In the Run\/Debug Configuration, click on the ‘+’ at the upper left corner. Choose Maven from the list. Then enter the settings as shown below<\/p>\n\n- Name: gcdemo [spring-boot:run]<\/em><\/li>\n
- Command Line: spring-boot:run<\/em><\/li>\n<\/ul>\n
The complete setting is shown below<\/p>\n
![\"\"](\"https:\/\/www.kindsonthegenius.com\/microservices\/wp-content\/uploads\/sites\/18\/2019\/11\/Run-and-Debug-Configuration.jpg\")
<\/a><\/p>\n <\/p>\n
Step 3:<\/strong> Click on Ok<\/p>\nStep 4<\/strong>: Run the application by clicking on the Run button<\/p>\nStep 5:<\/strong> Go to http:\/\/localhost:8080<\/a>. You will see the GUI displayed as shown below<\/p>\n![\"\"](\"https:\/\/www.kindsonthegenius.com\/microservices\/wp-content\/uploads\/sites\/18\/2019\/11\/Gui-for-Giftcard-1024x554.jpg\")
<\/a><\/p>\nStep 5:<\/strong> Issue and redeem a few giftcards to make sure it works<\/p>\nStep 6:<\/strong> Start the Axon Server. See Part 1 for how to start the Axon Server<\/a><\/p>\nThe axon server Dashboard is shown below. You can see that our GiftCard application is running as an instance as shown below.<\/p>\n
So let’s get started!<\/p>\n Important<\/strong><\/span>: Make sure that your vaadin version in your pom.xml is 8.4.1<\/p>\n Step 1:<\/strong> Create a java class in the gui package. Name it GiftCardGUI<\/p>\n Step 2:<\/strong> Make this class extend the Vaadin’s UI class<\/p>\n Step 3:<\/strong> Implement the init() method (right-click > generate > implement methods<\/p>\n Step 4:<\/strong> Annotate the class with the @SpringUI annotation<\/p>\n <\/p>\n A command gateway is used to send commands from the UI to Axon asynchronously. We’ll do this through constructor injection.<\/p>\n Step 1:<\/strong> Add a private final variable to the class of type CommandGateway<\/p>\n Step 2:<\/strong> Below it, type in the code below: (you can also just click on ‘add constructor parameter’. This displays\u00a0 when you click on the yellow light-bulb that pops up when you hover over the line.<\/p>\n <\/p>\n <\/p>\n Step 1<\/strong>: Copy and paste the code below to create the Issue panel<\/p>\n <\/p>\n Step 2:<\/strong> Copy and paste the code again\u00a0 for the Redeem panel<\/p>\n Step 3:<\/strong> Adjust the content of the second code for the Redeem\u00a0 panel<\/p>\n <\/p>\n We would not create a horizontal layout in the init() method. Then we add the two panels to the layout. Then we also add error handlers.<\/p>\n <\/p>\n Before you can run the application, you need to first create a run configuration. To do that follow the steps<\/p>\n Step 1:<\/strong> Click on Run in the Menu. Edit Configuration as shown below<\/p>\n <\/p>\n Step 2:<\/strong> In the Run\/Debug Configuration, click on the ‘+’ at the upper left corner. Choose Maven from the list. Then enter the settings as shown below<\/p>\n The complete setting is shown below<\/p>\n <\/p>\n Step 3:<\/strong> Click on Ok<\/p>\n Step 4<\/strong>: Run the application by clicking on the Run button<\/p>\n Step 5:<\/strong> Go to http:\/\/localhost:8080<\/a>. You will see the GUI displayed as shown below<\/p>\n Step 5:<\/strong> Issue and redeem a few giftcards to make sure it works<\/p>\n Step 6:<\/strong> Start the Axon Server. See Part 1 for how to start the Axon Server<\/a><\/p>\n The axon server Dashboard is shown below. You can see that our GiftCard application is running as an instance as shown below.<\/p>\n<\/a><\/p>\n2. Add a Command Gateway<\/strong><\/h5>\n
public<\/span> GiftCardGUI<\/span>(<\/span>CommandGateway commandGateway)<\/span> {<\/span>\r\n this<\/span>.<\/span>commandGateway<\/span> =<\/span> commandGateway;<\/span>\r\n}<\/span>\r\n<\/pre>\n3. Create the Issue and Redeem Panels<\/strong><\/h5>\n
private<\/span> Panel issuePanel<\/span>()<\/span> {<\/span>\r\n \/\/Create the text fields and submit button<\/span>\r\n TextField id =<\/span> new<\/span> TextField(<\/span>\"id\"<\/span>);<\/span>\r\n TextField amount =<\/span> new<\/span> TextField(<\/span>\"amount\"<\/span>);<\/span>\r\n Button submit =<\/span> new<\/span> Button(<\/span>\"Submit\"<\/span>);<\/span>\r\n\r\n \/\/Add listener to the button<\/span>\r\n submit.<\/span>addClickListener<\/span>(<\/span>event -><\/span> {\r\n<\/span> \/\/Create a new IssueCommand using the text inputs<\/span>\r\n IssueCommand cmd =<\/span> new<\/span> IssueCommand(<\/span>\r\n id.<\/span>getValue<\/span>(),<\/span>\r\n Integer.<\/span>parseInt<\/span>(<\/span>amount.<\/span>getValue<\/span>())<\/span>\r\n );<\/span>\r\n\r\n \/\/Sent the command to Axon<\/span>\r\n commandGateway.<\/span>sendAndWait<\/span>(<\/span>cmd);<\/span>\r\n\r\n \/\/Display a success notification<\/span>\r\n Notification.<\/span>show<\/span>(<\/span>\"Success\"<\/span>,<\/span> Notification.<\/span>Type<\/span>.<\/span>HUMANIZED_MESSAGE<\/span>);<\/span>\r\n });<\/span>\r\n\r\n \/\/Create a form and add the textfields and button<\/span>\r\n FormLayout form =<\/span> new<\/span> FormLayout();<\/span>\r\n form.<\/span>setMargin<\/span>(<\/span>true<\/span>);<\/span>\r\n form.<\/span>addComponents<\/span>(<\/span>id,<\/span> amount,<\/span> submit);<\/span>\r\n \r\n \/\/Add the form to the panel<\/span>\r\n Panel panel =<\/span> new<\/span> Panel(<\/span>\"Issue\"<\/span>);<\/span>\r\n panel.<\/span>setContent<\/span>(<\/span>form);<\/span>\r\n\r\n return<\/span> panel;<\/span>\r\n}<\/span>\r\n<\/pre>\n4. Create a Layout in the Init() Method<\/strong><\/h5>\n
@Override<\/span>\r\nprotected<\/span> void<\/span> init<\/span>(<\/span>VaadinRequest vaadinRequest)<\/span> {<\/span>\r\n HorizontalLayout commands =<\/span> new<\/span> HorizontalLayout();<\/span>\r\n commands.<\/span>setSizeFull<\/span>();<\/span>\r\n commands.<\/span>addComponents<\/span>(<\/span>issuePanel(),<\/span> redeemPanel());<\/span>\r\n\r\n VerticalLayout layout =<\/span> new<\/span> VerticalLayout();<\/span>\r\n layout.<\/span>setSizeFull<\/span>();<\/span>\r\n layout.<\/span>addComponents<\/span>(<\/span>commands);<\/span>\r\n\r\n setContent(<\/span>layout);<\/span>\r\n\r\n \/\/Error Handler<\/span>\r\n setErrorHandler(<\/span>new<\/span> DefaultErrorHandler(){<\/span>\r\n @Override<\/span>\r\n public<\/span> void<\/span> error<\/span>(<\/span>com.<\/span>vaadin<\/span>.<\/span>server<\/span>.<\/span>ErrorEvent<\/span> event)<\/span> {<\/span>\r\n Throwable cause =<\/span> event.<\/span>getThrowable<\/span>();<\/span>\r\n while<\/span> (<\/span>cause.<\/span>getCause<\/span>()<\/span> !=<\/span> null<\/span>)<\/span> cause =<\/span> cause.<\/span>getCause<\/span>();<\/span>\r\n Notification.<\/span>show<\/span>(<\/span>cause.<\/span>getMessage<\/span>(),<\/span> Notification.<\/span>Type<\/span>.<\/span>ERROR_MESSAGE<\/span>);<\/span>\r\n }<\/span>\r\n });<\/span>\r\n}<\/span>\r\n<\/pre>\n5. Test the Application<\/strong><\/h5>\n
<\/a><\/p>\n\n
<\/a><\/p>\n<\/a><\/p>\n
![\"\"](\"https:\/\/www.kindsonthegenius.com\/microservices\/wp-content\/uploads\/sites\/18\/2019\/11\/GiftCard-Axon-Dashboard.jpg\")
<\/a><\/p>\n