This feature continued in Part 2 (ii) and Part 3

In the first part of this series, I introduced Enterprise Core Objects in Delphi 2005 Architect, and showed how to build the model to create and maintain weblog entries (and feedback). I also explained and demonstrated how to make the instance of the model - called the EcoSpace - persistent in a database like SQL Server, Interbase or any other ADO.NET or BDP compliant DBMS.

This month, we'll build multiple pages on top of the objects in the EcoSpace, showing the list of categories, weblog posts in categories, and allowing visitors to read the posts (leaving comments will be covered next time).

Next month, we’ll add some management capabilities to the application, including authentication and authorization (who can add and/or edit what), and then I’ll also try to touch on some deployment issues. But first…

Flashback

I want to continue with the ASP.NET Eco Weblog project from last time (you can still download the source code), so re-open that project. As a reminder, last month, we ended with the following ECO Model:

The Entry class is abstract, so we cannot make instances of it. But we can use the Post and Comment derived classes, as well as the Category class.

Step #3: The GUI on top of the Model

We will now use the Post, Comment and Category objects defined in the EcoSpace to design our ASP.NET Web Forms. The Weblog application already has a first web form in file Webform1.aspx. I don’t particularly like that name, so click on this node in the Project Manager, and then click again (or right-click and do “Save As”) and change its filename to Blogs.aspx.

Each .aspx file also has an associated .pas file, where the so-called “Code Behind” is stored. We can place controls on the .aspx page and design its look and file, and write the processing code in the .pas file. For ECO ASP.NET projects, the .pas files already contain quite a lot of smart code to ensure that the ECO objects can be used in the ASP.NET world (specifically, there is a lot of built-in support for the ASP.NET DataGrid control, as we’ll see in a minute).

ReferenceHandle and ExpressionHandle

If you double-click on the Blogs.aspx note in the Project Manager, the page will be shown in the HTML designer. This is where we can place the ASP.NET controls to build our user interface.

If you look closely, you may notice the rhRoot component at the left side of the non-visual component area of the HTML designer. This is the ReferenceHandle between the Web Form and the EcoSpace (and all objects inside it) – the connection between the ASP.NET web form and the ECO objects.

In order to get our hands on the objects in the EcoSpace, we need to add another component from the Enterprise Core Objects category, namely an ExpressionHandle. An ExpressionHandle can be used to evaluate an OCL (Object Constraint Language) expression, returning all instances of an ECO class, for example.

Open the Enterprise Core Objects category of the Tool Palette, and double-click on the ExpressionHandle component to add one to the non-visual components area of the web form. This one will be used to display all Category objects, so change the name of the ExpressionHandle component to ehCategories.

The ExpressionHandle is linked to either a ReferenceHandle or another ExpressionHandle using its RootHandle property. In this case, it can only be linked to the rhRoot ReferenceHandle, so point the RootHandle of ehCategories to the rhRoot ReferenceHandle.

We can now specify an OCL expression in the Expression property of ehCategories. In order to help you with building this OCL expression, the Expression property is supported by an OCL expression property editor.

Just double-click on the Expression property, or click on the ellipsis to start the OCL Expression Editor.

Note the warning in the caption about the code not being recently compiled. In this case, the code was last compiled a few weeks ago when I wrote the first part in this series. However, the biggest potential problem can be encountered when you’ve made changes to the model, and didn’t recompile yet. In that case, the OCL expression editor may not show you all available ECO objects (or attributes, associations, etc. for that matter). So while I feel confident everything is up to date, it never hurts to compile your code just in case.

Anyway, using the OCL expression editor we can select the object we want to work with, in this case the Category type. Double-click on Category in the listbox on the right, which will place it in the memo field on the left, replacing the contents of the listbox with all possible attributes for it, like allInstances to return all instances of the Category type.

Click on OK to close the dialog, which will put Category.allInstances in the Expression property.

As you could see in the last screenshot, we could also select the .Posts (association), .Name (attribute) or for example the .externalId attribute of the Category object. This externalId can be seen as the primary key of the Category object instances: each instance has a unique value of the externalId, to distinguish it from all other instances. This externalId value is very handy as selection criteria, and for that reason we can set the AddExternalId property of ehCategories to True. As a result, the ExternalId will be added to the fields of the Category object instances that are returned by ehCategories.

DataGrid

Time to add some visual controls. From the Web Controls category of the Tool Palette, double-click on the DataGrid control to place it on the ASP.NET web form in flow layout. We can connect the ehCategories to the DataSource property of the DataGrid (the DataSource can be connected to object implementing the IEnumerable interface – including the result of the ehCategories).

This will immediately display two columns in the DataGrid: one for the ExternalId and one for the Name attribute.

