PART1: Develope the Main Application Page

Our main application page will contain:

  • A responsive application bar

  • A responsive data grid.

We will use a template which already contains a basic application bar.


The Application Template

Right click the folder responsive_tutorial in Project Explorer and select New > Page Layout

New Page Layout

In the Natural Page tab scroll a little bit down and select the template Natural Responsive Page - Application Bar. Set tutorial_main in the Page layout field. Set TUTMAIN-A in the Natural adapter field. Click the Finish button.

Create Ajax Page Layout

The tutorial_main layout is opened in Layout Painter Editor. It contains an application bar with a text at the left-hand side and a drop-down button and an icon at the right.

The Application Bar

In this step the controls in the application bar will be explained and we will adapt the application bar.

You see a BMOBILE:HORIZONTALBAR control, which contains a BMOBILE:BARTEXT, a BMOBILE:FORMINLINE and a BMOBILE:ICON control.

Click on the text Application Title in the Preview Area (middle). This will select the BMOBILE:BARTEXT control. You can now see and modify the properties of this control.

Application Title

The BMOBILE:BARTEXT is a control to render texts in bars. In our example we want to add our application title as text here. You see that as styleclasses the css class navbar-brand is set. This increases the font-size and adds some shadow and padding. We keep this setting.

Our application name is "Natural for Ajax - Responsive Tutorial". Change the name property to Natural for Ajax - Responsive Tutorial.

Properties name styleclasses

Press <ctrl s> to save the change. This will refresh the Preview Area.

Click on the About button in the Preview Area (middle). In the Layout Area (left) a BMOBILE:DROPDOWN control is selected and you can now see and modify the properties of this control in the Properties v .

Properties v

The BMOBILE :DROPDOWN and the BMOBILE:ICON control are grouped in a BMOBILE:FORMINLINE container control. Use a BMOBILE:FORMINLINE container whenever you want to render several form controls – like buttons, texts, fields, icons,... – side by side on a single horizontal row or bar.

Have a look at the properties of the BMOBILE:DROPDOWN: As menuclasses the css class dropdown-menu-right is set. This aligns the opened dropdown on the right side of the dropdown button. As buttonclasses property you can set classes to change the rendering of the dropdown button itself. We keep the default rendering. As styleclasses the css class mr-2 is set. Click on the small button right to the text “mr-2”. This will open the “Select styleclasses” dialog. In the lower half of this dialog there is a dropdown box. This dropdown contains the most frequently used responsive classes for this control. Select mr-*. Now you can see a help text below the dropdown which explains the class.

Select styleclasses

Click the Cancel button to close the dialog. In our example the mr-2 class puts a vertical distance between the dropdown button and the icon.

In the Preview Area click on the text My Application of the opened dropdown. This will select a BMOBILE:FLABEL control. In a BMOBILE:DROPDOWN control you can have rows with all kinds of controls. We simply apply a different text to the name attribute.

BMOBILE:FLABEL

Press <ctrl s>. In the Preview Area click on the icon to the right of the dropdown. This will open a modal dialog in the Preview Area and will show the properties of the BMOBILE:ICON control in the Properties view.

BMOBILE:ICON

The iconurl property sets the icon image. Natural for Ajax contains an icon library with SVG icons and icon fonts. Click on the small button next to the property value “../HTMLBasedGUI/bootstrapicons/icons/question-circle-fill.svg”. The dialog Enter Image URL opens.

Enter Image URL

When clicking the SVG Icons button you can select among more than 1300 SVG icons. Click the Cancel button.

The value of the method property defines which modal is opened. Each modal has a modalid. The method to open the modal is always “modal:<themodalid>”. To see the corresponding BMOBILE:MODAL control with its properties, select it in the Layout Area.

BMOBILE:MODAL

Underneath the modalid is the pageurl property. Here you can set any URL to a valid page accessible as URL in your browser.

SUMMARY

We have built a simple application bar showing:

  • Application Name

  • Version Information (Dropdown)

  • Help Icon with a Help Pop-Up.

We only had to adapt an existing template for this.

The Data Grid

We will use the controls palette to add a data grid with several different columns and behavior to our page.

In the Controls Palette (right) open the Responsive Grids section. Drag and drop the Simple Grid to the bmobile:container node in the Layout Area (left).

Controls Palette

Press <ctrl s>. Open all child nodes of the bmobile:simplegrid node.

The BMOBILE :SIMPLEGRID control contains a row with grid header columns (BMOBILE:SIMPLEHEADERROW) and a row with data columns (BMOBILE:SIMPLEROW). Click on the bmobile:simpleheadercol node and change the value of the property name to Firstname. Press <ctrl s>.

