In this lesson you learn how to use a GWT RequestBuilder object to make an asynchonous web service call and test if you are receiving a response. Kyle demonstrates how to use GWT.log() statements to test if the call succeeds or fails.
- [Instructor] Now we're ready to deal with the onSuccess method. Now, onSuccess will only fire when the web service completes, but it's not always true that the result is going to have data. So it's always good practice to check that the result is not null. In the exercise files, you'll find all of this code ready for you to view. I've commented out all of the actual programmatic code in the essence of time, so that, as we walk through it, I'll explain what it does and un-comment it as we go along, like for this if statement.
We're going to check if the result is null. I'm going to log result was null with the GWT.log method, and then just return, because we can't process nothing. Moving on, we can assume that the data or result is not null. We'd want to save the response, so if we hit the web service, and then we go back to the browser, take a look at what the web service responds with. It has three variables, the base, the date, and the rates JSON object.
What I did next was loop through all of the rates and assign each rate to the list box in our template.xml file. As you can see here, we have two list boxes, one called secondRateList and another called primaryRateList. And, right now, we have some hard-coded values. Four items in the first rate list, and three items in the second rate list. I don't want these values to be hard-coded, I want them to be dynamic, based on the response from the web service.
The JSONObject class refers to these names as keys, and all of these names as a collective keyset. So in this enhanced for, we grab the keyset by saying rates.keySet and then loop through them, assigning each one individually as the rate. Then, for each of those list boxes, we add the item of that rate. So, if we loop through them, for each list box, we'll add the individual rate.
And just to take a look at how this is working, before we continue with the rest of the code, I'll un-comment the end of the for loop on line 69, save it, and check it out in the browser by refreshing our application. Well, I didn't expect to see that. Let's go back and look at the console to see what's going on. Looks like we have an error on line 29, and the error says "no source code is available for the type JSOnObject.
Did you forget to inherit a required module?" Let's go to line 29. Line 29 seems pretty harmless. I'm declaring a rate variable of type JSONObject, and I've imported the JSONObject class, but what's helpful with the error is that it says "did you forget to inherit a required module?" Modules are inherited in the GWT application configuration file, right here in the root package.
If we open up this configuration file, you'll see that we are already inheriting the user module. But there is an area, here on line 22, where it says you can inherit other modules. Now this was a pretty good error message because it prompted us with the question, really suggestion, on "hey, do you need to inherit another module?" Which reminds me that the GWT project comes with the user module by default, which, as you can see from the comment, inherits your Web Toolkit stuff, but there are other modules available that might be necessary for your application, but are not inherited by default, because not all applications require them.
One of them is the JSONModule. It's required when you're creating and parsing JSONObjects, and that's exactly what we're doing. We just forgot to include it. You may also be parsing XML files, and, in that case, you'd have to include the XML module. Or you might be doing low level HTTP communications where you'd have to include the HTTP module. So let's go ahead and include it now, with inherits and specify the name of the module, which'll be com.google.gwt.json.JSON and hit Save.
I'll bet now when we return to our browser, and refresh it, we should eliminate that error. Voila, there you go. Now, when we click on the dropdown list, we should see all of the rates returned from the web service. Yeah, there they are. They're alongside all our hard-coded rates, but that's okay, I'll take those out in a second. Now they should be in the first dropdown list, and they should be in the second, and they are.
We also still have some hard-coded values for the text boxes, but we'll deal with that in a minute. But first, let's go to our template and remove those hard-coded rates. Now, like I said, we still have a hard-coded amount in our primary amount so I'm going to take that out now. I'll also take out the second amount, which is hard-coded, and hit save. We want to populate those amounts automatically, and programmatically.
So let's go back to the converter owner class, scroll down to our other commented code, and pick up on line 70. So, on line 70 and 71, we have the primary amount, which is the text field, being set to the value of one. Now this is done programmatically, and I'm sending it to a default value of one because, when the page loads, we need it to say something, and what I want this page to look like is to say one USD is equivalent to .95 Euros by default.
Then the user will be able to make changes. So, in our code, I'm setting the primary amount programmatically to a default value of one. It's not hard-coded in the template. On line 72, we're actually inserting an item. We're inserting the item which is the base rate. The reason I'm doing this is, if we go back to the application, let's refresh since we took out those hard-coded rates. Notice we also took out the hard-coded values, but, in the dropdown, you actually don't see the Euro rate.
And that's because, in the web service, Euro is the base and the other rates don't include the Euro. So, in our code, I'm adding back the base, into position zero. So let's see what that looks like, I'll save the file, go back to the application, hit Refresh again. There we're setting the text to one programmatically, and it should say Euro, but let's just verify Euro has been added back.
Yes, the base has been added back to the list, but it's still set to the previous index. We go back to the code, that's what I'm doing on line 74. Resetting the index to point to the first position, that way it'll always say one Euro. Let's go back to the application, and refresh. It should say one Euro, and now it does. Now I'd mentioned before, I wanted to say one Euro is equal to, whatever the amount is USD, so I need to set this index to be the USD rate.
Now the problem is you don't know what index USD is at automatically, so we'd actually need to calculate that. So on line 63 through 68 is where I do that. I actually check, as we're looping through the rates, to see if the rate we're currently on, is equal to USD, and if it is, then we set it to whatever the iteration of the loop we're on. I've got some errors here because I haven't un-commented our declaration of variables for the US index and iterate it.
Iterate starts at zero, and the US index at negative one. So now, when we hit the USD rate, we'll set the USDIndex to whatever iteration we're on, that way, it's set to the index of the keyset, and then we increment the iterator. Now, if the USDIndex is set and is not negative one, we can set the second rate list to the selected index of whatever the USDIndex is.
Hit save, and let's take a look. So one Euro is, and we still have to calculate what the second amount is, but the second rate is set to USD. You may also notice that, in our second rate list, we're missing the base of Euro. We added it to the first rate list, but we need to add it to the second rate list as well. That's what we do on line 80.
I add the base back to the first position. All that's left now is to calculate that second amount. Once we calculate the second amount, we'll add it to that second amount text box. To calculate the second amount, we'll save it into a double variable called secondAmount. We'll grab the value by accessing our rates, which, if you recall, is our JSONObject, which is a set of name value pairs. We can get the value for the name USD by using the method get.
Then we check if that value is a number. This isNumber method returns a JSON value which we're verifying is actually a JSON number, and if it's not, it'll return null. And then, we can call the doubleValue method for that JSON number which will actually return the value in a double type. And finally, we set the text for that second amount text box by parsing the double amount into a string, and setting it.
Finally, save our work, go back to the browser, and refresh the browser. And there you have it. One Euro is equal to 1.0606 USD. And just to do a quick validation, I've already googled Euro to USD and that's correct. 1 Euro to 1.07, they're obviously rounding up, but that lines up with our little rate converter, but that lines up nicely with our FXRate converter.
In this course, learn how to build high-performance, browser-based apps using GWT. Kyle Gower-Winter introduces you to GWT, explaining the benefits of using this toolkit to build dynamic web pages. To help you practice what you learn, he shows how to build a simple foreign exchange rate application. Plus, Kyle covers managing AJAX events on the client, handling UI action events, debugging code, and more.
- Creating and running a GWT application
- Working with GWT widgets and UiBinder
- Manage AJAX events on the client
- Using a GWT RequestBuilder object
- Debugging in the browser
- Setting breakpoints and inspecting variables
- Running locally in production mode