Customizing Your RAD Web Application

Document Sample
Customizing Your RAD Web Application Powered By Docstoc
					      Customizing Your RAD Web Application
    As you may recall, our first article introduced you to the concepts behind
    creating a web application using a rapid application development (RAD) toolset
    for .Net development. We used Iron Speed Designer to create an application
    based off of Microsoft Access' sample Northwinds.mdb - a fictional database
    that stores product and customer information. In this tutorial, you will learn how
    to brand that same app by applying your own logo and modifying column
    headings using the Iron Speed Designer RAD tool.
                                  RAD Tutorials for .Net Topics

          - Creating A RAD Web Application
          - Customizing Web Applications Quickly
          - CASE RAD Tools For ASP.Net
          - Using Relational Databases And Custom Queries .NET CASE Tools
    Welcome back to the second installment in my series on configuring and
    customizing a database-driven web application using a great tool known as the
    Iron Speed Designer. In the first article of this series you learned how to set-up
    your initial application.
    For our sample, we created a simple set of 8 product pages that allowed us to
    edit, add, and show items from the Northwinds.mdb product table. If you
    missed that article - or just need a refresher - you can find it (along with some
    sample files) Creating A RAD Web Application.
    Picking Up Where We Left Off
    As previously stated, in this article, we are going to modify the look of the
    application we created in our first part of the series, adding branding and style.
    To do that, we first need to open our previously created application. To do so,
    simply click on the Open App button and choose the most recently created

    Once the application loads, navigate to the Products folder in the Application
    Explorer and expand the category by clicking on the + symbol. Next, check the
    check-box located next to the file ShowProductsTable.aspx, shown below:
By default, you will be viewing the application in Design Mode:
In Design Mode, you can modify the way your pages look. For instance, in the
above image, you will note two headings: Column Headings and Table Rows.
By dragging the data in one field to another field, you can change the layout of
your column headers. For instance, to begin with, click on and drag the value
in F1 - in this instance ProductNameLabel - to cell G1. Upon doing this, you will
notice that cell F1 is now empty, while field G2 now contains
ProductNameLabel and its original value, QuantityPerUnitLabel:
It is important to note here that the values in ColumnHeadings are currently all
of the type: Label. As you may imagine, Label is simply a text field used to
identify an associated value. For instance, if you look in our original image, you
will see ProductName directly below ProductNameLabel. You will note that
when you moved ProductNameLabel, its associated value ProductName was
not moved. This is because Iron Speed Designer does not associate the label
field with the value. Always keep this in mind when re-arranging labels on your
Fixing this is fairly simple: just drag the value in F2 (ProductName) to G2:
So far, so good. Before we go any further, let's preview our product page to
see how the changes we made look.

As you can see from the above image, our two fields - Product Name and
Quantity for Unit - both appear in the same column. While you could leave it
this way, it can lead to problems further down the line. For instance, if you wish
to perform a calculation on this field in the future, it could lead to formatting
errors, as it contains both text and numeric values. Also, from a visual
standpoint, the column seems crowded with too much data.
To fix this, click on Design Mode, then just drag QuantityPerUnitLabel to F1,
and QuantityPerUnit to F2. Here is how it should look:
Now, preview it once more by clicking on the Live Preview button. Iron Speed
Designer will rebuild the page, and you should see something similar to the
image below:

Now Product Name is in the second column, and Quantity Per Unit is in the
first. Simple enough right?
In addition to arranging the different column headers and their related dataset,
you can also change the way the column headers appear. At the moment, our
headers are blue and bold. We can easily change the properties of our column
labels by using the Properties pane, which is located to the right of our table
data, below the Toolbox pane:

In the above example, we are looking at the cell properties for
QuantityPerUnitLabel. If we want to change the color of the label, all we have
to do is change the ForeColor value by clicking in the box and choosing the
color red from the pop-up.
Now when you click on Live Preview, the column header text for that column
will be red. If you want to change the background color of the cell, you can do
that by clicking into BackColor and choosing a color. For our purposes, let's
choose black. Once you do, click Live Preview again, and you should see the

In addition to the way labels look, you can change their behavior, add tooltips,
set the height and width and more.
Changing the Application Logo
Another aspect of your pages that you can change is the Application Logo, a
vital part of your branding efforts. The process is fairly simple; first, find the
Header and Footer folder in the Application Explorer, expand it by clicking on
the + button, and click on Header.ascx. This will load the header.ascx layout
page, which contains header information for your app.
To change out the logo, click Logo in cell A2, then find ImageUrl in the
Properties pane. Change the value to the location of where your logo image is
stored. For instance, I stored my logo on the Desktop of my computer, so the
ImageUrl becomes:
      file:///C:/Documents and
Note that if you use a URL for an image on your computer, you have to
      File:///C:/
In addition, you will need to change the backslashes (\) in the image URL to
forwardslashes (/).
Next, to see the change, use the Application Explorer to navigate back to
Products -> ShowProductsTable.aspx. Once the Design Mode loads, go
ahead and click on Live Preview. The preview of the product page should now
have your logo, similar to the page shown below:
This article series has only scraped the surface of what you can accomplish
utilizing Iron Speed Designer. While it is only an introductory glance, it should
give you an idea of how to work with the program, and some of the tasks you
can accomplish with it.
If you would like to learn more, you can view Iron Speed Designer's product
page at:
For documentation and more tutorials, you can visit:
For technical support or product questions, visit:

Shared By: