Hello World (Responsive Design)

In this blog we will

  • create two responsive design pages
  • navigate between those pages
  • observe data state preservation (session data), and
  • view our pages on mobile device simulators.

DATABASE set up

Download the Complete Download option from www.designbais.com. This contains the full set of accounts required for DesignBais tools and demo forms. Extract the zip folder to folder C:\designbais. This will create folders:

  • C:\designbais\BA
  • C:\designbais\DATA

Expanding the latter folder reveals the DesignBais Demonstration Account: C:\designbais\DATA\DBINET.DEMO

Note: if running on a Universe database add items to the UV.ACCOUNT file with the path, in attribute 11, to each of the following accounts:

  • DBIHELPDESK
  • DBILOGIN
  • DBINET
  • DBINET.DEMO

 

WEB SERVER set up

  • Install IIS, ASP.NET and other necessary web components.  Refer to the DesignBais web component manual for details.
  • Create a Windows user "dbnetuser" with password "dbnetuser" both on the web server and on the database server
  • Download the latest web component  [DBNET.zip] from our web site and unzip as C:\inetpub\wwwroot\dbnetrd
  • Give Windows Users group write access to C:\inetpub\wwwroot\dbnetrd\debug
  • Close and open the IIS Manager
  • Create new application pool named DBNETPOOL in IIS
    • .NET Framework version : v4.0
    • Enable 32-Bit Applications: true
    • Managed Pipeline Mode: Integrated
    • Identity: LocalSystem
  • In IIS Manager
    • Find the folder DBNETRD in IIS and convert it to application by selecting DBNETPOOL
    • Enable BASIC and Anonymous authentication for DBNETRD
  • Install Chrome on the web server

Test point

On the web server, open Chrome and navigate to http://localhost/dbnetrd/test.html. Continue if the page displays "DesignBais HTML test". Go back to the beginning of this section and review IIS installation if you don't see the words "DesignBais HTML test" on the page.
Navigate to http://localhost/dbnetrd/test.aspx. Continue if the page displays server time and ASP.NET version. Go back to the beginning of this section and review IIS installation if you don't see the server time on this page.

Troubleshooting

  • Consider reinstalling the IIS and ASP components if you're getting HTTP 500, 503 etc. errors displayed on test pages.
  • Examine the errors in Windows event viewer

Test point

Navigate to http://localhost/dbnetrd/. The page should display the DesignBais Developer Tools otherwise see the Troubleshooting below.

Check if debug files have been created in folder c:\inetpub\wwwroot\dbnetrd\debug . Not seeing any files in this folder indicates a permission problem; check if the IIS application pool identity is set to LocalSystem.

Troubleshooting

  • Check your C:\inetpub\wwwroot\dbnetrd\debug folder for error logs. You may be able to determine the cause by examining these logs.
  • You can also send the log files to support@designbais.com for analysis.

 

The Hello World web site

Objectives

  • Use the account DBINET.DEMO
  • Create two responsive design (RD) pages with the following URLs
    • http://localhost/dbnetrd?dbpage=demo-hello
    • http://localhost/dbnetrd?dbpage=demo-world
  • http://localhost/dbnetrd should redirect to http://localhost/dbnetrd?dbpage=demo-hello
  • http://localhost/dbnetrd/?ac=dev should open the developer tools
  • A button on http://localhost/dbnetrd?dbpage=demo-hello should take us to http://localhost/dbnetrd?dbpage=demo-world
  • We should be able to move between demo-hello and demo-world pages using the browser's back and forward buttons
  • Page state (data) should be maintained when moving between the two pages
  • We should see the responsive behaviour using the Chrome's various device emulations

Create user "dbrduser"

For the link http://localhost/dbnetrd to open our responsive design pages, we need to:

  • create a new DesignBais user (dbrduser) and
  • modify our default entry point in our admin/db.config. 

Navigate to http://localhost/dbnetrd and create a new user "dbrduser" by copying "dbnetuser".  Set the account and start form of this user as DBINET.DEMO and DBEXEC_HELLO respectively.

db.config

We need edit our C:\inetpub\admin\db.config to specify the entry points for the default blank qcode and for the qcode "dev". The initial admin/db.config file content out of the box is as follows:
<?xml version="1.0" encoding="utf-8" ?>
<dbconfig>
    <entryPoint qcode="">
        <loginHost>127.0.0.1</loginHost>
        <loginHostType>UNIVERSE</loginHostType>
        <loginAccount>DBINET.DEMO</loginAccount>
        <loginUser>dbnetuser</loginUser>
        <loginPassword>dbnetuser</loginPassword>
        <loginPublicUser>dbnetuser</loginPublicUser>
    </entryPoint>
</dbconfig>
 
Make a copy of the default entry point and set the qcode as "dev". 
Then set the loginPublicUser user of the first (default) entry point as "dbrduser".
 
The file db.config now has:
 
<?xml version="1.0" encoding="utf-8" ?>
<dbconfig>
    <entryPoint qcode="">
        <loginHost>127.0.0.1</loginHost>
        <loginHostType>UNIVERSE</loginHostType>
        <loginAccount>DBINET.DEMO</loginAccount>
        <loginUser>dbnetuser</loginUser>
        <loginPassword>dbnetuser</loginPassword>
        <loginPublicUser>dbrduser</loginPublicUser>
    </entryPoint>

    <entryPoint qcode="dev">
        <loginHost>127.0.0.1</loginHost>
        <loginHostType>UNIVERSE</loginHostType>
        <loginAccount>DBINET.DEMO</loginAccount>
        <loginUser>dbnetuser</loginUser>
        <loginPassword>dbnetuser</loginPassword>
        <loginPublicUser>dbnetuser</loginPublicUser>
    </entryPoint>
