- What You Will Learn
- Examples in This Chapter
- 2.1 Exploring the Samples
- 2.2 About You-Your Home Page
- 2.3 Your Keychain and Service Providers
- 2.4 Creating Your First Service: LoanPaymentService
- 2.5 Creating Your First Widget: LoanPaymentWidget
- 2.6 Drafts, Versions, and Timelines
- 2.7 Putting It All Together-Using the WeatherBug API
This chapter is from the book
This chapter is from the book
This chapter is from the book
2.5 Creating Your First Widget: LoanPaymentWidget
Now it’s time to build a widget that uses the previously built LoanPaymentService. Here’s a summary of the steps you’ll follow to build a widget.
- Create a new widget. Give it a name and a description.
- Upload any resources, such as images (optional).
- Include any libraries your widget uses.
- Provide the HTML, CSS, and JavaScript code.
- Use Find & Use to call zembly services from your widget.
- Preview and publish.
- Embed in a web page.
At the top of the page, select 
and then select Widget. zembly pops up a secondary dialog that lets you either select a template for your widget or simply create a blank widget. Select Create a blank widget as shown in Figure 2.31.
)
Figure 2.31 Creating a blank widget
When you create a widget, you have the opportunity to supply three different files. You can also add images (which you’ll do in this example) and include libraries in a separate step. You’ll use (X)HTML for page markup, CSS for style specifications, and JavaScript for program logic. Figure 2.32 shows LoanPaymentWidget, the target widget that you’ll build, running in a browser.
)
Figure 2.32 LoanPaymentWidget running in a browser
This widget includes an image, three input text fields with labels arranged in a table, a Calculate Payment button, and an output field that displays the result returned from the service.
Uploading an Image
To include an image with your widget, you upload it to zembly’s servers. To upload the image, click Browse in the Resources dialog. Navigate and select an image from your file system. After you click Upload, the image appears in the Resources window, as shown in Figure 2.33. Now click on the image to add it to your widget as an <img> tag.
)
Figure 2.33 Uploading images to add to your widget
After selecting the image, the HTML code includes an <img> tag as follows. (Select the (X)HTML tab.)
<img src="${res('house.jpg')}">
You’ll move the <img> tag inside the outermost <div>, as shown in Listing 2.3.
Including Library Prototype JS
From the Resources tab, select Libraries at the bottom. Select Prototype from the list of libraries, as shown in Figure 2.34. Prototype is a general-purpose JavaScript library that includes functions (such as enhanced array iteration) and syntax shortcuts for DOM elements.
)
Figure 2.34 Including the Prototype JavaScript library in your widget
Building LoanPaymentWidget
Listing 2.3 shows the HTML code for this widget. The input elements are organized within a table element to create symmetrical spacing. The <div> tag with id="result-Div" holds the results returned from the LoanPaymentService; the <div> tag with id="errorDiv" holds any returned error messages.
Listing 2.3. LoanPaymentWidget (HTML)
<div id="loanDiv" class="widget">
<img src="${res('house.jpg')}">
<div id="headingDiv" class="heading">
Loan Payment Calculator
</div>
<table>
<tr><td>Principal:</td>
<td>
<input id="principal" type="text" size="20" value="300000">
</td></tr>
<tr><td>Interest:</td>
<td>
<input id="interest" type="text" size="20" value="6.0">
</td></tr>
<tr><td>Term (years):</td>
<td>
<input id="years" type="text" size="20" value="30">
</td></tr>
<tr><td colspan="2">
<div id="calcdiv" class="calc">
<button id="calcButton">Calculate Payment</button>
</div>
</td></tr>
<tr><td colspan="2">
<div id="resultDiv" class="results">
</div>
<div id="errorDiv" class="errorResults">
</div>
</td></tr>
</table>
</div>
Using CSS for Styling
The widget’s CSS file provides style sheets for the widget. Note that there is a separate style for results and errorResults. Here is the CSS code.
Listing 2.4. LoanPaymentWidget (CSS)
div.widget {
background-color: #e6e6ff;
border: 1px solid #aaaaff;
padding: 5px 5px 5px 5px;
font-size: 0.8em;
}
div.heading {
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
div.calc {
margin: 5px;
text-align: center;
}
div.results {
margin: 5px 2px 2px 2px;
padding: 1px 2px 2px 2px;
font-weight: bold;
text-align: center;
}
div.errorResults {
margin: 5px 2px 2px 2px;
padding: 1px 2px 2px 2px;
font-weight: bold;
color: #C61C1C;
text-align: center;
}
Calling LoanPaymentService in Your Widget
zembly makes it easy for you to add code to call services in your widget (this works when building services, too). Open the JavaScript editor for your widget (click the JavaScript tab in the editor zone). Then select the Find & Use tab in the window to the right of the editor zone. You’ll see a Search window. Type in LoanPaymentService and click Search.
Figure 2.35 shows the results (quite a few, as it turns out). Using the avatars as a clue, find the LoanPaymentService near the start of the list. If you click its description, zembly opens the LoanPaymentService page in a new window. You can then study its documentation (or code). To add code to call the service to your widget, simply click Add to editor in the search results window. This will give you the correct calling template as a starting point. You can then edit the JavaScript to specify the parameter values and add the coding logic for your widget.
)
Figure 2.35 Find & Use Search for Services lets you easily add code to your widget
Listing 2.5 shows the JavaScript that calls LoanPaymentService using the three input values. Prototype’s Event.observe function connects the calcButton click event to the handler.
After obtaining the principal, interest, and years input from the user, you pass these parameters to the LoanPaymentService. The return value is in data, which you prepend with a dollar sign ($) (for a successful payment result) or error, which returns an error code (error.code) and message (error.message). You insert the payment or the error information into the page’s HTML markup.
$("resultDiv").innerHTML = [insert payment html here];
$("errorDiv").innerHTML = [insert error html here];
Because style errorDiv defines its text color as red as shown below (and in Listing 2.4 on page 39), error messages appear in red and normal return results are in black.
div.errorResults {
margin: 5px 2px 2px 2px;
padding: 1px 2px 2px 2px;
font-weight: bold;
color: #C61C1C;
text-align: center;
}
The Prototype shortcut notation uses $("element_id") instead of the more verbose document.getElementById("element_id").
Listing 2.5. LoanPaymentWidget (JavaScript)
Event.observe($("calcButton"), 'click', function() {
var principal = $("principal").value;
var interest = $("interest").value;
var years = $("years").value;
Things.callService("ganderson.LoanPaymentService",
{
"principal": principal, // The principal of the loan (in dollars)
"interest": interest, // The interest rate (per cent) (e.g., 6.5)
"years": years // How long your loan will endure (in years)
},
{ onSuccess: function(data) {
var resultsHtml = "$" + data;
$("resultDiv").innerHTML = resultsHtml;
$("errorDiv").innerHTML = "";
},
onFailure: function(error) {
$("errorDiv").innerHTML = error.code + ": " + error.message
+ ".<br/>";
$("resultDiv").innerHTML = "";
}
});
});
Previewing and Publishing
Test your widget using the Preview tab or the Preview widget box. When you’re satisfied that the widget is working, publish your widget by selecting the 
button. After you publish a widget, you can embed it in any web page.
Embedding LoanPaymentWidget
This widget is embedded in a web page with the following HTML source.
<iframe width=400 height=280
src="https://94f52847744e493b944aed46cf255e63.zembly.com/things/
94f52847744e493b944aed46cf255e63;iframe" frameborder="0">
</iframe>
You copy/paste the source from the widget’s documentation page (under Share This Widget). Here, we’ve supplied height and width attributes to adjust the size of the iframe tag area.