Visual Interdev Tutorial 1

Basic Windows
    Project Explorer
    Toolbox
    Properties Window
Client Side Forms
    Form Generation
    Handler Functions
Server Side Forms
    DTC's
        Textbox
        Option Group
        Listbox
    Handler Functions
    Submitting the form to a different page

Pages For Your Knowledge:

http://www.learnasp.com/learn/docs.asp - a really good documentation of everything that you would ever need to know about ASP. It has a listing of all of the common ASP objects and an explination of all of the methods that go along with it. There is also many many little code clips that can help you with your projects.

http://www.aspzone.com/ - a good archive of explinations and code snippets.


Basic Windows

Project Explorer

The Project Explorer displays the entire site, including the sire's content (such as HTML pages, GIF and JPG images, Asp pages, and other files). double-clicking on a file will cause the file to load in the main window (the big window)

Toolbox

The Toolbox displays design-time controls, ActiveX controls, Java applets, Java Beans, HTML intrinsic controls, and HTML and code scraps. The elements in the toolbox can be dragged into the main window.

Properties Window

The properties window contains information about the object that you have clicked on in the main window. You can easily set properties of objects using the properties window. If your properties window is not showing you can go to view-> properties window, ot just push F4.

Client Side Forms

Form Generation

First I would like you to create a new project. Click 'file->new'. The new Project window will open

I named my project 'Interdev_1', but you can name it whatever you want.

Then right-click on your project in the project Explorer, and click on 'add item'

Click on the 'ASP Page'. Call your page 'client_forms.asp'.

The new ASP page will now be selected in the main window. There are three tabs at the bottom of the screen. For now we will only be working in the 'Source'. If you do not have a 'toolbox' window displayed in the left hand side of the screen, click on ‘View-> Toolbox’.  Click on the HTML tab in the Toolbox.

Hit enter a bunch of times so you have some open space.  Now click and drag a Textbox item, a Password item, a checkbox item, and a button into your new asp page.  Be sure to drag them underneath the ‘<body>’ tag and above the ‘</body>’ tag.  Drag two BR objects below the items that you just created.  Then drag three more textboxes under the items that you just created.  Now encapsulate all of the items with a ‘<form>’ and a ‘</form>’ tag.  Your asp file should look similar to:

< form action=client_forms.asp method=get name=form1>
< input type="text" id=text1 name=text1>
< input type="password" id=password1 name=password1>
< input type="checkbox" id=checkbox1 name=checkbox1>
< input type="button" value="Button" id=button1 name=button1 onClick=handle_form()>
< br>
< br>
< input type="text" id=text2 name=text2>
< input type="text" id=text3 name=text3>
< input type="text" id=text4 name=text4>
< /form>

Now click on the top ‘<form>’ tag.  Look in the properties box.  It should say '<form>' at the top.

change the action property to this asp file  ("client_forms.asp"), the method to ‘get’ and then name it something.  I named mine ‘form1’.

Handler Functions

So what have we created.  We created a form that contains four textboxes, a password box, a checkbox, and a button.  Everything that we created can be hand coded in, but the visual tools have just made it much easier for us.  Now we will create a client side JavaScript function that handles the submission.  Note the ‘onclick’ added to the button.

< script Language="JavaScript">
function handle_form() {
document.form1.text2.value = document.form1.text1.value
document.form1.text3.value = document.form1.password1.value
document.form1.text4.value = document.form1.checkbox1.checked
}
< /script>
< form action="http://sip/tutorial_interdev/client_forms.asp" method="get" name="form1">
< input type="text" id="text1" name="text1" size="20">
< input type="password" id="password1" name="password1" size="20">
< input type="checkbox" id="checkbox1" name="checkbox1" value="ON">
< input type="button" value="Button" id="button1" name="button1" onclick="handle_form()">
< br>
< input type="text" id="text2" name="text2" size="20">
< input type="text" id="text3" name="text3" size="20">
< input type="text" id="text4" name="text4" size="20">
< /form>