</dbconfig>
The second entry point will now serve the url http://localhost/dbnetrd/?ac=dev and will open our Developer Tools.
 
Remember to change the loginHost parameter to point to the IP address of your database server if it's different from 127.0.0.1.
 

Test point

Close all browsers, open Chrome and navigate to http://localhost/dbnetrd?ac=dev. The page should display the DesignBais Developer Tools, otherwise troubleshoot.

Create two RD Pages

At this point we're ready to create our two RD pages "hello" and "world" in work folder "demo"
  • Navigate to http://localhost/dbnetrd?ac=dev (tab 1)
  • Open the RD Form Designer from the menu (opens in new tab; tab 2)
  • Select File > Work Folder and then create new work folder "demo" by entering "/demo" in "Selected".
  • Create elements on the page:
    • Click the displayed rectangle (row) and press CTRL+K to create an HTML segment (Lorem ipsum..). Press CTRL+P to see the properties and replace the automatically assigned ID with "html1".
    • Click the text Lorem ipsum and press CTRL+Q to edit. Replace the text Lorem ipsum with "hello" in the HTML editor and save.
    • Click the displayed rectangle (row) and press CTRL+M to create an input text field. Press CTRL+P to see the properties and replace the automatically assigned ID with "text1"
    • Click the displayed rectangle (row) and press CTRL+B to create a button. Press CTRL+P to see the properties. Tick "Event" and replace the automatically assigned ID with "but1"
    • Press ALT+S to save your file as "hello"
    • Press ALT+P to publish your file (hello)
    • Click the text Lorem ipsum and press CTRL+Q to edit. Replace the text Lorem ipsum with "world" in the HTML editor and save.
    • Use File > Save As to save your file as "world"
    • Press ALT+P to publish your file (world)
  • Go back to tab 1, select Form Data Link from the menu
    • Select the page "demo-hello" from drop down
    • Enter DBEXEC in the Filename
    • Enter HELLO in Form Name
    • Click Preserve Common
    • Click the ID text1 and select DBE.HELLO.WK from the Field Name dropdown list. The Attribute field will display 11 which corresponds to the field position in DBWORK of this field. Click Submit.
    • Click Submit. This page needs to exist for the WORLD page set up below.
    • Select the page "demo-world" from drop down
    • In the Filename field enter DBEXEC
    • In the Form Name field enter WORLD
    • Click the ID text1 and select DBE.WORLD.WK from the Field Name dropdown list. The Attribute field will display 12 which corresponds to the field position in DBWORK of this field. Click Submit.
    • Click the ID but1. Change the Button Name to B.HELLO. In the Process After field enter DBEXEC_HELLO. Click Submit.
    • Select the page "demo-hello" from drop down
    • The WORLD page now exists and can be linked to the button on the HELLO page. Click the ID but1  and change the Button Name to B.WORLD. In the Process After field enter DBEXEC_WORLD. Click Submit.

 

Test point, individual pages

Open a new tab in Chrome and navigate to http://localhost/dbnetrd?dbpage=demo-hello. The page should display your "hello" page.

In the same browser tab, navigate to http://localhost/dbnetrd?dbpage=demo-world. The page should display your "world" page.

Open a new tab in Chrome and navigate to http://localhost/dbnetrd. The page should display your "hello" page (default page redirection).

If these tests don't work then review the above steps and try deleting and recreating these pages. Check if there are any errors in your web logs as explained in troubleshoot.
 

At this point we have:

  • Our two RD pages working
    • http://localhost/dbnetrd?dbpage=demo-hello
    • http://localhost/dbnetrd?dbpage=demo-world
  • Our default redirection is good at http://localhost/dbnetrd
  • Our development environment is available at http://localhost/dbnetrd?ac=dev

 

Test point, navigation  

Now we'll test our "hello" and "world" pages for standard navigation,
  • first by using the button on each page
  • then by using the browser's back and forward buttons
Open a new tab in Chrome and navigate to http://localhost/dbnetrd. The page should display your "hello" page.

On that page, click the button and the page will navigate to our "world" page at http://localhost/dbnetrd?dbpage=demo-world

On that page, click the button and this time the page will navigate to our "home" page at http://localhost/dbnetrd?dbpage=demo-home

Use the browser's back button to navigate to the "world" page.

Use the browser's forward button to navigate to the "home" page.

If these tests don't work then review the above steps and try deleting and recreating these pages. Check if there are any errors in your web logs as explained in troubleshoot.
 

Test Point, Page Data and State

Now we'll configure our "hello" and "world" pages to maintain state and preserve data over a page transition;
  • first by using the button on each page
  • then by using the browser's back and forward buttons
 
Open a new tab in Chrome and navigate to http://localhost/dbnetrd. The page should display your "hello" page.

On that page, type "TEST-1" in the input text field and click the button. The page will navigate to our "world" page at http://localhost/dbnetrd?dbpage=demo-world

On that page, type "TEST-2" in the input text field and click the button. This time the page will navigate to our "home" page at http://localhost/dbnetrd?dbpage=demo-home

Check if the text "TEST-1" is preserved.

Use the browser's back button to navigate to the "world" page.

Check if the text "TEST-2" is preserved.

Use the browser's forward button to navigate to the "home" page.

Check if the text "TEST-1" is preserved.

If these tests don't work then review the above steps and try deleting and recreating these pages. Check if there are any errors in your web logs as explained in troubleshoot.
 

Test Point, mobile devices

In Chrome, navigate to http://localhost/dbnetrd.  This will display your "hello" page.  Press F12 to bring up the Chrome developer tools, click the mobile icon and see how your page gets displayed on various mobile devices.