{"id":100,"date":"2019-11-17T19:54:01","date_gmt":"2019-11-17T19:54:01","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/microservices\/?p=100"},"modified":"2019-11-17T20:04:09","modified_gmt":"2019-11-17T20:04:09","slug":"cqrs-with-axon-tutorial-part-7-display-data-in-the-grid","status":"publish","type":"post","link":"https:\/\/www.kindsonthegenius.com\/microservices\/cqrs-with-axon-tutorial-part-7-display-data-in-the-grid\/","title":{"rendered":"CQRS With Axon Tutorial: Part 7 \u2013 Display Data in the Grid"},"content":{"rendered":"

In this part, we are going to implement and Grid and populate the grid with data. We would consider the following sub-headings<\/p>\n

    \n
  1. How we would Achieved This<\/a><\/li>\n
  2. Creating the Grid<\/a><\/li>\n
  3. Refresh Grid After Changes<\/a><\/li>\n
  4. Add Grid to Layout<\/a><\/li>\n
  5. Next Steps<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    1. How we would Achieve This<\/strong><\/h5>\n

    We would first create method that returns a grid. Inside this method, we would create a new grid.Then add three columns to the grid. Finally, we set the grid’s data provider property to our data provider.<\/p>\n

    After this, we would go to the init method and create a vertical layout. In this vertical layout, we first add the original command bar(with Command and Issue Panel). The we also add the grid we created.<\/p>\n

     <\/p>\n

    2. Creating the Grid<\/strong><\/h5>\n

    Follow the steps below:<\/p>\n

    Step 1<\/strong>: Create a method named summaryGrid that returns a Grid<CardSummary><\/p>\n

    Step 2<\/strong>: Inside this method, create a new Grid<CardSummary> grid.<\/p>\n

    Step 3:<\/strong> Add three columns to the grid. The column captions are: Id, Initial Balance and Remaining Balance. The syntax for adding\u00a0 columns is given below<\/p>\n

    grid.<\/span>addColumn<\/span>(<\/span>CardSummary:<\/span>:<\/span>getId).<\/span>setCaption<\/span>(<\/span>\"Id\"<\/span>);<\/span>\r\n<\/pre>\n
     <\/p>\n
    Step 4<\/strong>: Set the dataProvider property of the grid to the dataProvider<\/p>\n
    Step 5<\/strong>: Return the grid<\/p>\n
    The complete code for the summaryGrid method is given below:
    \n<\/p>\n
    public<\/span> Grid<<\/span>CardSummary><\/span> summaryGrid<\/span>(){<\/span>\r\n    Grid<<\/span>CardSummary><\/span> grid =<\/span> new<\/span> Grid<<\/span>CardSummary>();\r\n<\/span>    grid.SetSizeFull();<\/span> \r\n    grid.<\/span>addColumn<\/span>(<\/span>CardSummary:<\/span>:<\/span>getId).<\/span>setCaption<\/span>(<\/span>\"Id\"<\/span>);<\/span>\r\n    grid.<\/span>addColumn<\/span>(<\/span>CardSummary:<\/span>:<\/span>getInitialBalance).<\/span>setCaption<\/span>(<\/span>\"Initial Balance\"<\/span>);<\/span>\r\n    grid.<\/span>addColumn<\/span>(<\/span>CardSummary:<\/span>:<\/span>getRemainingBalance).<\/span>setCaption<\/span>(<\/span>\"Remaining Balance\"<\/span>);<\/span>\r\n\r\n    grid.<\/span>setDataProvider<\/span>(<\/span>dataProvider);<\/span>\r\n    return<\/span> grid;<\/span>\r\n}<\/span>\r\n<\/pre>\n
     <\/p>\n
    3. Refresh Grid After Changes<\/strong><\/h5>\n
    Anytime a change is made, whether a GiftCard is issued or redeemed, we need to refresh the grid view. One way to do that is to add a closeListener to the Notification message. So anytime the notification message closes, the grid refreshed<\/p>\n
    To achieve that, follow the steps below:
    \nStep 1:<\/strong> Append the code below to the end of the Notification.show() message<\/p>\n
    .<\/span>addCloseListener<\/span>(<\/span>x -><\/span> dataProvider.<\/span>refreshAll<\/span>());<\/span>\r\n<\/pre>\n
     <\/p>\n
    Step 2:<\/strong> Do the same for the second Notification.show() message.<\/p>\n
     <\/p>\n
    4. Add the Grid to the Layout<\/strong><\/h5>\n
    Take the steps below to add the grid to the\u00a0 layout.<\/p>\n
    Step 1:<\/strong> In the init() method, just before the setContent() line, create a new vertical layout<\/p>\n
    Step 2:<\/strong> Set the size to Full<\/p>\n
    Step 3:<\/strong> Add commands and summaryGrid to the layout using layout.setContent() and passing two arguments<\/p>\n
    Remember commands is a horizontal layout that contains the two panels while summaryGrid is the grid.<\/p>\n
    The complete init method is given below:<\/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> summaryGrid());<\/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>addCloseListener<\/span>(<\/span>x -><\/span> dataProvider.<\/span>refreshAll<\/span>());<\/span>\r\n        }<\/span>\r\n    });<\/span>\r\n}<\/span>\r\n<\/pre>\n
     <\/p>\n
    Step 4<\/strong>: Run the application and test it by issuing and redeeming some cards. Then check that the history appears in the grid below. The output is shown below:<\/p>\n
    \"GiftCard<\/a>
    GiftCard GUI final Output<\/figcaption><\/figure>\n
     <\/p>\n
    5. Next Steps<\/strong><\/h5>\n
    Now we have out application running on our local machine. Of course, it’s still a monolithic application.<\/p>\n
    So next we would split this application into microservices using spring profiles<\/p>\n
    Then we use AxonHub to connect the various microservices. Finally, we deploy to kubernetes cluster in Google cloud. So we have more interesting things to to. However if you have gotten to this point successfully, big thumbs up to you!<\/p>\n","protected":false},"excerpt":{"rendered":"
    In this part, we are going to implement and Grid and populate the grid with data. We would consider the following sub-headings How we would … <\/p>\n","protected":false},"author":1,"featured_media":102,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,27],"tags":[],"class_list":["post-100","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-axon","category-axonframework"],"_links":{"self":[{"href":"https:\/\/www.kindsonthegenius.com\/microservices\/wp-json\/wp\/v2\/posts\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kindsonthegenius.com\/microservices\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kindsonthegenius.com\/microservices\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/microservices\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/microservices\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":4,"href":"https:\/\/www.kindsonthegenius.com\/microservices\/wp-json\/wp\/v2\/posts\/100\/revisions"}],"predecessor-version":[{"id":106,"href":"https:\/\/www.kindsonthegenius.com\/microservices\/wp-json\/wp\/v2\/posts\/100\/revisions\/106"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/microservices\/wp-json\/wp\/v2\/media\/102"}],"wp:attachment":[{"href":"https:\/\/www.kindsonthegenius.com\/microservices\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/microservices\/wp-json\/wp\/v2\/categories?post=100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/microservices\/wp-json\/wp\/v2\/tags?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}