Personal C Sharp                                                         By  famsoft.org
HomeHow To StartExamples-DesktopExamples-WebPC# MethodsReference-DesktopReference-Web


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).