First HTML page with www-Sharp

Creating HTML page with www-Sharp is easy.

First of all, start www-Sharp and select "File\New\Html editor" in menu. You will see HTML editor in Editor mode - currently it is empty page. Switch to Designer mode (select Designer tab at bottom) and back to Editor mode.

Now you should see empty HTML document with HTML, HEAD, TITLE and BODY tags. Add text "My first page with www-Sharp" inside TITLE tag and add "<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >" tag into HEAD section (adjust charset if needed). Add others META tags such as description, keywords. Save page by selecting "File\Save" as in menu.

Switch to Designer mode. Enter "My first page" and choose "Header 1" style in menu. Make new line by pressign Enter. Now select "Custom snippets" in right pane, choose "HTML controls\TABLE" and drag-and-drop it onto the page (on the second line). You will see dialog where you can enter table properties. This dialog is an HTML page that you can customize - its HTML page is located in $(www-Sharp)\Snippets\Table.html file. You can also add your own scripted snippets.

Now select table object , press Shift and double-click on the table object. You will see dialog with table's outerHTML. Enter column headers inside TH tags and press OK button. This way you can change outerHTML of any object that supports setting outerHTML from script.

Select table object again and double-click holding Control key. You will see DOM tree of the table object as it is represented by Internet Explorer . Here you can view and change properties of the table object and its descendants. Close DOM dialog to return into designer.

Now select table table object and double-click it holding Alt key. You will see designer for the TABLE object. This designer is HTML page that is located in $(www-Sharp)\Designers\Table.html. You may customize this designer and add more designers in View\Properties in application menu - select User interface\HTML editor and choose Designers tab. Close table designer.

Now select table object and double-click it holding both Shift and Control keys. You will see script console where you may customize HTML page using scripting languages such as JScript, VBScript and even JScript.Net. Selected element could be accessed as "Element" object.  Choose JScript as language and enter "Host.WriteLine(Element.tagName);" as script text. Press Execute button or Ctrl+Enter. You should see TABLE in output pane. HTML document object could be accessed as Element.document, for example, enter "Host.WriteLine(Element.document.title);" and execute it. You should see title of the HTML page.

Now lets execute simple script on the table object:

for (i = 0; i < Element.tBodies.length; i++)
{
  var body = Element.tBodies.item(i);
  for (j = 0; j < body.rows.length; j++)
  {
    var row = body.rows.item(j);
    for (k = 0; k < row.cells.length; k++)
    {
      var cell = row.cells.item(k);
      cell.innerText = "Cell: " + j + " - " + k;
      Host.WriteLine("Cell(" + j + "," + k + ") changed");
    }
  }
}

This script should set text for every cell in the table. Now close script dialog and return into designer mode.

Swith back to the Editor mode and look at HTML source of your page. It will be formatted with PrettyHTML if "Save document with PrettyHTML" is pressed or with MSHTML formatter if not.

Adjust HTML source if needed and save your page by pressing Save button. It is a good practice to save pages after some changes are done.

If you need just preview your page you may use Preview mode - it will not change HTML page source.

Now select DOM mode and view DOM tree of the HTML document as it is represented by Microsoft Internet Explorer.

If you work on HTML site, you may use Project feature. Press "Open project" button on toolbar (it is first button) and enter Project name (used only to load it later) and Path (this should be directory that corresponds root path of your site). Now all links will be resolved by this path (if HTML page is located under selected directory). This makes it possible to preview images and styles when designing HTML page.

Preview mode loads HTML page from its source. This makes possible to preview page that is not saved on the disk. But if page contains, for example, PHP script, it will not be displayed (PHP is treated as comment in HTML editor) . You may preview page using www-Sharp.Runtime with PHP script executed only when page is saved on the hard drive. To view page, choose "Page\Preview HTML" in menu. This way you may preview PHP, ASP.Net and other files if they are open in HTML or syntax editor.