How to start Web Sharp ActiveX.. 5

Chapter 2: Creating Your First Web Application. 5

Chapter 3: Design Template. 8

Chapter 4: Working with Template. 10

Chapter 5 Work with Web Sharp in other Programming Languages. 17

Web Sharp Objects Reference. 21

Web Sharp

Web Sharp, the best dynamic web template technology in the world! Probably it is also the best web technology in the world!

If you have no idea which web technology you will take for your web development, you can try it.

Web Sharp is so powerful that can be applied to almost all popular development tools, IDE or programming languages, such as ASP, ASP.Net, Java, Delphi and so on. In order to applying Web Sharp to so many language environments, Web Sharp provider a few different packs. Now ActiveX pack is usable. ActiveX pack can be used in most Windows development tools. Before long we will provide Web Sharp for Java. We also plan to develop Web Sharp for .Net only and Web Sharp for Delphi only.

The following lists some great features of Web Sharp.

Simple – If you are familiar with HTML (Hyper Text Markup Language) and any programming language, you will learn Web Sharp only in 10 minutes. You do not need to learn a lot of components, a lot of tags or a very complex engine or framework.

Pure – Web page and logic code are 100% separate. It is the most perfect Model-View-Controller (MVC) design pattern.

Powerful – Because Web Sharp is an independent technology, so it can be easily and widely used in web development work for outputting dynamic web page, resource internationalization and creating complex, exciting web applications. What HTML can display, Web Sharp does.

Easily to maintain – On one hand it is simple, on the other hand it owns the best MVC design pattern, it is easily to maintain. The web pages are easily to be designed and the programming code is easily to be read or written.

WYSIWYG – What you see is almost what you get.

Low cost –Compare with the cost of the expensive web system, it is very cheap but high produce.

A Web Sharp demo – Display some colors. This simple demo will show you what Web Sharp can do. For more info about how you start, you must study the Web Sharp course.

Note: You can find this demo in the directory “Demo\C#\WebTest\”

Here is the result view of the demo in a web browser.

Now let me show you how to do the job.

Step I—Design a web template named Colors.htm. You can use FrontPage or any other HTML Editor to make it out quickly. Figure 2 is the template and the Figure 3 is HTML code of this template. Though code of this template is 100% pure HTML, you can find some strange tags such as {%%} and  in it. It is easy to understand what they mean. You just consider {%HeadText%} is a variant and  is a loop which will repeat a block of code.

Figure 2

Figure 3

Step II – Build Logic code framework. We provider a code produce tool called “Code Framework” to make code automatically. This helps you very much. Run CodeFramework.exe, click “Open Template” button and select the template file Colors.htm, and then you will see the auto complete code result in something like the code in the following figure. The following code shows how to control the template to output the result page. This code is written in C# (ASP.NET). This code is pure C# code without outputting any HTML element in it.

Step III – Modify Logic code framework. What you do is just to fill the code framework with real data. The highlight code below is the modified result. What you do is a little. In order to reading easily, we also add some comments in it. Please read the comments in the code, and you will well understand the code. In fact, it is easy to understand.

//--1. Create a new WebTempalte instance and assign Colors.htm to it.

WebTemplate template = new WebTemplate();

template.FileName =@ " G:\WebTest\Template\ Colors.htm";

//--2. Create a root valueNode and Assign value to {%HeadText%}

ValueNode vnRoot = new ValueNode();

string strHeadText = "Welcom to WebSharp world!";

vnRoot.SetValue("HeadText", strHeadText);

string[] colors ={ "Red", "Blue", "Yellow", "Green", "Black" };

//--3.Create a ValueNode for Colors loop block

ValueNode vnColors = vnRoot.CreateChild("Colors");

for (int i = 0; i < 5; i++)

{

ValueNode vnChild = vnColors.CreateChild("");

//--4. Assign value to each {%Color%} in the loop

string strColor = colors[i];

vnChild.SetValue("Color", strColor);

}

//--5.Combine template and code , render result

Response.Write(template.Rendered(vnRoot, ""));

Step IV – Save code to file Colors.aspx and browse it.

Now, the figure below shows the relations between template and ValueNode object.

Note: Tools of Code Framework can product the framework code from the template automatically. This tool can help you to reduce a lot of coding.

OK, have you understood what Web Sharp is now? Because of a short show of Web Sharp, if you don’t understand it, you can learn more about it here. If you have understood it, you will find it is a really super and exciting technology that can lead you from victory to victory.

Web Sharp ActiveX Course

Chapter 1: Web Sharp Technology

About Template Technology

The mode of normal web application development can be these-- design static pages or write HTML code, add logic code to the web pages mixed html code together. What will this happen? You will waste a lot of time to read, understand and write the code in these mixed and complex pages. You may often make mistakes for the wild web pages. Many hidden bugs are not easy to find out. What is the problem of this mode? This mode is difficult to separate page and logic. When people-- web designers and programmers are working together, you won’t be easy to divide the work for them. These web pages are not easy to maintain too.

So let me lead you into a new web development world— Web Sharp --the best web template technology. How dare I say that? Now, let me show you the excellence of Web Sharp.

l 100% pure HTML template. Pure HTML template means there is not logic code in the template. There is only HTML code, client script (such as JavaScript), CSS and other HTML elements in it. This gives you 100% freedom to design the page and what you design is what you will see. You are very clear about what you will do. You can design the template freely until you are satisfied with it.

l Extremely easy to learn. You do not need to learn a lot of grammars. You do not need to understand a lot of components. You only need to take a litter time to know a few tags of Web Sharp.

l Run fast. The template is only loaded from file to memory and parsed at its first use. And then it will be kept in the memory until it is modified.

l Code reuse. One template can be used by different block of logic code. And a block of logic code can be applied to more than one template. And thus make applications easier to maintain.

How to start Web Sharp ActiveX

l Install Web Sharp ActiveX pack first.

l If needed, import WebSharp.dll into your working environment. Here shows how to import it to your IDE in Microsoft Visual Studio 2005(VS2005). If you are working with other environments, please go to Chapter 5 to find more info.

1. Create a New Web Site called WebTest in VS2005.

2. Create a subdirectory Bin under to web root if Bin does not exist.

3. Right click Bin and select the menu command “Add Reference”.

4. In “Add Reference” dialog, turn to “COM” tab page and select “Web Sharp Library” in the COM listbox. You can also turn to “Browse” tag page and directly select the WebSharp.dll from your Web Sharp setup path.

5. Click ok to close the dialog, you will find a file called Interop.WebSharp.dll in your Bin directory. Now you can enjoy the travel of Web Sharp now.

l Create your Web Sharp web application. Please learn Chapter 2.

Chapter 2: Creating Your First Web Application

Note: Programming code of all demos is written in C# (VS2005). If you use other programming languages, please refer Chapter 5 for more info.

The first web application is creating a dynamic listbox in web browser which looks something like the one in the following figure. This example is simply to display a few names of people in a listbox.

The HTML source code of this page is:

<html>

<body>

</select>

</body>

</html>

--- Code A

Now our task is to output this source code. You can follow these steps:

1. If you have not created web site in VS2005, create it. Here a web site g:\WebTest\ is created.

2. Create a new html file named ListBox.htm which is placed in the path g:\WebTest\Template\. This is a template page for Web Sharp. The content of ListBox.htm is:

<html>

<body>

</select>

</body>

</html>

--- Code B

You can find code of this template page (Code B) is similar to the final HTML source code above (Code A). Yes, they have the same structures. But there are 4 lines of text in Code A for output 4 different listbox items while there only one item exists in Code B. You can also find two strange comment lines in Code B. These comments are actually the template elements. We call this template element “Loop Element”. Loop element is one of the block elements in template. You can know more in Chapter 3.

[Statement Block]  means a loop which is like “for” loop or “while” loop ( e.g. while(true) { Statement Block} ) in programming languages.

The code inside the loop element can be repeated. But how many times it can be repeated? This will be controlled by the programming code. You can find {%Value%} and {%Text%} in the template page. We call them “Variant Element”. It is similar to the variant in programming languages.

3. Build programming code framework. Run code auto complete tool codeframework.exe, click “Open Template” button to open “g:\WebTest\Template\ListBox.htm”, then following code is automatically produced:

4. Create a new Web Window named ListBox.apsx and copy the code above in it. Modify the code to result in the following code. The highlight code below is the modified result. What you have done is a little – You just only add some real data. Oh, do you think it is very simple?

protected void Page_Load(object sender, EventArgs e)

{

string[] values ={ "1", "2", "3", "4" };

string[] names ={ "Mike", "Jack", "Kate", "Tom" };

//--1. Create a new WebTempalte instance and assign ListBox.htm to it.

WebTemplate template = new WebTemplate();

template.FileName = @"g:\WebTest\Template\ListBox.htm";

//--2. Create a root valueNode

ValueNode vnRoot = new ValueNode();

//--3.Create a valueNode for ListBox Loop block

ValueNode vnListBox = vnRoot.CreateChild("ListBox");

for (int i = 0; i < 4; i++)

{

//--4. Create child of ListBox and assign value to each {%Value%} and {%Text%} in the loop

ValueNode vnChild = vnListBox.CreateChild("");

vnChild.SetValue("Value", values[i]);

vnChild.SetValue("Text", names[i]);

}

//--5.Combine template and code , render result

Response.Write(template.Rendered(vnRoot, ""));

}

--1.WebTemplate object is an object which loads and control template page. It also produces the final output of HTML code. After it is created, we must assign a template file to it and is will be related to the template file. In this demo, the template filename is an absolute path. This path may seem too long. In Chapter 4, we will tech you how to use the relative path.

--2.ValueNode object is a DOM object which is related to the template elements. That is, it will assign the values to the template elements. At first, we must create a root ValueNode vnRoot for the whole template.

--3. Create a child ValueNode vnListBox which is related to the ListBox loop element in the template page. Loop element is a loop statement. Here it repeats 4 times to create 4 listbox items.

--4.We regard each repeating block of the ListBox loop element as a child of it. So we create 4 ValueNode vnChild for each repeating block and set the different value to the Variant element {%Value%} and {%Text%}.

--5.Put the root ValueNode into the WebTemplate and output the final result. The result is like the first figure you see in this chapter.

For more demos you can go to Chapter 4

Chapter 3: Design Template

Web Sharp Template is really a light-level DOM which is like a tree. It only contains three kinds of base elements:

1) Static HTML Element. Static HTML Element is the normal HTML code.

2) Template Variant Element. Its tag is like {%VarName%}.There are four kinds of Variant Element:

Element Name	Tag	Example	Memo
Normal Variant	{%VarName%}	{%WebTitle%}	a normal variant
Ignored Variant	{% /VarName%}	{% /Hello%}	If you want to comment a variant, then add a “/” on its left.
Resource Variant	{% #VarName%}	{%#Language %}	International Resource.
Include Variant	{%@VarName%}	<%@demo1.html%>	Include another template file

Normal Variant is the normal template element. It holds the places which need to dynamic output. These places will be replaced with actual dynamic contents from database or user-custom data. Sometimes you want to cancel this variant temporarily, you can add a “/” on the left of the variant, then this Ignored variant is invalid until you delete the “/” . For Resource Variant and Include Variant, we will introduce more in Chapter 4.

3) Template Block Element. Its tag is like .There are three kinds of Block Element:

Element Name	Tag	Memo
Normal Block	<!-- BEGIN BLOCK: Name --> [Statement Block] <!-- END BLOCK: Name -->	It’s only a block.
Loop Block	<!-- BEGIN LOOP : Name --> [Statement Block] <!-- END LOOP : Name -->	It’s a loop block.
Ignored Block	<!-- BEGIN IGNORED: Name --> [Statement Block] <!-- END IGNORED: Name -->	This block is ignored.

The difference between Normal Block and Loop Block is that Loop Block is a loop which can be repeated as many times as need. The Normal Block is not a loop, you can regard it can be repeated only once. Ignored Block is a comment block. This block will not be output.

