Building a standard application without a database connection.

There are two types of standard applications: a form bases application and a non-form application. A form-based application contains a form with fields, where users can enter data and submit. Or it contains a menu that will redirect to another page. A non-form application is not fully supported yet but is used to create API's, restful servers, etc.

If you create a project, then you have options to define some things about security, templating, but also to use a form and database. In this sample, you need to choose an application without a database connection. If you have a project already then, you can add a new application to your project and apply the same settings. Next PHsPeed will show you a design panel with two components on the screen: a form and a root component.

The root component is responsible for the basic functionality of the form. It controls the look-and-feel (theme), borders, etc. The form is responsible for maintaining the form-data components. If you design your form, then you need to put the editable components on the form. That way, the form becomes the owner of these components, and will automatically maintain them.

  • To create a simple form perform the following steps:
  • Add a panel on the form
  • Add a panel header on the header
  • Add two rows on the panel
  • Add one column to each row
  • Add an edit field to the upper column, change label property to 'name.'
  • Add a button to the lower column

Your design should look something like this;

Click on the runbutton. The system will start generating and when it's done the application will run.

To understand what is happening you can look at the application in more detail:

Now select the form by clicking on it and go to the property section on the left. Select the Client-Eventstab. Click in the onDocumentReady event and on the tiny button. That will open the javascript editor and opens a default javascript. Click on the save button within the editor. This will save the javascript file. In general you don't have to do this often, but sometimes it might be necessary to change javascript or to recover / upgrade.

Click on the design tab on the right side of the panel. That should open the above page. Click on the Root component (The tiny component). Locate, the top margin property in the property editor. Click on the small button that appears when you click in the field. This will open a CSS page containing a CSS reference, something like:

.[%module%]-top {
  margin-top:[%[%module%]-topmargin%]px;
}

Click on the save button on top of the CSS editor; this will save your CSS file. (the parameters between [% and %] will be replaced by PHsPeed on generation level. Don't change these as the system will not respond as expected).

Now enter a number in the top margin field, i.e.40 and hit [enter] (or click in any other property). That will save the value to the property editor.

Locate the generate button on top of the IDE and click on the small arrow. That will open a small menu with generation options. Pick generate with libraries. Initially you need the runtime libraries in your test environment. A new window will pop up and display generation progress. Once done click on the green 'play' icon behind 'run'. That will execute your program.