DEMONSTRATIVE EXAMPLES
======================
WEB PAGE DEVELOPMENT III
========================
THE MASTER PAGE FILE:
=====================
The master file of this new set of examples is going to have the ability to customize
the tables it creates according to what each page requires. We are going to describe
the new modification in details when we get into the topic of "The hidden powers of
method setup()". For now, here is a listing of the new master file class:
=========================================================================================
A complete listing of the master file class:
--------------------------------------------
public partial class master1:pasp {
public bool IsSingleTable;
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");
if(IsSingleTable) {
cs="tb2";j=0;k=1;lf=760;of=600;;cls="S9p7";fns="trb12";jd=5;wm("i");
}
else {
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 11 cols,3 rows
wm("o");cls="r0";fns="trb24";ds="c";os="Web Page Development III";wm("dp");
os=" ";urs="../pgd.aspx";wm("a");wm("c");
cs="lt01";j=0;k=0;i=10;ds="c";wm("i");
cs="hl11";j=0;k=1;i=2;cis=" Home ";fns="trb12";cls="s9b0";ds="e";
urs="..\\default.aspx";wm("i");
cs="hl13";j=2;k=1;i=1;cis="WPD I";fns="trb12";cls="s9b0";ds="e";
urs="..\\WPDI\\pg1.aspx";wm("i");
cs="lt02";j=3;k=1;i=4;cis="Insert This Page's Number Here";ds="c";fns="trb12";wm("i");
cs="hl12";j=6;k=1;i=1;cis="WPD II";fns="trb12";cls="s9b0";ds="w";
urs="..\\WPDII\\pg1.aspx";wm("i");
cs="hl14";j=7;k=1;i=2;cis="WPD III";fns="trb12";cls="s9b0";ds="w";
urs="..\\WPDIII\\pg1.aspx";wm("i");
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=10;k=0;o=3;ds="e";lf=190;of=90;ims="..\\images\\icon.jpg";jd=5;wm("i");
// cs="im00";j=10;k=0;o=3;ds="c";lf=100;of=50;ims="..\\pcs\\icon.bmp";jd=5;wm("i");
if(IsSingleTable) return;
//----------------------------------- tb4 Contents ----------------------------------
cns="tb4"; // tb4 is made of 1 col, 1 row
cs="lb00";cis="Server Response: ";wm("i"); // Create (lt10), cis=its txt
//----------------------------------- tb5 Contents ----------------------------------
cns="tb5"; // tb5 is made of 1 col, 1 row
cs="lb01";cis="Server Response: ";wm("i"); // Create (lt11), cis=its txt
}
public void PageNumber(int pgno) {
cs="lt02";cis="Page Number "+pgno;wm("sl");
}
public void DisplayMessage(int l, int t, string ms) {
// Input var's: l=which label, j=0 means lb00, j=1 means lb01.
// t=Message type (color selected accordingly)
// t=0 means instructions, t=1 means Success, t=2 means Error.
// ms=Message text.
cls="S9 G3 r0 ".Substring(3*t,2)+"p7";
if (l==0) cs="lb00"; else cs="lb01";
wm("sC");
cis=ms;wm("sl");
}
}
=========================================================================================
As you must know, you need to save it into file "master1.cs" at this application folder
then compile the file by executing the command 'pcwm master1' from command mode.
=========================================================================================
TILING THE BACKGROUND WITH AN IMAGE
===================================
The two containers which we use, the Table and the Panel can be tiled with images. We
have seen an early example on tiling a table. Since We create all the tables in the master
page class, we can tile them only there. So, if you'll be interested in tiling tables for
some of your web pages, you may consider including a method in the master page class which
can be called from page classes to tile a table to their specs. In the coming example, we
are going to install a panel into the table then tile the panel.
SELECTING THE IMAGE:
--------------------
The image used for tiling must be faint in order to allow the page contents to look sharp
and readable. To do so, you need to paint over the image with a partially transparent
white paint. You may use an available image file or create a dynamic image for tiling.
Controls with transparent background:
-------------------------------------
When we talk about tiling a page, Controls with transparent background become more
interesting. In most cases, we like the background color of a label control to match its
container's color so that only its text shows up. When the container is tiled with an image,
this job becomes impossible. Fortunately, we can make the label control's background
transparent so the tiles can appear though it.
To make the background color transparent, you need to assign a 6-char color code to (cls)
for the foreground and background colors when the control is installed. The last character
of the code which represents the opacity component of the background color must be "0".
Unfortunately, only few controls can be of transparent background which are:
(1) The Literal control: This control has no background by default.
(2) The Label control.
(3) The Table control.
(4) The Calendar control.
=========================================================================================
Example 1: On the left side, we are going to tile with the image "icon.bmp" and on the
right side, we are going to create the image to tile with dynamically. Pages "tile.aspx"
and "tile1.aspx" will prepare the images which will be used by page "pg1.aspx" to tile
with. We are also going to install some controls with transparent background colors on
the top of the tiles.
=========================================================================================
THE PAGE CLASS (pg1.aspx)
-------------------------
public partial class pg1:master1 { // Page class extends master class
public override void init() {
base.init();
}
public override void setup() {
eri=0;
base.setup(); // Run setup() of master page first
//----------------------------------- tb2 Contents ----------------------------------
cns="tb2"; // tb2 is made of 1 col, 1 row
cs="pn2";j=0;k=0;ds="c";lf=365;of=235;ims="tile.aspx";wm("i");
//----------------------------------- pn1 Contents ----------------------------------
cns="pn2"; // tb2 contains 2 items
wm("o");
ds="c";cls="r0";fns="trb16";os="Tiling background with an image";wm();
cls="b0";fns="trbi12";
os="Before using an image for tiling, we like to make it look faint by painting over";
os+=" it with a partially transparent white paint.";wm("dp");wm("dp");wm();
wm("c");
cs="lt0";wm("i");
cs="lb0";cis="Transparent Label Control";lf=300;cls="o29s90";fns="trb20";jd=5;wm("i");
// Transparent Label Control
//----------------------------------- tb3 Contents ----------------------------------
cns="tb3"; // tb3 is made of 1 col, 1 row
cs="pn3";j=0;k=0;ds="c";lf=365;of=235;ims="tile1.aspx";wm("i");
//----------------------------------- pn1 Contents ----------------------------------
cns="pn3"; // tb2 contains 2 items
wm("o"); // Open new html loading op.
ds="c";cls="r0";fns="trb16"; // Set color and font
os="Using dynamic image for tiling";wm(); // Display title
cls="b0";fns="trbi12"; // Change color and font
os="Allows you to use one method to generate"; // Display text on a new paragraph
os+=" different patterns for different pages.";wm("dp");wm("dp");
wm("c"); // Close html loading op.
cs="lt1";wm("i"); // Install "lt1" with HTML in.
cs="ca0";fns="trb7";ib=false;cls="S99g80";jd=5;wm("i");
// Transparent Calendar control
}
//------------------------------------------------------------------------------------
public override void update() {
if(cs.Equals("pl")) { // If event is "Page_Load"
setup(); // Execute setup()
MakePage(table); // and Make the page
PageNumber(1); // Calling master class's method
} // to display this page's number
}
}
CLASS tile:
-----------
public partial class tile:pasp { // Class extends (pasp)
public override void init() {
base.init(); // Initialize pasp
}
public override void update() {
if(cs.Equals("pl")) { // If event is "Page_Load"
lf=100;of=50;wm("bo"); // Open new bitmap operation using bitmap of
// size 100 X 50 pixels.
js="..\\images\\icon.bmp";wm("fp"); // Get the image file's path
lf=100;of=50;gm("blf"); // Create new (bip), load image file into it
gm("br"); // Render (bip)
cls="s97";gm("sps"); // Prepare partially transparent white paint
lf=100;of=50;gm("crf"); // Paint over image with it
wm("bc"); // Close bitmap operation
}
}
}
CLASS tile1:
------------
public partial class tile1:pasp {
public override void init() {
base.init();
}
public override void update() {
if(!cs.Equals("pl")) return; // Return if not Page_Load event
lf=300;of=50;wm("bo"); // Open new bitmap operation using
// bitmap of size 300 X 50 pixels
cls="s4";gm("ec"); // Erase, paint with light gray
fns="trb36"; // Set font to TimesRoman, bold, 36
xs="Personal C Sharp"; // Text to be drawn
y=0; // (y) = Page center vertically.
cls="s9";gm("sps"); // Set color to white
os=xs;kf=y+2;gm("ctf"); // Draw text slightly above (y)
cls="S9";gm("sps"); // Set color to black
os=xs;kf=y-2;gm("ctf"); // Draw text slightly under (y)
cls="s4";gm("sps"); // Set color to wanted color
os=xs;kf=y;gm("ctf"); // Draw text exactly at (y)
cls="s94";gm("sps"); // Prepare partially transparent white paint
lf=300;of=50;gm("crf"); // Paint over image with it
wm("bc"); // Close bitmap operation.
}
}
=========================================================================================
|
 |
