"New Project" dialog

Start Prism by running Visual Studio or using the "Embarcadero Prism in Visual Studio" shortcut in the Windows Start menu. First you will see a Welcome window that you can close for now. The examples in there are interesting, but not part of this crash course. You should see the Start Page of VS now. In the Recent Projects box, click in the "Create: " line on "Project ...". In the following dialog you can choose between different project types Delphi Prism supports.

There are different categories of projects. There's the MonOxide branch, which let's you build projects running under Linux or MacOS using the Mono framework. For windows projects, you can choose between different types of applications, too. For applications with a "nicer" GUI you can choose using the Windows Presentation Foundation (WPF), but that's not the best way for getting started. So, please choose "Windows Application" in the "Windows" branch.

Give the project an appropriate name (e.g. "HelloWorld") and do the same for the solution (e.g. "Crash Course"). A solution consists of different projects that belong together. For example, you can have the GUI as one project and the logic behind it in another project: both projects are in one solution. We will have one solution with all our projects for this crash course together. You can choose another folder for the solution, if you want. The standard path will do fine for now.

If working with a trial version, you will be prompted for a license every time you open or create a project. Just click on "Continue with Trial License" for the next 30 days ;-)

VS2008 in design mode

The next thing you see is the design mode, which shows you the graphical parts of your application. We will look at the source code later. In the design mode you see basically three things:

1. An empty window, also called a "form". That's where you will place buttons, textboxes, etc. to design your own GUI by using the so called "form designer".
2. The Solution Explorer. You can see your projects and the files in your projects there.
3. The Properties box. You can see and change the properties of controls (button, textbox, etc.) you select in the form designer there. You could make the background of your form green or the text in the textbox bold.

One important thing is hidden: The toolbox. That's where you will find the controls you can place on a form. The toolbox will show itself when you hover with your mouse over the "Toolbox" tab on the left side of the VS window. The first thing to do when having a fresh setup of VS: pin the toolbox so it isn't hidden anymore. If you want to do that, click on the pin icon in top right corner of the toolbox.

Placing Controls on the Form

Before you start creating your GUI, you should plan it properly. First think about what your project is supposed to do and then how you want to present these features. Also keep in mind that an extraordinary layout makes your application something special, but most users will be used to the standard windows layout.

First, create a simple "Hello, World!" application, because you can't write a tutorial without doing that ;-). The user should have the possibility to type his own text and show that one. What we need is a textbox for the user's input and a button which will be clicked to show a message box displaying the text. You also need a label that tells the user what he is supposed to do with the textbox.

Guidelines

All controls can be found in the "Common Controls" section of the toolbox. Click once on the control in the toolbox, then click on the form at the point where the control has to be placed. At first, do this with the Label control. After you clicked into the form, you should see the control there. You can click on the control and drag it around on the form. When you get near the borders of the form, two blue guidelines will be displayed and the control will "lock" at this position. This makes it easier to position the control on the form.

Now place the TextBox control on the form directly under the Label. A guideline will be displayed, if the distance between the label and the textbox is okay. Another guideline will show the correct distance to the form's left border.

Now it's the button control's turn: place it on the right side of the form. You will notice a new pink guideline indicating that the bottom line of the button text and the bottom line of the textbox text match. That's exactly what you want. Last thing to do is to increase the width of the textbox. In order to do that, select the textbox by clicking on it, then click on the white circle at the right side of the textbox and drag it to the right, until you get near the button where another blue guideline is displayed.

Changing Properties

After the textbox, the button and the label are in place, you have to change some properties of the controls. They need to get proper names and an appropriate text. Let's start with the textbox by selecting it. Take a look at the properties box in the lower right corner of VS. It's a table with two columns. The left column displays the name of a property, the right column its value. Find the "(Name)" property and click into the right column in that row.

It's important to choose good names for your controls. In a bigger project you won't know, what textBox42 was and what button23 is doing. So choose names that tell you what the controls are good for. I'm prefixing the controls additionally with some letters that make clear if they're a button or a textbox or a label, etc. That has the advantage that I can call the label "lbInput" and the textbox "tbInput", so it's clear that they belong together.

Type in "tbInput" as name for the textbox, then change the name of the label to "lbInput" and the name of the button to "btDisplay". In the same way, you can change the "Text" property of each control (notice that there are no braces around "Text"). The Text property is the text a control displays and in case of the textbox, it's the text typed into the box. The label should have the text "Text to be displayed:", the button "Display" and the textbox should have the initial value "Hello, World!".

Until now we haven't written one line of code. There actually was code created, but that was done in the background by VS.

Now we want to write the code that will display the message the user typed in. That's supposed to happen when the user clicks the button. We will look at such events later in detail, for now it's enough for you to know that controls can fire events like a "Click" event when a button is clicked. And we can do something when an event is fired. We can "react".

There are so called "standard events" for many controls. It's not surprising that the standard event for a button is the Click event. Double clicking on a control will show us the code that will be executed when the standard event is fired. Double click on the button.

VS should now have switched into the code editor. The cursor is placed at the correct position and we don't have to care about anything around. It's to early to go into the details of what we're doing now, so please trust that it'll get much clearer very soon ;-)

Code Completion

Please type MessageBox. with a period at the end. After you type the period, a list (called "code completion") will appear at the cursor position. That's basically a list of things you can "do" with a message box. We want to show one.

You can select the appropriate item from the list by clicking on it, by selecting it using the down arrow key or, that's what I do most of the time, you can type S and then (. Code completion will ... ehm ... have completed your code. Because you typed S it will have selected "Show" as the only matching item and when you typed ( it recognized that you wanted to use "Show".

The code should now look like this: MessageBox.Show(

We have to specify the text that will be shown. You can use code completion (CC) ones again, even without having typed a period character. Hit Ctrl+Space. A list of almost everything will appear. Type tb and you will recognize, that "tbInput" is selected in the CC.

Now a word about a mistake many beginners make: we don't want to show a textbox! We want to show the Text of the textbox! So it's not enough to use tbInput, but we have to use tbInput.Text. Therefore: When "tbInput" is selected in the CC, type the period character.

Now there's more in CC: It doesn't only display things we can do with a textbox, but it displays the properties of the textbox, too. You should now know how to get the following code using CC to make things easier for you:

method MainForm.btDisplay_Click(sender: System.Object; e: System.EventArgs);
begin
  MessageBox.Show(tbInput.Text);
end;

(Of course only the third line is what you had to type in)

Run Project

We're now ready to run the project. In order to do that, click on the green arrow in VS's toolbar. The program will start and after you've clicked the "Display" button, the correct text will be displayed as message box.