Do not put the spaces between the '<' and the text.  I just did this so it would display on the page.  ie: '< scr ... '  -> '<scr ...'

Here we merely set the value of the bottom textboxes to the values of the top textbox, password, and checkbox.  We can then add constraints to the information in the text, password, and/or checkbox and if the data passes these constraints, then we can have the function submit the form by using the function ‘document.form1.submit()’.  We would probably want to submit the form to another page though, so we would have to change the 'action' property of the form to the page that we want to submit the form to. 

Now click on the QuickView Button on the bottom of the asp page and test out your form.

Server Side Forms

Now create another new ASP page.  Name it ‘server_forms.asp’.  Click on Design-Side-Controls in the toolbox.

To use these Design Time controls (DTCs), right click on the page and go to properties. 

An alternate way to go to the properties window is simply click on the object, and click on the following button in the properties window.

In the ASP Settings box, click on Enable Scripting object model and then click 'OK'.  This will add some commands to the top and bottom of the asp page.  It will enable the asp page to use the DCTs.  The added code at the top of the page should look like the following:

<% ' VI 6.0 Scripting Object Model Enabled %>

<!--#include file="_ScriptLibrary/pm.asp"-->

<% if StartPageProcessing() Then Response.End() %>

<FORM name=thisForm METHOD=post>  

 

The DTC’s are contained in a form called ‘thisForm’ and it uses the ‘post’ method to post the form.

DTC's

Textbox

Opton Group

Listbox

Hit enter a bunch of times so there is some free space. Now add three buttons, two textboxes, a listbox, and a optionGroup. 

Now change the id and Caption of each button.  Name the first one edit, the second one done, and the third one totally_done.  It is good practice to have the id and the Caption similar if not the same.

Now  right click on the listbox and go to properties.

Click on the ‘Lookup’ tag, and click on static list. 

Put in three bound variable, with three matching display variables.  Put in pizza, pig, and rice.

Do the same for the optionGroup except put in blue, orange, and red.  And while you are at it, click on HTML in the toolbox and drag over some BR's before the first textbox, the second textbox, the listbox and the option group.

Handler Functions

Now you have three buttons, two textboxes, a filled listbox, and a filled optionGroup.  What can you do with that.  Well, one option is to add handler functions.  The most common is to use the Button_onclick function, or the Listbox_onchange, although there are a vast array of these functions.  Now add the following handler functions directly underneath the ‘<body> tag.

<BODY>

<%

Sub edit_onclick

Textbox1.value = "edit is clicked"

Textbox2.value = OptionGroup1.getValue(OptionGroup1.getSelectedIndex())

end sub

Sub Listbox1_onchange

Textbox1.value = "Listbox is changed"

Textbox2.value = Listbox1.getValue(Listbox1.selectedIndex)

end sub

%>  

When you start typing the ‘Textbox1.’ you see a list of all of the functions available to the object.  This is a wonderful help for all asp developers.  If the function that you want is highlighed in the list, you merely have to hit the ‘tab’ button and Interdev will finish the function name.

Once you have completed adding these methods, view it in a browser (you can right click on the asp page in the main window, and select 'view in browser').  You will see that when you click on the edit button the first Textbox will change to ‘edit is clicked’ and the second will change to the value of the OptionGroup.  Wonderful!

Submitting the form to a different page

Now currently this form is only submitted to ‘server_forms.asp’.  What if we want this information to be transferred to a different page.

We will change the ‘action’ variable of the form to the page that we want the form submitted to.

First Create a new page called ‘show_form.asp’.  In this page use the ‘Request’ object to access the form that will be submitted.  Say your listbox is called Listbox1 in ‘server_forms.asp’ then you should add the following inside of the <body> tags.

<body>

Listbox1 = <%=Request(“Listbox1”)%>

  …..

</body>  

Do this for every object in ‘server_forms.asp’.  Now you are done with ‘show_forms.asp’.

