Current Version 8.4

Page Types

There are three page types:

  • Header Page
  • Footer Page
  • Body Page

Header and Footer pages can be created once and linked to multiple body forms. This means that business rules required for these pages exist in one place only and maintenance is simplified.

 

Prerequisites

(1) Complete the Hello World exercise and have your responsive design web site ready at http://localhost/dbnetrd. 

(2) Complete the Resource Files exercise.

Your developer tools are at: http://localhost/dbnetrd?ac=dev 

Your RD web site's physical folder is at: c:\inetpub\wwwroot\dbnetrd

Your theme file is at c:\inetpub\wwwroot\dbnetrd\res\demo\css\demo.css

 

Objectives

  • Create a header page; "header"
  • Create a footer page: "footer"
  • Add the created header and footer pages to your "hello" page

 

 

Header Page

Selecting "New Header Alt-H" from the File menu presents a new header page. Note that the Responsive Designer top menu is changed to include a "Themes" option.

Select any of the standard themes and note that the empty header form now comprises two colored rows under an empty row, sitting above an empty row. The theme selected here is for viewing the header page here in the designer. When the header form is linked to a body form it will inherit the theme that applies to the body form.

 

Create a Header Page

Open the Forms Designer. Press Alt-H.

Right-click the empty row and select NavBar> Properties.

The NavBar is designed to hold menu or navigation elements that can be clicked when your body form is running. See the Menus blog item for more information about setting up menus on an RD form.

Select Default mode, Scrolling position and Full width.

Use the Add Menu Item to create header navbar menu option. Set the id of menu item to "h-home". Assign an awesome font class.

Press Alt-S and name your header page "header".

Press Alt-L to publish your form.

 

Footer Page

Selecting "New Footer Alt-F" from the File menu presents a new footer page. Note that the Responsive Designer top menu is changed to include a "Themes" option.

Select any of the standard themes and note that the empty footer form now comprises a colored row sitting above an empty row.

 

Create a Footer Page

Open the Forms Designer. Press Alt-F.

Right-click either row and select Footer > Properties.

Select Scrolling and Centered type and click OK.

Press Ctrl+K to create a HTML text output field. Press Ctrl+Q and change "Lorum ipsum" to "This is our footer form". Click Save.

Press Alt-S and name your header page "footer".

Press Alt-L to publish your form.

 

Body Page

The Responsive Design body page is the page type to use for your web pages.

It is the entity that is created by selecting the File menu option "New Page Alt-P".

Body pages form the core of your Responsive Design web site.

 

Link Header and Footer pages

Navigate to http://localhost/dbnetrd?ac=dev and open your hello page in RD Form Designer.

Press Alt-R to open page properties.

In the header field enter the path to your header page: /demo/header

In the footer field enter the path to your header page: /demo/footer

Press Alt-S and Alt-L to publish your form.

 

Form Data Link

Navigate to http://localhost/dbnetrd?ac=dev

Select Form Data Link from the menu.

Select the page "demo-hello" from drop down.

Click Submit.

Note that header and footer pages do not need to be linked in Form Data Link. All body pages must be linked. Header and footer forms that are linked to a body page will run as part of the body form.

 

Test Point

In a new Chrome browser TAB navigate to http://localhost/dbnetrd?dbpage=demo-hello

Press CTRL+F5 to refresh the page.  You should see your page with your header and footer pages. Resize the browser window.