l You may ask why we need the Normal Block Element. Consider the table below. You may regard Code I is the same as Code II. Yes, they seem same in general situation. Code I is always output no matter the image file exists or not. So sometimes you will see a in the web browser if the image file doesn’t exist. Block Element can avoid this. It can control showing or hiding the code embed in it. If the image file exists, show it, or hide it. For how to show/hide a normal block element, see the Normal Block Demo in Chapter 4.

Code I

Code II

If you want to display two images, you can see code I below. There are two Normal Variants named {%ImageURL1%} and {%ImageURL2%} in the code. But if you want to display ten, hundred or more images, what should you do? You can see Code II. Code II is short but can do the thing.

Code I

Code II

OK. That is all. You can quickly learn them within a few minutes.

Let us have a look at the template code below:

<html>

<body>

</select>

</body>

</html>

Now we analyze the code:

Code (Level 1)	Code (Level 2)	Element Type
<html> <body> <select size="5">		Static HTML Element
<!-- BEGIN LOOP : ListBox -->		BEGIN of the Loop Block
	<option value="	Static HTML Element
	{%Value%}	Normal Variant
	">	Static HTML Element
	{%Text%}	Normal Variant
	</option>	Static HTML Element
<!-- END LOOP : ListBox -->		END of the Loop Block
</select> </body> </html>		Static HTML Element

From the table you can see the whole template is composed of the template elements. This is a DOM structure. We call it Template DOM. Because it is a DOM, nesting is allowed and there is no max level limit. It can deal with all kind of complex requirement. That is, what HTML can display, it does.

After we have the Template DOM, how can we get the dynamic output from the Template DOM? ValueNode does. We load data to the ValueNode DOM (composed of ValueNode objects) and then map each ValueNode to the related template block element. At last, template combines the data in ValueNode objects and produces dynamic output. ValueNode only cares for the block and variant template elements in spite of the static HTML elements which often occupy the most content of the template, so you needn’t write too much programming code for the template.

Chapter 4: Working with Template

Designed templates are for programming. After templates are designed, we must write programming to drive them.
What we do is to replace the template elements with the dynamic contents. We have known there are three kinds of base elements in Template DOM: Static HTML Element, Variant Element and Block Element. We also know that ValueNode DOM stores the dynamic contents. Since you needn’t assign values to Static HTML Elements, you can find out the relation between template elements and ValueNode:

Template DOM	ValueNode DOM
Block Element	ValueNode Object
Variant Element (child of Block Element)	ValueNode Property (child of ValueNode)

One Block Element is related to one ValueNode Object via their names. If the Block Element and the ValueNode Object are the same level and the same name, then they are relational. One Variant Element is related to one property of the related ValueNode Object via their name, too. Variant Element is always embedding in the Block Element, so we can regard the Variant Element as the child of the Block Element. The same to a ValueNode and its properties.

The framework of programming code is like the code below:

WebTemplate template = new WebTemplate();

template.FileName = @"g:\WebTest\Template\ListBox.htm";

ValueNode vnRoot = new ValueNode();

....

string strOutput=template.Rendered(vnRoot, "");

These lines are needed in any Web Sharp programming.

See the code below, we must create a WebTemplate object and point to a template file. WebTemplate object will automatically parse the template file and build the Template DOM. These are hidden from us. Web needn’t know about these details.

WebTemplate template = new WebTemplate();

template.FileName = @"g:\WebTest\Template\ListBox.htm";

But we need to build the ValueNode DOM related to the Template DOM. A root ValueNode related to the root of Template DOM is needed.

ValueNode vnRoot = new ValueNode();

After building the ValueNode DOM, we can pass this DOM to WebTemplate’s Rendered() method and return the final output

Do you think the filename "g:\WebTest\Template\ListBox.htm" is too long? Yes. The solution is that you can configure the template path at the start of the whole web application. In .Net you can create a Global.asax file if it doesn’t exists. Then add the following code:

void Application_Start(object sender, EventArgs e)

{

new WebSharp.WebConfig().TemplatePath = Server.MapPath("~/Template");

}

