Google App Engine

Google App Engine
Feedback on this document

Adding the Client UI

In this part of the tutorial, you'll create an index.html page that provides a UI for making two simple GET requests to the backend API and displays the results.

This is what the UI is going to look like:

Hello-Endpoints

where the user specifies a Greeting and presses Submit to retrieve it, or optionally lists all the greetings from the backend API.

Adding a UI using index.html

To add the UI:

1. Create the subdirectory templates in your main project backend API project directory helloendpoints/ and in helloendpoints/templates create a file named index.html.

  1. In index.html, add the following:

    <!DOCTYPE html>
<html>
<head>
    <title>Hello Endpoints!</title>
    <script type="text/javascript" src="/js/base.js"></script>
    <link type="text/css" rel="stylesheet" href="/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }
        blockquote {
            margin-bottom: 10px;
            border-left-color: #bbb;
        }
        form {
            margin-top: 10px;
        }
        .form-signin input[type="text"] {
            font-size: 16px;
            height: auto;
            margin-bottom: 15px;
            padding: 7px 9px;
        }
        .row {
            margin-left: 0px;
            margin-top: 10px;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand" href="#">Hello Endpoints!</a>
        </div>
    </div>
</div>

    where the line <script type="text/javascript" src="/js/base.js"></script> specifies the JavaScript file we're using for this client. (We'll add the javascript file later.)

  2. In that same file, append the following, which adds the UI for a text field and two command buttons:

    <div class="container">

    <div id="outputLog"></div>

    <form action="javascript:void(0);">
        <h2>Get Greeting</h2>
        <div><span style="width: 90px; display: inline-block;">Greeting ID: </span><input id="id" /></div>
        <div><input id="getGreeting" type="submit" class="btn btn-small" value="Submit"></div>
    </form>

    <form action="javascript:void(0);">
        <h2>List Greetings</h2>
        <div><input id="listGreeting" type="submit" class="btn btn-small" value="Submit"></div>
    </form>

    where id is the text field where the user specifies the desired Greeting, and getGreeting is the button that sends the request to the backend API. The listGreeting button gets all the Greeting objects from the backend API.

  3. Finally, in that same file append these lines:

    <script type="text/javascript">
    function init() {
        google.devrel.samples.hello.init('//' + window.location.host + '/_ah/api');
    }
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>

    where we specify the function to be executed on page load. There is nothing special about the name init: you can use any name you want. Just make sure you set onload= to whatever function name you use. Whatever name you give the function, and whatever tasks you perform in this function, there is one requirement for an Endpoints client: you have to load the backend API you wish to use.

    In the above snippet, the actual API loading is delegated to google.devrel.samples.hello.init, which gets the URL of the backend API passed to it, as shown above. Loading the API in the google.devrel.samples.hello.init function will be described in Adding JavaScript.

  4. At this point, your index.html file should look like this:

    <!DOCTYPE html>
<html>
<head>
    <title>Hello Endpoints!</title>
    <script type="text/javascript" src="/js/base.js"></script>
    <link type="text/css" rel="stylesheet" href="/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }
        blockquote {
            margin-bottom: 10px;
            border-left-color: #bbb;
        }
        form {
            margin-top: 10px;
        }
        .form-signin input[type="text"] {
            font-size: 16px;
            height: auto;
            margin-bottom: 15px;
            padding: 7px 9px;
        }
        .row {
            margin-left: 0px;
            margin-top: 10px;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand" href="#">Hello Endpoints!</a>
        </div>
    </div>
</div>
<div class="container">

    <div id="outputLog"></div>

    <form action="javascript:void(0);">
        <h2>Get Greeting</h2>
        <div><span style="width: 90px; display: inline-block;">Greeting ID: </span><input id="id" /></div>
        <div><input id="getGreeting" type="submit" class="btn btn-small" value="Submit"></div>
    </form>

    <form action="javascript:void(0);">
        <h2>List Greetings</h2>
        <div><input id="listGreeting" type="submit" class="btn btn-small" value="Submit"></div>
    </form>
    <script type="text/javascript">
        function init() {
            google.devrel.samples.hello.init('//' + window.location.host + '/_ah/api');
        }
    </script>
    <script src="https://apis.google.com/js/client.js?onload=init"></script>
</div>
</body>
</html>

Next...

Adding JavaScript.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.