Order Entry Sample Application

[ashimo]

Order Entry Sample Application

NOTE: This version of the Order Entry Sample Application requires release 6.0 of the Curl RTE.

Objective
This document is intended to guide you through the process of evaluating the Curl technology, including the Curl language, runtime, and development tools. A sample application provides a concrete example that will help you appreciate various elements of the Curl platform. When you are done you will see why Curl is the best choice for developing rich, complex, data-intensive, web applications.

Initialization
In order to run the Order Entry Sample Application that serves as a medium for exploring and evaluating the Curl platform, please follow these simple, preliminary steps:

1. Check the System Requirements for the Curl platform.
   • http://www.curl.com/download/ide/system.php
     
2. Download the Curl Integrated Development Environment (IDE) and Runtime Environment (RTE).
   • http://www.curl.com/download/ide/index.php
     
   • NOTE: On Windows, the RTE is packaged with the IDE installer.
     
3. Install the RTE and IDE.
   • NOTE: On Windows, the RTE is installed automatically by the IDE installer.
     
4. Download the Order Entry Sample Application
   • #
     
5. Install the Order Entry Sample Application
   • To install the Order Entry sample application, just unzip the distribution to any drive on your machine. It will create a directory named OrderEntry and contain a file named start.curl therein.
     

Exploration
Integrated Development Environment
Start by exploring the Curl development tools.

1. Launch the IDE.
   
2. Launch the Curl Documentation Viewer.
   • The Curl help system is readily accessible from the Curl IDE via the 'Help' menu.
     

You might have noticed by now that the Curl RTE is running. That is because the Curl IDE, Documentation Viewer, and RTE are all Curl applications, that is, they are written in Curl!

Take some time to look at the Curl Documentation Viewer. You will notice, in the table of contents, that there are 4 main sections.

• Curl Developer's Guide
  
• Curl IDE User's Guide
  
• Curl VLE User's Guide
  
• API Reference
  

NOTE: You can even install your own Curl applications' documentation in the Curl Documentation Viewer!

The IDE & Visual Layout Editor (VLE) User's Guides provide detailed help on using the Curl development tools. The Curl Developer's Guide presents a narrative guide for learning about the Curl language and the libraries provided by the Curl RTE. The API Reference documents the classes, procedures, primitives, packages, etc. that make up the Curl language API.

The Curl Developer's Guide is a good place to start learning all about Curl, beginning with a quick description of how to most productively use the Curl Documentation Viewer's features (contents, index, search).

You will notice right away that the Curl Documentation Viewer is different than other documentation viewers. In particular, the Curl Developer's Guide and API Reference contain interactive examples. Since the documentation viewer is, itself, a Curl application, developers can write and test live Curl code in a Curl example box. This facilitates the learning of various Curl language concepts, and provides a convenient scratch pad for testing code snippets.

• In the "Look for:" field of the Curl Documentation Viewer's Index type "examples" and hit Enter to see this interactive feature displayed and described.
  

The Curl Developer's Guide presents material for a tremendous variety of Curl language elements, including:

• the core language syntax, types, and libraries
  
• formatted text presentations and graphical user interfaces
  
• data management and display
  
• charting
  
• graphics programming
  
• how to work with external resources
  
• packaging and deploying your Curl applications on the web
  

The API Reference describes over 100 separate libraries built into the Curl RTE, including IO, graphics, GUI, data access, and charting libraries, even IDE-related libraries to help document your applications, and profile and monitor your applications' performance characteristics.

Evaluation
Sample Application
Continue evaluating the Curl platform using the Order Entry Sample Application. You might have seen the Order Entry sample on the Curl website, or perhaps in an individual demonstration, but here is your chance to get your hands dirty, look at the code, play with the development tools, and get a feel for working with the Curl platform.

The Order Entry sample application demonstrates:

• how to build rich, complex, data-intensive web applications that leverage the computing power of your clients' machines using familiar design patterns such as Model-View-Controller (MVC)
  
• how to obtain data from web resources, then model and manage them on the client
  • transformation
    
  • summary
    
  • aggregation
    
  • modification
    
  • change propagation
    
  • submission
    
• how to build visually appealing textual, form-based, tabular, and graphical presentations laid out in a cohesive user interface
  • standard components
    • RecordGrid
      
    • Tree
      
    • charts
      
    • forms
      
  • specialized reports
    • tabular report
      
  • extensions beyond the standard Curl components
    • MinMax display pane
      
• how to customize your application's appearance using Curl stylesheets
  
• how to coordinate the interactivity of your applications, including:
  • management of user gestures
    
  • control of application workflow
    
  • processing actions and GUI changes
    
  • management of communication between application components
    

You will be running the sample application from the filesystem. The Order Entry sample uses a special Curl technique for managing application resources - a manifest - so when running from the local filesystem, the applet requires privilege.

1. Launch the Curl Control Panel
   
2. Click on the "Security" tab of the Curl Control Panel
   
3. Click on "This Computer" to open the section for local directories
   
4. Click on "Add Privileged Directory..."
   
5. In the "Add Privileged Directory" dialog, enter the directory in which you unzipped the Order Entry sample application, then click "OK"
   • For example, C:\OrderEntry
     
   • Note, you can browse to the directory using the "Browse..." button
     
6. To learn more about privilege and manifests, see the Curl Documentation Viewer.

Running the Sample Application
Now you may launch the Order Entry sample Curl application.

1. Using a web browser, such as Internet Explorer, open the start.curl file located in the OrderEntry directory where you unzipped the OrderEntry.zip file.
   
2. The browser feeds the Curl source code to the RTE which, in turn, compiles the Curl source code into high performance, native machine code. The sample application is launched and presented in the browser. The initial tab, labeled "Edit", is for data entry. Select an order from the tree to see the master/detail view for Create, Read, Update, and Delete operations
   
3. The second tab, labeled "Data", is for data visualization. It presents derived results, in chart, tabular, and data grid form. Notice the dynamic visual feedback. Because Curl runs on the client machine, it is easy to provide complex feedback in immediate response to user gestures. Click on the "Data" tab.
   
4. Click on a bar in the bar chart to popup a different view of the data.
   
5. Move the pointer over the pie chart to see a complex tooltip.
   
6. Double-click a title bar to maximize the pane.
   
7. Double-click the title bar again to restore the pane to its original size.
   
8. Notice how the presentations update immediately when a different order is selected from the index.

The Project File
Take a look at the implementation. It highlights some important aspects of the Curl platform.

• Open the project in the IDE. On Windows you can accomplish this by double-clicking on the project.cprj file found in the directory in which you unzipped the Order Entry sample application, or selecting File->Open Project... from the IDE's "File" menu.
  • For example, double-click or select C:\OrderEntry\project.cprj
    

Modeling Data on the Client
One of the most powerful attributes of Curl's rich Internet application platform is the ability to model and manipulate data on a client machine. Curl applications can obtain data from local or external resources using accepted web standards such as HTTP, SOAP, and TCP sockets. The applications can then consume data structured using well-known formats such as CSV or XML, as well as others, including proprietary formats.

Once the data exists on the client, it can be modeled, analyzed, aggregated, or otherwise processed for use in the application. Here are some examples in the Order Entry sample implementation:

1. To see an example of some source code, find the {ct-read-orders-recordset} procedure. It is called from a ctBaseTrainingApplicationModel constructor in the file model/ctBaseTrainingApplicationModel.scurl (use the IDE's Edit->Go to Line... menu to go to line 29).
   
2. {ct-read-orders-recordset} is implemented in model/ct-orders-recordset.scurl (use the IDE's Search->Find... menu and search for "ct-read-orders-recordset". Some key data access and modeling features exploited by the Order Entry sample include:
   • reading data from a resource
     
   • RecordSets - organize data as a set of records with named fields
     

Client-side modeling of data is good because it allows for highly interactive user interfaces and minimizes server trips. Curl is good for this because Curl compiles to native machine code, meaning Curl applications perform at very high levels, even with very large datasets.

Take this opportunity to look at some documentation using the IDE's context-sensitive access to the Curl Documentation Viewer. While you are in the documentation viewer, do not be shy about poking around. The documentation is one of Curl's strengths, due in part to the volume, and in part because the live, interactive examples (executing right inside the viewer) provide a convenient place to try out code and facilitate the understanding of the Curl concepts they exemplify.

• In the IDE's Editor pane, place the cursor on the "RecordSet" data type for the orders variable in {ct-read-orders-recordset} and hit the F1 key. The Curl Documentation Viewer will launch and display the documentation for RecordSet.
  

Presenting the Data
Once the data is available to the Curl application, it can be presented to the user in a variety of ways. An example of some presentation source code can be found here:

• {ct-totals-bar-chart}
  • Called at line 293 of view/ctBaseTrainingApplicationLayout.curl
    
  • Implemented at line 121 of view/ct-charts.scurl
    

{ct-totals-bar-chart} takes RecordView (a kind of RecordSet) data, manipulates the data for display, then creates and returns a chart.

The presentation components in the Order Entry sample demonstrate several standard Curl features, including:

• Charts
  
• RecordView
  
• ChartDataSeries
  
• Event handling
  
• Exception handling
  

You can easily find chart documentation:

• In the IDE's Editor pane, place the cursor on the "LayeredChart" data type for the chart variable where {ct-totals-bar-chart} is called in view/ctBaseTrainingApplicationLayout.curl, and hit the F1 key. The Curl Documentation Viewer will launch and display the documentation for LayeredChart.
  

A variety of presentations is good because it is the mark of a truly rich user interface. Curl is good for this because Curl offers a wealth of built-in presentation classes:

• charts
  
• data grids
  
• forms
  
• graphical objects
  
• enhanced text
  

Curl is extensible, so new presentations are only a {define-class } away!

Styling the Application
The presentation objects can be styled using Curl StyleSheets. Styling is implemented using a styling library provided by Curl. The library is included, in pcurl format, with the Order Entry Sample Application.

• The pcurled format is a compressed, pre-processed format which is useful for hiding code and improving delivery speed.
  

The library is incorporated into the sample as follows:

1. identify the library to the sample
   • see line 28 of the OrderEntry/manifest.mcurl file
     
2. import the library where you wish to use it
   • see line 15 of start.curl or line 38 of view/load.scurl
     
3. install the stylesheet for use by calling {install-style-sheet}
   • see line 17 of start.curl
     
   Notice how the default style sheet is augmented with user-defined StyleRules in the call to {install-style-sheet}.

NOTE: The IDE has features that make it easy to start a project that uses the styling library.

Stylability is good because you can customize the look of GUI controls, and provide themes or branding to your application. Curl is good for this because the Curl stylesheets are separate from application source code. This allows designers and developers to work independently.

Coordinated Layout and Change Management
The presentations have been connected to the data, so they can now be placed in a coordinated layout. Interactivity needs to be handled, and data changes need to be managed. The primary controller for the Order Entry application is ctBaseTrainingApplication. It is located in the controller package, in, predictably, the controller/ctBaseTrainingApplication.scurl file. This class handles layout management as well as data management.

• Look at the code in the controller/ctBaseTrainingApplication.scurl file.
  

The Order Entry sample's RecordForm demonstrates data binding using Curl's macro.

1. Open the view/LineItemForm.scurl.file.
   
2. Search for "{bind".
   As you review the code, you will learn how the application makes use of:
   
   • Curl's graphical layout system
     
   • Coordination techniques
     • Enqueue and handle events to provide a high-quality user experience
       
     • Change management, including data binding, to update the data model in response to user manipulation
       
     • Synchronizing presentation components with the updated model
       

Check out the documentation for various features:

1. In the "Look for:" field of the Curl Documentation Viewer's Index type "graphical containers" and hit Enter. You will find a wealth of information on the building blocks of Curl's GUI subsystem.
   
2. In the "Look for:" field of the Curl Documentation Viewer's Index type "events" and hit Enter. Read through the section on "Events".
   
3. In the "Look for:" field of the Curl Documentation Viewer's Index type "DataBinding" and hit Enter. Read through the section on "Forms and Bound Data".
   

Coordination is good because a coordinated layout makes for a cohesive user interface and facilitates functionality such as maximizing individual presentations (click on the "Data" tab and double-click on a chart's title bar), drill-down (click on a bar in a bar chart), mouseovers (move the pointer over a pie chart), and drag-and-drop (not implemented in the sample). Curl is good for this because you can use event handling, a familiar programming technique, as a way to add interactivity to an application. Curl also allows you to define your event handlers dynamically, as arguments to the constructor of the event target.
This facilitates declarative creation of user interface objects along with the handlers of events that might be fired at those objects.

Proper change management is good because it allows different presentations to remain synchronized, so if data changes are made in one presentation (e.g., in the line item editor on the "Edit" tab) all the presentations (e.g., those on the "Data" tab) reflect the change. Toward that end, Curl has given significant attention to data binding making it a powerful, yet easy to use way of managing changes to your data.

Some More IDE Features
Now is a good time to take a look at some other IDE features and components. For example:

1. Ctrl-right-click the "Curl Order Entry Sample" title at the top of the sample.
   
2. Select the "Graphic Hierarchy for []" to launch Curl's graphical hierarchy tool.
   
3. You can also select "Inspect []" to inspect an object's members and options.
   

Another convenient feature is code completion.

• Somewhere in the start.curl file, start typing "{ct-rec" then hit Ctrl-Space to see the possible completions.
  

Of course a very powerful feature is the debugger, which is tightly integrated with the rest of the IDE. Try setting a breakpoint:

• Set a breakpoint by clicking in the vertical, gray column along the left-hand side of the Editor panel in start.curl.
  • Try setting it next to the constructor of the ctBaseTrainingApplication class (line 112 of start.curl).
    

The next time the demo is run during this IDE session, the debugger will stop execution at this point. Refresh the browser containing the OrderEntry sample to see it in action.

Deploying Curl Applications
You have seen a sample Curl application, taken some time to explore the tools used to build such an application, and now you can take a look at how Curl addresses the matter of deploying your applications. Curl does not require any special kind of server; a typical web server, simply configured to server Curl content, is all you need.

• In the "Look for:" field of the Curl Documentation Viewer's Index type "configure Web servers" and hit Enter to learn the configuration basics.
  

Curl allows developers to compress and obfuscate their Curl source code in a pre-processed format called pcurl for fast delivery of applications to client machines in a format not easily read by humans. Illustrating the compression aspect of the pcurl format, ~115kB of source code in the Order Entry sample pcurls down to ~18kB.

• In the "Look for:" field of the Curl Documentation Viewer's Index type "pcurl files" and hit Enter to learn the about pcurl.
  

NOTE: The pcurl feature in the IDE is considered a professional feature, thus is not immediately available in the free version of the IDE.

The Curl IDE has many other features aimed at simplifying application deployment. For example:

• In the "Look for:" field of the Curl Documentation Viewer's Index type "projects" then double-click on the sub-entry "deploying" for a comprehensive discussion of deployment.
  

Visual Development Using the Visual Layout Editor
Curl provides a visual development environment called the Visual Layout Editor (VLE) which you can use to develop the user interfaces for your Curl applications. The VLE is integrated with the IDE, making it easy to switch between environments as appropriate for the code you are working on. This is particularly useful when adding behaviors (using, for example, event handlers) to your user interface.

One of the great features of the VLE is its extensibility. The VLE supports a tremendous number of Curl objects by default, but imagine you have your own component that is not included in the default VLE palette. Is it possible to place such a component into the visual development environment? Yes. You can define your own objects and add them to the VLE palette, thereby extending the capabilities of the VLE. Curl even provides a tool, the VLE Extension Editor, to help you do exactly this. Once the extension is installed, the VLE will load it during startup, making your component available each time you launch the VLE.

Refer to the Curl VLE User's Guide to learn more about how to use and extend the VLE.

Summary
The Order Entry sample application showed you that:

• Curl is the right platform for building web applications that consume moderate to large volumes of data and require high performance from visually appealing, rich user interfaces.
  
• Curl can obtain data from local or external resources using accepted web standards such as HTTP, SOAP, and TCP sockets.
  
• Curl applications can consume data structured using well-known formats such as CSV or XML, as well as others, including proprietary formats.
  
• The Curl platform encourages you to model your data on the client to leverage the processing power of the user's machine. With data modeled on the client, performance and user experience are maximized while server trips are limited to incremental data requests or occasional code updates. Contrast that with conventional thin client technologies!
  

While the Order Entry sample application is relatively small in size, it is representative of a typical Curl application because

• it has a rich user interface which is executed on the client
  
• it uses libraries that are built-in to the RTE
  
• it creates new classes and libraries, and extends existing classes and libraries to augment the Curl RTE
  
• it uses Curl's styling library to customize the appearance of the GUI controls and the application
  
• it consumes relational data
  
• it transforms, sorts, filters, and presents data
  
• application logic (e.g., aggregation and summary) is performed on the client
  
• it allows the user to operate on the data and submit changes
  
• it implements a change management mechanism using data binding
  

The Order Entry sample uses CSV data read from a local file for the sake of simplicity. Any structured data will do, and other web-standard formats and mechanisms such as XML, HTTP, SOAP, and TCP sockets can also be used to obtain data from external resources. Your applications will be different, but the approach will be largely the same.

Order Entry Sample Application

NOTE: This version of the Order Entry Sample Application requires release 6.0 of the Curl RTE.

OrderEntry.zip