My Portal Project

Downloads, Installs, and your first form…

Inspired by Jake Howlett’s “PHP for Domino Developers Parts 1 thru 6″, I thought I would share some of my experiences in my recent foray into the .NET world. Although I have been a Domino advocate since version 3.1 (1994), and I even worked for Lotus and IBM, my interest in .NET came from my personal disappointment that is called Domino R7. Although I have done a good amount of work with J2EE, I find .NET to be just as powerful yet alot more friendly and flexible.

First, some assumptions. If you think that Microsoft is the great evil of the software world, just hit the back button now. Our jobs as technical resources is to get the job done using the best tools for the job, and we all need to know what tools are out there. Second, you will need to understand the basics of relational databases since .NET does not have a built-in data store as easy as Domino’s. If you do not have a basic knowledge of relational databases, you should be ok anyway since it is not my strength.

Although the primary design environment for .NET is Visual Studio, you can download a free IDE called Visual Web Developer 2005 Express (VWD). While that is downloading, also download a recent version of MySQL, and MySQL Control Center. The reasons I want to use MySQL for this project is that it is free and we can all work from the same tools. I do not have a MSSQL Server in the house, and that is where this is being written. The difference between VWD and Visual Studio is that with VWD you are limited to only Visual Basic, and you can only design web forms. With the full Visual Studio suite, you can design .NET applications using VB, C#, J++, and C++, and you can design standalone applications.

We will not need to download a web server either since VWD comes with a lightweight web server called Cassini. With VWD 2005, this project will be using the .NET 2.0 framework, so if you have an IIS server around the house, you will need to run this application in a different application pool, and make sure to configure it to use the 2.0 run-time (listed on the ASP.NET tab of the application properties).

Once all that is installed we can jump right into Visual Web Developer, to do the first thing a Domino developer does when creating an application; design the form(s). For this series I decided on creating a basic Help Desk template since most of us have done something like this at one point or another.

For anyone who has used an Integrated Development Environment like VB6, or Websphere Studio, the basic layout of the IDE should be familiar. The start page has some updated news, recent projects, and new project templates. So let’s start this project by clicking on the “Create a Web Site” link.

Very typical layout with the tools on the left, the code/design pane in the middle, and various property menus on the right. Inside the middle pane, you can switch between Design mode and Source mode by selecting one of the tabs at the bottom of the pane. Design mode will show you a WYSIWYG layout, while Source mode will show you the actual mark-up code.

In the left-hand pane are the tools you can use to design the form. There are 8 different categories of tools but you will need to collapse the “Standard” category to see the others. The default categories are Standard; Data; Validation; Navigation; Login; WebParts; HTML; and General. Right off the bat you can see that this IDE does not separate objects as much as the Domino Designer. You do not need to create an Outline in one tab, and then embed it in another; you will do both in the same place with VWD.

You may have noticed that there are some similarities between the HTML and Standard categories of tools but this is in name only. The Standard tools are also referred to as Server Controls and they are alot more flexible than the HTML tools. In a nutshell, the HTML tools are your classic fields/controls that you are used to, whereas the Standard tools are extremely flexible, powerful, extendable, and can be programmatically manipulated from within your code very easily. Let’s switch over to Design mode and create a basic “keyword” form for our Help Desk app.

Let’s create the basic keyword name/value form that can be used for the typical lookup. Open up the “HTML” tool category and drag a table onto the form layout. We can use an HTML table here because this table is only used for layout purposes so we do not need the server table control. When the table has been dropped on the form, stretch it out to make room for our fields and labels.

A little heads up: if you click out of the table before you get it sized properly, you may find it difficult to resize the whole table since the UI thinks you are only resizing the last column. At the bottom of the center pane you will see something that could be called “nested breadcrumbs” that show you which object you are working within and what other objects it may be nested within. In the case of resizing a table, just click on the “<table>” tab and the whole-table resizing points will reappear.

For our form we will only need two columns so delete the third column in the typical fashion; right-click inside the table, select “Delete” and then “Columns”. Now let’s add our field labels. Traditionally, we simply typed text where we wanted the labels and you could still do that here, but in this case we will use server control labels (”Standard” category) since it allows us to change the text of the label programmatically. We may need this later so let’s just build it now. From the “Standard” category of tools in the left pane, drag a “Label” control into the first column, second row. After you drop the label onto the form, the properties box in the bottom of the right pane will show you all the properties of this label control. For now, let’s just change the text of the label from “Label” to “Keyword Name: “.

Rinse and repeat by adding another Label control to the first column, third row, and changing the Text property to “Keyword Value: “.

Now we can add our text fields which .NET calls a “TextBox” control. Drag a TextBox into the second column, second row of our table, and then another into the second column, third row so you have a form like below:

To adhere to good programming edicts, let’s make sure our fields and labels have names that we can easily remember when we refer to them, and will tell another programmer what they are and do. Although you can change the ID of any control via its properties box, we can do it all in one swoop by switching back over to the “Source” view and editing the mark up directly. Below is a screen capture of what I renamed my objects with:

As a finishing touch, we will need a button to submit/save the data. Drag a button from the left pane to the center pane under the table, and change its ID to “saveSubmit”, or whatever you think is best.

Now let’s see what it looks like. Just right click on the form and select “View In Browser”. This will start the local test server and show your page with the default browser. You can add values and click Submit, which does not do anything yet, but that comes in the next installment. We will create a database table and add some CRUD features (Create/Read/Update/Delete) using some of .NEt’s cool data binding features.

Until then create new forms and play with the various controls and properties to see some of the power and flexibility this platform can bring to the table.

Part two can be found here

This entry was posted on Sunday, December 18th, 2005 at 10:54 pm and is filed under .NET for Domino Devs. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.