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
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.
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.
< 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’.
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.
Do the same for the
optionGroup except put in blue, orange, and red.
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!
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’.
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.
Form Manager
Modes
Action for Modes
Actions from Button Events
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...).
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.