ERROR HANDLING
==============
If you have not read the "Error Handling" sections of both "Desktop applications
reference" and "Web applications reference", you need to do so before getting further into
this section.
The tool "out" is used to display the error messages which a page has generated on the
console. This should work fine when you are developing your software locally. In case one
of your pages which run at a remote location like a web hosting site has generated an
error and logged error messages into the "output.txt" file there, what to do? You need an
easy graphical means to check the log using your browser.
Next example will create a page which you can keep at the remote site which displays the
error log for you. Additionally, the same example will generate an error in order to show
how errors are logged in when different error handling levels are selected.
=========================================================================================
Example 2: We are going to use the same example which we have used to demonstrate error
handling in the "Desktop reference". In that example, we attempted to load a "jpeg" file
without supplying a readable file name in order to generate an error.
On the left side, we are going to let the user select the "error handling level" (eri),
then run the program. On the right side, we are going to display the "output.txt" file
content immediately after the operation.
One problem. We cannot read the file unless the page runs and the page is not going to
run since it has an error. We are going to fix that by making the error happen every
other time. So one run will cause the browser to halt and display the error. When this
happens, the user refreshes the page and the page will be able to run and display the
file content.
How are we going to generate the error every other time? We are going to be using a
session variable whose value will be flipped over between zero and one. When its value
is zero we generate the error. When its value is one we don't.
=========================================================================================
public partial class pg2:master1 { // Page class extends master class
public override void init() {
eri=0; // Set error level to 0.
base.init();
}
public override void setup() {
base.setup(); // Run setup() of master page first
//----------------------------------- tb2 Contents ----------------------------------
cns="tb2"; // tb2 is made of 4 cols, 5 rows
cs="lb0";cis="ERROR HANDLING DEMO";j=0;k=0;i=4;ds="c";cls="r0p7";fns="trb14";wm("i");
cis=" Select Error handling level then click the red button. When an error message";
cis+=" appears, refresh the page.";
cs="lb1";j=0;k=1;i=4;ds="c";cls="S9p7";fns="trb12";wm("i");
cs="lb2";cis="Error handling level:";j=0;k=2;i=4;ds="w";cls="b0p7";fns="trb12";wm("i");
cs="rb00";cis="eri=0";j=0;k=3;ds="c";cls="S9p7";fns="trb12";wm("i");
cs="rb01";cis="eri=1";j=1;k=3;ds="c";cls="S9p7";fns="trb12";wm("i");
cs="rb02";cis="eri=2";j=2;k=3;ds="c";cls="S9p7";fns="trb12";wm("i");
cs="rb03";cis="eri=3";j=3;k=3;ds="c";cls="S9p7";fns="trb12";wm("i");
cs="bt0";cis="Generate Error";j=0;k=4;i=4;ds="c";
fns="trb14";cls="s9r0";wm("i");
//----------------------------------- tb3 Contents ----------------------------------
cns="tb3"; // tb3 is made of 1 col, 2 rows
cs="pn1";j=0;k=0;ds="c";lf=365;of=210;cls="b0s7";fns="trb12";wm("i");
cs="bt1";cis="Delete File";j=0;k=1;ds="c";cls="r0g8";fns="trb12";wm("i");
//----------------------------------- pn1 Contents ----------------------------------
cns="pn1"; // tb3 is made of 2 cols, 4 rows
cs="ta1";cis="output.txt File";jf=80;kf=9;cls="r0s7";fns="crb12";wm("i");
}
//------------------------------------------------------------------------------------
public override void update() {
// Variables used: x=(0 or 1) used to determine whether error should be generated or not
// x_s: Session var which stores the value of (x)
if(cs.Equals("pl")) { // If event is "Page_Load"
setup(); // Execute setup()
MakePage(table); // and Make the page
PageNumber(2); // Set page number
ks="x_s";wm("vg"); // test to see if session var exists
if(os.Length<1 || !IsPostBack) { // If 1st trip or var non existing
// for any reason:
ks="x_s";os="0";wm("vs"); // Assign (x_s="0") and save it.
}
}
// -------------------- Set (eri), Get (x) from Session var's ---------------------
if(cs.Equals("bt0")) { // If Red button clicked
cs="rb0*";wm("gu");eri=cui; // Get update for Radio Button grp
// and set (eri) accordingly
wm("o");wm("l"); // Open HTML loading op, select
// "leave text unchanged" mode
ks="x_s";wm("vg");om("ti");x=o; // Get (x) from session var's
// ------------------------- If (x=0) Generate no error ---------------------------
if (x<1) { // If x=0:
ks="x_s";os="1";wm("vs"); // change to x=1 and save it
}
wm("c"); // Close all HTML tags
// --------------------------- If (x=1) Generate error ----------------------------
if (x>0 && eri>0) { // If (x=1) and (eri=0) not selected:
ks="x_s";os="0";wm("vs"); // Change to (x=0) and save it
fls="";gm("blf"); // then Generate the error
}
else if (x>0 && eri==0) { // If (x=1) and (eri=0) selected:
try { // Generate the same error and
fls="";gm("blf"); // catch the exception generated
} // this time.
catch { // write exception msg into log file
wrln("This page has caught the exception: "+exp.Message);
ks="x_s";os="0";wm("vs"); // Change to (x=0) and save it
}
}
// ---------------------------- Display file content ------------------------------
cus=""; // Initialize txt area update string
js="output.txt";wm("fp"); // Obtain path for the log file
if (fls.Length<1) return; // If could not be obtained return
fm("A"); // check file attributes
if(os == " ") cus+=" "; // If does not exist display no txt
else { // else:
fs="sf0";fm("or"); // Open file for read
fm("ra");cus+=os; // Read all file & assign to (cus)
fm("c"); // Then close file
}
cs="ta1";wm("su"); // Display text on text area
}
// ---------------------- Delete file after it has been read ----------------------
if(cs.Equals("bt1")) { // If Delete button clicked
js="output.txt";wm("fp"); // Obtain path for the log file
if (fls.Length<1) return; // If could not be obtained return
fm("A"); // check file attributes
if(os != " ") { // If exists, delete it.
Application.Lock();ks="f";fm("D");Application.UnLock();
}
cus=" ";cs="ta1";wm("su"); // Clear text area
}
}
}
|
 |
