In the first tutorial you saw how two files, an Acre template file and a MQL query file, could be used to create a very simple application. You were also introduced to aspects of the Acre templating language and the Acre API that communicates with the Freebase database.
The usability of this application, however, was very limited, as it was essentially static. While you could change the results displayed within the application by changing the content of the MQL query, it didn't offer any activity to a user, and the display of the results was limited to a simple bullet-point list.
In this tutorial we'll create a more typical Web application, where a user can input a search term into an HTML form and get back not only a list of results, but a display of images associated with the results. This tutorial will also introduce basic logic processing in Acre, interaction with other methods in the Freebase API, and using the Application Editor console to examine the processing of MQL queries.
As you did in the first tutorial, you'll want to clone this application you're currently reading to your own namespace.
<html>
<head>
<title>Album Finder</title>
<style>
li { display:inline-block; width:10em; vertical-align:top; }
i { font-size:80%; }
</style>
</head>
<body>
</body>
</html>
<body></body> tags.
The code below performs the main function of the application. In the first <acre:script> block, the variable name is set. This content of this variable is the result of the acre.environ.params API method processing the artist_name that is sent to it from the form input as a URL parameter. In the sample code, The Beatles is set as a default value.
In the second <acre:script> block, the value of the name variable is used to overwrite the value of "name" in the albums-images query. The value of the query variable is set in the same way it was in the first tutorial, using acre.require, but query.name = name sets the value of the name property in the query variable to the value of the name variable. If you open the albums-images query you can see that it is essentially the same query that was used in the first tutorial, though here "name : "The Police" will be overwritten with whatever the user inputs.
Finally, the response variable is also set in the second <acre:script> block. The code here is similar to the code for the result variable in the first tutorial, but with a small difference. In the first tutorial, we were only interested in the contents of the result property; in this case, because the user could input something that causes the query to fail, we want to capture the entire response in this variable. Specifically, we will want to examine the value of the response.state property in our next step to execute logic that will either display results or an error.
<acre:script>
var name = acre.environ.params.artist_name || 'The Beatles';
</acre:script>
<form action="">
<label>Artist Name: <input type="text" name="artist_name" value="${name}"/></label>
<input type="submit" value="Search Freebase" />
</form>
<acre:script>
var query = acre.require("albums-images").query;
query.name = name;
var response = acre.freebase.MqlRead(query);
</acre:script>
The third section of code in this application uses acre templating attributes that can be appended to HTML tags, text substitution, and calls to the Freebase API image service to display the results of the query, along with links to the individual album topics on Freebase.
There are two response possibilities, ready and fail, with each condition accounted for in a separate <div> section. Each <div> has an Acre templating attribute attached to it to provide logical processing. In the first <div>, acre:if="response.state=='ready'" indicates that if the response state equals ready, then the code within that div should be executed, while the second <div> tag has the acre:else="" attribute that indicates the code following it should be executed if the condition of the first div is not met.
As in the first tutorial, ${name} have $response.result.album.length albums in Freebase and <li acre:for="album in response.result.album"> are used to retrieve the number of results, and display them, respectively. For the display, however, two additional elements have been added. First, <a href="${acre.environ.freebase_service_url}/view${album.id}"> uses text substitution and a call to the Freebase service url method (which generates the freebase.com url), and text substitution with the id of each album retrieved (contained in the results of the MQL query) to generate a URL for the album in Freebase, such as http://freebase.com/view/guid/9202a8c04000641f8000000002f71443 for Help! by The Beatles. A user can now click on that album in the results and be taken directly to that topic in Freebase.
Second, <img src="${acre.environ.freebase_service_url}/api/trans/image_thumb/${album['/common/topic/image'][0].id}" /> uses the same text substitution technique, along with a call to the freebase trans/image_thumb API service, to retrieve the first image associated with an album. Since the image is set up as the anchor for the link above, clicking on the album image will take a user to the Freebase topic, while <div>$album.name</div> displays the name of the album below the image, again using text substitution.
<div acre:if="response.state=='ready'">
${name} have $response.result.album.length albums in Freebase
<i>(Thumbnails generated by the Freebase <a href="http://www.freebase.com/view/guid/9202a8c04000641f8000000006cf560a">image_thumb api</a>)</i>
<ul>
<li acre:for="album in response.result.album">
<a href="${acre.environ.freebase_service_url}/view${album.id}">
<img src="${acre.environ.freebase_service_url}/api/trans/image_thumb/${album['/common/topic/image'][0].id}" />
<div>$album.name</div>
</a>
</li>
</ul>
</div>
<div acre:else="">
<div style="color:red;">Error: ${response.messages[0].message}</div>
Maybe ${name} doesn't have an exact match in Freebase. Try 'The Beatles' or 'The Police'
</div>