Let’s see what it takes to build the most basic of IntraWeb 17 applications using Delphi.
Special Notes
Before proceeding, we would like to bring your attention to a few important items.
Beta
This tutorial is based on a beta version of IntraWeb 17. We will strive to keep this tutorial updated, but screenshots and other details may have changed from the time we authored this tutorial and the version of IntraWeb 17 that you may be using.
Please contact us if there are any major changes that affect the tutorial.
WYSIWYG
IntraWeb 17 will have a fully visual WYSIWYG designer. Because we plan to support far more than the previous IntraWeb designer in terms of layouts at design time, it is a much bigger piece of work and will not be in IntraWeb 17.0 but will be added at a later time in 17.1 or later.
Most IntraWeb 14/15 users already use templates though, so the overall experience should be better than even IntraWeb 14/15 even without a full WYSIWYG designer.
New Project
Create a new v17 project. If you need help, please see the New Project Walkthrough and then return to this tutorial.
Making Hello World
Now we want to work with the UI. Open Unit1 from the Project Explorer:
This should open:
This is the temporary IntraWeb 17 designer that exists until the full WYSIWYG designer is released. We not cover it fully now but will show how it works as we proceed through the sections of this tutorial.
So far we have only the page itself. To add new controls we don’t use the component palette like before but instead use the IntraWeb 17 designer itself. Make sure Page is selected and right click on it. A small menu will appear. Select Add Child to add a new control to the Page.
A dialog will appear:
Note that this is not a complete list of controls that IntraWeb 17 will support. BS (Bootstrap) for example only has a few controls in this screenshot. As of time of this screenshot we are working on completing Bootstrap support to support all Bootstrap controls.
To quickly insert controls we can search for them by name. In the search box enter text, and then click Text in the list:
Now we have added our first control to our page:
Select the new Text control and press F11 to open the object inspector:
Now we can edit properties of our control and create events just as we do in a non IntraWeb application. Select the Text property and set the value to Hello World! Press enter in the property value or move away to commit the value. The Text property will be reflected in the control tree as well:
Run
Press F9 to run our application:
Press F9 again to launch the default browser:
Preview
We can also check our page without having to run our application each time. This is especially useful when working on pages that are not the main page of the application. To use preview, resize the designer and make it a bit bigger. Another toolbar will appear:
You can click any of the browser buttons to instantly preview the page in that browser. We will use the first one, Chrome (App) which launches Chrome in application mode. This launches Chrome separate from any existing Chrome instances and without toolbars. We will use Chrome (App) for most of the tests in the rest of the tutorial and why it may not look like Chrome. It is however, Chrome:
In preview if you have buttons or other actions that rely on server code they will not work or may even preset errors. This is normal, there is no running server application to handle the requests. Any client side code (shown later in this tutorial) will execute in preview.
Conclusion
Congratulations! Although very simple and not very useful, you have now written your first IntraWeb 17 application.