THE HIDDEN POWERS OF METHOD setup()
===================================
Most of the ASP.NET developers use the html section of their code to create the controls
necessary for the web pages they develop. We use the setup method for this task. So far,
you have seen some advantages in doing what we do. Now is the time to learn about hidden
powers in method setup() which have not yet been demonstrated. Before we get into that,
let us list the advantages which have been demonstrated so far:
(1) Short code. Most of the time each control requires only one line of code.
(2) Ability to specify a table or panel container for each control.
(3) Ability to create a sophisticated label (cis) using html code to use as a title for
most controls and as a body for a literal control.
(4) Ability to perform validation without the need for creating additional validation
controls.
(5) Ability to place controls into table cells so they appear where you like them to be.
Making method setup() more intelligent:
---------------------------------------
In addition to these advantages, there are greater advantages yet to be discovered. So far,
method setup() of all the pages which we have developed contained no more than a list of
controls and their parameters. We are not limited to that. We can use our full programming
power to make method setup() do a lot more. Here are some of what we can do:
(1) We can use loops within method setup() to create a large number of controls using
shorter code.
(2) We can get control labels from a file and assign them one by one to (cis) of each
control when we create a group of controls using loops.
(3) We can set conditions to determine which control should be created and which should
not be.
(4) We can use conditional setup for colors, fonts and all other parameters.
There is no limit to what you can do within method setup(). We are going to try to
demonstrate as many as we can in the coming examples and will leave the rest for you.
THE MASTER PAGE FILE:
=====================
We can use some of method setup() new revealed powers here. We are going to use the
master page file of application WPDII for application WPDIII with the following
modifications:
WPDII's master page creates the two tables tb2 & tb3 which we use for our examples
and tables tb4 & tb5 which we use for server messages. We are going to make this the
first option. The second option will be to create one table only (tb2) which will be
as large as all the four tables combined.
The master page will define a boolean variable at the top named (IsSingleTable). If
this variable is assigned (true) before calling [base.setup();] in any page class which
extends this master page class, it will get the new setup. If it calls the base method
without this assignment, it will get the regular setup.
Here is a listing of the new master class. You need to look only at the 4 lines which are
marked with "***" since everything else is unchanged.
=========================================================================================
public partial class master1:pasp {
public bool IsSingleTable; // *** New variable declaration
public override void setup() {
//---------------------------------- Page Contents -----------------------------------
cns="";
cs="tb0";cls="S9g8";fns="trb12";wm("i");
//----------------------------------- tb0 Contents -----------------------------------
cns="tb0";
cs="tb1";j=0;k=0;i=2;lf=760;of=100;cls="S9p7";fns="trb12";jd=5;ds="n";wm("i");
if(IsSingleTable) { // *** Create only if Single table wanted
cs="tb2";j=0;k=1;lf=760;of=300;;cls="S9p7";fns="trb12";jd=5;wm("i");
}
else { // *** Create only if regular page wanted
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 ----------------------------------
// Code has been eliminated since it has not been changed
//-----------------------------------------------------------------------------------
if(IsSingleTable) return; // *** Return here if single page wanted
// since the rest is for regular page
//----------------------------------- 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
}
}
Using loops within method setup():
==================================
We have already seen how to customize the master file by setting conditions within its
setup method. This time we are going to see how we can make the code shorter by using
loops.
=========================================================================================
Example 3: We are going to create a catalog which contains the pictures of 60 items and
a brief description of each. Imagine, if we are to do that using html or with the
standard use of ASP.NET. We would have created seperate 120 items, each of them could have
required several lines of code. Here, we are going to do the job with about 5 short lines.
The first thing to do is to use a uniform naming system for the picture files. Let us name
each of them "itemx.jpg", where "x" is the item number which starts at "0" and ends
at "59".
In the brief description of each item, we may like to include the item part number and
price. We can do that easily by using a random access file whose record numbers map
directly to item numbers. This means that record number (n) of the file contains
information for item number (n) of the catalog.
Due to some limitations, we are going to simplify the code further as follows:
(1) We don't have 60 image files to use for the example. So, we are going to use one file
only which is "flowers.jpg" to represent all 60 items.
(2) We are not going to use a Random Access File to store and retrieve item informations.
We are going to display simple messages which identify each item instead.
=========================================================================================
public partial class pg1:master1 {
public override void setup() {
IsSingleTable=true;base.setup(); // Select Single Table setup.
//----------------------------------- tb2 Contents ----------------------------------
cns="tb2"; // tb2 is divided into 3 col,21 rows
cs="lb1";
cis="How to use the ASP.NET to create a large size catalog with minimum code";
j=0;k=0;i=3;ds="c";fns="trb14";cls="r0p7";wm("i"); // Title
//------------------ Loop -------------------
for (n=0;n<60;n++) { // Repeat 60 times
cs="im"+(n+20);ims="images/item"+n+".jpg"; // Keyname and image file name
ims="../images/flower.jpg"; // ** Overrite item files.
j=n%3;k=(int)(n/3)+1; // Position.
cis="Item number "+n+"[br][br]";os="s"; // Remember to replace squared
ds="c";wm("i"); // brackets with angled ones.
}
//-------------------------------------------
}
public override void update() {
if(cs.Equals("pl")) {
setup();
MakePage(table);
PageNumber(3);
}
}
}
=========================================================================================
TUTORIAL: Here are some comments:
(1) The keynames for the 60 image controls have been selected to start at "im20". That
was to insure that none of the names matches a name used into the master class.
(2) After specifying the picture file name for each item, the name has been overwritten
by the name "../images/flower.jpg" as explained before.
(3) We wanted to display each 3 items in one row. This is why we used the formula (j=n%3)
(4) Since each 3 items occupy one row. The row number should be (n/3). However, the title
label occupies the first row, so the item row number should be [(n/3)+1].
(5) We have added 2 line feed tags at the end of each message in order to improve
visibility. We have temporarely changed the angled brackets of the tags with squared
ones in order to make your browser look at them as items to be displayed, not commands
to be executed.
=========================================================================================
|
 |
===============================================================================================
HOW TO MAXIMIZE THE BENEFITS OF USING THE ASP.NET
=================================================
The most important feature which makes the ASP.NET different is running the page file at
the server. This feature can be of great benefit to you if you care to make use of all
what it can offer. The elimination of HTML has been one great use of this feature, let us
see what else we can do:
(1) Using Master Files:
-----------------------
Always use master files in order to keep the common part of your code at one location which
saves time and simplifies updating.
(2) Simplify your code with programming:
----------------------------------------
Use loops and other programming features as described above in order to make your code
simpler and shorter.
(3) Seperate text from code:
----------------------------
If your page's body should contain a large amount of text, never put the text directly into
your page. Save the text into a file then load the file into the body of a literal control
in the page. We have seen some examples on how to do that.
Keeping the text in seperate files allows you to modify the text independantly which
simplifies your job and guards against errors. Your text files can be in plain text or html.
===============================================================================================
Using Chained and selectable Forms:
===================================
There are still more great uses for our setup() method. In some situations like
when registering a new member, the user must be presented with several forms which he/she
must fill in sequence. In other situations the user selects which form to get.
In most of these situations, the common practice is to keep each form in a seperate page.
We can develop a web page with customizable setup method which contains all the necessary
forms together.
=========================================================================================
Example 4: We are going to return back to the original "two tables page" this time.
On the left side, we are going to have 4 different forms which run in sequence. The first
form will get the user's first name, the second form will get her last name and the third
one will get her phone number. Finally the fourth form comes which contains all the data
which the user has entered.
On the right side, the user will be able to choose the form she wants to get. We are
going to use the same forms used on the other side except for the last one.
=========================================================================================
public partial class pg4:master1 {
public override void init() {
base.init();
}
public override void setup() {
base.setup(); // Select the usual setup
//----------------------------------- tb2 Contents ----------------------------------
cns="tb2"; // tb2 is made of 1 col, 3 rows
if (s==0) { // First form
wm("o");
ds="c";cls="r0";fns="trb16";os="CHAINED FORMS";wm();
cls="b0";fns="trbi12";
os="This page contains 4 forms which run in sequence. The first 3 collect data and";
os+=" the last one displays all data entered.";wm("dp");
wm("c");
cs="lt0";j=0;k=0;ds="n";wm("i"); // Title
cs="tf0";cis="First Name";j=0;k=1;ds="c";fns="trb12";cls="b0y7";wm("i");
cs="bt0";cis="OK";j=0;k=2;ds="c";fns="trb12";cls="r0g7";wm("i");
}
if (s==1) { // Second Form
cs="tf0";cis="Last Name";j=0;k=1;ds="c";fns="trb12";cls="b0g7";wm("i");
cs="bt1";cis="OK";j=0;k=2;ds="c";fns="trb12";cls="r0g7";wm("i");
}
if (s==2) { // Third Form
cs="tf0";cis="Phone Number";j=0;k=1;ds="c";fns="trb12";cls="b0o7";wm("i");
cs="bt2";cis="OK";j=0;k=2;ds="c";fns="trb12";cls="r0g7";wm("i");
}
if (s==3) { // Fourth Form
cs="ta0";cis="Data Received:";j=0;k=1;ds="c";jf=35;kf=3;
fns="trb12";cls="b0y7";wm("i");
cs="bt3";cis="OK";j=0;k=2;ds="c";fns="trb12";cls="r0g7";wm("i");
}
//----------------------------------- tb3 Contents ----------------------------------
cns="tb3"; // tb3 is made of 1 col, 3 rows
if (c==0) { // Branching Form
wm("o");
ds="c";cls="r0";fns="trb16";os="SELECTABLE FORMS";wm();
cls="b0";fns="trbi12";
os="This page also contains 3 additional forms which are identical to the top 3 on";
os+=" the other side. The user selects which form to run.";wm("dp");
wm("c");
cs="lt1";j=0;k=0;ds="n";wm("i"); // Title
cs="ch0";j=0;k=1;ds="c";cls="S9g7";fns="trb12";CIS=new string[] {"Select A Form",
"First Name Text Box and Button","Last Name Text Box and Button",
"Phone Number Text Box and Button"};wm("i");// Dropn List to select form
cs="bt4";cis="OK";j=0;k=2;ds="c";fns="trb12";cls="r0g7";wm("i");
}
if (c==1) { // First Form
cs="tf1";cis="First Name";j=0;k=1;ds="c";fns="trb12";cls="b0y7";wm("i");
cs="bt5";cis="OK";j=0;k=2;ds="c";fns="trb12";cls="r0g7";wm("i");
}
if (c==2) { // Second Form
cs="tf1";cis="Last Name";j=0;k=1;ds="c";fns="trb12";cls="b0g7";wm("i");
cs="bt5";cis="OK";j=0;k=2;ds="c";fns="trb12";cls="r0g7";wm("i");
}
if (c==3) { // Third Form
cs="tf1";cis="Phone Number";j=0;k=1;ds="c";fns="trb12";cls="b0o7";wm("i");
cs="bt5";cis="OK";j=0;k=2;ds="c";fns="trb12";cls="r0g7";wm("i");
}
}
//------------------------------------------------------------------------------------
public override void update() {
// Variables used: s=Step number for the chained forms section.
// step_s=variable name used for storing (s) as a session variable.
// first_s=First name as a session variable.
// last_s=Last name as a session variable.
// phone_s=Phone Number as a session variable.
// c=Number of chosen form for the selectable forms section.
// choice_s=variable name used for storing (c) as a session variable.
// data_s=Data entered into a selected form as a session variable.
// side=A flag to indicate which side is worked on. (side=true) means right
// side_s=variable name used for storing (side) as a session variable.
bool side=false; // Define active side flag
if(cs.Equals("pl")) { // If event is "Page_Load"
//--------------------- Display the correct form at each side -----------------------
ks="side_s";wm("vg"); // Read active side flag
side=false; // Default: left side
if(os.Length>0 && os.Equals ("r")) side=true; // Set flag if right side is active.
ks="step_s";wm("vg"); // Read step number for left side form
if(os.Length<1) s=0; // If not there, default to step 0
else {om("ti");s=o;} // Else assign step number to (s)
ks="choice_s";wm("vg"); // Read Chosen form no. of right side
if(os.Length<1) c=0; // If not there, default to 0
else {om("ti");c=o;} // Else assign chosen form no. to (c)
setup(); // Execute setup()
MakePage(table); // and Make the page
//----------------------- Additional jobs to do at left side ------------------------
if(s>2) { // If last form is to display at left:
ks="first_s";wm("vg");
cus="First Name: "+os+"\n"; // Get all var's stored as session
ks="last_s";wm("vg"); // variables for the chained forms
cus+="Last Name: "+os+"\n"; // and add them to (cus)
ks="phone_s";wm("vg");
cus+="Phone Number: "+os+"\n";
cs="ta0";wm("su"); // then display (cus) into text Area
}
else if (!side) { // Else, if left side but not last form:
cs="tf0";wm("sx"); // Set focus at left form's text field
}
//----------------------- Additional jobs to do at right side ------------------------
if (c==0) { // If branching form is to display:
ks="data_s";wm("vg"); // Get data from session var's
if (os.Length>0) DisplayMessage(1,0,"Data Entered: "+os);
} // and display at bottom.
else if (side) { // Else if Right side but not branching form:
cs="tf1";wm("sx"); // Set focus at right form's text field
}
}
//---------------------- Handling events coming from left side -----------------------
if(cs.Equals("bt0")) { // If first L side form button clicked
cs="tf0";wm("gu"); // Read data
ks="first_s";os=cus;wm("vs"); // save data
ks="step_s";os="1";wm("vs"); // Set (step=1) and save (step)
ks="side_s";os="l";wm("vs"); // Set active side flag at "left"
urs="pg4.aspx";wm("rr"); // Redirect to this same page
}
if(cs.Equals("bt1")) { // If second L side form button clicked
cs="tf0";wm("gu"); // Do the same
ks="last_s";os=cus;wm("vs");
ks="step_s";os="2";wm("vs"); // stp=2
ks="side_s";os="l";wm("vs");
urs="pg4.aspx";wm("rr");
}
if(cs.Equals("bt2")) { // If third L side form button clicked
cs="tf0";wm("gu"); // Do the same
ks="phone_s";os=cus;wm("vs"); //
ks="step_s";os="3";wm("vs"); // step=3
ks="side_s";os="l";wm("vs");
urs="pg4.aspx";wm("rr");
}
if(cs.Equals("bt3")) { // If L side's text area button clicked
ks="first_s";os="";wm("vs"); // Reset all data session var's
ks="last_s";os="";wm("vs");
ks="phone_s";os="";wm("vs");
ks="step_s";os="0";wm("vs"); // Return step number to zero
ks="side_s";os="l";wm("vs"); // Keep active side flag at "left"
urs="pg4.aspx";wm("rr"); // Redirect to this same page
}
//---------------------- Handling events coming from right side -----------------------
if(cs.Equals("bt4")) { // If Right Side branching form's
// button clicked:
cs="ch0";wm("gu"); // Get selected form number
if (cui>0) ks="choice_s";os=""+(cui);wm("vs");// Save it as a session variable
ks="side_s";os="r";wm("vs"); // Set active side flag at "right"
urs="pg4.aspx";wm("rr"); // Redirect to this same page
}
if(cs.Equals("bt5")) { // If other form's button clicked at
// right side:
cs="tf1";wm("gu"); // Read data
ks="data_s";os=cus;wm("vs"); // Save data
ks="choice_s";os="0";wm("vs"); // Set choice back to branching form
ks="side_s";os="r";wm("vs"); // Set active side flag at "right"
urs="pg4.aspx";wm("rr"); // Redirect to this same page
}
PageNumber(4); // Set page number
}
}
===============================================================================================
COMMENTS:
=========
(1) Each time we changed form, we wanted to execute a new page which contains its unique
controls. We could achieve that by redirecting to same page while making the page contents
different each time it runs. We used session variables to lead us to know how the page
should look like at each entry.
(2) Each entry is a different page. So we did not have to name controls differently. For example,
All text fields of the chained forms have been called "tf0", and all text fields of the
selectable forms have been called "tf1". We used different button names for the chained
forms since the actions to be taken when each is clicked on is different. For the selectable
forms, we called the buttons of all forms except the "branching" one "bt5". This caused no
problem since they all required the same actions within method update()
===============================================================================================
|
 |
JAVA SCRIPT
===========
(Available in versions 1.53 and later)
There are many advantages in running web pages at the server. It is safer, it helps in
making the code shorter and smarter. It also makes us able to use our private resources
like databases and files in creating the pages. However, there are some drawbacks.
Validating user supplied data requires trips from the client to the server and back which
wastes time. Also some of the graphical effects like animation cannot be done.
The ASP.NET uses JavaScript to do some data validation at the client, however as we have
mentioned before, this type of validation is good for simple jobs only. Complex validation
must either be done at the server or done using a script language at the client.
A newer technology named "AJAX" which goes for "Asynchronous JavaScript And XML" has made
JavaScript more valuable since it allows asynchronous communication between JavaScript
running at the client and the server without the need to send or receive large amounts of
data at one time.
All the factors above have made including JavaScript in PC# a must.
NECESSARY SETUPS:
=================
You need to set your Internet Explorer to allow running JavaScript on your computer before
all. You need to do the following three setups:
(1) Click on [Tools][Internet Options][Security][Custom Level], then locate the title
"Scripting" and enable Active Scripting if it was not enabled.
(2) Click on [Tools][Internet Options][Advanced], then locate the title "Security" and
check the item "Allow active content to run in files on My Computer".
(3) This setup is necessary for improving performance when running animations. Click on
[Tools][Internet Options], Under the title "Browsing History" or "Temporary Internet files",
click on [Settings]. Then, under the title "Check for newer versions of stored pages, select
"Automatically". Click [OK] then another [OK] to close both windows.
DO YOU NEED TO LEARN JAVASCRIPT LANGUAGE?
=========================================
Personal C Sharp simplifies this task for you. We have developed JavaScript methods which
are mostly identical to our C# methods. The methods are included into a script file which
is sent automatically with your page. So as far as you are concerned, there is minimum
difference between writing your JavaScript code and your C# code. However, there are few
JavaScript rules which you need to know:
(1) To define a variable you don't specify the type, you precede the variable name with
the keyword "var". Examples: var x,y;var xs="",ys="";
(2) Most JavaScript function names are the same as C# method names except that the first
letter of the first word of the name is in lower case. Check this comparison table.
C# JS
===================================== ==================================
o=os.Length; o=os.length;
i=os.IndexOf('x'); i=os.indexOf('x');
xs=os.Substring(3,1); xs=os.substr(3,1);
int[] O=new int[] {1,2,3}; var O=new int(1,2,3);
================================================================================
This is about all you need to know. Our methods will do the rest for you.
WHICH TASKS ARE TO BE DONE WITH JAVASCRIPT?
===========================================
JavaScript can do many things. It can create page text, it can create web controls, it can
handle all events and much more. But this is not what we intend to be using JavaScript for.
The ASP.NET is the best choice for creating controls, inserting text and images into the
page. So we don't like JavaScript to get involved in such tasks. JavaScript is merely for
graphical effects, some data validation and whatever the ASP.NET cannot do.
HOW TO WRITE JAVASCRIPT STATEMENTS:
===================================
Method wm() at mode "js" receives the script statements from your code and sends them to
the page. It expects upto 5 parameters, which are:
os: A string which you load your script statements into.
cs: The control at which an event should take place before the script statements are
executed. It can be the keyname of any control like "bt0" or "im2". If your script
should be executed before the page is loaded, use (cs="";) If it should be executed
after the page is loaded and not when an event occures at one particular control use
(cs="pl";)
ks: The event which your script statements should execute when raised. It could be:
(1) "mouseOver" or "mouseOut" meaning when mouse cursor is placed on the object or
outside its borders respectively. These two events apply to mostly all controls.
(2) "onClick" This event is raised when a button is clicked. Your script statements
will be executed first before the form is submitted to the server and the code block
which you have prepared into method update() for this particular event is executed.
Your script statements will block form submission to the server if they end with
(return false;)
(3) "onLoad" We are interested in this event when it is raised by an image control.
It means that the image loading is complete.
(4) "" An empty string assigned to (ks) is meaningful only with (cs="" or cs="pl").
When (cs="") ks must be equal to "" and execution will start before page is loaded
without waiting for an event to take place. When (cs="pl"), ks can be equal to "" if
we like execution to take place before page's "onload" event is raised.
(5) "pl" This assignment to (ks) is meaningful only with (cs="pl"). It means that
execution should start after page has been loaded and the page's "onload" event has
been raised.
REMARK: You can only have one code block per page which is conditioned to a specific
event occuring at a specific control. So, you must combine all your script
statements into one if all have the same assignments to both (cs) and (ks).
However, you can include any number of seperate blocks which use condition (4)
ie (ks=""). In this case, all blocks with (cs="") will be executed before the
page has been loaded and all blocks with (cs="pl") will be executed after the
page has been loaded.
i : If you like your script statements to run only once keep (i=0). If you are doing
animation or other graphical effects, you may want your script statements execution
to repeat each specific number of milliseconds. If so, assign that delay time in
milliseconds to (i).
j : If you like your script to be repeated but not endlessly, assign the desired number of
repetitions to (j). Otherwise if you keep the default of (j=0) while assigning a value
to (i), repitition will be endless.
If you are familliar with JavaScript, you can save your script to a script file with the
extension "js". You should then assign the file name to (fls) and call wm("jf"). It will
be placed at the top of the page and will be the first to be executed after the PC#
script file.
Normally we like global variable declarations and general functions to be placed at the
top of the page before any script which uses them is loaded. At the meantime, We like the
"action" scripts which use these variables and functions to execute after the page has
been loaded in order to guarantee that all the controls, objects, variables and functions
they reference are available.
Let us start with a simple example:
----------------------------------------------------------------------------------------
cs="pl";ks="pl"; // When page is loaded & page's 'onload' event is on:
os="cs='tf0';cm('gu');"; //$ Get the text found in "tf0"
os+="os=cus;cm('d');"; //$ and display it.
wm("js"); // Call method wm() to send the script.
----------------------------------------------------------------------------------------
Note the following:
-------------------
(1) As you can see, the JavaScript method cm() is mostly identical to the C# method cm()
in its operation. This should simplify things for you.
(2) We use "//$" to identify JavaScript code at the comment section in order to help you
in differentiating between JavaScript and C# statements.
(3) JavaScript allows us to replace a double quote with a single quote when it is found
within a string borders. Of course we can use a (\") to do the same, but we greatly
appreciate their help.
(4) We used dialog box for display. As mentioned before, JavaScript can create paragraphs,
or controls to display text into. It can also use the document.writeln() statement.
However we have a rule which states that JavaScript should not alter the page design.
If it must output text in a different manner, we should install a label, text field or
text area within method setup() and keep it for JavaScript use.
WHAT DO WE HAVA FOR THE JAVASCRIPT EXPERTS?
===========================================
Personal C Sharp has been designed to be for programmers of all levels. This means that
it offers you help if you need it and does not stand in your way if you don't. For example
If you like to write a library class which does not extend pcs or pasp and like to use tool
"pcl" to compile it and tool "ln" to debug it, you can. You can also extend class pcs and
write your own C# code without ever calling one of our methods. You can take care of your
error handling by yourself if you choose error level zero. You can request a reference to
almost any object and share operating on that object with PC# and you can override any PC#
method at any mode whenever you see that necessary.
Concerning JavaScript, we know that some of you prefer to do the JavaScript coding by their
own. If you are one of them, you need to add to method init() the following statement:
jsi=0;
(jsi) is the JavaScript level. Its default value is (1). Setting its value at zero causes
the following:
(1) PC# JavaScript file Will not be sent to the page. Normally, when (jsi) is at its default
value, the file is sent whenever the first call of method wm() at modes "jf" or "js"
is received.
(2) You can prepare a script file, assign it to (fls) and call wm("jf") in order to place
it for you at the top of the page.
(3) Additionally, you can write any number of JavaScript blocks as described before,
except that you should not use the parameters (i) and (j). You should use your own
variables for their purposes. You should still supply (cs) and (ks) as normal in
addition to your JavaScript code loaded into (os). Your code will be kept as is with
two exceptions:
a) If you supply (cs=ks="pl";), the method will modify your code to:
window.onload="your code";
b) An opening and closing [SCRIPT] tags will be placed around your code block.
If conditioned for an event which takes place at one control, your code will be set as
attributes for that control. Otherwise your code will be placed at the top of the
page if (ks="") and at the bottom of the page if (ks="pl")
=========================================================================================
Example 5: Display a message which marks each of the 3 time intervals where scripts are
executed (Before page load, After page load and after page onload event is raised)
Additionally, do the following:
a) Show how to use the "mouseOver" event.
b) Show how to read the text of a text field.
c) Show how to make the text of a label control change value, blink or change color.
=========================================================================================
public partial class pg5: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, 3 rows
wm("o");ds="c";cls="b0";fns="trbi12";
os="JavaScript must be enabled on your browser in order to see all pages from here upto ";
os+="the end of this section.";wm("dp");
os="JavaScript statements are conditioned to execute at specific time intervals. This";
os+=" page notifies you when each of the three time intervals take place.";
os+="[br]This section of the page shows a text field and a button. When you point the";
os+=" cursor at the button without clicking, it displays the text field's content.";wm("dp");
wm("c");
cs="lt0";j=0;k=0;wm("i"); // Literal control
cs="tf0";cis="Enter Your Name";j=0;k=1;ds="c";cus="Type any phrase";
jf=20;cls="b0y0";fns="trbi12";wm("i");// Text field
cs="bt0";cis="Submit";j=0;k=2;ds="c";cls="r0g8";fns="trb12";wm("i"); // button
//----------------------------------- tb3 Contents ----------------------------------
cns="tb3"; // tb3 is made of 1 col, 4 rows
wm("o");ds="c";cls="b0";fns="trbi12";
os="This section shows three \"label\" controls. Each one of them has a setup value";
os+=" which changes each second. The first one changes text, the second one";
os+=" blinks and the third one changes color.";wm("dp");
wm("c");
cs="lt1";j=0;k=0;wm("i"); // Literal control
cs="lb0";cis="Changing Text";j=0;k=1;ds="c";cls="r0y0";fns="trb14";wm("i");
cs="lb1";cis="Blinking Text";j=0;k=2;ds="c";cls="r0y0";fns="trb14";wm("i");
cs="lb2";cis="Changing Color";j=0;k=3;ds="c";cls="r0y0";fns="trb14";wm("i");
} // Three labels
//------------------------------------------------------------------------------------
public override void update() {
if(!cs.Equals("pl")) return; // If not Page_Load event return
setup(); // Execute setup()
MakePage(table); // and Make the page
PageNumber(5); // Setting page number
cs="tb3";cls="b0y0";wm("sC"); // Modify right side table color
//---------------------------- Marking the 3 intervals -----------------------------
cs=ks=""; // Interval=No page or events yet
os="os='Page Loading has not been done yet.';cm('d');";
//$ Display message
wm("js"); // Send the script block
cs="pl";ks=""; // Interval=Page loaded, onload not raised.
os="os='Page Loading is complete, but the onload event may not be on.';cm('d');";
//$ Display message.
wm("js"); // Send the script block
cs=ks="pl"; // Interval=Page loaded, onload on.
os="os='Page Loading is complete and the onload event has been raised.';cm('d');";
//$ Display message.
wm("js"); // Send the script block
//--------------- When cursor is over bt0 read tf0's text & display it --------------
cs="bt0";ks="onMouseOver"; // Event: Mouse cursor is over bt0
os="cs='tf0';cm('gu');"; //$ Get tf0's text into (cus)
os+="os=cus;cm('d');"; //$ Display the text
wm("js"); // Send the script block
//------------------- Define new variable to use in next operation -------------------
cs=ks=""; // Interval: Before page loading
os="var ab=false;"; //$ define a new boolean variable
wm("js"); // Send the script block
//------------------- Performing graphical effects on the 3 labels -------------------
cs="pl";ks=""; // Interval: Page loaded only
i=1000; // Repeat execution with 1 second delay
os="ab=!ab;"; //$ Negate (ab)
os+="if(ab) cis='ONE';else cis='TWO';"; //$ Make lb0 text depend on (ab) state
os+="cs='lb0';cm('sl');"; //$ Set label of (lb0)
os+="if(ab) cls='S9';else cls='y0';"; //$ Make lb1 color depend on (ab) state
os+="cs='lb1';cm('sc');"; //$ Set color of (lb1)
os+="if(ab) cls='r0';else cls='b0';"; //$ Make lb2 color depend on (ab) state
os+="cs='lb2';cm('sc');"; //$ Set color of (lb2)
wm("js"); // Send the script block
//--------------------------- Handling bt0 clicking event ---------------------------
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.
}
}
==========================================================================================
REMARKS:
--------
(1) The blinking effect was done by changing text color to match background color during
the text disappearance cycle.
(2) Method update() contains event handling for the clicking of (bt0) except that we know
that it will never be executed. This is because the "mouseOver" event causes the
display dialog box to appear before the button can be clicked.
|
 |
