Tutorial: Building a Dojo Application using IBM Rational Application Developer Loan Payment Calculator
|
|
- Lucas Higgins
- 8 years ago
- Views:
Transcription
1 Tutorial: Building a Dojo Application using IBM Rational Application Developer Loan Payment Calculator Written by: Chris Jaun (cmjaun@us.ibm.com) Sudha Piddaparti (sudhap@us.ibm.com) Objective In this tutorial you will create a Dojo application using the Web tools in IBM Rational Application Developer Version 8.0. Rational Application Developer provides wizards, content assist, validation, property views, palette drops, and other visual tools for rapidly developing Dojo web applications. Introduction You will build a Dojo-based loan payment calculator. The calculator accepts three pieces of input: loan amount, interest rate, and term. It outputs the monthly payment, a pie chart displaying the percentage of loan costs going towards principal and interest, and an amortization table. There is no submit button because the output fields are updated in real-time as users enter or change input. You will learn how to: Create a Dojo enabled Web application containing all of the resources required by your application Create a user interface using Dojo widgets Build your own custom Dojo widget Use content assist, templates, and wizards to rapidly write Dojo code and HTML Deploy your project to a server Create a custom Dojo build Debug web applications using Firebug In Part 1 you will set up a Dojo enabled project. In Part 2 you will use the Dojo Widget wizard, content assist, and palette drops to create a custom Dojo widget. In Part 3 you will create a web page containing a Dojo layout widget and your custom widget. You will also add the necessary output fields and Dojo code to activate them. In Part 4 (optional) you can add a pie chart to your page using the Dojo charting API. In Part 5 (optional) you can add a Dojo grid to your page using the palette. Part 6 (optional) contains information on creating custom Dojo builds. Part 7 (optional) contains information on integrated Firebug debugging support
2 Supporting Materials Rational Application Developer wiki: provides videos and articles to help you get started quickly with developing applications Dojo Toolkit web site: provides a detailed Dojo reference guide and other information for getting started with Dojo
3 Part 1: Project creation and setup Rational Application Developer provides a project setup wizard where you can customize how your application will access Dojo during development and at runtime. The simplest option (and the one used in this tutorial) is to have a copy of Dojo in your project and deploy it along with the rest of your project resources. Another option is to use a public Content Delivery Network (CDN), a remote server with a copy of Dojo. The use of CDNs are not covered by this tutorial, but they are simple to use, and you can learn more about them here: 1. Start Rational Application Developer and select a workspace. 2. Close the Welcome tab. 3. Select File > New > Static Web Project to begin creating your application. 4. Enter LoanPaymentCalculator as the Project name. 5. To enable Dojo support, click the Modify button in the Configuration section. a. Expand the Web 2.0 node and select Dojo Toolkit. By enabling the Dojo Toolkit facet, your web project is configured to develop Dojo web applications. The Dojo Toolkit included in Rational Application Developer includes additional IBM extensions to the base Dojo Toolkit, including libraries for ATOM (ATOM Syndication Format) data access, analog and bar gauges, and simplified access for SOAP Web services. b. Click OK Click the Next button twice until you reach the Dojo Project Setup page. This page provides a summary of how Dojo will be incorporated into your project. By default, the latest Dojo supported by IBM is copied into your web project. At this point you can finish the wizard and move on to Part 2 of the tutorial. If you would like more information about the Dojo project setup options continue with the following optional steps. To modify the Dojo setup, click the Change these setup options button
4 a. The Dojo Project Setup Options dialog box provides you with three options for configuring Dojo in your web application. Select the third option, Dojo is remotely deployed or is on a public CDN, and click Next. b. You would use this option if your application uses a remotely hosted public CDN (content delivery network) or an existing copy of Dojo already deployed on your network. CDNs provide geographically distributed hosting for open source JavaScript libraries. When a browser resolves the URL in your Web application, the browser will automatically download the file from the closest available server. You will need to provide the URL or URI to the appropriate location. If Dojo is not contained in your project the tools must reference a corresponding copy of Dojo in order to provide content assist and validation. The wizard gives you the option of selecting a default version or selecting your own Dojo from disk. This option will not copy Dojo into your project or workspace. Click the Back button. c. Select the second option, Dojo is in a project in the workspace, and will be deployed from there, and click Next. d. On this page you can browse to the root Dojo folder in another project in your workspace. The copy of Dojo will not be copied into your project. It will be deployed from the project where it is currently located. Click the Back button. e. Select the first option, Copy Dojo into this project. It will be deployed from there, and click Next. f. On this page you can specify the location in your project where Dojo will be copied. At the bottom of the page you may select one of the default versions of Dojo shipped with Rational Application Developer or browse for a copy on your disk. Leave the default values and click Finish. 9. Click Finish in the project wizard. Your project is now created and appears in the Enterprise Explorer view. Under the WebContent folder you should see a folder named dojo that contains all the Dojo resources. If asked to switch to the Web Perspective, click Yes
5 Part 2: Creating a Custom Dojo Widget The Dojo toolkit includes dozens of standard widgets, including input fields, combo boxes and radio buttons. You can also create custom widgets to encapsulate reusable UI elements or a specific piece of functionality. Rational Application Developer provides a wizard to easily create new custom Dojo widgets Right-click on the WebContent/dojo folder and select New > Dojo Widget. Enter LoanInput as the Widget Name. Enter loan as the Module Name. Leave the defaults for the rest of the fields and click Finish
6 5. Three files are created under a folder named dojo/loan: a templates/loaninput.html file that is the UI template for the widget a themes/loaninput.css file which provides the styling for the widget a LoanInput.js file which provides the JavaScript backend and business logic portion of the widget. Double-click LoanInput.js if the file is not already open Change the widgetsintemplate field from false to true. This field indicates that our custom widget will contain other Dojo widgets as part of its UI. Directly below the widgetsintemplate field add three additional fields that will be used to hold the results of our calculation principal, interestpaid, and monthlypayment - they should all have default values of 0. Be sure to add a comma after each field. // Set this to true if your widget contains other widgets widgetsintemplate : true, principal: 0, interestpaid: 0, monthlypayment: 0, 8. Directly below the postmixinproperties function, add a new function named calculate. Leave the function empty for now. postmixinproperties : function() { }, // this function will perform the calculations for our loan payment calculate: function() { } - 6 -
7 9. Double-click templates/loaninput.html to open the file. 10. At the bottom of the editor click the Source tab to display the page in the source panea. 11. Within the existing div create three additional child div tags. You can use content assist by typing <d and then pressing CTRL-space. In the popup select <> div to insert the tags. 12. Within each new div tag add a text label Loan Amount:, Interest Rate:, and Term (years):. When complete your code should look like this: <div class="loaninput"> <div>loan Amount: </div> <div>interest Rate: </div> <div>term (years): </div> </div> 13. Now add Dojo widgets for each of the input fields. a. In the right-hand column, surface the palette by clicking the appropriate tab. You should see several drawers containing Dojo widgets. b. Expand the Dojo Form Widgets drawer by clicking on it
8 c. Select the CurrencyTextBox and drop it next to the Loan Amount label inside your div tag. d. Within the newly created input element type the letters cu and use content assist (CTRL + space) to bring up a list of attributes. Click on currency to insert it. e. Inside the currency attribute type USD. Your end result should look like this: <div>loan Amount: <input type="text" dojotype="dijit.form.currencytextbox" currency="usd"></div> f. Next, use content assist to insert the Dojo widget markup for the Interest Rate field. Put your cursor inside the second div tag after the label. Type <input d> and invoke content assist with your cursor directly to the right of the d. Click on dojotype to insert it
9 g. Inside the dojotype attribute invoke content assist again and you will see a list of available dojo widgets. Begin typing dijit.form.n until you see NumberSpinner. Click on it to insert into your page. h. Add the following attributes. You can use content assist to insert them the same way you added the currency attribute above. 1) value = 5 2) smalldelta =.05 3) intermediatechanges = true 4) constraints = {min: 0} <div>interest Rate: <input dojotype="dijit.form.numberspinner" value="5" smalldelta=".05" intermediatechanges="true" constraints="{min: 0}"> </div> i. From the palette drop a ComboBox Dojo widget into the Term (years) div. 1) Rational Application Developer provides additional configuration for some widgets when you drop them from the palette, such as the ComboBox. In the Insert Combo Box dialog box you can add values for your ComboBox. Add values for 1, 2, 3, 4, 5, 10, 15, 30. 2) Set 15 as the default selected value
10 j. Next you must add dojoattachpoint and dojoattachevent attributes to each of your input widgets. The value specified for the dojoattachpoint is the name that widget instance can be referenced by from the LoanInput.js file. The dojoattachevent attribute adds event handling to the widgets. 1) Using content assist add a dojoattachpoint attribute to each widget. Name them amount, rate, and term respectively. 2) For each widget add dojoattachevent= onchange: calculate. Every time an onchange event takes place on this widget it calls the calculate function you added to the LoanInput.js file. The final result of your html file should look like this: <div class="loaninput"> <div>loan Amount: <input type="text" dojotype="dijit.form.currencytextbox" currency="usd" dojoattachpoint="amount" dojoattachevent="onchange: calculate"></div> <div>interest Rate: <input dojotype="dijit.form.numberspinner" value="5" smalldelta=".05" intermediatechanges="true" constraints="{min: 0}" dojoattachpoint="rate" dojoattachevent="onchange: calculate"> </div> <div>term (years): <select dojotype="dijit.form.combobox" name="select" autocomplete="false" dojoattachpoint="term" dojoattachevent="onchange: calculate"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>10</option> <option selected="selected">15</option> <option>30</option> </select> </div> </div> 14. Save and close LoanInput.html and re-open LoanInput.js 15. Add dojo.require statements for the three widgets used in the html file. dojo.require statements load the necessary resources to create those widgets when the page is run. a. Below the existing require statements type dojo.re and invoke content assist (CTRL-space). b. Select dojo.require(modulename) from the popup. c. Type dijit.form.currencytextbox as the function attribute. d. Repeat steps b and c for dijit.form.numberspinner and dijit.form.combobox. //dojo.require the necessary dijit hierarchy dojo.require("dijit._widget");
11 dojo.require("dijit._templated"); dojo.require("dijit.form.currencytextbox"); dojo.require("dijit.form.numberspinner"); dojo.require("dijit.form.combobox"); 16. Now add the following code for the calculate function that you created earlier in Step 8. If you d like you can experiment with content assist. Note that standard JavaScript objects such as the Math object are available in content assist. The variables we defined earlier, principal, interestpaid, and monthlypayment are all available as well. // this function will perform the calculations for our loan repayment calculate: function() { this.principal = this.amount.attr('value'); if(this.principal == NaN) { this.monthlypayment = 0; this.principal = 0; this.interestpaid = 0; } else { var interestrate = this.rate.attr('value') / 1200; var terminmonths = this.term.attr('value') * 12; this.monthlypayment = Math.pow(1 + interestrate, terminmonths) - 1; this.monthlypayment = interestrate + (interestrate / this.monthlypayment); this.monthlypayment = this.monthlypayment * this.principal; } this.interestpaid = (this.monthlypayment * terminmonths) - this.principal; } 17. The calculate function stores the principal of the loan, computes the monthly payment, and the amount of interest paid. Save and close all the files that make up the custom widget. Part 3: Adding your custom widget to a web page Now you can add your custom Dojo widget to a web page that will be laid out using a Dojo layout widget. You will use Dojo APIs to connect your widget to the output field and display the results Right-click on the WebContent folder and select New > Web Page. Name the page index.html and click Finish. The wizard created a web page with the necessary code to access Dojo included. At the bottom of the editor click the Design tab to display the page in the Design pane. Open the Dojo Layout Widgets drawer in the palette and drop a BorderContainer onto the page. a. A dialog box pops up allowing you to customize the BorderContainer widget. Click the Top and Center check boxes
12 b. Click OK. 5. A visual view of the BorderContainer is now displayed in the Design pane. Click on the BorderContainer visualization and then click on the Properties tab. If not selected, click on the BorderContainer tab Change the height of BorderContainer in the property tab from 500px to 700px. Change the width to 600px. You can also modify the regions (top, center, bottom, etc.) by clicking on the Regions tab. In the top region add the text Loan Payment Calculator
13 8. Open the Other Dojo Widgets palette drawer and drop the LoanInput widget into the center region of the BorderContainer. 9. Switch back to the Source pane. 10. Add a new div below the LoanInput widget to show the results. You can copy the text from below. <div>monthly Payment: <span id= monthlypayment ></span></div> 11. Rational Application Developer provides content assist templates for commonly used Dojo functions. In the existing script region on your page, below the dojo.require() statements, type dojo.a and invoke content assist. 12. Select the template for dojo.addonload and it will be inserted into your page. 13. Inside the addonload function perform the following steps: a. Type var loanwidget = dijit.b and invoke content assist. Select the byid(id) suggestion so that it inserts into your page. b. Type LoanInput as the parameter for the byid function. c. Type a semicolon after the closing parenthesis for the LoanInput parameter. d. On the line directly below your call to dijit.byid, type dojo.c and invoke content assist. Here you can select another of our default templates for dojo.connect. Insert it into your page. e. Set the first parameter as loanwidget and the second as calculate. f. Inside the function parameter of the connect function add the following code:
14 var payment = loanwidget.monthlypayment if(payment == NaN) { payment = 0; } // update the result field var formattedvalue = dojo.currency.format(payment, {currency: "USD"}); dojo.attr("monthlypayment", "innerhtml", formattedvalue); g. Directly below the existing dojo.require add a new one for: dojo.require("dojo.currency"); h. Your final code for the addonload function should look like the following dojo.addonload(function() { // get the loan input widget var loanwidget = dijit.byid("loaninput"); // connect to the calculate function in the loan input widget // this function will run and update data after every calculation dojo.connect(loanwidget, "calculate", function() { var payment = loanwidget.monthlypayment if(payment == NaN) { payment = 0; } // update the result field var formattedvalue = dojo.currency.format(payment, {currency: "USD"}); dojo.attr("monthlypayment", "innerhtml", formattedvalue); }); }); 14. Save your changes. 15. Now it is time to test your application on the server. Right-click on the index.html file in the Enterprise Explorer and select Run As > Run on Server. 16. Select the Ajax Test Server and click Finish. Your page opens in a web browser. 17. Enter a loan amount and see that the results field updates
15 Part 4: (Optional) Adding a Pie Chart to your page using the Dojo charting API In this optional section you use content assist and the Dojo charting API to add a pie chart to your results page. The pie chart displays the percentage of total loan costs going towards interest and principle. 1. In the index.html file add the following dojo.require() statements to the existing script tag. dojo.require("dojox.charting.chart2d"); dojo.require("dojox.charting.plot2d.pie"); dojo.require("dojox.charting.action2d.highlight"); dojo.require("dojox.charting.action2d.moveslice"); dojo.require("dojox.charting.action2d.tooltip"); dojo.require("dojox.charting.themes.dollar"); 2. Add the following div directly below the MonthlyPayment div you created to display the result. <div id="chart" style="width: 350px; height: 350px;"></div> 3. Inside the existing addonload function, above the connect function, type var chart = new dojox and invoke content assist. You should see a list of all available Dojo types in the dojox namespace. 4. Continue typing.charting.c and you should see the list begin to filter down. Select dojox.charting.chart2d and insert it on your page. 5. Add the parameter chart, the id for the div node where it will be located on your page. var chart = new dojox.charting.chart2d("chart"); On the next line type chart.set and invoke content assist. You should see the settheme method. Select this method and insert it into the page. As the parameter enter dojox.charting.themes.dollar. chart.settheme(dojox.charting.themes.dollar); 8. Copy the following code on the next line. You can invoke content assist on the various methods and types if you want. This code adds plotting information to your chart and sets up highlighting and tooltips for when users hover over the pie chart slices. You can find more information on Dojo charting APIs here:
16 chart.addplot("default", { type: "Pie", labeloffset: -30, font: "Veranda", radius: 90 }); chart.addseries("paymentseries", []); new dojox.charting.action2d.moveslice(chart, "default"); new dojox.charting.action2d.highlight(chart, "default"); new dojox.charting.action2d.tooltip(chart, "default"); 9. Inside the connect function, below the existing code, add the following code: // add the data series to the chart and render chart.updateseries("paymentseries", [ { y: loanwidget.principal, stroke: "black", tooltip: "Principle" }, { y: loanwidget.interestpaid, stroke: "black", tooltip: "Interest" }]); chart.render(); This code adds a new series of data to the chart and renders it each time the user changes an input value. 10. Save the page and run the page on server
17 Part 5: (Optional) Insert an Enhanced Dojo Grid In this optional section you learn how to add an Enhanced Dojo Grid to your web page. The DataGrid widget creates a table that looks like a spreadsheet In the Palette, click the Dojo Data Widgets drawer to open it. Drag a DataGrid and drop it directly below the existing divs created in Part 3 or 4 of this tutorial (see image.) The Dojo DataGrid wizard opens Clear the Generate JavaScript to populate the grid check box. In the Columns section, specify the column heading labels and JavaScript property for each column: a. In the Heading Label field, enter Payment Number b. In the JavaScript Property field, enter paymentnum c. Click Add
18 5. Repeat the previous steps to add the following Heading Label - JavaScript Property pairs: Heading Label Principal Paid Interest Paid Balance JavaScript Property principal interest balance 6. Click Finish. In the Source pane, you can see that the html markup for the DataGrid is added, with the JavaScript properties populating the field attribute, and the corresponding heading labels as column names
19 The dojo require statements for the DataGrid and ItemFileReadStore are added automatically. If needed, move them to the top of the script tag with the other dojo.require statements. <script type="text/javascript"> dojo.require("dijit.layout.bordercontainer"); dojo.require("dijit.layout.contentpane"); dojo.require("loan.loaninput"); dojo.require("dojo.currency"); dojo.require("dojox.charting.chart2d"); dojo.require("dojox.charting.plot2d.pie"); dojo.require("dojox.charting.action2d.highlight"); dojo.require("dojox.charting.action2d.moveslice"); dojo.require("dojox.charting.action2d.tooltip"); dojo.require("dojox.charting.themes.dollar"); dojo.require("dojox.grid.datagrid"); dojo.require("dojo.data.itemfilereadstore"); CSS links are also added to the source code of the Web page Now you can populate data in the data grid using ItemFileWriteStore. Open the LoanInput.js file. Add the following code right below the monthlypayment attribute. amortizationschedule: {}, 9. Add the following code to the calculate() function at the bottom of the function, inside the else statement
20 //generate the Amortization Data this.generateamortizationschedule(this.principal, interestrate, terminmonths, this.monthlypayment); 10. Add the following function after the calculate() function. generateamortizationschedule: function(principal, interestrate, terminmonths, monthlypayment) { this.amortizationschedule = []; var currentprincipal = principal; for(var i = 0; i < terminmonths; i++) { var paymentdata = {}; paymentdata.paymentnum = i + 1; paymentdata.interest = (currentprincipal * interestrate).tofixed(2); paymentdata.principal = monthlypayment - paymentdata.interest; currentprincipal = currentprincipal - paymentdata.principal; paymentdata.balance = currentprincipal; this.amortizationschedule.push(paymentdata); } } 11. Save and close LoanInput.js and open index.html 12. Add a dojo.require statement for dojo.data.itemfilewritestore dojo.require("dojo.data.itemfilewritestore"); 13. Add the following code at the bottom of the dojo.connect function. Then run the page on server. //create Store with Data var griddata = {}; griddata.items = loanwidget.amortizationschedule; var gridstore = new dojo.data.itemfilewritestore({ identifier:'mortgagedata', label:"mortgagedata", data:griddata}); //set the store on grid var grid = dijit.byid("gridid"); grid.setstore(gridstore);
21 Part 6: (Optional) Creating a Dojo Custom Build This chapter highlights the steps required to create a Dojo custom build. The purpose of a custom Dojo build is to create an efficient version of Dojo, and of your code, that is suitable for deployment. Learn more about the Dojo Build System here: The following steps demonstrate creating a Dojo custom build Right-click the Enterprise Explorer view and select New > Dojo Custom Build. The Dojo Build Tools wizard opens. Accept the default Profile location. Ensure that you complete a full build of the profile before you build individual layers. To complete a full build, clear the Only Build Selected Layers.check box Specify the build scripts and output directories. You can leave the default values set. Click Next to specify advanced options
22 1. From the CSS Optimization list, select whether to remove comments and line returns. 2. You can specify whether to delete output directories before building, copy test files into the build, or intern widget templates. When you intern a template, the HTML or CSS file is brought into the JavaScript file and assigned to a string. You can also specify other command line arguments. 5. Click Finish. The Custom Build Output window opens displaying details of the build operation
23 6. You can click OK to close the Custom Build Output window. The Dojo custom build has built the entire Dojo distribution and the Dojo layer files that you selected into the output folder that you specified in the Custom Build wizard. Part 7: (Optional) Using Firebug to debug web applications This chapter highlights using Firebug to debug web applications. 1. Configure the web application to run on Firefox with Firebug. a. Click Window > Web Browser. b. Select Firefox with Firebug from the Web browsers list. 2. Debug the web application. a. You can set JavaScript breakpoints inside script tags of a web page or in JavaScript files. The breakpoints are automatically transferred to Firebug when you debug on server. Conversely, you can also set breakpoints in Firebug and they will be displayed in Page Designer or the JavaScript editor
24 b. In Enterprise Explorer, right-click index.html and select Debug As > Debug on Server. c. Click Finish. Your web page opens in Firefox. Firebug will be automatically installed if needed. 3. For information on using Firebug to debug JavaScript visit:
Database Forms and Reports Tutorial
Database Forms and Reports Tutorial Contents Introduction... 1 What you will learn in this tutorial... 2 Lesson 1: Create First Form Using Wizard... 3 Lesson 2: Design the Second Form... 9 Add Components
More informationUSER GUIDE. Unit 2: Synergy. Chapter 2: Using Schoolwires Synergy
USER GUIDE Unit 2: Synergy Chapter 2: Using Schoolwires Synergy Schoolwires Synergy & Assist Version 2.0 TABLE OF CONTENTS Introductions... 1 Audience... 1 Objectives... 1 Before You Begin... 1 Getting
More informationIBM Operational Decision Manager Version 8 Release 5. Getting Started with Business Rules
IBM Operational Decision Manager Version 8 Release 5 Getting Started with Business Rules Note Before using this information and the product it supports, read the information in Notices on page 43. This
More informationIBM BPM V8.5 Standard Consistent Document Managment
IBM Software An IBM Proof of Technology IBM BPM V8.5 Standard Consistent Document Managment Lab Exercises Version 1.0 Author: Sebastian Carbajales An IBM Proof of Technology Catalog Number Copyright IBM
More informationAn introduction to creating Web 2.0 applications in Rational Application Developer Version 8.0
An introduction to creating Web 2.0 applications in Rational Application Developer Version 8.0 September 2010 Copyright IBM Corporation 2010. 1 Overview Rational Application Developer, Version 8.0, contains
More informationLearn how to create web enabled (browser) forms in InfoPath 2013 and publish them in SharePoint 2013. InfoPath 2013 Web Enabled (Browser) forms
Learn how to create web enabled (browser) forms in InfoPath 2013 and publish them in SharePoint 2013. InfoPath 2013 Web Enabled (Browser) forms InfoPath 2013 Web Enabled (Browser) forms Creating Web Enabled
More informationComposite.Community.Newsletter - User Guide
Composite.Community.Newsletter - User Guide Composite 2015-11-09 Composite A/S Nygårdsvej 16 DK-2100 Copenhagen Phone +45 3915 7600 www.composite.net Contents 1 INTRODUCTION... 4 1.1 Who Should Read This
More informationOracle Business Intelligence Publisher: Create Reports and Data Models. Part 1 - Layout Editor
Oracle Business Intelligence Publisher: Create Reports and Data Models Part 1 - Layout Editor Pradeep Kumar Sharma Senior Principal Product Manager, Oracle Business Intelligence Kasturi Shekhar Director,
More informationAn introduction to creating JSF applications in Rational Application Developer Version 8.0
An introduction to creating JSF applications in Rational Application Developer Version 8.0 September 2010 Copyright IBM Corporation 2010. 1 Overview Although you can use several Web technologies to create
More informationDesigning portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development
Designing portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development By Kenji Uchida Software Engineer IBM Corporation Level: Intermediate
More informationMASTERTAG DEVELOPER GUIDE
MASTERTAG DEVELOPER GUIDE TABLE OF CONTENTS 1 Introduction... 4 1.1 What is the zanox MasterTag?... 4 1.2 What is the zanox page type?... 4 2 Create a MasterTag application in the zanox Application Store...
More informationFor Introduction to Java Programming, 5E By Y. Daniel Liang
Supplement H: NetBeans Tutorial For Introduction to Java Programming, 5E By Y. Daniel Liang This supplement covers the following topics: Getting Started with NetBeans Creating a Project Creating, Mounting,
More informationMaking Web Application using Tizen Web UI Framework. Koeun Choi
Making Web Application using Tizen Web UI Framework Koeun Choi Contents Overview Web Applications using Web UI Framework Tizen Web UI Framework Web UI Framework Launching Flow Web Winsets Making Web Application
More informationCREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main
More informationHands-On Lab. Building a Data-Driven Master/Detail Business Form using Visual Studio 2010. Lab version: 1.0.0. Last updated: 12/10/2010.
Hands-On Lab Building a Data-Driven Master/Detail Business Form using Visual Studio 2010 Lab version: 1.0.0 Last updated: 12/10/2010 Page 1 CONTENTS OVERVIEW... 3 EXERCISE 1: CREATING THE APPLICATION S
More informationSQL Server 2005: Report Builder
SQL Server 2005: Report Builder Table of Contents SQL Server 2005: Report Builder...3 Lab Setup...4 Exercise 1 Report Model Projects...5 Exercise 2 Create a Report using Report Builder...9 SQL Server 2005:
More informationDEPLOYING A VISUAL BASIC.NET APPLICATION
C6109_AppendixD_CTP.qxd 18/7/06 02:34 PM Page 1 A P P E N D I X D D DEPLOYING A VISUAL BASIC.NET APPLICATION After completing this appendix, you will be able to: Understand how Visual Studio performs deployment
More informationBuilding and Using Web Services With JDeveloper 11g
Building and Using Web Services With JDeveloper 11g Purpose In this tutorial, you create a series of simple web service scenarios in JDeveloper. This is intended as a light introduction to some of the
More informationDreamweaver CS5. Module 2: Website Modification
Dreamweaver CS5 Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Last revised: October 31, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland,
More informationPractical Example: Building Reports for Bugzilla
Practical Example: Building Reports for Bugzilla We have seen all the components of building reports with BIRT. By this time, we are now familiar with how to navigate the Eclipse BIRT Report Designer perspective,
More informationCrystal Reports for Eclipse
Crystal Reports for Eclipse Table of Contents 1 Creating a Crystal Reports Web Application...2 2 Designing a Report off the Xtreme Embedded Derby Database... 11 3 Running a Crystal Reports Web Application...
More informationWebSphere Business Monitor V7.0 Script adapter lab
Copyright IBM Corporation 2010 All rights reserved IBM WEBSPHERE BUSINESS MONITOR 7.0 LAB EXERCISE WebSphere Business Monitor V7.0 Script adapter lab What this exercise is about... 1 Changes from the previous
More informationDeveloping Web and Mobile Dashboards with Oracle ADF
Developing Web and Mobile Dashboards with Oracle ADF In this lab you ll build a web dashboard that displays data from the database in meaningful ways. You are going to leverage Oracle ADF the Oracle Application
More informationArcGIS Server 9.3.1 mashups
Welcome to ArcGIS Server 9.3.1: Creating Fast Web Mapping Applications With JavaScript Scott Moore ESRI Olympia, WA smoore@esri.com Seminar agenda ArcGIS API for JavaScript: An Overview ArcGIS Server Resource
More informationBuilding A Very Simple Web Site
Sitecore CMS 6.2 Building A Very Simple Web Site Rev 100601 Sitecore CMS 6. 2 Building A Very Simple Web Site A Self-Study Guide for Developers Table of Contents Chapter 1 Introduction... 3 Chapter 2 Building
More informationUsing Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
More informationScribe Online Integration Services (IS) Tutorial
Scribe Online Integration Services (IS) Tutorial 7/6/2015 Important Notice No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, photocopying,
More informationApplication Developer Guide
IBM Maximo Asset Management 7.1 IBM Tivoli Asset Management for IT 7.1 IBM Tivoli Change and Configuration Management Database 7.1.1 IBM Tivoli Service Request Manager 7.1 Application Developer Guide Note
More information1. Tutorial - Developing websites with Kentico 8... 3 1.1 Using the Kentico interface... 3 1.2 Managing content - The basics... 4 1.2.
Kentico 8 Tutorial Tutorial - Developing websites with Kentico 8.................................................................. 3 1 Using the Kentico interface............................................................................
More informationStruts Tools Tutorial. Version: 3.3.0.M5
Struts Tools Tutorial Version: 3.3.0.M5 1. Introduction... 1 1.1. Key Features Struts Tools... 1 1.2. Other relevant resources on the topic... 2 2. Creating a Simple Struts Application... 3 2.1. Starting
More informationWebSphere Business Monitor V6.2 KPI history and prediction lab
Copyright IBM Corporation 2009 All rights reserved IBM WEBSPHERE BUSINESS MONITOR 6.2 LAB EXERCISE WebSphere Business Monitor V6.2 KPI history and prediction lab What this exercise is about... 1 Lab requirements...
More informationAppendix K Introduction to Microsoft Visual C++ 6.0
Appendix K Introduction to Microsoft Visual C++ 6.0 This appendix serves as a quick reference for performing the following operations using the Microsoft Visual C++ integrated development environment (IDE):
More informationPDF Web Form. Projects 1
Projects 1 In this project, you ll create a PDF form that can be used to collect user data online. In this exercise, you ll learn how to: Design a layout for a functional form. Add form fields and set
More informationMicrosoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
More informationMICROSOFT OFFICE ACCESS 2007 - NEW FEATURES
MICROSOFT OFFICE 2007 MICROSOFT OFFICE ACCESS 2007 - NEW FEATURES Exploring Access Creating and Working with Tables Finding and Filtering Data Working with Queries and Recordsets Working with Forms Working
More informationDiskPulse DISK CHANGE MONITOR
DiskPulse DISK CHANGE MONITOR User Manual Version 7.9 Oct 2015 www.diskpulse.com info@flexense.com 1 1 DiskPulse Overview...3 2 DiskPulse Product Versions...5 3 Using Desktop Product Version...6 3.1 Product
More informationCloud Administration Guide for Service Cloud. August 2015 E65820-01
Cloud Administration Guide for Service Cloud August 2015 E65820-01 Table of Contents Introduction 4 How does Policy Automation work with Oracle Service Cloud? 4 For Customers 4 For Employees 4 Prerequisites
More informationQuick Start Guide Mobile Entrée 4
Table of Contents Table of Contents... 1 Installation... 2 Obtaining the Installer... 2 Installation Using the Installer... 2 Site Configuration... 2 Feature Activation... 2 Definition of a Mobile Application
More informationTable of Contents. 1. Content Approval...1 EVALUATION COPY
Table of Contents Table of Contents 1. Content Approval...1 Enabling Content Approval...1 Content Approval Workflows...4 Exercise 1: Enabling and Using SharePoint Content Approval...9 Exercise 2: Enabling
More informationModule One: Getting Started... 6. Opening Outlook... 6. Setting Up Outlook for the First Time... 7. Understanding the Interface...
2 CONTENTS Module One: Getting Started... 6 Opening Outlook... 6 Setting Up Outlook for the First Time... 7 Understanding the Interface...12 Using Backstage View...14 Viewing Your Inbox...15 Closing Outlook...17
More informationUsing the Query Analyzer
Using the Query Analyzer Using the Query Analyzer Objectives Explore the Query Analyzer user interface. Learn how to use the menu items and toolbars to work with SQL Server data and objects. Use object
More informationJBoss SOAP Web Services User Guide. Version: 3.3.0.M5
JBoss SOAP Web Services User Guide Version: 3.3.0.M5 1. JBoss SOAP Web Services Runtime and Tools support Overview... 1 1.1. Key Features of JBossWS... 1 2. Creating a Simple Web Service... 3 2.1. Generation...
More informationKentico CMS 6.0 Tutorial
Kentico CMS 6.0 Tutorial 2 Kentico CMS 6.0 Tutorial Table of Contents Introduction 5... 5 Kentico CMS Overview Installation 7... 7 Prerequisites... 8 Setup installation... 8 Web application installation...
More informationTable of Contents. Welcome... 2. Login... 3. Password Assistance... 4. Self Registration... 5. Secure Mail... 7. Compose... 8. Drafts...
Table of Contents Welcome... 2 Login... 3 Password Assistance... 4 Self Registration... 5 Secure Mail... 7 Compose... 8 Drafts... 10 Outbox... 11 Sent Items... 12 View Package Details... 12 File Manager...
More informationData Tool Platform SQL Development Tools
Data Tool Platform SQL Development Tools ekapner Contents Setting SQL Development Preferences...5 Execution Plan View Options Preferences...5 General Preferences...5 Label Decorations Preferences...6
More informationRicardo Perdigao, Solutions Architect Edsel Garcia, Principal Software Engineer Jean Munro, Senior Systems Engineer Dan Mitchell, Principal Systems
A Sexy UI for Progress OpenEdge using JSDO and Kendo UI Ricardo Perdigao, Solutions Architect Edsel Garcia, Principal Software Engineer Jean Munro, Senior Systems Engineer Dan Mitchell, Principal Systems
More informationWorking with SQL Server Integration Services
SQL Server Integration Services (SSIS) is a set of tools that let you transfer data to and from SQL Server 2005. In this lab, you ll work with the SQL Server Business Intelligence Development Studio to
More informationMICROSOFT ACCESS 2003 TUTORIAL
MICROSOFT ACCESS 2003 TUTORIAL M I C R O S O F T A C C E S S 2 0 0 3 Microsoft Access is powerful software designed for PC. It allows you to create and manage databases. A database is an organized body
More informationIBM FileNet eforms Designer
IBM FileNet eforms Designer Version 5.0.2 Advanced Tutorial for Desktop eforms Design GC31-5506-00 IBM FileNet eforms Designer Version 5.0.2 Advanced Tutorial for Desktop eforms Design GC31-5506-00 Note
More informationE-commerce. Further Development 85
Further Development 85 If you ve ever bought anything online, you ll know how simple the process can be as a buyer. But how difficult is it to set up your own e-store? Fortunately with WebPlus, the process
More informationHypercosm. Studio. www.hypercosm.com
Hypercosm Studio www.hypercosm.com Hypercosm Studio Guide 3 Revision: November 2005 Copyright 2005 Hypercosm LLC All rights reserved. Hypercosm, OMAR, Hypercosm 3D Player, and Hypercosm Studio are trademarks
More informationDreamweaver and Fireworks MX Integration Brian Hogan
Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The
More informationMicrosoft Access 2010 Overview of Basics
Opening Screen Access 2010 launches with a window allowing you to: create a new database from a template; create a new template from scratch; or open an existing database. Open existing Templates Create
More informationHow to create pop-up menus
How to create pop-up menus Pop-up menus are menus that are displayed in a browser when a site visitor moves the pointer over or clicks a trigger image. Items in a pop-up menu can have URL links attached
More informationAppendix M: Introduction to Microsoft Visual C++ 2010 Express Edition
Appendix M: Introduction to Microsoft Visual C++ 2010 Express Edition This book may be ordered from Addison-Wesley in a value pack that includes Microsoft Visual C++ 2010 Express Edition. Visual C++ 2010
More informationBitrix Site Manager 4.1. User Guide
Bitrix Site Manager 4.1 User Guide 2 Contents REGISTRATION AND AUTHORISATION...3 SITE SECTIONS...5 Creating a section...6 Changing the section properties...8 SITE PAGES...9 Creating a page...10 Editing
More informationMicrosoft Access 2010 Part 1: Introduction to Access
CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Microsoft Access 2010 Part 1: Introduction to Access Fall 2014, Version 1.2 Table of Contents Introduction...3 Starting Access...3
More informationThirtySix Software WRITE ONCE. APPROVE ONCE. USE EVERYWHERE. www.thirtysix.net SMARTDOCS 2014.1 SHAREPOINT CONFIGURATION GUIDE THIRTYSIX SOFTWARE
ThirtySix Software WRITE ONCE. APPROVE ONCE. USE EVERYWHERE. www.thirtysix.net SMARTDOCS 2014.1 SHAREPOINT CONFIGURATION GUIDE THIRTYSIX SOFTWARE UPDATED MAY 2014 Table of Contents Table of Contents...
More informationHands-On Lab. Web Development in Visual Studio 2010. Lab version: 1.0.0. Last updated: 12/10/2010. Page 1
Hands-On Lab Web Development in Visual Studio 2010 Lab version: 1.0.0 Last updated: 12/10/2010 Page 1 CONTENTS OVERVIEW... 3 EXERCISE 1: USING HTML CODE SNIPPETS IN VISUAL STUDIO 2010... 6 Task 1 Adding
More informationOutlook Email. User Guide IS TRAINING CENTER. 833 Chestnut St, Suite 600. Philadelphia, PA 19107 215-503-7500
Outlook Email User Guide IS TRAINING CENTER 833 Chestnut St, Suite 600 Philadelphia, PA 19107 215-503-7500 This page intentionally left blank. TABLE OF CONTENTS Getting Started... 3 Opening Outlook...
More informationDeveloping coaches in human services
Copyright IBM Corporation 2012 All rights reserved IBM BUSINESS PROCESS MANAGER 8.0 LAB EXERCISE Developing coaches in human services What this exercise is about... 1 Lab requirements... 1 What you should
More informationChapter 15: Forms. User Guide. 1 P a g e
User Guide Chapter 15 Forms Engine 1 P a g e Table of Contents Introduction... 3 Form Building Basics... 4 1) About Form Templates... 4 2) About Form Instances... 4 Key Information... 4 Accessing the Form
More informationNASA Workflow Tool. User Guide. September 29, 2010
NASA Workflow Tool User Guide September 29, 2010 NASA Workflow Tool User Guide 1. Overview 2. Getting Started Preparing the Environment 3. Using the NED Client Common Terminology Workflow Configuration
More informationForm And List. SuperUsers. Configuring Moderation & Feedback Management Setti. Troubleshooting: Feedback Doesn't Send
5. At Repeat Submission Filter, select the type of filtering used to limit repeat submissions by the same user. The following options are available: No Filtering: Skip to Step 7. DotNetNuke User ID: Do
More informationWIRIS quizzes web services Getting started with PHP and Java
WIRIS quizzes web services Getting started with PHP and Java Document Release: 1.3 2011 march, Maths for More www.wiris.com Summary This document provides client examples for PHP and Java. Contents WIRIS
More informationPortals and Hosted Files
12 Portals and Hosted Files This chapter introduces Progress Rollbase Portals, portal pages, portal visitors setup and management, portal access control and login/authentication and recommended guidelines
More informationDesigning and Implementing Forms 34
C H A P T E R 34 Designing and Implementing Forms 34 You can add forms to your site to collect information from site visitors; for example, to survey potential customers, conduct credit-card transactions,
More informationTIBCO ActiveMatrix Service Bus Getting Started. Software Release 2.3 February 2010
TIBCO ActiveMatrix Service Bus Getting Started Software Release 2.3 February 2010 Important Information SOME TIBCO SOFTWARE EMBEDS OR BUNDLES OTHER TIBCO SOFTWARE. USE OF SUCH EMBEDDED OR BUNDLED TIBCO
More informationDeveloping Rich Web Applications with Oracle ADF and Oracle WebCenter Portal
JOIN TODAY Go to: www.oracle.com/technetwork/java OTN Developer Day Oracle Fusion Development Developing Rich Web Applications with Oracle ADF and Oracle WebCenter Portal Hands on Lab (last update, June
More informationGo Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL
Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL K5 CMS The K5 Content Management System (CMS), previously known as Kwik-Az Updating, is a small downloadable program that permits
More informationMicrosoft Access 2010 handout
Microsoft Access 2010 handout Access 2010 is a relational database program you can use to create and manage large quantities of data. You can use Access to manage anything from a home inventory to a giant
More informationORACLE BUSINESS INTELLIGENCE WORKSHOP
ORACLE BUSINESS INTELLIGENCE WORKSHOP Integration of Oracle BI Publisher with Oracle Business Intelligence Enterprise Edition Purpose This tutorial mainly covers how Oracle BI Publisher is integrated with
More informationTimeless Time and Expense Version 3.0. Copyright 1997-2009 MAG Softwrx, Inc.
Timeless Time and Expense Version 3.0 Timeless Time and Expense All rights reserved. No parts of this work may be reproduced in any form or by any means - graphic, electronic, or mechanical, including
More informationDreamweaver CS6 Basics
Dreamweaver CS6 Basics Learn the basics of building an HTML document using Adobe Dreamweaver by creating a new page and inserting common HTML elements using the WYSIWYG interface. EdShare EdShare is a
More informationDuring the process of creating ColorSwitch, you will learn how to do these tasks:
GUI Building in NetBeans IDE 3.6 This short tutorial guides you through the process of creating an application called ColorSwitch. You will build a simple program that enables you to switch the color of
More informationUp and Running with LabVIEW Web Services
Up and Running with LabVIEW Web Services July 7, 2014 Jon McBee Bloomy Controls, Inc. LabVIEW Web Services were introduced in LabVIEW 8.6 and provide a standard way to interact with an application over
More informationCreating Basic Custom Monitoring Dashboards Antonio Mangiacotti, Stefania Oliverio & Randy Allen
Creating Basic Custom Monitoring Dashboards by Antonio Mangiacotti, Stefania Oliverio & Randy Allen v1.1 Introduction With the release of IBM Tivoli Monitoring 6.3 and IBM Dashboard Application Services
More informationEBOX Digital Content Management System (CMS) User Guide For Site Owners & Administrators
EBOX Digital Content Management System (CMS) User Guide For Site Owners & Administrators Version 1.0 Last Updated on 15 th October 2011 Table of Contents Introduction... 3 File Manager... 5 Site Log...
More informationIntroduction: The Xcode templates are not available in Cordova-2.0.0 or above, so we'll use the previous version, 1.9.0 for this recipe.
Tutorial Learning Objectives: After completing this lab, you should be able to learn about: Learn how to use Xcode with PhoneGap and jquery mobile to develop iphone Cordova applications. Learn how to use
More informationDecision Support AITS University Administration. Web Intelligence Rich Client 4.1 User Guide
Decision Support AITS University Administration Web Intelligence Rich Client 4.1 User Guide 2 P age Web Intelligence 4.1 User Guide Web Intelligence 4.1 User Guide Contents Getting Started in Web Intelligence
More informationTutorial Build a simple IBM Rational Publishing Engine (RPE) template for IBM Rational DOORS
Tutorial Build a simple IBM Rational Publishing Engine (RPE) template for IBM Rational DOORS Length: 1 hour Pre-requisites: Understand the terms document template and document specification, and what RPE
More informationRecreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts
Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade Exercise: Creating two types of Story Layouts 1. Creating a basic story layout (with title and content)
More informationJOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://docs.joomla.org to assist you with your website 1 JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA BACK
More informationHow To Use Query Console
Query Console User Guide 1 MarkLogic 8 February, 2015 Last Revised: 8.0-1, February, 2015 Copyright 2015 MarkLogic Corporation. All rights reserved. Table of Contents Table of Contents Query Console User
More informationWebFOCUS BI Portal: S.I.M.P.L.E. as can be
WebFOCUS BI Portal: S.I.M.P.L.E. as can be Author: Matthew Lerner Company: Information Builders Presentation Abstract: This hands-on session will introduce attendees to the new WebFOCUS BI Portal. We will
More informationWe automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.
Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded
More informationUnified Monitoring Portal Online Help Dashboard Designer
Unified Monitoring Portal Online Help Dashboard Designer This PDF file contains content from the Unified Monitoring Portal (UMP) Online Help system. It is intended only to provide a printable version of
More informationAdobe Dreamweaver CC 14 Tutorial
Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site
More informationWebSphere Business Monitor V6.2 Business space dashboards
Copyright IBM Corporation 2009 All rights reserved IBM WEBSPHERE BUSINESS MONITOR 6.2 LAB EXERCISE WebSphere Business Monitor V6.2 What this exercise is about... 2 Lab requirements... 2 What you should
More informationWriter Guide. Chapter 15 Using Forms in Writer
Writer Guide Chapter 15 Using Forms in Writer Copyright This document is Copyright 2005 2008 by its contributors as listed in the section titled Authors. You may distribute it and/or modify it under the
More informationMail Chimp Basics. Glossary
Mail Chimp Basics Mail Chimp is a web-based application that allows you to create newsletters and send them to others via email. While there are higher-level versions of Mail Chimp, the basic application
More informationSage Intelligence Report Designer Add-In
Sage Intelligence Report Designer Add-In Q: What is Sage Intelligence Reporting? A: Sage Intelligence Reporting helps you to easily control, automate and analyze your data to make better informed decision,
More informationSpecify the location of an HTML control stored in the application repository. See Using the XPath search method, page 2.
Testing Dynamic Web Applications How To You can use XML Path Language (XPath) queries and URL format rules to test web sites or applications that contain dynamic content that changes on a regular basis.
More informationCMS Training. Prepared for the Nature Conservancy. March 2012
CMS Training Prepared for the Nature Conservancy March 2012 Session Objectives... 3 Structure and General Functionality... 4 Section Objectives... 4 Six Advantages of using CMS... 4 Basic navigation...
More informationExcel 2003 Tutorial I
This tutorial was adapted from a tutorial by see its complete version at http://www.fgcu.edu/support/office2000/excel/index.html Excel 2003 Tutorial I Spreadsheet Basics Screen Layout Title bar Menu bar
More informationChapter 4: Website Basics
1 Chapter 4: In its most basic form, a website is a group of files stored in folders on a hard drive that is connected directly to the internet. These files include all of the items that you see on your
More informationWebsite Builder Documentation
Website Builder Documentation Main Dashboard page In the main dashboard page you can see and manager all of your projects. Filter Bar In the filter bar at the top you can filter and search your projects
More informationPractice Fusion API Client Installation Guide for Windows
Practice Fusion API Client Installation Guide for Windows Quickly and easily connect your Results Information System with Practice Fusion s Electronic Health Record (EHR) System Table of Contents Introduction
More informationMicroStrategy Desktop
MicroStrategy Desktop Quick Start Guide MicroStrategy Desktop is designed to enable business professionals like you to explore data, simply and without needing direct support from IT. 1 Import data from
More informationWhat is a Mail Merge?
NDUS Training and Documentation What is a Mail Merge? A mail merge is generally used to personalize form letters, to produce mailing labels and for mass mailings. A mail merge can be very helpful if you
More information