In the previous code snippet, a WebConfig object is created and assigned the physical path ("g:\WebTest\Template”) of the virtual path “/Template” to its TemplatePath property. This will affect the whole web application until you changed the TemplatePath again. After that you can use "ListBox.htm" instead of "g:\WebTest\Template\ListBox.htm" in your code:

template.FileName = "ListBox.htm";

Note: You can find all demos in “Demo\C#\WebTest\WS\”

l Normal Variant Demo

Create a NormalVariant.htm file in template path and create a NormalVariant.ashx file. Of course you can create a web window file (.aspx) instead of web handler file (.ashx). Because this is a simple demo, a web handler file is enough. It just displays a line text “Hello World!” in this demo.

NormalVariant.htm

NormalVariant.ashx

{%Hello%}

</body></html>

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/html";

WebTemplate template = new WebTemplate();

template.FileName = @"NormalVariant.htm";

ValueNode vnRoot = new ValueNode();

vnRoot.SetValue("Hello", "Hello World!");

string output = template.Rendered(vnRoot, "");

context.Response.Write(output);

}

Memo

In this demo, there is only one normal variant element {%Hello%} in the template, so after root ValueNode is created, call SetValue() method to assign the real value “Hello World!” to {%Hello%}

Screen

l Normal Block Demo

This demo shows how to display an Image. If the image file does not exist, do not display it.

Copy a image1.gif to your web path “/Images”. Create a NormalBlock.htm file in template path and create a NormalBlock.ashx file.

NormalBlock.htm

NormalBlock.ashx

<html>

<body>

{%Tip1%}

{%Tip2%}

</body>

</html>

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/html";

WebTemplate template = new WebTemplate();

template.FileName = "NormalBlock.htm";

ValueNode vnRoot = new ValueNode();

string strImagesPath = context.Server.MapPath("~/Images/");

//--ImageBlock1

if (File.Exists(strImagesPath + "image1.gif"))

{

vnRoot.SetValue("Tip1", " image1.gif exists ");

ValueNode vnNode = vnRoot.CreateChild("ImageBlock1");

vnNode.SetValue("ImageURL", "/Images/image1.gif");

}

else vnRoot.SetValue("Tip1", " image1.gif doesn't exists ");

//--ImageBlock2

if (File.Exists(strImagesPath + "image2.gif"))

{

vnRoot.SetValue("Tip2", " image2.gif exists ");

ValueNode vnNode = vnRoot.CreateChild("ImageBlock1");

vnNode.SetValue("ImageURL", "/Images/image2.gif");

}

else vnRoot.SetValue("Tip2", " image2.gif doesn't exists ");

string output = template.Rendered(vnRoot, "");

context.Response.Write(output);

}

In this demo, there are two normal block elements: ImageBlock1 and ImageBlock2. Each of these two block elements is just to display an image file. If the image file exists, then create a child ValueNode of the root ValueNode and assign a value to {%ImageURL%}( value of image’s src ). When the child ValueNode is created, it must be assigned a same name as the normal block element’s name: ImageBlock1 or ImageBlock2. If you do not create a child ValueNode for the related normal block element, this normal block element will be hidden—can not output and display in client. So if you want to hide a block element, just do not handle it in your programming code. Look back the code of this demo: Before display the image, judge if the file exists or not. If it exists, display it, or just display some text describes that the file doesn’t exist. In this demo, image1 exists and image2 does not exist, and you can see the result blow.

l Loop Block Demo

This demo shows how to display 12 images in 3 rows and 4 columns. First, you have to copy 12 images to the image path “/Images” and these images must be named as Icon11.gif, Icon12.gif, Icon13.gif, Icon14.gif, Icon21.gif ... Icon34.gif. Second, create template file and a code file.

LoopBlock.htm

LoopBlock.ashx

<html>

<body>

<tr>

<td>

</td>

</tr>

</table>

</body>

</html>

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/html";

WebTemplate template = new WebTemplate();

template.FileName = "LoopBlock.htm";

ValueNode vnRoot = new ValueNode();