=========================================================================================
Example 6: Show how to set the text of a text field and how to change the foreground and
background colors of a control using JavaScript. Also, show how to block form submission
to the server when its "submit" button is clicked.
=========================================================================================
public partial class pg6: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, 3 rows
wm("o");ds="c";cls="b0";fns="trbi12";
os="Click the button and enter your name. Your name will be displayed on the text field.";
os+=" The entire process is done at your browser which makes it run fast.";wm("dp");
wm("c");
cs="lt0";j=0;k=0;wm("i"); // Literal control
cs="tf0";cis="Enter Your Name";j=0;k=1;ds="c"; // Text field
jf=20;cls="b0y0";fns="trbi12";wm("i");
cs="bt0";cis="Start";j=0;k=2;ds="c"; // Button
cls="r0g8";fns="trb12";wm("i");
//----------------------------------- tb3 Contents ----------------------------------
cns="tb3"; // tb3 is made of 1 col, 2 rows
wm("o");ds="c";cls="s9";fns="trbi12";
os="If you place the mouse cursor anywhere here the background color will turn blue and ";
os+="if you place it on the button the button's foreground color will turn red.";
os+=" If you click the button, JavaScript will be the first to handle the event.";wm("dp");
wm("c");
cs="lt1";j=0;k=0;wm("i"); // Literal control
cs="bt1";cis="Button";j=0;k=1;ds="c"; // Button
cls="b0s9";fns="esb48";wm("i");
}
//------------------------------------------------------------------------------------
public override void update() {
if(!cs.Equals("pl")) return; // If not Page_Load event return
setup(); // Execute setup()
MakePage(table); // and Make the page
PageNumber(6); // Setting page number
cs="tb3";cls="s9r0";wm("sC"); // Modify right side table color
//------------ Get a string from user and insert it into the text field ------------
cs="bt0";ks="onClick"; // At "onClick" of bt0 do:
os="os='Enter your name:';cm('dp');"; //$ Get text using prompt dialog box
os+="cs='tf0';cus=os;cm('su');"; //$ Insert text into tf0
os+="return false;"; //$ Block page submission to server
wm("js"); // Send the script block
//----------- Changing foreground color of bt1 with mouseOver / mouseOut -----------
cs="bt1";ks="onMouseOver"; // When "onMouseOver" event of bt1 fires up:
os="cs='bt1';cls='r0';cm('sc');"; //$ Set foreground color of bt1 to red
wm("js"); // Send the script block
cs="bt1";ks="onMouseOut"; // When "onMouseOut" event of bt1 fires up:
os="cs='bt1';cls='b0';cm('sc');"; //$ Set foreground color of bt1 to blue
wm("js"); // Send the script block
//----------- Changing background color of tb3 with mouseOver / mouseOut -----------
cs="tb3";ks="onMouseOver"; // When "onMouseOver" event of tb3 fires up:
os="cs='tb3';cls='b0';cm('scb');"; //$ Set background color of tb3 to blue
wm("js"); // Send the script block
cs="tb3";ks="onMouseOut"; // When "onMouseOut" event of tb3 fires up:
os="cs='tb3';cls='r0';cm('scb');"; //$ Set background color of the tb3 to red
wm("js");
//------------ Block form submission to the server when bt1 is clicked -------------
cs="bt1";ks="onClick"; // At "onClick" of bt1 do:
os="os='Button Clicked';cm('d');"; //$ Display a message
os+="return false;"; //$ Block page submission to server
wm("js"); // Send the script block
}
}
========================================================================================
|
 |
