So now let's take a look at the code that makes up
the home page for this app. So here's the home page. It
has a couple of buttons, it has the field where you can
enter your name. You can click the buttons and you get the greeting,
and in this case, the greetings are shown just inside an alert
box. Now one thing I want to emphasize is that you can
have the Endpoint APIs and you can use the APIs Explorer even
if your application doesn't have a front end, if it doesn't have a
webpage or anything. If you're just running complete
back end service, you can use API's explorer to
test your API's, but now, onto the front
end. So let's look at the code for index.html.
So first of all, we include the file
hello.js, which includes the JavaScript functions that our web
app's going to use in its front end,
and then, and this is really important, we include
this file, apis.google.com/js/client.js.
This is a file that includes a JavaScript client library. If you don't include
this file, you won't be able to use
end points in your front end. The client libraries
provide the glue that let's your app use
end points. So you will also notice so after
we bring it in when onload successful we
call the init function and this init function actually
defined in hello.js. We'll look at that just a minute.
The rest of this page is not so exciting, we
have a heading, then we have to fill for the
buttons, so this one here is the input_greet_generically and this
one here is input_greet_by_name. We also have the field where
we let the user enter their name, and that's the
name_field, and that's pretty much all this file has. One
thing to note, though, is the onclick of the button
doesn't have a real value. This is actually a
fake value. So when we load the page the
first time, these buttons. Don't have any on-click action
set, and the reason for that is when these
actions are loaded, they're going to need to use
endpoints. They're going to use your endpoint functions, and
your endpoint functions can't be loaded 'til after the
google client library is loaded. So you want to
load the google client library first, and then
you need to initialize some things, and then you
can set the action field buttons. Okay, let's
take a look at hello.js. So up here these
are just some good resources to read, after
the Google Javascript client library has loaded, then this
init function is going to be called, and really all
these does is it loads your hello world end
points APIs. See here this gapi.client.load? This
is calling functions in the Google JavaScript
Client Library to load your endpoint function.
So when you call gapi.client to load your
endpoint functions, you specify the endpoint functions
to load, specify the version, you specify
a callback to call. After your endpoint
functions have loaded, and then you must specify
the rootpath, which is the path to
your endpoints API, and you can construct that
rootpath like this. Just basically, wherever your
app's running, add /_ah/api. Now if you leave
off the rootpath. The load function will work or it will seem to work but
when you go to call your endpoint APIs
the execution calls won't work and that's because
the Google client library will be looking in the Google
public APIs instead of looking at the endpoint APIs for
your app. So do make sure you specify the root
path. Okay, so after we load the hello world endpoints API,
we're going to call the load call back function. Here's the
load call back, very simple, it just enables the buttons.
It might do other things in other apps, but here
all we do is enable the buttons. The enable buttons function
uses straight up Java script to set the actions on
the buttons. So we get the button that you clicked,
greet generically, and we set the on click action to
be the greet generically function, and we change the value
of the button, the label of the button so that
the user knows that it's ready for action, and then
similarly, we get the greet by name button and we
set the action, when it's clicked, to be greet by name,
and again we change the label, and just
a reminder that we enable the buttons here instead
of setting them in index.html because these functions,
greetGenerically and greetByName, won't be active until after the
hello world end point's API's been loaded and
you can't load that till after you've loaded the
JavaScript client library. So you don't want the user
to be clicking on the buttons before everything's ready.
Okay, so more interestingly the greatGenerically function illustrates
how to issue a call to an, to one
of your own endpoint API. So you construct
the request. You need to start with gapi.client. You
specify the endpoints API to call, which in
this case is helloworldendpoints, and then the actual functional
method, which is sayHello. So you construct the
request, and then you execute the request, and that's
all you have to do to issue the call. You also need to specify a callback
to call to process the response when the request is
executed, and similarly, greetByName. Does the same thing. Only here
we get the name out of the name field. We issue the request,
gapi.client.helloworldendpoints.sayHello, and here we do pass
the name to the request, and this is
how you construct parameters to endpoint functions. Specify the
parameter and then the value, and you can add,
if we had more, you can add more here.
So, for example you can add a second arg, arg2 and specify the value to be value
two, and then you execute the request. We're going
to the same callback when our request is successful.
Okay so here's the call back that gets
called when our request is executed successfully and we
process the response and the response is always
passed to the call back. In this case all
we do is throw up a dialogue box,
use the alert function, throw up a dialogue box
and get the message field out of the
response, and going back real quick to the Java.
To the hello class, recall that the hello class has a message field. The
hello will a point API so we defined so far or return a hello class object, so
our responses is going to have a message field. So, now you know how to defined
a point functions in java and how to call them from java script in your UI.