Screen Examples - Login Screen

In the following example, we will create a log in screen.

When creating a log in screen, the field for the user name must be XEPHR_USER and the field for the password must be XEPHR_PWD or the javascript code for logging in will not work.

  1. Select the Group Information object.  Expand it, and select the group to which you wish to add the new screen entity.

  2. Right click on the group and select Create->Entity.

  3. Click on the Screen bullet.

  4. Click on the Next button at the bottom right of the screen.

  5. In the Entity Name property, type LOGIN as the entity name.

  6. Leave the Datasource property set to (use default), since there is only one datasource for the Xephr install.

  7. In the Based On property, select SCREEN_TEMPLATE, which is the template that we created earlier.

  8. Leave the Default Mode property set to QBE View.   

  9. Leave the Body Style, Editable Field Style, Non-Editable Field Style, Lov Style, and Link Style properties set to (from parent), as these styles will be taken from the SCREEN_TEMPLATE for this screen.

  10. Click on the Next button at the bottom of the screen.

  11. In the Block Name property, enter LOGIN_BLOCK as the name of the block.

  12. In the Block Type property, select Standard Block.

  13. Set the Query Type property to Not From Query.

  14. Leave the Datasource property set to (use parent), since there is only one datasource for the Xephr install.

  15. Set the Create Heading checkbox to on to indicate that a heading should be created for this block.

  16. In the Mode Selection section, set the QBE checkbox to on as we only need one mode for this screen and it doesn't need to come from the database.

  17. In the Scheme Selection section, leave the Form bullet set to on, since we want the fields displayed all in one block, with the labels to the left of the fields.

  18. Click on the Next button at the bottom of the screen.

  19. The Adding Labels screen is displayed next.  We need to add five fields to this block.  

  20. Click on the Add button five times.

  21. In the newly added rows under the Fields heading, enter the following records:
    L_XEPHR_USER
    L_XEPHR_PWD
    XEPHR_USER
    XEPHR_PWD
    LOGIN

  22. Press the Enter key on the keyboard after entering the last text.

  23. Click on the Next button at the bottom of the screen.

  24. The Option to Add More Blocks screen is displayed next.  We have no more blocks or labels to add, so click on the Finish button at the bottom of the screen.

  25. The new entity is added to the initially selected group.  In the Explorer Tree, the new entity will be displayed, expanded with all blocks shown.

  26. Click on the Save button in the main toolbar to save the new entity.

  27. The Login screen does not need a left menu, so we are going to delete it.

  28. Left click on the LEFT_MENU block to select it.

  29. Click on the Delete button in the main toolbar to delete the block.

  30. The Confirm Delete pop up message will be displayed.  Click on Yes.

  31. The Delete Results pop up message will be displayed.  Click on Ok.

  32. Click on the LOGIN entity and display the property sheet.

  33. Set the Allow Anonymous property to true.  This will allow users that are not logged in to see the log in screen.

  34. We need to make some modifications to the fields to allow the entry of the username, password, and to perform the login.

  35. Expand the LOGIN_BLOCK.

  36. Left click on the HEADING field in the Explorer Tree and display the property sheet.

  37. In the Contents property, enter Welcome to Xephr Applications.

  38. Left click on the XEPHR_USER field in the Explorer Tree and display the property sheet.

  39. In the Size property, enter 20.

  40. Set the Display As property to Text.

  41. Clear out the Contents property.

  42. Set the Requests Focus property to true because this is the field that you want the cursor to be in when the screen loads.

  43. Left click on the XEPHR_PWD field in the Explorer Tree and display the property sheet.

  44. In the Size property, enter 20.

  45. Set the Display As property to Password.

  46. Clear out the Contents property.

  47. Left click on the L_XEPHR_USER field in the Explorer Tree and display the property sheet.

  48. In the Contents property, enter the text Enter User Name.

  49. Left click on the L_XEPHR_PWD field in the Explorer Tree and display the property sheet.

  50. In the Contents property, enter the text Enter Password.

  51. Left click on the LOGIN field in the Explorer Tree and display the property sheet.

  52. Set the Display As property to Button.

  53. Set the Field Style property to DEFAULT_BUTTON.

  54. In the Contents property, enter the text Log In.

  55. Scroll down, and in the On Mouse Click property, enter DoLogin();

  56. Click on the Save button in the main toolbar to save the changes.

  57. Now we need to display the Designer Tool to correct the layout of the fields.

  58. Right click on the LOGIN entity to display the menu.

  59. Select Designer Frame from the menu.

  60. Within the Designer Tool, you can move, align, and resize the objects.  For specific instructions on the Designer Tool and its functionality, see the Designer Tool section.

  61. When the Designer Tool is displayed, expand it so that you can see the entire entity.  The Designer Tool displays the default mode of the entity selected.  The pop-list in the upper right of the Designer Tool indicates that we are viewing the lay out of the QBE Mode.

  62. The HEADER field is not long enough to display all of the text.  We need to stretch it to make it longer.

  63. Left click on the field that displays Welcome to Xephr Applic... to select it.

  64. Hold your cursor over the right side of the field until it turns into a double headed arrow.

  65. Left click and hold down the mouse button.  Then drag the cursor to the right until all of the text is displayed in the field.  Release the mouse button.

  66. Now, we are going to drag the XEPHR_USER field and the XEPHR_PWD field up to the right of their respective labels.

  67. Hold down the Shift key on the keyboard, and left click on the two blank fields beneath the HEADER field to select them both.

  68. Release the Shift key.  Then left click on one of the selected fields again and hold down the mouse button.  Drag your mouse down and to the right until the fields are next to the labels beneath then.

  69. Left click on the Log In field to de-select the selected fields and select the Log In field.

  70. Hold down the mouse button and drag the Log In field up to be below and centered with the user and password fields.

  71. Click on the Save button in the main toolbar to save the changes.

  72. To test the new screen entity, highlight it by selecting it, and click on the Run button in the main toolbar.

  73. The Preparing to Run screen is displayed.  Click on the Run button.

  74. The file will be run in the browser.

Xephr is a registered trademark of NDS Systems, LC.

Copyright © 2007 NDS Systems LC.