While the ExternalId is very handy to work with, it’s not something that I want to display to the visitors of my weblog. This can be configured using the Property Builder dialog, which can be started by clicking on the link (also called “verb”) at the bottom of the Object Inspector.

Before we start the Property Builder, however, first click on the Auto Format link, and select a scheme, like Professional 3. This will assign pre-defined values to the properties in the Style category (see previous screenshot). You can always override them again, or skip the Auto Format dialog and define them yourself right from the start.

While the Auto Format dialog and the properties in the Style category are used for display purposes, the Property Builder dialog is meant for a more powerful control over the actual fields and data which is displayed in the DataGrid.

The DataGrid Property dialog contains five different pages (or categories). At the first page, we need to define the Data key field, and select the ExternalId as key field.

Note that his first page gives us a “warning” that the DataGrid columns will be automatically generated from the selected DataSource (i.e. the ehCategories), and that we can define additional columns in the Columns page.

Click on the Columns category to view the columns page. The first thing we need to do here, is uncheck the "Create columns automatically at runtime" option, because that will automatically generate both the ExternalId and the Name columns, and I only want the Name column. Once the automatically generated columns are gone, we can add our Name column explicitly:

Change the Header text from “Name” to “Categories”, so people will know what these names are all about. When you’re done, close the DataGrid Properties dialog again.

The DataGrid on the ASP.NET Web Form will now show only one column for the Name attribute.

One more thing to do in order to bootstrap the EcoSpace, and that’s the addition of a Button to create new instances of Category objects and add these to the EcoSpace.

From the Web Controls category of the Tool Palette, double-click on a Button control. This will place the Button control right next to the DataGrid control. If you want to place it below the DataGrid, press the left keyboard arrow to move the cursor between the DataGrid and the Button, and press Enter. That will insert a paragraph – HTML <p> tag – between the DataGrid and the Button control.

Set the Text property of the Button to “New Category”, and its (ID) property to btnNewCategory. Then, double-click on the Button to go to the Code Editor where we can implement the Click event handler as follows (btw, you may notice that the name of the web form is still TWebForm1. In general, it’s a good idea to rename these Web Forms and give them more sensible names):

procedure TWebForm1.btnNewCategory_Click(sender: System.Object;
  e: System.EventArgs);
var
  NewCategory: Category;
begin
  NewCategory := Category.Create(EcoSpace);
  NewCategory.Name := 'New Category';
  UpdateDatabase;
  DataBind; // update display
end;

This will create a new Category instance, add it to the EcoSpace, set the Name attribute to plain “New Category”, will also save the database and display it in the DataGrid. However, if you click on this button twice, you will have two “New Category” items in the DataGrid, but no way to actually specify the real name of these categories. For that, we need to modify the DataGrid a bit more, and add Edit capabilities.

Go back to the HTML designer, select the DataGrid, and click on the Property Builder link again to start the DataGrid Properties dialog. Go to the Columns page, and scroll down in the list of available columns until you get to the Button Column types. Here, you’ll see an Edit, Update, Cancel Button Column type, which can be used to edit a row in the DataGrid, so you can add this type to the list of selected columns.

And while we’re at it, also add the Delete Button Column, so we can delete Categories that are no longer used (or were added by mistake).

By default, the Edit, Update, Cancel and Delete commands will be displayed as LinkButtons, but you can change that to PushButtons if you wish. You can even change the Text that will be used for the individual commands. Close the DataGrid Properties dialog when you’re done.

Although the buttons will now appear in the DataGrid, they need to be connected to the specific events. Normally, this involves writing (a lot of) code, but for ECO ASP.NET web forms, this code is already present in the web form itself, so the only thing we need to do is to connect the event properties to the corresponding event handler.

Select the DataGrid control, and go to the Events tab of the Object Inspector. One of the event properties is already connected: the SelectedIndexChanged event. We now need to connect the CancelCommand, DeleteCommand, EditCommand, and UpdateCommand event properties.

To start with the first one: open the drop-down combobox for the CancelCommand event, and assign it to DataGrid_CancelCommand. Do the same with the DeleteCommand (to DataGrid_DeleteCommand), EditCommand (to DataGrid_EditCommand), and UpdateCommand (to DataGrid_UpdateCommand).

Now, save your work. Compile and run the ECO ASP.NET application, which should show an empty Categories DataGrid and a button below it:

We can now click on the New Category button a few times to add new categories. They will all get the same name “New Category”. However, their ExternalId value will be different, so it will be no problem to distinguish between them (as we’ll need to do later).

We can use the Edit link to change the name value of a new category, and then either Update or Cancel the change. The Delete link can be used to remove a category from the DataGrid (and EcoSpace) again.

Here’s a first brainstorm of categories I could post in:

Continued in Part 2 (ii)...