This is an old revision of the document!


Components are reusable objects that can be put on a design panel. There are two types of components: visual and non-visual. Visual components are components that have a visual appearance on the rendered form. Examples are edits, check boxes, radio buttons, etc. Non-visual components are do not have a visual representation. Instead, they are used for 'invisible actions.' Examples are database components for the connection, query component, email component, etc.

Components have properties. These too can have a different meaning. Some properties are only used to present the design form. Examples are 'top, left, height and width.' They are only used within the IDE and NOT in the PHP environment. Other properties are static and are, for instance, used to generate classes and styles which are being used to generate CSS files. Some properties are used to generate static HTML. Some properties are dynamic and being used within the generated PHP code. I.e., the color of the component.

Below you will find the explanation of all components that you will find in the PHsPeed IDE. Some properties, however, are elements of (almost) every component and to avoid repetitive explanation these are described first. Same issue for server-events.

Generic properties

Property Description Values
Align This property aligns a component on the design panel. This property controls the position and thus the order of creating components. The creation sequence of the components are determined by its top and left position.alNone, alLeft, alTop, alFull
Height Height of a visual component on the design form. This does not affect the space used on the generated HTML form as this is to be decided by Bootstrap. Nonvisual components do not have a height property.integer
Left Left position of the component on the design forminteger
Name Name of the component. This is also the main id as used within the generated applications. In the HTML form this variable will be called 'name=“name”; id=“id-name”. In the PHP code, the bound variable will be $app→moduleid→name. All variables will be generated as lowercase variables. So a MyVariableName will become myvariablename. Use undercast to make your names readable like my_variable_name.string (change only if you have to..)
Owner Owner of the component. This property keeps the components together in a tree structure. Is important for generating HTML forms.read-only
Top The upper position of the component on the design forminteger
Width The width of the visual component on the design form. Non-visual components do not have a width property.integer
DeviceClassDesktop The number of units (1..12) to be used of the parent <div>Valid for visible components like panels, edits etc.
DeviceClassDesktopXL The number of units (1..12) to be used of the parent <div>Valid for visible components like panels, edits etc.
DeviceClassDesktopMobile The number of units (1..12) to be used of the parent <div>Valid for visible components like panels, edits etc.
DeviceClassDesktopPhone The number of units (1..12) to be used of the parent <div>Valid for visible components like panels, edits etc.
DeviceClassDesktopTablet The number of units (1..12) to be used of the parent <div>Valid for visible components like panels, edits etc.


Generic server events (PHP based events)

PropertyDescriptionRemarks
OnActivateTriggers when the form becomes activeThis event is triggered after all components have been created. So it is safe to reference other components and properties.
OnCreateTriggers when the component is createdIf you write code in this event, then do NOT reference properties of other components as you can never be sure that this component is (already) created. Use OnActivate instead.
OnDestroyTriggers when the component is destroyed

Basic components (visual)

Each application must at least have a few basic components to work well. Depending on the type of application this is a root with form, module (with optional form), (or API).

Form Component that represents a form design area

Lay out components

Layout components are used to design your gui form. Not applicable to API applications.

  • Area Component that defines a standard design area
  • BuildingBlock Component that embeds a building block (i.e. for master-detail)
  • Column Component that defines a column within a row
  • Panel Component that defines a panel-type design area
  • PanelHeader Component that defines a header on a panel component
  • Row Component that divides a form into rows

Standard components

  • Button Component that puts a button on your form.
  • Edit Component to put an edit field on your form.
  • Label Component to display (html) text.

Additional components

Non visual / database components

  • Root Root component that declares your module als a runnable module
  • Module Module component that declares your php module as reusable (being used as header or footer)
  • DBConnection Component to setup a PDO database connection.
  • DBTable Component to setup a database table.
  • DBQuery Component to setup a database query.
  • Datasource Component to connect and distribute database data to data-aware database components.
  • DBCrud Component to setup queries for create (insert), read (select), update and delete.

Database (data aware) components

  • DBGrid Component to display your datasource data in a grid
  • DBEdit Component to connect an edit field to a datasource.
  • DBCheckbox Component to connect a checkbox field to a datasource.
  • DBCheckgroup Component to connect a group of checkboxes to a datasource.
  • DBRadiogroup Component to connect a group of radiobuttons to a datasource.