<WUB> HTML tags explained

Syntax:
<WUB name="<somename>" parse="full | text" style="vertical | horizontal" width="<pixels>" type="normal | repeat" id="<someID>" imgparse="image | size | full" imgsize="<width>, <height>, <filesizeKB>">

To allow your customer to update some data on their web site using the convenience of Web Update Client, you have to mark the begining and the end of each area to be edited that way. To do that put opening <wub> HTML tag at the beggining and closing </wub> tag at the end of the area that will be edited by your customer.

Please note that this concept requires some discipline. Web Update Client allows only changes to plain text (including <b> and <i> tags), images and <a> tags (URLs and e-mail addresses). This was necessary to keep things simple enough so any user can make those changes as well as to prevent unwanted changes to web page layout. Therefore, it is recommended that you enclose only plain text and <a> tags in <wub> tags if doing otherwise is not necessary for the project.

If you place <wub> tags around more complicated structures, Web Update Client will try to handle the situation properly. It will break your HTML code automatically so all tags other than <b>, <i> and <a> are skipped. For example, this technique is useful to allow editing contents in tables, lists and similar structures when style and type <wub> tag parameters are also used. However, be careful when doing this kind of stuff and test Web Update Client thoroughly before sending it to your customer.

Opening <wub> tag can have five parameters: name, parse, style, type and imgparse.

1. name="<somename>"
Use 'name="<some title text>"' parameter to give a title to that particular updateable area. That name will appear in Web Update Client for better guidance. If you do not set 'name' parameter Web Update Client will name that area automatically as "Item 0", "Item 1", "Item 2", ...

2. parse="full | text"
Use 'parse' parameter to control HTML code parsing process for <a> tag. You can set it either as 'parse="text"' or 'parse="full"'. If you do not set this parameter at all Web Update Client will work assuming 'parse="text"'. In that case Web Update Client allows only changes to text between <a></a> tags. Only if you set 'parse="full"' Web Update Client will allow changes to 'href' and 'title' parameters of an <a> tag.

3. style="vertical | horizontal" width="<pixels>"
Use 'style' parameter to control how Web Update Client should display editable areas it creates automatically when <wub> tags are placed around complicated structures. Set 'style="horizontal"' to make Web Update Client put editable areas in a row which is very useful when you have to edit contents in tables and similar structures. In addition to 'style="horizontal"' you can use 'width' parameter to set exact width of editable areas in Web Update Client. If omitted default size will be used. Set 'style="vertical"' to make Web Update Client put editable areas in a column, one beneath the other. If you do not set this parameter at all Web Update Client will work assuming 'style="vertical"'.

4. type="normal | repeat" id="<someID>"
Default value for 'type' parameter is 'type="normal"' and it does not have any influence on Web Update Client. On the other hand, use 'type="repeat"' parameter if you want to make Web Update Client offer advanced editing options for the enclosed object: add above, add below, duplicate, delete. End user will be able to add another object of the same structure to the page or remove repeated objects up to the last item. This technique is useful for maintaining lists and tables where rows represent ideal structure for it. When using 'type="repeat"' parameter you also have to use 'id="<someID>"' additional parameter and set some ID (any alphanumeric will do) for the enclosed object. It is very important to note that you have to set different ID for each <wub> tag with 'type="repeat"' parameter. If you fail to do that Web Update Builder will report an error in <wub> syntax.

5. imgparse="image | size | full" imgsize="<width>, <height>, <filesizeKB>"
If you want to allow your users to update images then you should add 'imgparse' parameter. If you set it to 'imgparse="image"' then only the image file will be available for updating, while other paramters of the <img> tag (width, height, alt) will always stay preserved. By setting 'imgparse="size"' you will additionally allow changes to width and height parameters of the image. Finally, by setting 'imgparse="full"' you will allow changes to all relevant image parameters: the image file, its width and height and alt text.
By using 'imgsize' parameter (by the way, this parameter does not make sense without 'imgparse' parameter) you can impose restrictions on image file characteristics acceptable for update and the user will be warned if she tries to use some image that exceeds the limits. For example, by setting 'imgsize="300,200,20"' you can set the client program to accept only images up to 300 pixels in width, 200 pixels in height and 20KB in file size. Of course, you can choose to set a limit for only one of them if you like, e.g. by setting 'imgsize=",,55"' you will set the client to accept any image with a file size up to 55KB.
Note: due to still unclear GIF-patent situation only JPG/PNG images are supported at this moment.

You should treat <wub> and </wub> HTML tags just like any oher HTML tag. You can add them directly into HTML code using any text or specialized HTML code editor, or you can use Dreamweaver® with tag extension file included with Web Update Builder installation.

Examples

=== Example #1 ===

HTML code:
<body>
<wub>This part of <b>text</b> is updateable.</wub><br>
And this part is not updateable.
</body>

Browser displays:
This part of text is updateable.
And this part is not updateable.

Customer can edit:
This part of text is updateable.

=== Example #2 ===

HTML code:
<body>
Address:<br>
XemiComputers Ltd.<br>
<wub name="XemiComputers address">
205 Chr. Hadjipavlou Str.<br>
Loulupis Court, 4. floor<br>
3310 Limassol<br>
CYPRUS
</wub>
<br><br>E-Mail: <wub name="XemiComputers contact e-mail" parse="full">
<a href="mailto:info@xemico.com" title="Send e-mail to XemiComputers Ltd.">info@xemico.com</a></wub>
</body>

Browser displays:
Address:
XemiComputers Ltd.
205 Chr. Hadjipavlou Str.
Loulupis Court, 4. floor
3310 Limassol
CYPRUS

E-Mail: info@xemico.com

Customer can edit:
---XemiComputers address---
205 Chr. Hadjipavlou Str.
Loulupis Court, 4. floor
3310 Limassol
CYPRUS

---XemiComputers contact e-mail---
E-Mail Text: info@xemico.com
E-Mail Address: info@xemico.com
Tooltip: Send e-mail to XemiComputers Ltd.

=== Example #3 ===

HTML code:
<body>
<table width="35%" border="1" cellspacing="2" cellpadding="2">
  <tr>
    <td>Market index</td>
    <td>Value</td>
    <td>Gain</td>
  </tr>
  <wub name="DJIA" parse="full" style="horizontal" width="120">
    <tr>
      <td>Dow Jones</td>
      <td>8570.20</td>
      <td>+57.20</td>
    </tr>
  </wub>
  <wub name="S&P500" parse="full" style="horizontal" type="repeat" ID="S&P500" width="120">
    <tr>
      <td>S&amp;P 500</td>
      <td>903.89</td>
      <td>-6.51</td>
    </tr>
  </wub>
</table>
</body>

Browser displays:

Parsing text in Web Update Client

As you very well know you can represent blank space in HTML code as it is, " ", or using so called non-breaking space, &nbsp;. On the other hand Web Update Client works with standard rich-text boxes so some conversions back and forth are necessary. Use the following conversion table as your reference:

HTML code >> Web Update Client

Web Update Client >> HTML code

Dreamweaver is registered trademark of Macromedia Corporation.