components

Component overview

Components are reusable objects that can be put on a design panel. There are three types of components: layout, visual and non-visual components.

  • Layout components are used to design your form. Examples are Panels, rows, columns.
  • 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 and events. Some properties are needed to rebuild your IDE, others have direct influence in the behavior of the component. Examples of components that have no application function 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 dynamic and being used within the generated PHP code. I.e., the color of the component. Within the IDE these properties are identified by an icon and can be filtered to be shown or not.

Events are being triggered while running your application and allows you to insert code of your own. There are two types Server Events and Client Events.

  • Server Events are happening on your server, these are PHP events.
  • Client Events are happening on the client, so within your browser. These are Javascript events.

Some events have an occurance in the Server Event as the JS event. Here Javascript communicates directly with the PHP. These are Ajax events.

Component Documentation

Below you will find the documentation of all components that you will find in the PHsPeed IDE. Some properties are elements of (almost) every component and to avoid repetitive explanation these are described first.

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 parentValid for visible components like panels, edits etc.
DeviceClassDesktopXL The number of units (1..12) to be used of the parentValid for visible components like panels, edits etc.
DeviceClassDesktopMobile The number of units (1..12) to be used of the parentValid for visible components like panels, edits etc.
DeviceClassDesktopPhone The number of units (1..12) to be used of the parentValid 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.


PropertyDescriptionRemarks
OnActivate Triggers when the form becomes activeThis event is triggered after all components have been created. So it is safe to reference other components and properties.
OnCreate Triggers 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.
OnDestroy Triggers when the component is destroyed

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

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

  • 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.

  • 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.

  • 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.


  • components.txt
  • Last modified: 2020/07/15 12:54
  • by aducomadmin