Like this article? We recommend
Rendering the Results
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Rendering the Results
To render a web page from the results, we need to start with an HTML file and include the GoogleAPI.js file. Because the GoogleAPI object is self-contained, there are no other files that need to be included, but we do need to create the div element with the gimages id so that the object knows where to write the HTML (Listing 3).
Listing 3—The HTML file is used as the web page where the GoogleAPI object renders the widget (index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Creating a Google Image Widget using the Google Search API</title> <script type="text/javascript" src="assets/js/GoogleAPI.js"></script> <link type="text/css" rel="stylesheet" href="assets/css/googleapi.css" /> </head> <body> <div id="gimages">Loading images...</div> </body> </html>
You’ll also notice that I’ve included a CSS file called googleapi.css. The nice thing about creating a custom widget is that you can create your own HTML layout and use your own CSS for the design.