Getting Started With Google App Script
Written by Mike James   
Monday, 06 August 2012
Article Index
Getting Started With Google App Script
Web Apps
A Gmail Web App

Hola Mundo

The fact that an IDE project doesn't have any UI can be a disadvantage but there are lots of tasks that can be run very easily from the IDE and don't need a UI. IDE projects aren't limited in any way it is just a matter of how you run them.

Notice that we have already encountered one of the supplied objects i.e. Logger and our main task in learning App Script is to discover more.

To give you another example, there is a LanguageApp object which gives you access to Google Translate. To say Hello World in Spanish all you have to do is:

 

function Hello1() {
 var spanish = LanguageApp.translate(
              "Hello World", "en", "es");
 Logger.log(  spanish);
}

 

If you run this and view the Log window you will see

"Hola Mundo"

 

Could programming a translation be any easier?

Notice that an app that you run from the IDE can only be run by you and it behaves as if it was you as far as authorization is concerned.

Web Apps And A UI

If you want a UI you have to build a Web App. 

A web app is basically a web page that you can run using its URL. You can allow other people to run your Web App and you can allow them to run it using their own authorization.

There are two different sorts of UI you can add to a Web App - using the HTML Service or the UI Service.

You can't simply use HTML as you would with client side JavaScript because App Script is run on the server.

The HTML Service allows you to create a client side HTML page and it includes a scripting and a templating facility.

The UI service on the other hand has aspects of a server side UI and is far less familiar to the average JavaScript programmer. It is also client side and not purely HTML technology. JavaScript is used to render the UI on the fly.  It also has an experimental drag-and-drop editor which makes building a UI easier.

So let's take a look at the UI Service.

Using The UI Service

You can start a new Web App project is you want to and this gives you some generated code. However it is just as easy to start from scratch.

The only rule is that a Web App has to have a doGet function that returns a UiInstance object which defines the UI.

So to return to our Hello World example. First change the name of the function to doGet and enter

 

function doGet() {
 var app = UiApp.createApplication();
 var mybutton=app.createButton(
                         'click me');
 app.add(mybutton);     
 return app;
}

Notice that we create a UI and then create and add widgets to it - a single button in this case.

Before you can run a Web App you have to save a version and deploy the app. When you do this you can specify who can access it and what credentials the app uses to run. When you have depolyed the app you will be given a URL which includes a very long code and this is what you use to run the app.

If you run the app as given above you will see just a button. You can click it but, of course nothing happens. If you want to test changes to the code simply make the changes, save the file and refresh the browser. There is no need to re-deploy the web app.

Server Side Event Handlers

What about responding to the button click?

You might think that this is just a matter of adding and event handler as per HTML and DOM but things are a tiny bit more complex. The event has to be a server side event and Google have invented a new way of doing things.

For an example, lets change the text on the button. To do this we need to give the button an id, using setId, so we can retrieve it in the event handler:

function doGet() {
 var app = UiApp.createApplication();
 var mybutton=app.createButton(
                          'click me');
 mybutton.setId('mybutton');
  
 app.add(mybutton);
 var handler = app.createServerHandler(
                                 'onClick');
 mybutton.addClickHandler(handler);
 return app;
}

 

The two lines near the end create the server side handler and add it to the button.

We also need to define the onClick handler and this is also a little different. The most important thing to realize is that this run on the server and the browser doesn't wait for it. That is the event is asynchronous and this can cause unexpected things to happen if the order or execution isn't what you are expecting.

The event handler first retrieves the current app instance - this defines the current UI.

function onClick()
{
  var app = UiApp.getActiveApplication();

 

Now that we have the current UI you can process this more or less like you would the DOM on the client side. For example, to retrieve the button object and change its text you would use:

var button=app.getElementById('mybutton');
button.setText('Hello World');
 

When you have finished modifying the app object you close it to signify that you have finished and return it. The system then uses the returned app object to update the UI.

The complete function is:

function onClick()
{
 var app = UiApp.getActiveApplication();
 var button=app.getElementById(
                            'mybutton');
 button.setText('Hello World');
 app.close();
 return app;
}

 

If you now save the project and refresh the web page you will see the button as before but now when you click it you will see the text change to "Hello World".

What if you want a client side event handler?



Last Updated ( Saturday, 26 January 2013 )
 
 

   
RSS feed of all content
I Programmer - full contents
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.