Manage the AJAX Response: Set default data

- [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. All I care about is storing what the base is, and what the rates are. We don't need to store the date. So that's what line 56 does. It takes the base from the result using the getBase method. Now this may look familiar because, remember, we defined an overlay type called FXRates that has a method called getBase. And it returns the JavaScript object's base variable. So we'll use that method to store the base, and I've declared the base as an instance variable up here on line 28. It's an instance variable because we will use it throughout the class, and I do something similar with the rates. It's also an instance variable, but it's of the type JSONObject. If we scroll up and look at this type JSONObject, this is a Java type, part of the GWT package, that will take a JavaScript object, and wrap it and make it look like a native Java type. To use it, you need to import that class, as you see here on line four. One of the handy constructors of the JSONObject, is one that takes in a JavaScript object, and, like I said, wraps it so that it looks like a JSON object, which is a Java type. To check it out, click on JSONObject, and then click F3, to open up that class. Here it is, line 51, where we have a constructor that takes in a JavaScript object. So now we're storing the base, and we're storing the rates. 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. So that's what I'm trying to do with this enhanced for loop. I'm looping through all of the rates. Now the JSONObjectType has a method called keySet. KeySet returns all of the names in that JSONObject. If you're familiar with JSON, you'll know that the JSON or JavaScript Object notation is just a set of names and values. If we look at the response, in this JSONObject, you have all of the names, which would be the rates, and all of their values, the conversion rates. 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.