========================================================================================
ANIMATION:
==========
If you create several images for a moving object then display them in sequence, you can
make the people who view the display feel that the object is moving. This practice is
called animation.
This means that animation does not require only one image. It requires an array of images
to display on the top of each other at one location. HTML allows only one image per
location. So we should start by creating an image control and assign one image (normally
but not necessarily the first one in the array) to the control.
The next step is to send the array to the browser. We load the URL's of all the images
into array IMS[], assign the keyname of the control which will display the array to (cs)
then call the PC# JavaScript function cm("il") to load the images and mark them for (cs).
This script should be executed at the start, So assign (cs=ks="") before calling method
wm("js") to send the script to the client.
After the execution of that script, a copy of all images will be available at the client
however this will not raise the "onLoad" event of the image control since they have not
been loaded into the page yet.
The page contents will then be loaded and when the image control is loaded into the page,
the "onLoad" event of that control will be raised. Now, who will use this active event
to tell the page to replace the loaded image with the next image in the array? The answer
is You. You should prepare another script which runs when the "onLoad" event of the
control is on. Your script calles The PC# JavaScript function cm("ia") supplying it with
the time delay in milliseconds after which you want the next image to be loaded.
Method cm() at the image animation mode "ia" will load the next image for you. This should
raise the "onLoad" event again so your last script will rerun calling cm("ia") to load the
next image and so on. When all images are loaded, the counter will be changed back to zero
so the process will run without stop.
This tells you that your animation script is part of the loop and this means that you can
control the process by yourself.
It is time for an example. Unfortunately we don't send with Personal C Sharp package
images which can simulate a moving object. So we are going to display all the four images
available in sequence which should do the same for the purpose of learning.
=========================================================================================
Example 7: On the left side, create an animation using the four images available in the
"images" folder of your working directory. Use a time delay of 500 milliseconds for the
animation. On the right side show how to replace an image with another by placing the
mouse cursor within its borders.
=========================================================================================
public partial class pg7: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 2 cols, 2 rows
cs="lb0";cis="ANIMATION";j=0;k=0;i=2;ds="c";fns="trb14";cls="r0p7";wm("i");
wm("o");ds="c";cls="b0";fns="trbi12";
os="This example shows how to switch display between 4 images.";wm("dp");
wm("c");
cs="lt0";j=0;k=1;wm("i");
cs="im2";j=1;k=1;ds="se";lf=180;of=200;ims="../images/flower.jpg";wm("i");
//----------------------------------- tb3 Contents ----------------------------------
cns="tb3"; // tb3 is made of 2 col2, 2 row2
cs="lb1";cis="MouseOver / MouseOut Effect";j=0;k=0;i=2;ds="c";
fns="trb14";cls="r0p7";wm("i");
wm("o");ds="c";cls="b0";fns="trbi12";
os="This example shows how to change the image displayed by placing the mouse ";
os+="cursor on the image.";wm("dp");
wm("c");
cs="lt1";j=0;k=1;wm("i");
cs="im3";j=1;k=1;ds="se";lf=180;of=200;ims="../images/flower.jpg";wm("i");
}
//-------------------------------------------------------------------------------------
public override void update() {
if (!cs.Equals("pl")) return;
setup();
MakePage(table);
PageNumber(7);
//--------------- Left Side: Images Loading and animation script blocks --------------
cs=ks=""; // Before page is loaded do:
os="cs='im2';IMS=new Array('../images/pix.jpg','../images/icon.jpg','../images/flower";
os+=".jpg','../images/icon.bmp');cm('il');"; //$ load all 4 images to use as im2
wm("js"); // Send the script block
cs="im2";ks="onLoad"; // When im2 onLoad event is on do:
os="cs='im2';i=500;cm('ia');"; //$ Animate image using 500 ms delay
wm("js"); // Send the script block
//--------------- Right Side: Changing Image with mouseOver / mouseOut --------------
cs=ks=""; // Before page is loaded do:
os="cs='im3';IMS=new Array('../images/pix.jpg','../images/icon.jpg','../images/flower";
os+=".jpg','../images/icon.bmp');cm('il');"; //$ load all 4 images to use as im3
wm("js"); // Send the script block
cs="im3";ks="onMouseOver"; // When im3 onMouseOver event is on:
os="cs='im3';i=0;cm('is');"; //$ Select first image in array
wm("js"); // Send the script block
cs="im3";ks="onMouseOut"; // When im3 onMouseOut event is on:
os="cs='im3';i=2;cm('is');"; //$ Select 3rd image in array
wm("js"); // Send the script block
}
}
========================================================================================
|
 |
========================================================================================
MULTIPLE ANIMATION:
===================
Creating one animation into a web page has been an easy task. Creating several animations
in a page, each of them runs independantly using its own array of images and its own time
delay can be alittle harder but not to you.
PC# software is set to handle upto 10 independant animations to run together in one page.
=========================================================================================
Example 8: Create four different animations using a different two images and different
delay time for each animation.
=========================================================================================
public partial class pg8: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 2 cols, 2 rows
cs="lb0";cis="MULTIPLE ANIMATION";j=0;k=0;i=2;ds="c";fns="trb14";cls="r0p7";wm("i");
cs="im2";j=0;k=1;ds="sw";lf=180;of=200;ims="../images/flower.jpg";wm("i");
cs="im3";j=1;k=1;ds="se";lf=180;of=200;ims="../images/flower.jpg";wm("i");
//----------------------------------- tb3 Contents ----------------------------------
cns="tb3"; // tb3 is made of 2 cols, 2 rows
cs="lb1";cis="Handling more than one animation / page";j=0;k=0;i=2;ds="c";
fns="trb14";cls="r0p7";wm("i");
cs="im4";j=0;k=1;ds="sw";lf=180;of=200;ims="../images/flower.jpg";wm("i");
cs="im5";j=1;k=1;ds="se";lf=180;of=200;ims="../images/flower.jpg";wm("i");
}
//-------------------------------------------------------------------------------------
public override void update() {
if (!cs.Equals("pl")) return;
setup();
MakePage(table);
PageNumber(8);
//-------------------------------- Load all arrays ----------------------------------
cs=ks="";
os="cs='im2';IMS=new Array('../images/icon.jpg','../images/pix.jpg');cm('il');";
wm("js");
cs=ks="";
os="cs='im3';IMS=new Array('../images/icon.bmp','../images/flower.jpg');cm('il');";
wm("js");
cs=ks="";
os="cs='im4';IMS=new Array('../images/pix.jpg','../images/flower.jpg');cm('il');";
wm("js");
cs=ks="";
os="cs='im5';IMS=new Array('../images/pix.jpg','../images/icon.bmp');cm('il');";
wm("js");
//---------------------------- Animate all image controls ----------------------------
cs="im2";ks="onLoad";
os="cs='im2';i=1500;cm('ia');";
wm("js");
cs="im3";ks="onLoad";
os="cs='im3';i=100;cm('ia');";
wm("js");
cs="im4";ks="onLoad";
os="cs='im4';i=500;cm('ia');";
wm("js");
cs="im5";ks="onLoad";
os="cs='im5';i=200;cm('ia');";
wm("js");
}
}
========================================================================================
|
 |
=======================================================================================
ANIMATION USING DYNAMICALLY GENERATED IMAGES:
=============================================
It should be nice if we can generate all the array of images which is necessary for the
animation on the fly without saving the images to the hard disk. Example 9 shows how to
do that.
Using the Webdings and Wingdings fonts:
=======================================
These two fonts which are included in windows, contain many useful symbols which can be
animated and displayed into a web page in order to draw attention. The symbols replace
characters for those two fonts which means that when you use the "Webding" font and push
the key 'b' a bicycle is displayed. You can practice with the two fonts to see all their
symbols using our product "TextArt".
If they are not installed on your computer, select the "Fonts" category in "Control Panel"
and see the help there to know how to install them.
========================================================================================
Example 9: We are going to use the same jewel which has been used several times to
illustrate several operations in the past. This time we are going to generate 5 copies
of the object using different pearl colors. There are 20 pearls, divided into 4 groups
which are identical in color. within each group, each pearl has a unique color. In the
first copy, Pearl colors of each group will be: Pink-Blue-Orange-Red-Green in order.
In the next copy, pearl colors will be in same order but shifted one element, which means
they will be: Blue-Orange-Red-Green-Pink and so on. When the 5 copies are displayed in
sequence, they should give the illusion of their pearls being moving in a circle.
========================================================================================
public partial class pg9:master1 {
string colors=""; // Define a new variable
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 2 cols, 2 rows
cs="lb0";cis="ANIMATION USING DYNAMICALLY GENERATED IMAGES";j=0;k=0;i=2;ds="c";
fns="trb12";cls="r0p7";wm("i"); // Label for Title
wm("o");ds="c";cls="b0";fns="trbi12";
os="This object has been dynamically generated 5 times with different pearl colors.";
os+=" Displaying the images in sequence makes you feel that the object's outer ring";
os+=" is spinning.";wm("dp");
wm("c");
cs="lt0";j=0;k=1;wm("i"); // Literal control for Description
cs="im2";j=1;k=1;ds="se";lf=of=200;ims="pg9.aspx?colors=p0b0o0r0G4";wm("i");
// Notice:image URL=page URL+parameter
//----------------------------------- tb3 Contents ----------------------------------
cns="tb3"; // tb3 is made of 3 cols, 3 rows
wm("o");ds="c";cls="b0";fns="trbi12";
os="The two fonts \"Webdings\" and \"Wingdings\" which are available";
os+=" in windows contain usable symbols for animation.";wm("dp");
wm("c");
cs="lt1";j=0;k=0;i=3;wm("i"); // Literal control for Description
for (int n=0;n<6;n++) { // Setup for 6 label controls
cs="lb1"+n; // Keynames are lb10:lb15
cis="J,D7Hb".Substring(n,1); // Label texts: 'J',comma,'D','7','H','b'
k=(int)(n/3)+1;j=n%3;ds="c"; // j,k for 3 columns, 2 rows. Dir=center
cls="r0G4b0m0p0S9".Substring(n*2,2)+"p7"; // ForeColors:variety, BackColor:matchs page
fns="wn48";if (n>3) fns="wb48"; // Font: Wingding for 0:3, Webding for 4:5
wm("i"); // Install control
}
}
//-------------------------------------------------------------------------------------
public override void update() {
if (!cs.Equals("pl")) return;
ks="colors";wm("rq");colors=OS[0]; // Get the value of the par "colors"
if (colors.Length>0) {jewel();return;} // If available generate image & return
wm("ir"); // Clear control installation variables
setup();
MakePage(table);
PageNumber(9);
//--------------- Left Side: Images Loading and animation script blocks --------------
cs=ks=""; // At start do:
os="cs='im2';IMS=new Array('pg9.aspx?colors=p0b0o0r0G4',";
os+="'pg9.aspx?colors=b0o0r0G4p0','pg9.aspx?colors=o0r0G4p0b0',";
os+="'pg9.aspx?colors=r0G4p0b0o0','pg9.aspx?colors=G4p0b0o0r0');";
os+="cm('il');"; //$ load all 5 images
wm("js"); // Send the script block
cs="im2";ks="onLoad"; // When (im2)'s onLoad event is on do:
os="cs='im2';i=500;cm('ia');"; //$ Animate image using 500 ms delay
wm("js"); // Send the script block
//--------------- Right Side: Images Loading and animation script blocks --------------
// Variable used: s= symbol order in each group (0:2)
cs=ks=""; // At start do:
os="var s=0;"; //$ define a new integer variable (s)
wm("js"); // Send the script block
// Performing graphical effects on the 6 labels:
cs=ks="pl"; // When page loaded & onload event on do:
i=1000; // Repeat execution with 1 second delay
os="s++;if(s>2) s=0;"; //$ Point to next symbol in each group,
//$ If all symbols done, restart.
os+="for (var l=0;l<6;l++) {"; //$ Scan a set of 6 symbol, l=label index
os+=" if(s==0) cis='J,D7Hb'.substr(l,1);"; //$ Make each label text=the
os+=" else if(s==1) cis='K.F8Jv'.substr(l,1);";//$ correct symbol depending on
os+=" else if(s==2) cis='L/G:Gj'.substr(l,1);";//$ the value of (s)
os+=" cs='lb1'+l;cm('sl');"; //$ Set the label of each control
os+="}"; //$
wm("js"); // Send the script block
}
//---------------------------- Generating the jewel image ----------------------------
void jewel() {
//---------------------------- No changes to this part -----------------------------
lf=of=200;wm("bo"); // Open new bitmap operation using bitmap of
// size 200 X 200 pixels.
cls="p7";gm("ec"); // Paint background with same color as page
lf=of=170;gm("ce"); // Create the circular gold plate
cls="o5y5";gm("spl"); // Prepare linear gradient brush for it
gm("grf"); // then render-fill the gold plate.
lf=6;of=50;gm("c="); // Create hexagon shape object at center.
cls="r0";ks="r";gm("grs"); // Draw the object using sp effects-refl at
jf=45;cls="b0";ks="r";gm("grs"); // center in red, then repeat 6 times using
jf=-45;cls="b0";ks="r";gm("grs"); // different colors and different locations
jf=22;kf=40;cls="g0";ks="r";gm("grs");
jf=-22;kf=40;cls="m0";ks="r";gm("grs");
jf=22;kf=-40;cls="m0";ks="r";gm("grs");
jf=-22;kf=-40;cls="g0";ks="r";gm("grs");
lf=of=25;gm("ce"); // Create a circle at center (pearl)
//-----------------------------------------------------------------------------------
n=0; // n=Index of a color code among the 5 in (colors)
if(colors.Length<10) colors="p0b0o0r0m0";
// If (colors) not valid use this default.
for (int x=0;x<20;x++) { // Draw 20 pearls. x=Pearl number
cls=colors.Substring(n*2,2); // Get one color code from (colors)
n++;if (n>4) n=0; // Increment color cd index if all done, repeat
jf=80;kf=18*x;kb=true; // Polar coordinates of the pearl
ks="r";gm("grs"); // Display with special effects-reflection.
}
wm("bc"); // Close bitmap operation
}
}
========================================================================================
Comments:
---------
(1) We have combined page 9 and all dynamic image pages together. When the page is
requested using the name "pg9.aspx" without a query string, the entire page will run.
When the page is requested with a query string attached, only method jewel() will run
generating one image.
The query string contains only one parameter. The parameter name is "colors". Its value
is a string containing 5 color codes for each 5 adjacent pearls.
(2) The (colors) string is scanned, its 5 color codes are used to generate the first 5
pearls, then it will be rewound and used again for generating the next 5 and so on.
(3) For the "dings", in method setup() we used a loop in order to make the code shorter.
This could have been more useful if they have been more than 6. We have assigned to
(cis) of each label the code for the first symbol to be displayed. We also made each
one show in a different foreground color, while the background color is "p7" for all
in order to match their container's color. The symbols of the first 4 labels came
from the "wingding" font. The symbols of the last two came from the "webding" font.
(4) Within method update(), the first step was to define an integer variable (s) which
sets which of the 3 symbols to be displayed by each label. This JavaScript variable must
be of global scope. Why?
As explained in the JavaScript section of "PC# reference-Web" under the title "SENDING A
SCRIPT BLOCK", your JavaScript block is made a function which is called repeatedly once
each second. Each call is required to see a different value of (s) So we need (s) to keep
its value between each two successive calls. This is why (s) cannot be a local variable of
that function.
Next, is to display the symbols. We request the display of a different 6 symbols each
time the script runs and we request rerunning the script each 1 second indefinetly.
Each time the script runs it increments (s) so that it displays a different set of
symbols.
|
 |
More, Using the Webdings and Wingdings fonts:
=============================================
These fonts are very handy. They run easily since the browser does not need to download
them from the server. It gets them directly from client's computer. They also have no
background which is good for animation purpose and they can be scaled easily by setting
the font size. So let us have more examples using more of their symbols.
=======================================================================================
Example 10: We like to create animations to do the following:
a) Show a growing flower. The flower symbol of the wingdings font will be used.
b) Show a hand writing a phrase. We'll use the hand symbol of the wingdings font for it.
c) Show a flying plane. The plane symbol in the webdings font will be used.
d) Show a progress bar. The square block found in the wingdings font will do it.
=========================================================================================
public partial class pg10: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 2 cols, 2 rows
cs="lb0";cis="|";j=0;k=0;ds="c";
fns="wn48";cls="r0p7";wm("i"); // Red Rose
cs="lb1";cis="|";j=1;k=0;ds="c";
fns="wn48";cls="b0p7";wm("i"); // Blue Rose
cs="lb2";cis="?";j=0;k=1;i=2;of=50;ds="sw";
fns="wn48";cls="S9p7";wm("i"); // Hand
//----------------------------------- tb3 Contents ------------------------------------
cns="tb3"; // tb3 is made of 2 cols, 2 rows
cs="lb3";cis="j";j=0;k=0;i=2;ds="nw";cls="S9p7";fns="wb42";
wm("i"); // Plane
cs="lb4";cis="Progress Bar";j=0;k=1;ds="c";lf=80;cls="r0p7";fns="trb12";
wm("i"); // Progress Bar Title
cs="lb5";cis="g";j=1;k=1;ds="w";lf=160;of=19;cls="b0y0";fns="wb10";os="w";
wm("i"); // Progress Bar
}
//-------------------------------------------------------------------------------------
public override void update() {
if (!cs.Equals("pl")) return;
setup();
MakePage(table);
PageNumber(10);
// Variable used: s=int value which determines how each item is displayed. Can be 0:9
// Define new variable to use in next operation: s= symbol order in each group (0:2)
cs=ks=""; // At start do:
os="var s=0;"; //$ Define global var s
wm("js"); // Send the script block
cs=ks="pl"; // When page loaded & onload ev on do:
i=500; // Repeat execution with 500 ms delay
os="s++;if(s>9) s=0;"; //$ Set (s) value for next operation
//--------------------------------- Red Rose ----------------------------------------
os+="fns='wn'+15*s;"; //$ Set font size as a function of (s)
os+="cs='lb0';cm('sf');"; //$ Make it the new font for the label
os+="cis='|';cs='lb0';cm('sl');"; //$ Redisplay the rose.
//--------------------------------- Blue Rose ---------------------------------------
os+="fns='wn'+15*s;"; //$ Repeat for the blue rose.
os+="cs='lb1';cm('sf');";
os+="cis='|';cs='lb1';cm('sl');";
//-------------------------------- Writing Hand -------------------------------------
os+="cm('o');"; //$ Open a new html loading operation
os+="cls='b0';fns='trb12';"; //$ Set color & font for the phrase
os+="j=10;os='Great animation by Personal C Sharp. '.substr(0,s*4);cm('h');";
//$ Display a portion of the phrase
os+="cls='S9';fns='wn48';"; //$ Set color & font for the hand
os+="os='?';cm('h');cm('c');"; //$ Display the hand then close op.
os+="cs='lb2';cm('sl');"; //$ Set the label's text.
//----------------------------------- Plane -----------------------------------------
os+="cm('o');"; //$ Open a new html loading operation
os+="j=10-s;os='j ';cm('h');"; //$ Display plane indented by an
//$ amount which depends on (s)
os+="cm('c');"; //$ Close html loading operation
os+="cs='lb3';cm('sl');"; //$ Set the label's text.
//-------------------------------- Progress Bar -------------------------------------
os+="cis='';"; //$ Initialize (cis)
os+="for(var i=0;i< s+1;i++) cis+='g';"; //$ Add a number of square bloks to it
//$ which depend on the value of (s)
os+="cs='lb5';cm('sl');"; //$ Set the label's text.
wm("js"); // Send the script block
}
}
=========================================================================================
You should have noticed that the "html loading" operation used in C# by calling method
wm() is also available in JavaScript except that method name and modes are different.
C# JavaScript
========== ==========
Open a new html loading operation wm("o"); cm("o");
Display a word .................. wm("d"); cm("h");
Display a line .................. wm("dl"); cm("hl");
Display an image ................ wm("di"); cm("hi");
Close the html loading operation wm("c"); cm("c");
What is common is that in both cases this process loads html code into the label (cis)
of either a literal control or a label control. This allows us to use these controls to
display text using multiple colors and fonts and also to display tables, images and
hypertext.
The JavaScript version is smaller than the C# one at this time. It can handle the label
control only. It is also limited to text and image display.
All parameters are common. They are:
String Display:
---------------
os = String to be displayed.
j = Number of characters to indent the string with.
cls= Color code.
fns= Font code.
ds = Direction. The text alignment within the control. It can be (e/c/w) meaning
(east, center, west) or (right, center, left) respectively.
Image Display:
---------------
ims= Image's URL.
os = Alternative text.
i,o= Desired width,height in pixels (default: scale 1:1).
j,k= Empty space in pixels to leave around image (horizontally, vertically).
ds = How text around should be aligned relative to image. Can be (n/s/e/w/c).
|
 |
|