Rapid-Q Documentation by William Yu (c)1999 | Chapter 4

# 4. Writing your first Rapid-Q Application

  Let's jump right into writing Windows applications in Rapid-Q! There will be a simple step-by-step guide, along with the complete source code listing at the end of this chapter.
  4.1 Deciding on what to write
  We're not going to write a simple "Hello World!" demo, nor are we going to write a web browser, we'll start with something meaningful, yet simple to write. Let's write a simple form based database type program. Some of the concepts we'll learn is form handling, event handling, and using the components, QEDIT, QBUTTON, QFORM, QLABEL, and QLISTBOX. Here's what our finished application should look like, you can modify the interface to your liking (if you're comfortable you know what you're doing).
  It may look like a lot, but honestly, the source code is less than 100 lines! Most of the time spent is used designing the layout.
  4.2 Designing the form
  You can almost see the components that we'll need. One QFORM, 2 QBUTTONs, 4 QEDITs, 4 QLABELs, and finally 1 QLISTBOX. First of all, we need a Window (that's our QFORM). So let's type that in:

                 DIM MainForm AS QFORM

                 MainForm.Center
                 MainForm.Caption = "My First Application"
                 MainForm.Height = 340
                 MainForm.Width = 350
                 MainForm.ShowModal    '-- Display form

  If you entered all this correctly, you should see an empty Window, with the same geometry as the above diagram. One thing to notice is that we're not using MainForm.Left or MainForm.Top because when the MainForm is centered, it is automatically calculated for us. All we really need is to supply the width and height of our Window.
  All right, now that we have our Window, we'll have to add controls to it. You should place the following code BEFORE the line MainForm.ShowModal. For the sake of argument, let's begin by adding some labels to our Window.

             DIM NameLabel AS QLABEL, AddrLabel AS QLABEL
             DIM CityLabel AS QLABEL, PhLabel AS QLABEL

                 NameLabel.Parent = MainForm
                 NameLabel.Caption = "Name:"
                 NameLabel.Top = 13
                 NameLabel.Left = 25
                 AddrLabel.Parent = MainForm
                 AddrLabel.Caption = "Address:"
                 AddrLabel.Top = 38
                 AddrLabel.Left = 25
                 CityLabel.Parent = MainForm
                 CityLabel.Caption = "City:"
                 CityLabel.Top = 63
                 CityLabel.Left = 25
                 PhLabel.Parent = MainForm
                 PhLabel.Caption = "Phone #:"
                 PhLabel.Top = 88
                 PhLabel.Left = 25

  We're creating 4 label components, and we're going to use MainForm as our container for these components, hence the Parent = MainForm association. If for example, we created a QPANEL on our form, it can also act as a container for any of our controls. But we won't get into that until later. For the moment, take some time to digest the above code and add it to our previous listing.
  We now have our Window, our 4 labels, now let's add the 4 edit controls to our application.

             DIM NameEdit AS QEDIT, AddrEdit AS QEDIT
             DIM CityEdit AS QEDIT, PhEdit AS QEDIT

                 NameEdit.Parent = MainForm
                 NameEdit.Left = 70
                 NameEdit.Top = 10
                 NameEdit.Width = 230
                 AddrEdit.Parent = MainForm
                 AddrEdit.Left = NameEdit.Left
                 AddrEdit.Width = NameEdit.Width
                 AddrEdit.Top = 35
                 CityEdit.Parent = MainForm
                 CityEdit.Left = NameEdit.Left
                 CityEdit.Width = NameEdit.Width
                 CityEdit.Top = 60
                 PhEdit.Parent = MainForm
                 PhEdit.Left = NameEdit.Left
                 PhEdit.Width = NameEdit.Width
                 PhEdit.Top = 85

  Looks familar doesn't it? It's the same idea as our QLABELs, the biggest thing is correct placement on the form. In the above example, we're aligning all the QEDIT controls just after the QLABELs. Again, take some time to digest the above code and add it to our existing code.
  All that's left is to add our 2 buttons and one listbox control. Here's how we do that:

             DIM AddButton AS QBUTTON, ClearButton AS QBUTTON
             DIM ListBox AS QLISTBOX

                 AddButton.Parent = MainForm
                 AddButton.Left = 70
                 AddButton.Top = 115
                 AddButton.Width = 110
                 AddButton.Caption = "&Add to Database"
                 ClearButton.Parent = MainForm
                 ClearButton.Left = 190
                 ClearButton.Top = 115
                 ClearButton.Width = 110
                 ClearButton.Caption = "&Clear Database"

                 ListBox.Parent = MainForm
                 ListBox.Top = 150
                 ListBox.Left = 70
                 ListBox.Width = 230
                 ListBox.Height = 150

  Cut & Paste, and voila! Wow, we now have a form which looks exactly like the diagram above (section 4.1). Run it, fool around with it for a while, then return back, there's still two more things to implement.
  4.3 Handling Events
  As you can see, the above code just flashes us with a nice user interface, but nothing to back it up with. If you tried clicking on the buttons, they do nothing. You'll have to write your event handler to handle a button click. Here's how:

                 AddButton.OnClick = AddButtonClick

  That it? Well, that's part of it, the OnClick event handler will transfer execution to the subroutine we named AddButtonClick. Now we'll have to go and write our subroutine. Just make sure you include the subroutine below, before adding the above code.

                 SUB AddButtonClick
                     IF ListBox.ItemCount > 0 THEN
                        '-- Add a nice separator
                        ListBox.AddItems "--------------------------"
                     END IF
                     ListBox.AddItems NameEdit.Text, AddrEdit.Text, _
                                      CityEdit.Text, PhEdit.Text
                 END SUB

  Well, now we're getting somewhere. Whenever the user clicks on the add button, the code above gets executed. As you can see, all it does is add the text fields to our listbox. If you didn't already know, the underscore '_' character can be used in Rapid-Q to split up long lines. We're almost done, now we'll add an event handler for the other button.

                 SUB ClearButtonClick
                     ListBox.Clear
                 END SUB

                 ClearButton.OnClick = ClearButtonClick

  Whew, if you counted all the lines, it is well below 100! Our application is now complete, you can play with it, add stuff to it, and generally learn from it.
  4.4 Source code listing, in its entirety

      DIM MainForm AS QFORM
      DIM NameEdit AS QEDIT, AddrEdit AS QEDIT, _
          CityEdit AS QEDIT, PhEdit AS QEDIT
      DIM NameLabel AS QLABEL, AddrLabel AS QLABEL, _
          CityLabel AS QLABEL, PhLabel AS QLABEL
      DIM ListBox AS QLISTBOX
      DIM AddButton AS QBUTTON, ClearButton AS QBUTTON

      SUB AddButtonClick
        IF ListBox.ItemCount > 0 THEN
          '-- Add a nice separator
          ListBox.AddItems "--------------------------------"
        END IF
        ListBox.AddItems NameEdit.Text, AddrEdit.Text, _
                         CityEdit.Text, PhEdit.Text
      END SUB

      SUB ClearButtonClick
        ListBox.Clear
      END SUB

      NameLabel.Parent = MainForm
      NameLabel.Caption = "Name:"
      NameLabel.Top = 13
      NameLabel.Left = 25
      AddrLabel.Parent = MainForm
      AddrLabel.Caption = "Address:"
      AddrLabel.Top = 38
      AddrLabel.Left = 25
      CityLabel.Parent = MainForm
      CityLabel.Caption = "City:"
      CityLabel.Top = 63
      CityLabel.Left = 25
      PhLabel.Parent = MainForm
      PhLabel.Caption = "Phone #:"
      PhLabel.Top = 88
      PhLabel.Left = 25

      NameEdit.Parent = MainForm
      NameEdit.Left = 70
      NameEdit.Top = 10
      NameEdit.Width = 230
      AddrEdit.Parent = MainForm
      AddrEdit.Left = NameEdit.Left
      AddrEdit.Width = NameEdit.Width
      AddrEdit.Top = 35
      CityEdit.Parent = MainForm
      CityEdit.Left = NameEdit.Left
      CityEdit.Width = NameEdit.Width
      CityEdit.Top = 60
      PhEdit.Parent = MainForm
      PhEdit.Left = NameEdit.Left
      PhEdit.Width = NameEdit.Width
      PhEdit.Top = 85

      AddButton.Parent = MainForm
      AddButton.Left = 70
      AddButton.Top = 115
      AddButton.Width = 110
      AddButton.Caption = "&Add to Database"
      AddButton.OnClick = AddButtonClick
      ClearButton.Parent = MainForm
      ClearButton.Left = 190
      ClearButton.Top = 115
      ClearButton.Width = 110
      ClearButton.Caption = "&Clear Database"
      ClearButton.OnClick = ClearButtonClick

      ListBox.Parent = MainForm
      ListBox.Top = 150
      ListBox.Left = 70
      ListBox.Width = 230
      ListBox.Height = 150

      MainForm.Center
      MainForm.Caption = "My First Application"
      MainForm.Height = 340
      MainForm.Width = 350
      MainForm.ShowModal

  Prev Chapter | Contents | Next Chapter