|
Examples on Web Page Development
This section is still under construction
DEMONSTRATIVE EXAMPLES
======================
WEB PAGE DEVELOPMENT
===================
HTML ELIMINATION:
The asp.net has added a great enhancement to web development by allowing
you to do a major
part of your web development programatically. The asp.net page files which use the
extension (.aspx)
are not sent by the server to the client's browser directly. They actually
run at the server where an HTML file is generated
and sent to the browser instead.
Unfortunately, html has not been eliminated entirely. The asp.net
web files are required
to contain html tags even if the page was entirely developed using asp.net code.
In order to simplify things further while maintaining all the added
enhancement and power,
we have developed a software which allows you to write your entire web page file in C#
with absolutely
no html. When you add all the simplicity of using PC#'s tools and methods
to the elimination of HTML, you come up with
the easiest and most pleasant web development
ever.
HOW DOES IT WORK?
Here is how it is done:
(1) You write a code file (.cs) as usual which extends class (pasp) In that file,
you supply PC# software with
every item which you like to include into the web page and
where you like it to be using the same simple methods which
you have been using to set
windows Form controls. The items are set into table cells. Then the tables are set into
the
cells of larger tables. This Continues until we end with one large table of the same
size as the page (the root table).
We use the keyname "tb0" for the root table which
contains the entire page data.
(2) Now it is time for the (.aspx) file which the browser requires.
We need a file which
extends (inherits) the code file above and contains in its html section only one control
which
is the root table. So the (.aspx) files for all pages are the same. The only
difference between one file and another
is in the name of the code file it extends.
This makes creating the (.aspx) file a repeated job which you need
not to do. You create
the code file only then use the tool (pcw) to generate the (.aspx) file.
EXAMPLE A: In this example we are going to develop a web page which
contains the table
heirarchy necessary for the following several examples. As you can see the page contains
5 empty
tables. The top table will contain the page title, an icon and the pages' index.
The second and third tables will
be used to show two new features in each example. The
fourth and fifth tables will display data coming back from the server
in response to
events generated by the user at tables 2 and 3 respectively.
=========================================================================================
public
partial class a:pasp {
// Since class name is (a), it must
// be saved into a file named a.cs
public override void init() {
// This is the usual init() method
base.init();
// Initialize pasp class.
}
public override void setup() {
// This is the usual setup method
//---------------------------------- Page Contents
-----------------------------------
cns="";
// tb0 has no container since it is
// mounted directly on the page.
cs="tb0";cls="S9g8";fns="trb12";wm("i");
// tb0's installation parameters
//---------------------------------- tb0's Contents ----------------------------------
cns="tb0";
// Container=tb0 for next 5 tables
cs="tb1";j=0;k=0;i=2;lf=760;of=100;cls="S9p7";fns="trb12";jd=5;ds="n";wm("i");
cs="tb2";j=0;k=1;lf=380;of=250;cls="S9p7";fns="trb12";jd=5;wm("i");
cs="tb3";j=1;k=1;lf=380;of=250;cls="S9p7";fns="trb12";jd=5;wm("i");
cs="tb4";j=0;k=2;lf=380;of=50;cls="S9p7";fns="trb12";jd=5;wm("i");
cs="tb5";j=1;k=2;lf=380;of=50;cls="S9p7";fns="trb12";jd=5;wm("i");
// Tables will not show up unless they contain
something. So, we'll install a literal
// control into each table containing it's keyname.
//---------------------------------- tb1's Contents
-----------------------------------
cns="tb1";
// tb1 contains next control(s)
cs="lt1";cis="tb1";wm("i");
// Literal control containing text
//---------------------------------- tb2's Contents -----------------------------------
cns="tb2";
cs="lt2";cis="tb2";wm("i");
//----------------------------------
tb3's Contents -----------------------------------
cns="tb3";
cs="lt3";cis="tb3";wm("i");
//---------------------------------- tb4's Contents -----------------------------------
cns="tb4";
cs="lt4";cis="tb4";wm("i");
//----------------------------------
tb5's Contents -----------------------------------
cns="tb5";
cs="lt5";cis="tb5";wm("i");
}
public override void update() {
setup();
// Execute method setup()
MakePage(table);
// Make the page with tb0 containing
}
// all its contents.
}
=========================================================================================
HOW
TO WRITE THE PROGRAM? Use NotePad. Since "a" has been chosen to
be the name of the class, save the program into a file
named "a.cs".
HOW TO GENERATE THE WEB (.aspx) FILE? From Command mode, type: 'pcw a' and hit [ENTER].
This
should generate the file "a.aspx".
HOW TO RUN THE PROGRAM? Type the page's address into your browser's address
line and hit
[ENTER]. You may do that locally or using a computer anywhere accross the web. The
page address is in the
form:
DomainAddress/ApplicationFolder/AspxFile
As an example, if your application folder path is: "c:\inetpub\wwwroot\MyFolder",
the
page address would be:
DomainAddress/Myfolder/a.aspx
=========================================================================================
TUTORIAL:
(1)
Your class extends class "pasp". Class "pasp" extends class "System.Web.UI.Page" which
allows it to access all nesessary
asp.net software for the page in addition to allowing
you to use mostly all the PC# methods which simplify your programming
tasks.
(2) One method which you cannot find in class (pasp) is method cm().
Method cm() which is
included into class (pcs) helps you in developing controls which are mounted on window
forms. This
method has been replaced with method wm() which is very similar in its
operation to method cm() except that it helps you
in developing web controls.
(3) Method setup() works the same as it used to do with window forms
with few exceptions:
a) It does not run automatically when your class is initialized. It stays unused
until
Your program calls it from method update() when a specific event takes place.
b) Controls are not placed using absolute positioning. They are placed into table
cells. So (j,k) no longer mean the position of a control in pixels, they now mean
the order of the starting column and row which the control occupies within its
containing
table. Similarly, (i,o) mean the number of columns and rows occupied by
the control
instead of (width,height) in pixels.
c) Finally, each control is set by calling method wm("i") instead
of calling cm("i").
(4) Method update() is called each time an event takes place. Whenever
a control is
activated, method update is called with the keyname of the activated control assigned
to (cs). However, not all events are caused by a control being activated.
The first event which method update is called for,
is the "Page Load" event. It is
generated when the page is ready to load. The keyname variable (cs)
is assigned the
value "pl" before method update() is called. However, we did not check this value
in this example since this is the only event which is expected to be received.
When method update() was told that the page is
ready to load, it called method setup()
to read control parameters then it called method MakePage()
to load all controls and
their table containers into the root table "tb0", then load "tb0" into the
table
container which is declared in the ".aspx" file.
INSTALLING CONTROLS INTO THEIR CONTAINERS:
All the controls of this example are of type (Table). We want
to install tables (tb1:tb5)
into a specific locations in table (tb0)
It may sound like a very easy task, but in many cases it is not. What
makes this job not
too easy is the conflict between two intelligant entities, you and the browser. You assume
that you
know what you are doing and expect the browser to set the table columns and rows
exactly the way you want them to be. The
browser assumes that you may not be understanding
what you are doing so it should do things for you in order to improve
the look of your
table.
Here is what the browser tries to do:
(1) If you set the size of your table in pixels, it tries to respect
your setting as long
as the size is equal or more than the size which table contents require. If not,
it
neglects your setting and sizes the table as it sees necessary.
(2) It does not make all columns of the table equal in width or all
rows equal in height.
It checks to see the widest object installed into the column (anywhere in the
table)
and makes the column wide enough to contain that object. It applies the same logic
when it sets row sizes too.
(3) It does not display an empty table even if you specify its width
and height in pixels.
And here is what you can do to get around this problem:
(1) Always apply the simplest logic possible in setting your controls.
(2) If you get an unexpected layout of your controls do the following:
a) Make the container table grids show by adding (ib=true) to the table's setup
parameters.
This should give you a clearer picture of what is happening.
b) Locate the widest control in each column
and the tallest control in each row. They
are the keys to fixing the problem. Readjusting
their sizes can change the entire
layout of the table. Sizes of most controls can
be changed by changing the font
size of the text they contain.
Now let us return to the example. Here is how you can determine the
number of rows and
columns fot tb0:
(1) Locate the row which contains the largest number of controls horizontally.
The number
of columns necessary is equal to the number of controls at that row which is 2.
(2) Locate the column which contains the largest number of controls
vertically. The number
of rows necessary is equal to the number of controls at that column which is
3.
Here are some comments on the setup data:
(1) For the root table (tb0) we did not set values for (j,k,i or o)
since it is the root.
However, these values are necessary for all other controls.
(2) If the control should occupy one column we suould supply (i=1),
however since this is
the default we can just assign no value to (i) Method wm("i") changes (i=0) to
(i=1)
internally. Same logic applies to (o).
(3) For (tb1): (j=0;k=0;i=2;) means that it occupies two columns and
one row (since o is
not assigned a value) and that the coordinates of the first table cell it occupies
are (0,0).
(4) For (tb2): (j=0;k=1;) Since (i,o) are not assigned values, it
occupies one column and
one row, The coordinates of the first table cell it occupies are (0,1).
(5) For (tb3): (j=1;k=1;) Since (i,o) are not assigned values, it
occupies one column and
one row. The coordinates of the first table cell it occupies are (1,1).
(6) We have assigned values to (lf,of) for all tables except the root.
These values set
the table sizes (horizontally, vertically) in pixels. Not specifying size for (tb0)
causes no problem since as mentioned above, the browser will make it large enough to
contain all the
tables which have been installed into it.
(7) Colors and fonts have been set as usual. (jd=5) means frame the
table with a 5 pixels
wide frame. It makes them look nice, however you can remove it if you don't like
frames.
(8) As you must know, after method wm("i") completes the installation
of each control, it
resets all parameters. The only exception to this rule is the container name (cns)
This allows you to assign a value to (cns) one time only before installing a group of
controls into a new container.
=========================================================================================
EXAMPLE 1: Now, let us make our first web page. We need to do the
following:
(1) Create Application title and install it into the top container (tb1)
(2) Install a business logo at the
right side of (tb1)
(3) Create a navigation index at the bottom of (tb1) which allows the user to browse
through the website.
(4) Remove the pink paint of (tb2) and tile it with the image "flower.jpg instead".
(5) Install
a hyper link into (tb2) which the user can click on to order flowers.
(6) Create a table and install it into (tb3).
=========================================================================================
public
partial class pg1:pasp {
public override void init() {
base.init();
}
public override void setup() {
//---------------------------------- Page Contents
-----------------------------------
cns="";
// tb0 Container="" since it's
// mounted directly on the page.
cs="tb0";cls="S9g8";fns="trb12";wm("i");
// tb0 installation parameters
//----------------------------------- tb0 Contents -----------------------------------
cns="tb0";
// Container=tb0 for next tables
cs="tb1";j=0;k=0;i=2;lf=760;of=100;cls="S9p7";fns="trb12";jd=5;ds="n";wm("i");
cs="tb2";j=0;k=1;lf=380;of=250;ims="flower.jpg";fns="trb12";jd=5;wm("i");
cs="tb3";j=1;k=1;lf=380;of=250;cls="S9p7";fns="trb12";jd=5;wm("i");
cs="tb4";j=0;k=2;lf=380;of=50;cls="S9p7";fns="trb12";jd=5;wm("i");
cs="tb5";j=1;k=2;lf=380;of=50;cls="S9p7";fns="trb12";jd=5;wm("i");
// tb2 is tiled with image, all
// others painted with lt pink color
//----------------------------------- tb1 Contents ----------------------------------
cns="tb1";
// tb1 is divided into 4 col,3 rows
cls="r0";fns="trb24";ds="c";os="Web
Page Development";wm("dp");
cs="lt1";j=0;k=0;i=3;ds="c";wm("i");
// Insert Ap title into (cis) Create
// Literal control, make cs its text
cs="lt2";j=0;k=1;i=3;cis="Example Number One";ds="c";fns="trb12";wm("i");
// Create (lt2) containing Pg title
cs="hl0";j=0;k=2;cis="Example Number One";fns="trb12";cls="s9b0";ds="c";
urs="http://www.microsoft.com";wm("i");// Create Hyper text control which
// displays page 1 when clicked.
cs="hl1";j=1;k=2;cis="Example Number Two";fns="trb12";cls="s9b0";ds="c";
urs="http://www.microsoft.com";wm("i");// Do same for page 2
cs="im0";j=3;k=0;i=1;o=3;ds="e";lf=190;of=90;ims="images\\icon.jpg";jd=5;wm("i");
// Image, scaled to (190,90) pixels
//----------------------------------- tb2 Contents ----------------------------------
cns="tb2";
// tb2 is made of 1 col, 1 row
urs="http://www.microsoft.com";os="To order flowers, Click Here";
cls="y0";fns="trb16";wm("a");wm("c");
// Create hyper text link in (cis)
cs="lt3";ds="n";wm("i");
// Create (lt3), make (cis) its txt
//----------------------------------- tb3 Contents ----------------------------------
cns="tb3";
// tb3 is made of 1 col, 1 row
cls="G5";fns="trb14";ds="c";os="Flower Prices";wm("dl");
// Insert table's title into (cis)
// in addition to all coming html:
i=5;o=65;wm("to");
// open table,bordr=5, width=65%
OS[0]="Collection";OS[1]="Price";wm("th");
// Make a 2 column header
OS[0]="Mixed Tulips";OS[1]="$25.00";wm("td"); // and
3 data rows. All the html
OS[0]="Color Roses";OS[1]="$30.00";wm("td");
// generated is inserted into (cis)
OS[0]="Pink Lilies";OS[1]="$50.00";wm("td");
//
wm("tc");
// Add closing table html tags and
wm("c");
// closing tags for other html ones
cs="lt4";wm("i");
// Create (lt4), make (cis) its txt
//----------------------------------- tb4 Contents ----------------------------------
cns="tb4";
// tb4 is made of 1 col, 1 row
cs="lb10";cis="Server Response: ";wm("i");
// Create (lt10), cis=its txt
//----------------------------------- tb5 Contents ----------------------------------
cns="tb5";
// tb5 is made of 1 col, 1 row
cs="lb11";cis="Server Response: ";wm("i");
// Create (lt11), cis=its txt
}
public override void update() {
setup();
// Execute method setup()
MakePage(table);
// Make the page
}
// containing all controls
}
=========================================================================================
TO
LEARN HOW TO WRITE THE PROGRAM, GENERATE THE (.aspx) FILE AND TO RUN IT, See Example A
=========================================================================================
TUTORIAL:
Here is a description of the controls used in this example:
LITERAL CONTROLS: Literal controls are made of pure HTML. As mentioned
before, you don't
have to know HTML, method wm() does the job for you. HTML allows us to write any phrase,
using any
color, font and indention as we like. It also allows us to make hyper links and
tables.
It is good to know that using literal controls is not essential in
many cases. We can also
write a phrase using the Label Control, and we can make a hyper link using the HyperLink
control.
The Literal Control's parameter which is assigned the HTML is its
label (cis). Normally we
use two lines in the setup() method for each Literal control. The first line creates (cis)
and
the second line creates all other parameters and calls wm("i").
Method wm() contains several modes which create the HTML for you,
the display mode wm("d")
is one of them. Where does it display its output? The answer is two places. It can write
the
HTML into an HTML file which is not what we need to get into now. The other one is
the string (cis) It keeps adding
it's text output to (cis) each time it's called.
Let us now analyze the Literal Controls used in the example:
(1) lt1: The top line of (lt1)'s setup was:
cls="r0";fns="trb24";ds="c";os="Web
Page Development";wm("dp");
We have called method wm() at mode "dp". This mode starts a new paragraph
then displays
the wanted text there. The wanted text is the text assigned to (os). We have also told the
method to use
pure red color, TimesRoman, bold, size 24 font and to display the text at
the center.
Method wm("dp") has generated several HTML tags to do all the text
setup in addition to
the text itself. All the HTML generated is concatenated together and added to (cis) If we
then
call the same method to display a new paragraph, the new HTML will also be
concatenated to the current one into (cis)
Then the second line came which was:
cs="lt1";j=0;k=0;i=3;ds="c";wm("i");
This says create a Literal control which occupies all the 3 columns
of (tb1) starting at
cell(0,0) and centered into the 3 table cells.
(2) lt2: The label for this one has been a simple short text so its
setup was made in
one line
(3) lt3: Here is the setup section for this Literal control:
urs="http://www.microsoft.com";os="To order flowers, Click Here";
cls="y0";fns="trb16";wm("a");wm("c");
// Create hyper text link in (cis)
cs="lt3";ds="n";wm("i");
// Create (lt3), make (cis) its txt
The top two lines have created (cis). Method wm("a") was used to generate
the HTML "anchor"
tag which makes the Hyperlink. Method wm("a") requires the clickable text assigned to (os)
and the
"URL to go to", assigned to (urs) That was done in the top line. The color and
font to display the clickable in have
been also supplied. All generated HTML have been
loaded into (cis) automatically by method wm("a").
The third line has created the Literal control stating that it should
be placed at the top
(north) of its cell.
(4) lt4: This literal control has required a complex label. The first
section of the
label was the table's title which has been created using the code:
cls="G5";fns="trb14";ds="c";os="Flower
Prices";wm("dl");
Every thing here is similsr to the code used for (lt1) except that
we did not want to
write the title at a new paragraph, we wanted to display it directly then move to next
line instead,
so we used method wm("dl")
Next to that, we wanted to add to (cis) the HTML necessary to create
a table. Here is how
it was done:
i=5;o=65;wm("to");
// open table,bordr=5, width=65%
OS[0]="Collection";OS[1]="Price";wm("th");
// Make a 2 column header
OS[0]="Mixed Tulips";OS[1]="$25.00";wm("td"); // and
3 data rows. All the html
OS[0]="Color Roses";OS[1]="$30.00";wm("td");
// generated is inserted into (cis)
OS[0]="Pink Lilies";OS[1]="$50.00";wm("td");
//
wm("tc");
// Add closing table html tags and
wm("c");
// closing tags for other html ones
The first step is calling wm("to") to generate necessary tags for
a table with border
width of 5 pixels and a total width of 65% of its container's width.
Next step is to write the table header. All column titles are assigned
to OS[] before
calling wm("th").
Next is to enter all data rows in the same manner.
The last step in creating a table is to close it using method wm("tc")
to generate closing
tags for all open table tags.
As a precaution, we called wm("c") which checks to see if the generated
HTML contains an
HTML tag of any type without its matching closing one. If any was found, it adds the
necessary closing
tag.
HYPERLINK CONTROLS: The Hyperlink control functions the same as the
hyperlinks generated
by the Literal control except that it puts the clickable text into a box which makes it
more suitable
for making an index to navigate a site with. It can also be turned into a
clickable image if you supply the image's URL
assigned to (ims).
IMAGE CONTROLS: This control makes it easy to place an image at any
location you choose
in the page. The image's URL is supplied to (ims). You can scale the image to any size
you
want if you assign the wanted (width,height) to (lf,of) respectively.
LABLE CONTROLS: They display text similarly to Literal controls except
that the text is
inserted into a box.
MORE ABOUT (cis): A Literal control is not the only control which
uses (cis) as its label.
There are many other controls which do the same. Fortunately you can use the HTML
generating
modes of method wm() to display them using any color, font or indention just
like you do with literal controls.
=========================================================================================
MASTER PAGES
============
The ASP.NET 2.0 includes several new features like master pages, custom
controls and web
parts which enhance web development. PC# must do her best to implement as many useful
features as possible,
however PC# must never go beyond what it is for which are:
(1) Making programming as easy and simple as possible.
(2) Performing
tasks with the shortest possible code.
(3) Things to memorize must be reduced to minimum.
Making you able to write the most powerful web page program possible
while abiding with
the rules above requires some careful decision makings.
The web page design is modular. This is accomplished by using
table containers for each
of its sections. This by itself makes each section a reusable web part without additional
programming
complexity.
Normally most pages of a website contain common sections like a header,
a navigation index
and/or a footer. The page you have created in the previous example shows that clearly.
The top table (tb1) with everything it contains is going to be common
for all the pages
which we are going to make. Tables tb4 and tb5 are also common. Including these common
parts into
every page class we write is a waste of time and resources. The better choice
is to create a master page class which includes
the common parts alone and make it execute
together with each page class.
In order to create a master page, your class must extend class "System.Web.UI.MasterPage"
instead
of class "Page" (Your class extends class "Page" when it extend "pasp") The master page
file extension should
be ".master" instead of ".aspx". Also the ".aspx" files for the
content pages which are generated for you by the tool "pcw"
will need to be modified.
In order to avoid the master page creation complexity, we use a simpler
way to do the same
job. Our master page code file is the same as any page code file. Instead of using tool
"pcw"
to generate the matching ".aspx" file, we use tool "pcwm" which compiles the master
page code file and saves the resulting
".dll" file into the "Bin" subdirectory.
The master page class extends class "pasp" which extends "Page". All
your page classes will
extend the master class. This means that you have the
following class heirarchy:
Page ---> Class pasp ---> Your Master Page Class ---> Your
page classes
Both "pasp" and the master page classes are stored into the "Bin"
subdirectory of your
application's directory in the form of ".dll" files. Your page classes are kept into your
application
directory in the form of ".cs" files.
You may have more than one master class although this is not recommended.
If you do, you
must make them extend one another. The deepest of them should extend class (pasp) and the
top one should
be extended by the page classes.
Now we are going to split the class of example 1 into two classes.
The first class will be
named "master1" and will include the creation of all the table containers and the population
of
tables tb1,tb4 and tb5. The second class will keep the name "pg1" and will include the
population of tables tb2 and tb3
only in addition to method update() which handles all
events of the page.
Class "master1" will be extended to include hyperlinks for 10 pages
and will also include
a method named PageNumber() which all page classes will be calling in order to make their
page
numbers show at the top of the page. Table (tb2)'s background will be painted the same
as all other tables instead of being
tiled with an image. Class "pg1" will populate (tb2)
differently in order to maintain the same look despite that change.
THE MASTER CLASS:
public partial class master1:pasp {
// The master class must extend pasp
// or a deeper master class
public override void setup() {
//---------------------------------- Page Contents -----------------------------------
cns="";
// tb0 Container="" since it's
// mounted directly on the page.
cs="tb0";cls="S9g8";fns="trb12";wm("i");
// tb0 installation parameters
//----------------------------------- tb0 Contents -----------------------------------
cns="tb0";
// Container=tb0 for next tables
cs="tb1";j=0;k=0;i=2;lf=760;of=100;cls="S9p7";fns="trb12";jd=5;ds="n";wm("i");
cs="tb2";j=0;k=1;lf=380;of=250;;cls="S9p7";fns="trb12";jd=5;wm("i");
cs="tb3";j=1;k=1;lf=380;of=250;cls="S9p7";fns="trb12";jd=5;wm("i");
cs="tb4";j=0;k=2;lf=380;of=50;cls="S9p7";fns="trb12";jd=5;wm("i");
cs="tb5";j=1;k=2;lf=380;of=50;cls="S9p7";fns="trb12";jd=5;wm("i");
//----------------------------------- tb1 Contents ----------------------------------
cns="tb1";
// tb1 is divided into 4 col,3 rows
cls="r0";fns="trb24";ds="c";os="Web Page Development";wm("dp");
cs="lt01";j=0;k=0;i=10;ds="c";wm("i"); // Insert Ap title into (cis)
Create
// Literal control, make cs its text
cs="lt02";j=0;k=1;i=10;cis="Insert Page's Number Here";ds="c";fns="trb12";wm("i");
// Create (lt02) containing Pg title
cs="hl01";j=0;k=2;cis="Page 1";fns="trb12";cls="s9b0";ds="c";urs="pg1.aspx";wm("i");
cs="hl02";j=1;k=2;cis="Page 2";fns="trb12";cls="s9b0";ds="c";urs="pg2.aspx";wm("i");
cs="hl03";j=2;k=2;cis="Page 3";fns="trb12";cls="s9b0";ds="c";urs="pg3.aspx";wm("i");
cs="hl04";j=3;k=2;cis="Page
4";fns="trb12";cls="s9b0";ds="c";urs="pg4.aspx";wm("i");
cs="hl05";j=4;k=2;cis="Page 5";fns="trb12";cls="s9b0";ds="c";urs="pg5.aspx";wm("i");
cs="hl06";j=5;k=2;cis="Page 6";fns="trb12";cls="s9b0";ds="c";urs="pg6.aspx";wm("i");
cs="hl07";j=6;k=2;cis="Page
7";fns="trb12";cls="s9b0";ds="c";urs="pg7.aspx";wm("i");
cs="hl08";j=7;k=2;cis="Page 8";fns="trb12";cls="s9b0";ds="c";urs="pg8.aspx";wm("i");
cs="hl09";j=8;k=2;cis="Page 9";fns="trb12";cls="s9b0";ds="c";urs="pg9.aspx";wm("i");
cs="hl10";j=9;k=2;cis="Page
10";fns="trb12";cls="s9b0";ds="c";urs="pg10.aspx";wm("i");
cs="im00";j=6;k=0;o=3;ds="e";lf=190;of=90;ims="images\\icon.jpg";jd=5;wm("i");
// Image, scaled to (190,90) pixels
//----------------------------------- tb4 Contents ----------------------------------
cns="tb4";
// tb4 is made of 1 col, 1 row
cs="lb00";cis="Server Response: ";wm("i");
// Create (lb00), cis=its txt
//----------------------------------- tb5 Contents ----------------------------------
cns="tb5";
// tb5 is made of 1 col, 1 row
cs="lb01";cis="Server Response: ";wm("i");
// Create (lb01), cis=its txt
}
public void PageNumber(int pgno) {
// Page number insertion method
cs="lt02";cis="Page Number "+pgno;wm("sl");
// Set the label of (lt02) to display
}
// the page number supplied.
}
=========================================================================================
Save
this class into a file named "master1.cs" Then, from Command Mode, type:
pcwm master1 [ENTER]
=========================================================================================
THE PAGE CLASS:
public partial class pg1:master1 {
// All page classes must extend the
// top of the master class heirarchy
public override void init() {
base.init();
}
public override void setup() {
base.setup();
// Run setup() of master page first
//----------------------------------- tb2 Contents
----------------------------------
cns="tb2";
// tb2 is made of 1 col, 1 row
urs="http://www.microsoft.com";os="To order flowers, Click Here";
cls="S9";fns="trb16";wm("a");wm("c");
// Create hyper text link in (cis)
cs="lt3";j=0;k=0;i=2;ds="n";wm("i");
// Create (lt3), make (cis) its txt
cs="im2";j=0;k=1;ds="se";lf=180;of=200;ims="flower.jpg";wm("i");
cs="im3";j=1;k=1;ds="sw";lf=180;of=200;ims="flower.jpg";wm("i");
//-----------------------------------
tb3 Contents ----------------------------------
cns="tb3";
// tb3 is made of 1 col, 1 row
cls="G5";fns="trb14";ds="c";os="Flower Prices";wm("dl");
// Insert table's title into (cis)
// in addition to all coming html:
i=5;o=65;wm("to");
// open table,bordr=5, width=65%
OS[0]="Collection";OS[1]="Price";wm("th");
// Make a 2 column header
OS[0]="Mixed Tulips";OS[1]="$25.00";wm("td"); // and
3 data rows. All the html
OS[0]="Color Roses";OS[1]="$30.00";wm("td");
// generated is inserted into (cis)
OS[0]="Pink Lilies";OS[1]="$50.00";wm("td");
//
wm("tc");
// Add closing table html tags and
wm("c");
// closing tags for other html ones
cs="lt4";wm("i");
// Create (lt4), make (cis) its txt
}
public override void update() {
setup();
// Execute setup()
MakePage(table);
// Make the page
PageNumber(1);
// Call master1 class's method to
}
// set page number
}
=========================================================================================
Create
the ".aspx" file with the command pcw pg1 and execute the page pg1.aspx file
exactly as you have been doing before.
=========================================================================================
INTERACTING WITH USERS
======================
Interacting with user is done almost identically as it is done with
window forms. PC#
receives all events then calls the update method of your class supplying it with the
keyname of the
control where the event has occured assigned to (cs).
The first event received is the "Page_Load" event which occures when
the page is ready
to be retrieved. Although this event is not generated by a control, PC# makes it
identifiable by assigning
"pl" to (cs) before calling method update() when this event is
received.
When the user clicks a button, PC# receives this event, checks the
button's identity and
assigns the button's keyname to (cs) then calls method update() of your class.
In method update(), you can get the latest update for any control
by calling wm ("gu")
This allows you to know everthing the user has selected in the page. After analyzing
user selsections,
you may like to send him/her a message back. You can do so by assigning
the message to the label (cis) of the Literal or
Label control which the user expects to
receive your response at, then call method wm("su") to update the control with
the new
label.
Example 2: In table 2, we are going to demonstrate how to receive
the text which the user
has entered into a text field and send back a confirmation to the user.
In table 3, we are going to demonstrate how to create a clickable
image.
=========================================================================================
public partial class
pg2:master1 {
// Page class extends master class
public override void init() {
base.init();
}
public override void setup() {
base.setup();
// Run setup() of master page first
//----------------------------------- tb2 Contents ----------------------------------
cns="tb2";
// tb2 is made of 1 col, 2 rows
cs="tf0";cis="Enter Your Name";j=0;k=0;ds="c"; // tf0 is centered
into 1st row
jf=20;cls="b0y0";fns="trbi12";wm("i");
// tf0 size is 20 chars.
cs="bt0";cis="Submit";j=0;k=1;ds="c";
// bt0 is centered into 2nd row
cls="r0g8";fns="trb12";wm("i");
// Its label is "Submit"
//----------------------------------- tb3 Contents ----------------------------------
cns="tb3";
// tb3 is made of 1 col, 1 row
cs="hl3";ds="c";ims="pix.jpg";jd=5;
// Clickable image
cis="Click Here";urs="http://www.microsoft.com";cls="b0s9";wm("i");
}
//------------------------------------------------------------------------------------
public override void update() {
if(cs.Equals("pl")) {
// If event is "Page_Load"
setup();
// Execute setup()
MakePage(table);
// and Make the page
PageNumber(2);
// Calling master class's method
}
// to display this page's number
if(cs.Equals("bt0")) {
// If event is: "bt0 clicked"
cs="tf0";wm("gu");
// Get update text of tf0 in (cus)
cs="lb00";cis="You entered: "+cus;wm("sl");
// Modify lb00's text with server
}
// response.
}
}
=========================================================================================
USING VARIABLES IN WEB PAGE DEVELOPMENT
=======================================
All the variables which you declare in your web page class or PC#
declares for you are
good for one trip only. This means that you can use them to prepare the page before it is
sent
to the user, but after the user clicks a button and you like to work on the page
again, you cannot expect your variables
to retain their values.
However, ASP.NET allows us to declare variables which retain their
values. They are 3
types of variables which retain their values:
(1) Page Variables: Page variables retain their values over
one page use only. This means
that if the user changes page, the variables are lost.
(2) Session Variables: Session variables retain their values
over one Session. This means
that if the user changes page, the variables keep their values as long as the session has
not
been terminated. If the user stays inactive for 20 minutes, the session terminates
and the variables are lost. The 20 minute
limit is a default which can be changed.
(3) Application Variables: This is the most durable type (and
also the costiest). They
keep their values as long as the application is running and this requires at least one
user
to request any page of the application.
PC# Simplification:
All variables PC# can store and read back for you must be of string
type. You can convert
a string to and from any other type using method om().
The name of a page variable must end with "_p".
The name of a session
variable must end with "_s".
The name of an application variable must end with "_a".
Method wm("vs") sets (stores a value into) a variable.
Method wm("vg")
gets (retrieves the value of) a variable.
Parameters used with the methods: ks=variable name os= its value
Examples:
(1) To store the string "Apple" into the page variable
(Fruit_p):
ks="Fruit_p";os="Apple";wm("vs");
(2) To Get the value of the Session variable (Fruit_s):
ks="Fruit_s";wm("vg");// The obtained value will be assigned to (os)
(3) To store the string "Orange" into the application
variable (Fruit_a):
Application.Lock(); // Lock application
to keep other pages out temporarily
ks="Fruit_a";os="Orange";wm("vs");
Application.UnLock(); // Unlock the application
Look at example 3 carefully. We need to lock the application before
modifying an
application variable in order to avoid data corruption. This practice is commonly used
with threads.
We are not going to do the locking in the next example since we expect
you to be the only
user.
If you try to get a variable which has not been stored or its place
has been corrupted,
you should end with an exception. However method wm() does its best to prevent this from
happening.
So, most likely, you'll end with getting the value (os="") instead.
Example 3:
LEFT SECTION: Install a calendar control. Get
the date the user has selected and
display it.
RIGHT SECTION: Create 3 variables, an application var, a session var and a page var.
Install a button control and increment all var's each time the button
is clicked.
=========================================================================================
public partial
class pg3:master1 {
public override void init() {
base.init();
}
public
override void setup() {
base.setup();
// Run setup() of master page first
//----------------------------------- tb2 Contents ----------------------------------
cns="tb2";
// tb2 is made of 1 col, 1 row
cs="ca0";j=0;k=0;fns="trb8";ib=true;cls="r0g8"; // calendar control,
show grid lines
ds="c";lf=100;of=100;jd=5;kd=1;wm("i");//
Borders=5 pxls, CellSpacing=1 pxl
//----------------------------------- tb3 Contents ----------------------------------
cns="tb3";
// tb3 is made of 1 col, 1 row
cs="bt0";cis="Increment Counters";ds="c";
// button control
fns="trb14";cls="b0y0";wm("i");
}
//-----------------------------------------------------------------------------------
public override
void update() {
//------------------------------------ Page Load ------------------------------------
if(cs.Equals("pl")) {
// If event is "Page_Load"
ks="c_a";wm("vg");
// test to see if variable is null
ob=false;if(os.Length<1) ob=true;
// Use ob as a flag of being null
if(ob || !IsPostBack) {
// If sample was found null for any
ks="c_a";os="0";wm("vs");
// reason or if this was first page
ks="c_s";os="0";wm("vs");
// retrieval, store"0" into all
ks="c_p";os="0";wm("vs");
// 3 var's.
}
setup();
// Execute setup()
MakePage(table);
// and make page.
PageNumber(3);
// Calling master class's method
}
// to display this page's number
//----------------------------------- Calendar Update ----------------------------------
if(cs.Equals("ca0")) {
// If Calendar date selected
cs="ca0";wm("gu");
// Get Calendar update (date in cus)
cs="lb00";cis="You selected: "+cus;wm("sl");
// Display date.
}
//----------------------------------- Variable Updates ----------------------------------
if(cs.Equals("bt0")) {
// If button clicked
wm("l");
// Add "leave as is" tag <pre> to cis
cis+="c_a=";ks="c_a";wm("vg");om("ti");
// Get application var, convert to int
o++;om("fi");cis+=os;ks="c_a";wm("vs");
// increment it,display it,save it.
cis+=" c_s=";ks="c_s";wm("vg");om("ti");
// Do same to session var.
o++;om("fi");cis+=os;ks="c_s";wm("vs");
cis+=" c_p=";ks="c_p";wm("vg");om("ti");
// Do same to page var.
o++;om("fi");cis+=os;ks="c_p";wm("vs");
wm("c");
// Close all HTML tags
cs="lb01";ds="c";wm("sl");
// Display text in (cis)
}
}
}
=========================================================================================
TUTORIAL:
CALENDAR CONTROL: There are 3 settings which you need to know about when you install a
calendar control:
(1) Availability of grid seperation lines: If you want them to appear, supply (ib=true;)
(2) Cell
Spacing: You may specify the seperation line width in pixels assigned to (kd)
(3) Border: If you want a border around the
calendar assign its width in pixels to (jd)
When you select a date from the calendar, your selection goes directly
to the server, you
don't need to click a "submit" button to fire the event.
VARIABLES: Practice with clicking the button to see how each of the
3 variables react
when you do it. Then do the following:
(1) Close the browser window then start a new
one. You'll find that all 3 counters
have been reset. This is because your session has been the only
one requesting the
page. When it was terminated the page was closed. So all var's lost their values.
(2)
Start a second browser window, load the same page and cilck the button 3 times. Return
back to first
window and click the button once. You'll notice that all counters have
advanced by 1 except c_a which
has advanced by 4. This is because application
variables are common for the two sessions while both
page and session variables
are not.
(3) Leave the first window untouched until the session times
out (normally in 20 minutes),
then click the button once. You'll notice that the session variable c_s
is the only
one which has been reset. The page and application var's have stayed the same.
=========================================================================================
WORKING WITH MORE COMPLICATED FORMS
=====================================
FORM CONTROLS: Here is a list of the most commonly used controls in
forms:
TEXT FIELD: This is the most common control in forms. Here are some
of its setup features:
(1) To make it a "Password field", add (ib=true) to its setup parameters.
(2) To make it "Read
Only" text field, add (ob=true).
(3) To make it large enough for (n) chars, all visible, add (jf=n)
(4) To make it large
enough for a maximum of (m) chars (visible and invisible), add (jd=m)
(5) To make it contain a default text, add (cus="the
text")
TEXT AREA: This is a multi-line text field. Here are some of its setup
features:
(1) To make it "Read Only" text field, add (ob=true).
(2) To make it large enough for (x) chars and (y) lines,
all visible, add (jf=x;kf=y;)
(3) To make it large enough for a maximum of (m) total chars (visible and invisible),
add (jd=m)
(4) To make it contain a default text, add (cus="the text")
CHECK BOX: We use it when we expect the user to select more than one
item.
To make it "selected" by default, add (cus="1") to its setup parameters.
RADIO BUTTON: We use it when we expect the user to select only one
item.
To make it "selected" by default, add (cus="1") to its setup parameters.
Naming Check Boxes and Radio Buttons:
These two control types are used as groups. You may include more than
one group of Check
boxes or Radio Buttons in your form. This requires a special naming convention.
The keyname
for any control of these two types must be made of 4 chars like "rb25". In
this name "2" is the group number which this
Radio Button belongs to. You can have upto
9 Check Box groups and 9 Radio Button groups. Their numbers should be between
0 to 8.
Group number "9" is reserved for internal use.
DROP DOWN LIST: This control allows the user to select an item from
a list of items.
To supply the item list assign it to CIS[]. You may make the first item (CIS[0]) the
title of the Drop Down List or make it seperate. To set a default selection, assign
tho index of the item to be
selected to (cui).
CONTROL LABELS:
We always assign the label to (cis). The label of a Button and the
label of a
"Label control" are printed on them. The size of the label actually sets the size
of those two controls.
You can always resize those controls by changing the font size
or text of their labels.
For a "Check Box" and "Radio Button", the label always sets to the
right of the control.
For most other controls we can do a lot more with labels. We can set
them above, below,
to the left or to the right of their controls. We can also load them with the html
necessary to set
their color, fonts, locations and much more. We have already done some
of that in previous examples.
To set the label location relative to its control assign the label
direction code to (os)
the label direction code can be ("n","s","e" or "w") meaning that the label should be set
(above,
under, right of or left of) its control (respectively) The default is "n".
For a Drop Down List control, We may use the top item of its item
list as the label. If
we decide to do so, we make no assignment to (cis) and assign the label to CIS[0] instead.
OTHER COMMON SETUPS:
(1) cns: Keyname of the table container of
the control.
(2) (j,k): Order of the first cell in the table container which the control occupies
horizontally and vertically.
(3) (i,o): Number of cells which the control occupies horizontally and vertically.
(4)
(lf,of): Width and Height in Pixels.
(5) jd: Border width
(6) cls:
Combined Foreground-Background color code.
(7) fns: Font code.
(8) cts:
Tooltip's text which appears when mouce pointer is placed over the control.
(9) id: Tab index.
Sets the order at which you move through controls by using the
Tab key.
SUBMITTING THE FORM:
We expect you to include a button which the user clicks after completing
a form. ASP.NET
allows most controls to generate their own events when the user changes their content.
This means that if the user types something wrong into a text field
or checks a check box
by mistake, the data may immediately be sent to the server. We don't receive such events
since
the user must be allowed to inspect what he/she has done and make all
the corrections necessary before submitting the form.
However, if you like to handle the
events of any control by yourself, you can always get the control's object by assigning
its
keyname to (cs) and calling wm("O")
We handle only 3 events, "Page_Load", "Button_Click" and "Calendar's
Date change".
GETTING CONTROL's UPDATE:
After the user hits
|
