RAD DojoTutorial

of 24
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Related Documents
  © Copyright IBM Corporation 2010 All rights reserved    - 1 - Tutorial: Building a Dojo Application using IBM Rational Application Developer  “Loan Payment Calculator” Written by: Chris Jaun ( Sudha Piddaparti ( 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.  © Copyright IBM Corporation 2010 All rights reserved    - 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.   © Copyright IBM Corporation 2010 All rights reserved    - 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 .  ____ 6. 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.  ____ 7. 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.  ____ 8. To modify the Dojo setup, click the Change these setup options  button.  © Copyright IBM Corporation 2010 All rights reserved    - 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 .
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks