Blog: Posts from August, 2012

Blog

Posts from August, 2012

Tuesday, August 7, 2012Print Subscribe

Implementation of input element enhancements may be very simple or demand a relatively complex code. The client input elements are written in JavaScript and may require debugging.

The first instinct of any developer is to write some code, run the app, and try the code in action. Developing and debugging a custom input element with the entire web application project may become unproductive – you need to sign in, navigate to the correct page, select a view to force the custom input element to be activated. Each step takes valuable time.

We recommend creating a test HTML page and debugging the app without touching the actual application.

Let’s consider creating a test HTML page for the Reorder Level Slider input element shown in this screen shot of a live application.

If you have followed the instruction from the tutorial then you have the following folder structure under [Documents]\Code On Time\Client folder.

Create the HTML file ReorderLevelDebugger.htm with the following content in Visual Studio or your favorite text editor.

<!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>
    <title>Edtior Debugger</title>
    <link type="text/css" rel="Stylesheet" href="../../../Library/_Client/Stylesheets/_System/_System.css" />
    <script type="text/javascript" src="../../../Library/Data Aquarium/Scripts/_System.js"></script>
    <!-- 
         Important: 
         link the file(s) that you are debugging after the reference to _System.js 
     -->
    <script type="text/javascript" src="ReorderLevelSlider.js"></script>
    <script type="text/javascript">
        // this code is the emulation of steps executed by the client library
        var reorderLevelEditorFactory = null;
        $(function () {
            // create a slider factory object
            reorderLevelEditorFactory = new MyCompany$ReorderLevelSlider()
            // initialize the debugging buttons
            $('#Attach').click(function () {
                reorderLevelEditorFactory.attach($('#Input1').get(), 'Form');
            });
            $('#Detach').click(function () {
                reorderLevelEditorFactory.detach($('#Input1').get(), 'Form');
            });
        });
    </script>
</head>
<body>
    <div>
        Testing the "Reorder Level" slider:
    </div>
    <div>
        <button id="Attach">
            Attach</button>
        <button id="Detach">
            Detach</button></div>
    <div style="border: solid 1px silver; padding: 8px; margin-top: 8px;">
        <input type="text" id="Input1" value="35" />
    </div>
</body>
</html>

The file declares a script block with the global instance of MyCompany$ReorderLevelSlider object. The startup script also assigns click handlers for Attach and Detach buttons declared in the page body. The script header links the system script and stylesheet included by the code generator in every application.

Save the file and open it in the web browser. This is how the page is rendered in Internet Explorer 9 if you click on the file name in Windows Explorer.

You will need to allow execution of JavaScript in the local webpage. This will not be necessary if you preview the page by selecting View in Browser (Ctrl+Shift+W) in the Visual Studio development environment.

Click Attach button to see the slider attached to the input field.

Move the slider to try it out.

Click Detach button to see the slider removed.

Buttons Attach and Detach invoke the corresponding methods of the “factory” object to associate custom input enhancement with the input field and to have them removed. This is exactly the same pattern of execution by the client library in the live web application.

Labels: AJAX, JavaScript, User Interface, Web Application Generator

Monday, August 6, 2012Print Subscribe

Feature: Drag and Drop Everywhere

Everything in a Code On Time web application project can be configured with drag and drop and Cut/Copy/Paste with multiple selection. For example, master-detail pages can be quickly configured by dragging and dropping project configuration elements.

Start the Project Designer and create a new page called “Master Detail Page”.

Drag the new page to the right side of the Home page and drop to have it moved.

While holding down Ctrl key, select Customers, Orders, OrderDetails data controllers and copy them to the clipboard.

Paste the controllers to the Master Detail Page.

Drag CustomerID data field node onto view1. The data view view2 will be configured to filter orders by the customer selected in view1 data view.

Drag OrderID data field node onto view2. Data view view3 will be configured to filter order details by the order selected in view2 data view.

View the page in the browser.

Select a customer, and a list of related orders will appear underneath. Select an order, and related order details will be displayed.

Learn more about advanced configuration of master-detail pages.

Labels: Features, Tips and Tricks, User Interface, Web Application Generator

Monday, August 6, 2012Print Subscribe

Using Drag and Drop to Configure a Master-Detail Relationship

Master-detail pages can be quickly created in Code On Time web applications using drag and drop operations in the Project Designer.

Creating a Page

Start the Project Designer. In the Project Explorer toolbar, press New Page.

Assign the following properties, and press OK to save the page.

Property	Value
Name	Master Detail Page

The page will appear at the bottom of the page hierarchy in the Project Explorer. Drop it on the right side of Home node to place it in the second position in the navigation menu.

Adding Data Views

Switch to the Controllers tab. While holding down Ctrl key, click on the controllers in this order: Customers, Orders, OrderDetails. Right-click on OrderDetails node and select Copy.

Switch back to the Pages tab. Right-click on Master Detail Page and press Paste. The three copied controllers will be pasted as data views each in their own container.

Configuring Master-Detail Relationships

The data views have been added to the page, but there are no relationships between them yet.

Expand to Master Detail Page / c102 / view2 / grid1 / CustomerID data field node. Drag CustomerID and drop on view1 node. The data view view2 will be configured to filter orders by the customer selected in view1 data view.

Expand to Master Detail Page / c103 / view3 / grid1 / OrderID data field node. Drag OrderID and drop on view2 node. Data view view3 will be configured to filter order details by the order selected in view2 data view.

Testing the Three-level Master-Detail Page

In the Project Explorer, right-click on Master Detail Page node and press View in Browser.

The web application will be generated and the page will open in your default browser. Select a customer, and a list of related orders will appear underneath. Select an order, and related order details will be displayed.

Further Customization

The standard form views have their fields rendered top down. The screenshot shows form views of related customer and order.

Let’s customize the presentation of both form views.

Switch back to the Project Designer. In the Project Explorer, double-click on Master Detail Page / c101 / editForm1 / c1 category node.

Change the Floating property to “Yes”, and press OK to save the category.

Property	New Value
Floating	Yes

In the Project Explorer, right-click on Master Detail Page / c102 / view2 / editForm1 / c1 node and press New Category.

Assign the following properties.

Property	New Value
Header Text	Shipping Info
New Column	Yes

Drag all the Ship- data fields from c1 – Orders category and drop them on c2 – Shipping Info category.

Right-click on Master Detail Page node, and press View in Browser.

When the page loads, select a customer from the list. The form view will be more compact as the fields are floating. Click on an order – the data fields will be split in two columns.

If you select an order detail record, it will show up in a modal window. This behavior has been configured automatically when the master-detail relationship was established between view3 (Order Details) and view2 (Orders) data views.

Labels: Designer, Master/Detail, User Interface, Web Application Generator