Building Page Layout

ZenDevX Design Studio generated web apps are powered by Bootstrap and JQuery for creating well formatted, interactive and pretty looking web pages. We have adopted the designing principle of Bootstrap where everything in a web page is logically divided into Sections, Rows and Columns.

This allows for building complex web page layouts are easy to maintain. As stated before all pages in ZenDevX contain sections, which in turn contain Rows. A row by default contains 1 Column. But if required a Column can be split into multiple columns. The max number of Columns that are allowed per Row are 12 as per rules of Bootstrap.

Each Column can contain one control. Check the image for better understanding.

The generate page from above layout would look something like this:

Controls Information

To insert a control in the layout open the Control tab in the Ribbon bar. We have provided following controls:

  1. Label

  2. Input (Text, Numeric, Date, Time)

  3. Select

  4. Button

  5. Radio

  6. Checkbox

  7. Image

  8. Tab

  9. File Upload

  10. Table

To insert a control select a Column in layout and then click on any control you want to insert.

On doing this you will be presented with a dialog for settings a properties of that control.

Every control can have a Caption. For controls like Input, Select, etc. you can set the Position of Caption.

Every control should have an ID. This ID is automatically created base on the Caption typed. But if you want to edit you can edit it as per your requirement. Always assign a logical ID of your control so that you can easily distinguish the control when building Actions.

Note: You can build as complex a layout as needed easily using our powerful Row-Column predigime.

Page Actions Information

In ZenDevX you can add actions to various events of controls (example select/button/etc.) just like you can add actions to Page Initialization/Load event.

Actions are so powerful that you can build any kind of business logic using them. For example if you want to check or validate that an entered value is in given range you can easily do this with help of Actions.

While adding Actions one does not have to worry as to whether the Actions have to be executed in Browser (client side) or on Server (server side).

ZenDevX automatically determines which actions will be executed in Browser and which will be executed on Server!

The most import thing about Actions is that you as a developer or user will be able to create all your actions with point and click of mouse. You will not have to write any action!

Please refer to below image for better understanding.

Last updated