Go back to ‘server_forms.asp’.  Add the following function above your other handler function.

<%

dim submit_the_form

Sub totally_done_onclick

            submit_the_form = true

end Sub

……

your other handler functions

…..

%>  

Now, at the end of the page add the following function.  

<%

if submit_the_form = true then

            %> <script Language=Javascript>

                                                document.thisForm.action = "show_form.asp"

                                                document.thisForm.submit()

                  </script>

<%

end if

%>

</BODY>  

Now when you click on the button ‘totally_done’ the form will be submitted to ‘show_forms.asp’.  View it in a browser. Viola!

 

Practice:

add a label before the first textbox and have it be the first name, and a label before the second textbox and have it be the last name.  Then put a label before the listbox and call it favorite food, and have another label before the optiongroup and have it be favorite color.  Then on the show form page have a little greeting using the persons first name and last name, and tell them what they have chosen as their favorite food and color.  Oh, and get rid of the handler functions for the edit button and the lisbox.  After you have done this save this file because we will be using this in the second tutorial.

Visual Interdev Tutorial 2

 

     Form Manager
         Modes
         Action for Modes
         Actions from Button Events

    Databases
        Data Connection
        Data Command
        Using a Recordset
        Grid DTC
        Recordset Navbar

Form Manager

If you have not saved a copy of your server_forms.asp, and your show_form.asp please pick up a copy from http://something.edu/server_forms.txt and http://something.edu/show_form.txt.  Make a new project, add server_forms.asp, and show_forms.asp.  now copy the text from the above links and paste them into their respective asp files and then continue with the tutorial.

The form Manager is an object that makes it easy for us to make our form multi-modal.  In our example so far we have three buttons: edit, done, and totally-done.  

This is what you should  have for your handler functions:

<%

Dim submit_the_form

Sub totally_done_onclick

            submit_the_form  = true

end sub

%>

Modes

Now go to design-time controls and drag a FormManager object onto the page.  Go to the properties window (right-click -> properties).  Add two new modes, edit and done.  Set done to be the default mode.

Actions for Modes

Click on From Mode 'edit' then click on the 'Actions perfomed for mode and add the following:

Object = Textbox1

Member = disabled

Value = false

Object = Textbox2

Member = disabled

Value = false

Object = totally_done

Member = disabled

Value = true

Now do the same for Form Mode 'done' except set the disabled to true for both textboxes, and false for totally_done.

Now we will add actions to these modes.  Click on the ‘action’ tab in the FormManger properties window. 

Under ‘form mode transitions’ click on the first box.  Lets start with the default mode – done. 

Current mode = done

Object = edit

Event = onclick

NextMode = edit

This means that when we are in the mode 'done' and we click on the button 'edit' we change the mode to 'edit'.  Now add the transition from the mode 'edit' to the mode 'done'.

Now right click on the page and view it in the browser.  Now you can only edit the textboxes if you are in the edit mode, and can only click 'totally done' if you are in the mode 'done'.  But what is this -- your first name and last name no longer get transferred when you click on totally done.  That is because these boxes are disabled.  The way to fix this is to enable the textboxes when totally_done is clicked.  Now since the form is handled on the server we must enable these textboxes on the server.  This can be accomplished by adding the following code into the 'totally_done_onclick' handler function.

Textbox1.disabled = false

Textbox2.disabled = false

Now when you click on totally_done the first name and last name are transferred.

Now why don't you try to make it so that you can only change the favorite food, and favorite color if you are in the 'edit' mode.

Another thing is to make it so that the form will not be submitted unless the user has inputted something in both of the textboxes. (hint: if Textbox1.value <> "" then...).

DataBases

Data Connection

One of the greatest abilities of ASP is the ability to make a connection to a database.  Visual Interdev makes it very easy for us to make a connection to a database. 

First I would like you to make a new asp page.  Name this 'search.asp'.  Then make one textbox.  Encapsulate this in a form, and set the 'action' to display.asp.

Now make another page.  call it display.asp.