Creating your first CXP page

In the following paragraphs, you will be guided through the steps required to create and run your first CXP page. Along the process, you will be able to familiarize yourself with the development environment as well as with some of the general concepts used in web development.

1. To begin with this exercise, open up the development environment by clicking on "Xbase++ Workbench (Admin)" in your Start menu. This will run the application using elevated privileges, hence making sure you have write access to the files we are about to modify. Once the IDE is running, please make sure that no project is loaded, or select "File" -> "Close all" to close it.

2. Select "File" -> "New..." to bring up the "New Items" dialog. This is where you can create new CXP pages and instances of the other file or project types supported by the IDE. To create a new CXP page, select the "CXP file" icon on the "Source" tab of the dialog.

3. Specify "Myfirstpage" as the name of the new file in the "Name" entry field. Also, specify the root folder of your website in the "Location" entry field, or use the button directly beside it to display a folder selection dialog. For Internet Information Services (IIS) users, the default site root folder is "c:\inetpub\wwwroot".

4. Finally, click "OK" to complete the process. This will create the file and will also load it into the source code editor.

What you now see is the content of the file, which right now contains nothing but the skeleton code required for a CXP page:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 
</head> 

<body> 
</body> 
</html>

You will learn more about HTML later. For now, let it suffice to say that what you see is a HTML document which, although set up correctly, does not contain any content. Loading this document into a web browser will just display a blank page. Try it!

5. Right-click your mouse in the source code editor, and select "Run in WebBrowser" from the context menu to load the CXP page into your web browser. Click "Ok" when asked to save the file. Because the page does not contain any content, the document displayed in the web browser is empty. However, we will change that in the next step!

6. Find the body section in the document, which begins with the HTML tag <body>, and ends with the tag </body>. Note the slash ("/"), which makes the latter a closing tag. Enter the following HTML code between the opening and closing body tags:

<h1>Hello World</h1>

Your document should now look similar to this:

<!DOCTYPE html> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 
</head> 

<body> 
</body> 
<h1>Hello World</h1> 
</html>

7. Again, perform a right-click in the source code editor, and select "Run in WebBrowser" to see the result of your efforts. If all went well, you will see the famous legend "Hello World" printed in the browser window.

What you have just seen is a complete development cycle of a CXP page. The file was loaded into the editor, and changes were applied to the file contents. Also, you have seen how easy it is to load your page into the web browser to see the results. However, so far we have dealt only with editing some HTML, something which you could probably also do using your word processor. What we did not actually do was to add programming logic to the page. Instead, the page contained only static content (the string "Hello World"). We will change that right away...

8. Add the following code to the body section of your CXP page:

<% 
  ? "Today is: " + CDow(Date()) 
%>

When you are done, your page might look like this:

<!DOCTYPE html> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 
</head> 

<body> 
</body> 
<h1>Hello World</h1> 
<% 
  ? "Today is: " + CDow(Date()) 
%> 
</html>

The functions CDow() and Date() will certainly look familiar, as will the syntax for concatenating strings. What we just did, was to program Xbase++ code alongside the HTML markup. And this finally is what CXP is all about; mixing HTML code with programming logic! Loading this page into your web browser will cause the Xbase++ code contained in the CXP page to be automatically executed, and the resulting character string to be embedded into the HTML code, which is then sent to the browser. In other words, calling up your page another day will cause different content to be displayed to the user! Just see for yourself.

10. Use the "Run in WebBrowser" option from the source editor's context menu to run your page; you should see the string "Today is: <day name>" displayed below the "Hello World".

This basic example illustrates how Xbase++ code can be used to create dynamic web pages. The concept is extremely powerful. Just imagine that you can use all of the language constructs and virtually all functionality available in Xbase++! Can you guess, for instance, what would happen if you placed the line of code above in a FOR-loop?

If you see anything in the documentation that is not correct, does not match your experience with the particular feature or requires further clarification, please use this form to report a documentation issue.

Creating your first CXP page Foundation