BMOBILE:SIMPLEHEADERCOL

Copy and paste the bmobile:simpleheadercol twice

Copy bmobile:simpleheadercol

Paste bmobile:simpleheadercol

Modify the property name so that you have three header columns: Firstname, Lastname, E-Mail. Press <ctrl s>. In the Layout Area click on the node bmobile:simplecol. The colprop property is the Natural fieldname for your data column. Change it to firstname.

BMOBILE:SIMPLECOL Properties

Copy and paste the bmobile:simplecol twice and change the colprop correspondingly so that you see:

Copy paste bmobile:simplecol

We now add an additional invisible id column. Drag and drop a Simple Header Column from the Controls palette and leave the name empty.

Controls

Drag and drop a Simple Gridcolumn from the Controls palette and apply the following properties:

Properties

Press <ctrl s>. Whenever a layout is saved, the corresponding Natural adapter is updated. We will now generate a Natural program from the adapter. In Project Explorer right click on TUTMAN-A.NS8 and select Generate Main Program.

Generate Main Program

In the dialog add TUTMAN-P as Object name and click the OK button.

Generate Main Program for Adapter

Fill some items into your grid. Example code:

…
1 #II (I2)
END-DEFINE
EXPAND ARRAY GRIDLINES TO (1:30)
FOR #II:=1 TO 30
COMPRESS 'First ' #II INTO GRIDLINES.FIRSTNAME(#II) LEAVING NO
COMPRESS 'Last ' #II INTO GRIDLINES.LASTNAME(#II) LEAVING NO
COMPRESS 'First.Last' #II '@email.com' INTO GRIDLINES.EMAIL(#II) LEAVING NO
COMPRESS 'User' #II INTO GRIDLINES.USERID(#II) LEAVING NO
END-FOR
PROCESS PAGE USING "TUTMAN-A"
…

Right click and select Run As > Natural Application

Run As Natural Application

SUMMARY

We have developed a data grid with visible and invisible data columns and corresponding header columns, added the Natural code to fill the grid and ran our main application page.

Adding Responsive Spacing and Visibility

If you look at your running page in the browser, you will notice that some parts of the rendering do not look good. For instance, there is no space between the application bar and your grid. If you are not familiar with the Bootstrap grid system, take some minutes to read the chapter Responsive Pages Basics.

Adding Vertical Distance

Open tutorial_main.xml in Layout Painter. In the Layout Area (left) select the bmobile:container node. Drag and drop a Vertical Distance control from the Controls palette (right) under the bmobile:container node as first sub node.

Controls

In the Properties view click the small button right to the styleclasses property. We will now add a device dependent vertical distance: For smaller devices we add a smaller distance than for larger devices. In the dropdown select mt-2 and click the Add button. Now select mt-md-* and press the Add button.

Select styleclasses

In the field change mt-md-* to mt-md-5 and click the OK button.

Select styleclasses mt-md-5

What we have done means the following: For all devices we set mt-2 sets a distance of about 8px. For medium devices and up we overwrite this default setting with mt-5 which sets a distance of about 48px.

Adding Horizontal Distance

In the Layout Area (left) select the bmobile:col node above the bmobile:simplegrid node. In Properties view click the small button right to the styleclasses property. We will now apply a device dependent width and horizontal distance for our grid. Remove the col in the field. In the dropdown select col-* and click the Add button. In the field modify col-* to col-10.

Select styleclasses col-10

In the same way add col-offset-1, col-md-8 and col-offset-md-2.

Select styleclasses col-offset-1, col-md-8 and col-offset-md-2

Click the OK button and press <ctrl s>.

What we have done means the following: For all devices our BMOBILE:SIMPLEGRID takes 10 of the 12 Bootstrap grid columns. We set a horizontal distance of 1 Bootstrap grid column. For medium devices and up we overwrite this default setting so that our BMOBILE:SIMPLEGRID takes 8 of the 12 Bootstrap grid columns and has a horizontal distance of 2 Bootstrap grid columns.

Device Dependent Showing/Hiding of Controls

On larger devices you can show more information than on smaller devices. For our application bar we only want to show the About button and the Help icon for larger devices. This makes sure that our application bar is not “wrapped”.

In the Layout Area (left) select the bmobile:forminline node. Apply the styleclasses d-none d-md-block.

Select styleclasses d-none d-md-block

Now the BMOBILE :FORMINLINE container with its sub controls is only shown for medium devices and up.

Be sure you pressed <ctrl s>. Run your TUTMAN-P program, resize your browser window and see how the rendering adapts to the size of the browser window.

SUMMARY

We have applied device dependent spaces (vertical and horizontal) and device dependent showing/hiding of controls by simply applying css styleclasses to our layout.