PHsPeed contains a visual form designer, which enables you to easily make up your form, apply changes, change behavior, and - for developers - apply code to application events.
The components are accessible from a component toolbar. The first tab contains components for designing your layout, other tabs can contain visual components like edit boxes, checkboxes, graphs, pdf, and non-visual components like database access components.
Every component contains properties, server, and client events. The basic properties changes behavior like colors, borders, padding, and margins, etc. The client and server events are more meant for developers who need to be able to apply PHP event code, javascript (client events), and CSS code.
If you are new to Bootstrap responsive design then it might be a bit confusing how to layout your forms. In PHsPeed, the standard rules of Bootstrap apply. Therefore we will not go into much detail regarding the bootstrap grid system. If you are not familiar with bootstrap forms, we suggest that you first take a view on the Bootstrap website for the details. Bootstrap areas are divided into 12 units. By assigning units to devices you can achieve that the application 'breaks' at the designed points. That is what makes your application responsive.
So if you have a row with two columns you could define each column to occupy 6 units on a desktop, but 12 units on smaller devices. That will break up the form on smaller devices causing the two columns to be presented below each other. The best way of getting the principle is by creating a test application and play with the settings.
In PHsPeed there are three types of components, layout; visual and non-visual.
To design your form or webpage you must start with a container component. That can be an 'area' component or a 'panel' component:
To create a responsive layout you must add rows and columns to the container. You do so by selecting the row and column components from the component bar, or add in bulk by performing a right mouse click on the panel and select 'add rows, add columns, add grid'. Then a small window will appear to bulk add a number of rows, columns, or rows with columns. In the columns, you can put your visual components like edit boxes.
Within the IDE you are able to move rows and columns to get another sequence. Also, if you are on a valid parent component you can add rows, columns of a full grid by a few mouseclicks.
Within a column, you can put different components for showing data or doing your input. Although it is not forbidden to put components elsewhere, it is important to understand and follow the bootstrap grid design pattern as described in the bootstrap documentation. Therefore do not put components on rows, but only in columns. You can add more visual components to a single column, however, you must apply a device class to each visual component to allow breaking in responsive design.
There are several properties involved in regards to styling a visual component.
It is important to understand that the overall stylesheet is created when you generate your application. That means that you can overwrite settings if you have defined the same property on more than one level. We advise to follow the PHsPeed approach: 1. use the properties. 2. If you can't do it with the properties, use the style. If you can't use the style then use the class. In that order. If you have defined a property, don't use this in the style or class editor.
The device contexts describe the 'breaking' of your application if it is displayed on a regular monitor, a laptop, tablet, or phone. It might have an influence on the spacing of objects. It is a common habit to put labels of fields above the field and not before. The reason is that applications are created within the context of 'mobile-first'. If you know that your application is only used on large screens, you might have different desires.
As soon as you apply a device property, the component becomes a bootstrap component and will behave the bootstrap way. That can bring supprises regarding layout as sometimes, the spacing between objects or within an object (padding and margin) are set double because the owning component (the column) also has already default margins and paddings.
In the beginning, this might be a bit confusing as you have to play with the settings to get used to the bootstrap system. But if you follow the following rules then this might be a good start for you:
This is a good basic approach for a simple form. If rows need to show spaces you have also the option to add a top margin. This way you can create a small space between the top of your browser and the form; or influence the space between two rows. Again, the main difference here is that the top margin reflects in a standard CSS way of defining layout where 'gutter' and 'p-x' are bootstrap defines.