JRebel How-to: Using JRebel with Eclipse and GWT

JRebel Tutorial: Using JRebel in Eclipse with Google App Engine and GWT

In this tutorial you will learn how to install, configure and use JRebel in Eclipse with Google App Engine and GWT.

1. Installation
2. Sample Project: StockWatcher
3. JRebel in Action

Installation

GWT Tools

1. Install the proper version of the Google Plugin and GWT Tooling for your version of Eclipse through the Eclipse Marketplace.

JRebel

2. Open up your Eclipse Marketplace. JRebel should be listed in the Featured section, but if you don't see it type "jrebel" in the search box.

3. Click Install.
4. Navigate through the rest of the installation instructions.
5. Read and agree to the license agreement.

Once the installation is complete, restart the IDE in order for the changes to take effect.

After you restart the IDE, if you do now have JRebel license yet, the plugin will notify you about this sad fact and ask for registration. Click on the link in the red pop-up and proceed with the license setup.

Please see the reference manual for the license activation options.

Sample Project: StockWatcher

You can install the sample StockWatcher application using this link:

http://code.google.com/p/google-web-toolkit/downloads/detail?name=Tutorial-GettingStarted-2.1.zip

After installing the zip file, extract the contents to the location of your choice and navigate back into Eclipse.  In your Eclipse toolbar, you should see a small circular Google icon - click it and select "Import App Engine Sample Apps..." in the drop down menu.  In the "Select root directory:" navigate to the location of your new StockWatcher directory.

JRebel Configuration

Apply JRebel Configuration to Project

To configure project to work with JRebel:

1. Open JRebel Config Center (Help -> JRebel Config Center)
2. Click on the box next to StockWatcher to add JRebel nature

Adding JRebel nature to the project will automatically generate rebel.xml configuration file and add it to the project. See reference manual for more information about the configuration file.

You can also configure JRebel to work with the project by right clicking on the project itself, scrolling down to the JRebel tab and clicking “Add JRebel Nature”.

Server Configuration

Now that your application is configured, you need to configure your server.  The easiest way to do this is to just run your application.

1. Right click on your project and select Run As -> Web Application in the drop down menu.

2. Click "Launch with JRebel Agent" when the following pop-up appears.

JRebel in Action

One you start the server with JRebel agent enabled, you should see JRebel specific messages:

This is the JRebel Welcome Banner.  It details the version of JRebel you are currently using, whether there is an update, the kind of license you are using, how long until it expires, disabled plugins etc.

You will also see JRebel log messages showing what specific directories JRebel is monitoring, listed in rebel.xml configuration file.

Now let’s make some changes!

This is the unmodified home screen of the StockWatcher application.  I added the "A" stock.  As you can see, the table currently displays the Symbol, Price, Change, and a Remove button.

Adding a new working column (1a and 1b):

Adding the Number of Changes column (1a):

1. Open the StockWatcher.java file (this is where we will be making all of our changes).
2. Add “stocksFlexTable.setText(0, 4, “Number of Changes”);” to the onModuleLoad() method.

3. Add “stocksFlexTable.getCellFormatter().addStyleName(0, 4, “watchLIstNumericColumn”); to the onModuleLoad() method.

4. Add “stocksFlexTable.getCellFormatter().addStyleName(row, 4, “watchListNumericColumn);” to the onModuleLoad() method.

5. Save and you should see the following in your log file. This is JRebel reloading the StockWatcher classes.

6. Refresh the browser and you should see our new Number of Changes column appear:

7. Now add the “A” stock again and you should see that while we do have the new Number of Changes column, it is empty:

Populating the Number of Changes column with a counter (1b):

9. We have our column, now let's populate it with a counter!  Every time the price updates we want the counter to increase by 1 for each stock.

10. Add the “private ArrayList counter = new ArrayList();” field to the StockWatcher.java class.
    1. This new field will keep track of the counter for each Stock.

11. Add “counter.add(0);” to the addStock() method.
    1. Starts the counter at 0 for each Stock.

12. In the onClick(ClickEvent event) event handler in the addStock() method, add counter.remove(removedIndex).
    1. Removes the counter associated with each removed Stock.

13. In the updateTable(StockPrice[] prices) method:
    1. Add “int temp = counter.get(i);”
    2. Add “int temp = counter.get(i);”
    3. Add “temp++;”
    4. Add “counter.set(i, temp);”
       1. Adds one to the current counter for each Stock
    5. Replace the current “updateTable(prices[i])” method call with “updateTable(prices[i], temp);”
       1. Passes the Stock and counter for each Stock to the updateTable(StockPrice price) method.

14. Add the “Integer counter“ parameter to the updateTable(StockPrice price) method so it reads as updateTable(StockPrice price, Integer counter).

15. In the updateTable(StockPrice price, Integer counter) method:
    1. Add “String changeCounter = NumberFormat.getFormat(“###”).format(counter);”
    2. Add “stocksFlexTable.setText(row, 4, changeCounter);”
       1. Formats the counter text properly.

16. Save and refresh the browser.
    1. Now add the "A" stock again and you'll see that our new counter is working properly!

Adding a separate remove button (2):

17. First let’s add the necessary fields to create our text box and the new Remove button:
    1. Add “private HorizontalPanel addRemovePanel = new HorizontalPanel();”
    2. Add “private TextBox removeSymbolTextBox = new TextBox();”
    3. Add “private Button removeStockButton = new Button(“Remove”);”

18. To assemble the new panel in the onModuleLoad() method:
    1. Add “addRemovePanel.add(removeSymbolTextBox);”
    2. Add “addRemovePanel.add(removeStockButton);”
    3. Add “addRemovePanel.addStyleName(“addPanel”);”

19. In the onModuleLoad() method add “mainPanel.add(addRemovePanel);”
    1. Adds the new panel to the main panel.

20. Add a clickHandler to the onModuleLoad() method:
    1. Removes the Stock inputted in the Text Box.

21. Save and the following will appear in the log:

22. Refresh your application and add “A”, “B” and “C” Stocks.

23. Now type “B” into the remove Text Box and click the Remove button: