DataSet, only living on the client. By using Abstract Programming, you can eliminate unnecessary postbacks, and realize the possibility of an application program running unplugged.
The methods used in this series are intended to create solutions that will run in all browsers. These examples were tested in both Internet Explorer and Netscape, but all the development was done with Internet Explorer. The examples and exercises were developed with the .NET 2.0 Framework using Visual Studio 2005 and SQL Server 2005, but the concepts of Abstract Programming are independent of any particular technology. This three-part short series was created using the techniques described in this series.
CClock (A Real-World Example)
Components Used in the Exercise
- CClock1.js - This is the DScript that is generated by the server control at design time. It is saved in a folder named "DScripts". The actual name of the file will be slightly different to allow using the component on different pages. So the actual name might be something like "ProMatrix.TestControls.CClock.Default.CClock1.js" to signify the actual path to the page that uses this DScript.
- CClock.cs - This is the C# code that responds to the moving of the clock control on the WebForm by writing a DScript file that details the absolute position of the control, and its size and shape, by width and height.
Step by Step
No Experience Necessary
OK, Drill Down Time
Now, let's look at the project and drill down on it... First, download and install the projects in the appropriate location, in accordance to the readme.txt file supplied in the source code Zip file. The readme file will spell out the requirements and supply you with some quick installation notes. After installing, open up the solution "Unplugged", and make "TestControls" the startup project. Next, in the CClock folder, set "default.aspx" as the default startup page, and run the page in Debug by pressing F5. You should see a clock ticking away and displaying the current local time.
With the DScript file "ProMatrix.TestControls.CClock.Default.CClock1.js" still in the Visual Studio Designer, go back to the clock on the WebForm Default.aspx, and move it around in the WebForm Designer. You should see this dialog. Choose Yes to this dialog, then view the DScript file "ProMatrix.TestControls.CClock.Default.CClock1.js" again. You should see the changes you made as a result of moving the clock around on the WebForm.
It looks like this...
Clk_pos_width = 50;
Clk_pos_height = 50;
Clk_pos_L = 130;
Clk_pos_T = 120;
Clk_image_T = 70;
Clk_image_L = 80;
Clk_zIndex = 0;
Clk_image = '/ProMatrix.TestControls/CClock/Images/CClock.gif';
Clk_image_L_offset = -20;
Clk_image_T_offset = -20;
Clk_image_W_offset = 40;
Clk_image_H_offset = 40;
What actually happened
While you were moving the clock around on the WebForm, it was executing code, which wrote, to disk, a new version of "ProMatrix.TestControls.CClock.Default.CClock1.js", with the new sizing and positioning information. Below is the C# server control code that was responsible for creating or updating the DScript.
if (!designMode) return;
StreamWriter sw = new StreamWriter(dScriptsPath +
getDScriptName() + ".js");
double clk_half_width = _width.Value / 2;
double clk_half_height = _height.Value / 2;
double clk_pos_left = pxToVal2(getStyleAttribute("left")) +
double clk_pos_top = pxToVal2(getStyleAttribute("top")) +
string zIndex = getStyleAttribute("z-index");
if (zIndex == "") zIndex = "0";
sw.WriteLine("Clk_pos_width = " + clk_half_width + ";");
sw.WriteLine("Clk_pos_height = " + clk_half_height + ";");
sw.WriteLine("Clk_pos_L = " + clk_pos_left.ToString() + ";");
sw.WriteLine("Clk_pos_T = " + clk_pos_top.ToString() + ";");
sw.WriteLine("Clk_image_T = " +
pxToVal(getStyleAttribute("top")) + ";");
sw.WriteLine("Clk_image_L = " +
pxToVal(getStyleAttribute("left")) + ";");
sw.WriteLine("Clk_zIndex = " + zIndex + ";");
sw.WriteLine("Clk_image = '" + _image + "';");
sw.WriteLine("Clk_image_L_offset = " + _image_offset_L.Value + ";");
sw.WriteLine("Clk_image_T_offset = " + _image_offset_T.Value + ";");
sw.WriteLine("Clk_image_W_offset = " + _image_offset_W.Value + ";");
sw.WriteLine("Clk_image_H_offset = " + _image_offset_H.Value + ";");
This information that the server control is writing to the DScript file contains the the values passed in by the Visual Studio Designer as you are changing the position and shape of the clock. The important part about this type of Abstract Programming is that the server control is abstracting the generation of the DScript at design time. Then, at runtime, the server control simply references this DScript that it created earlier.
Using the source
Download the Zip file, then extract the files into your C:\Inetpub\wwwroot as per the instructions in the Install.Readme.txt. Follow the instructions to setup and use the source code and to setup the browser.