Untitled
Help 
TutorCentral - Online Tutoring, Live Tutors, Quizzes, Learning
 NetVIOS Home Products Forums Meetings/Chat Login Log Out

NetVIOS WebFaces Technology

A remarkable tool for any web programmer - Internet Product Week

An answer to Java Server Faces for ASP programmers - ASPTech.com

Manuals, Downloads, Installation, Architecture
The NetVIOS WebFaces technology consists of components and scripts that aid in the development and maintenance of future-generation websites. There are two aspects to the technology - that which deals with the user interface and form elements of a web page or web form and a second aspect that deals with the look and feel of web pages and creating customizable pages.

The requirements of an efficient web application development technology are:

  1. Web pages and applications should be customizable. While it is acceptable for my PC applications such as a spreadsheet to have the same look as that of my neighbour's, proficient web applications are additionally required to have features that can be modified to fit a desired look which is different from the look of other sites.
  2. Presentation logic that is distinct from the business logic and independent of the final implementation or markup language. More websites are being designed to be accessed from different devices including desktops, WAP devices, home applications etc. A website developed using technology that separates the presentation layer from the markup language will prove to be cheaper to develop and maintain since only one code is used to present the page to the various devices.
  3. Web site projects usually involve several players including artists and designers, developers and programmers etc. A structured technology that separates each function allows each group to seamlessly and separately work on the different parts of the web project.
  4. A structured presentation technology provides an orderly means of reusing user interface parts further speeding up the time and reducing the cost of a development project.
  5. Separate and structured presentation logic allows changes to be easily made to web pages and web forms compared to unstructured page development which always requires the actual changes be made to the markup syntax used in constructing the pages or forms.
  6. Related to the separation of client-side presentation implementation details from business logic is the fact that the user is shielded not only from client-side device implementations but also from browser compatibility issues. As the versions of browser softwares evolve, the job of anticipating and developing client-side code to anticipate and handle their differences will only get more cumbersome. Technology that encapsulates this problem will bother with these changes and leave the developer to concentrate of real application logic and development. This technology will also provide for future evolution of web and Internet specifications including XML, XHTML, DHTML etc.
  7. An efficient web development technology will provide a formal project framework or methodology that structures the development process particularly for large projects.

How does NetVIOS WebFaces address the above requirements?

NetVIOS WebFaces is a system of components containing presentation elements that can be called on a webserver. Webpages on the server can then call up the presentation elements designed into the components.

 

User Interface Elements of NetVIOS Webfaces

The user interface elements of webfaces includes over 40 element types that can be called on a script page (asp, perl, jsp, etc) to dynamically generate user interface html interface items on a page. Each element is packaged as an object with methods and properties. The functions embedded in each element includes those for:

  • presentation - generation of the element and its initialization
  • validation - interface validation rules can be set within each element
  • event response - response to client side events can be triggered by the elements
  • processing - the state of each element is maintained subsequent to submitting the forms so that values of each element can be retrieved on the server side
  • browser sensitivity - embedded in the generation of presentation language for each element is a self check for the browser type and the generation of the appropriate markup language by browser type.

 

Example (Presentation)

The following example illustrates how to quickly generate an html page with associated user interface elements without the rigor of creating the elements directly from html. Save the following text in a file with a .asp extension (e.g. webfaces.asp) on your website which has NetVIOS webfaces installed on its server.

<html>
<head>
<title>NetVIOS Web Faces</title>
</head>
<body>

<%
Set objform = Server.CreateObject("ubvios.formitem")
objform.FormName = "sampleform"
objform.MaxSize = 40

objform.BeginForm

objform.Name = "sampleinput"
objform.GUIType = "Input"
objform.Datatype = "String"
objform.FieldSize = "14"
objform.Label = "Sample Input:"
objform.DisplayItem

objform.Name = "sampletime"
objform.GUIType = "Time"
objform.FieldSize = "14"
objform.Label = "Sample Time:"
objform.DisplayItem

objform.Name = "sampleeditbox"
objform.GUIType = "EditBox"
objform.Datatype = "String"
objform.FieldSize = "7"
objform.Label = "Sample Editbox:"
objform.OptionValues = "Minimal"
objform.DisplayItem

objform.Name = "sampleimage"
objform.GUIType = "Image"
objform.Datatype = "String"
objform.FieldSize = "250"
objform.Label = "Sample Image:"
objform.DisplayItem

objform.EndForm
Set objform = Nothing
%>

</body>
</html>

The above file uses just 4 out of the over 40 GUI types contained within NetVIOS webfaces. The result of accessing such a file over the web would be as shown here.

 

Example (Validation)

Validation rules can be set for each element which will be enforced by the dynamically generated html code. If it is desired to ensure that the date and the sample input user elements in the above form are validated. Validation instructions are issued for each element type as shown below.

<html>

<head>
<title>NetVIOS Web Faces</title>
</head>
<body>
<%

Set objform = Server.CreateObject("ubvios.formitem")
objform.FormName = "sampleform"
objform.MaxSize = 40

'THE VALIDATION SECTION
'----------------------------------------
objform.StartValidation

objform.Name = "sampleinput"
objform.GUIType = "Input"
objform.Label = "Sample Input:"
objform.ValidateItem

objform.Name = "sampledate"
objform.GUIType = "Date"
objform.Label = "Sample Date:"
objform.ValidateItem

objform.Name = "sampleeditbox"
objform.GUIType = "Editbox"
objform.Label = "Sample Editbox:"
objform.ValidateItem

objform.EndValidation
'----------------------------------------


'THE FORM PRESENTATION SECTION
'----------------------------------------
objform.BeginForm

objform.Name = "sampleinput"
objform.GUIType = "Input"
objform.Datatype = "String"
objform.FieldSize = "14"
objform.Label = "Sample Input:"
objform.DisplayItem

objform.Name = "sampledate"
objform.GUIType = "Date"
objform.FieldSize = "14"
objform.Label = "Sample Date:"
objform.DisplayItem

objform.Name = "sampleeditbox"
objform.GUIType = "Editbox"
objform.Datatype = "String"
objform.FieldSize = "7"
objform.Label = "Sample Editbox:"
objform.OptionValues = "Minimal"
objform.DisplayItem

objform.Name = "sampleimage"
objform.GUIType = "Image"
objform.Datatype = "String"
objform.FieldSize = "250"
objform.Label = "Sample Image:"
objform.DisplayItem

objform.Name = "samplefont"
objform.GUIType = "Font"
objform.Datatype = "String"
objform.Label = "Sample Font:"
objform.DisplayItem

objform.SubmitForm "Submit Example"

objform.EndForm
'----------------------------------------

Set objform = Nothing
%>
</body>
</html>

The result of accessing such a file over the web would be as shown here.

 

Example (Processing)

Presentation language used in describing each object uses the object name as the name and id of the control. Subsequent to submission, the state of the element is maintained so that the value of the element can be retrieved using the Request variable. Processing options include compiling the form as a text (for emailing the form results for instance) or composing the form results in view mode. For examples of post-submission processing, proceed to the section on processing in the Webfaces manual.

Additional examples of some rare elements can be found here.

 

Ways to Use the User Interface Elements in NetVIOS WebFaces

Dynamic Generation of Pages
Webfaces commands such as the above can be embedded in html files (.asp, .php) for dynamic generation of interface elements when the pages are accessed.

Modifications to the elements due to user requirements can then be made easily during the project development stages or any time in future. For instance, we can easily switch the richtext box (Editbox) specification for the third element in the files above by simply changing on word - the GUIType property of the object and the results will be as shown here.

objform.Name = "sampleeditbox"
objform.GUIType = "TextBox"
objform.Datatype = "String"
objform.FieldSize = "7"
objform.Label = "Sample Textbox:"
objform.OptionValues = "Minimal"
objform.DisplayItem isize, ierror

This makes for a more cost effective project development during the phases when the client is in the process of approving user interface and presentation or during the analysis of various options as dictated by the business processes involved.

Static Generation of Pages
The script files containing web faces technology may be considered as templates. When the pages are accessed, the resulting html version is saved and used as the final files that will be accessed on the website. Modifications to the user requirements will then result in a regeneration of the html pages during the project development phase or due to future modifications to the user interface requirements.

 

Complete List of User Interface Elements and Properties

The complete list of user interface elements, the properties that may be set and the value options are available in the webfaces technical manual. A detailed description of how to use Webfaces may be found in the user manuals.

 

Web Face Features

This is the part of NetVIOS webfaces that deals with the look and operation  of web pages. To demonstrate the benefits of webface features, consider the web page created from the html section below:

<html>
<body bgcolor="#DDEEFF">
<table width = 100%>
<tr>
<td width=200></td>
<td width="70%" valign=top bgcolor="#000000">
<center><font face=Arial color="#FDFAE8" size=3>Page Title</font></center>
</td>
<td width=200></td>
</tr>
<tr>
<td colspan=3><br><br><br><br><hr></td>
</tr>
</table>
</body>
</html>

This web page will look as shown here.

Suppose this page is part of a web application that will be installed on different web servers and websites, it is desirable to make the page customizable or fit to the theme and look of any site on which it is installed. To endow the page with webface features, the page will be modified as shown below:

<%
 Response.Expires = 0
 Response.Buffer=True
 Session("campusidf") = 0

 dim objfeature
 Set objfeature = Server.CreateObject("ubvios.Feature")
 'Page Features
 objfeature.Name = "PageBackground"
 objfeature.Default = "#DDEEFF"
 objfeature.FeatureType= "Color"
 objfeature.Scope = "Page"
 objfeature.IsCookie = True
 objfeature.Caption = "Page Background Color"
 objfeature.ProcessFeature()
 col_background = objFeature.Value

 objfeature.Name = "TitleColor"
 objfeature.Default = "#000000"
 objfeature.FeatureType= "Color"
 objfeature.Scope = "Page"
 objfeature.IsCookie = True
 objfeature.Caption = "Title Background Color"
 objfeature.ProcessFeature()
 col_titlecolor = objFeature.Value

 objfeature.Name = "TextColor"
 objfeature.Default = "#FDFAE8"
 objfeature.FeatureType= "Color"
 objfeature.Scope = "Page"
 objfeature.IsCookie = True
 objfeature.Caption = "Title Color"
 objfeature.ProcessFeature()
 col_textcolor = objFeature.Value

 Set objfeature = Nothing
%>
<html>
<body bgcolor="<%=col_background%>">
<table width = 100%>
<tr>
<td width=200></td>
<td width="70%" valign=top bgcolor="<%=col_titlecolor%>">
<center>
<font face=Arial color="<%=col_textcolor%>" size=3>Page Title</font>
</center>
</td>
<td width=200></td>
</tr>
<tr>
<td colspan=3><br><br><br><br><hr>
<font face=Verdana color="<%=col_textcolor%>" size=2>
<a target=_blank href="/WOS/pagecookies.asp?WOSPageID=/WebFaces/webfeatureset2.asp">Customize/Edit Page Features</a></font>
</td>
</tr>
</table>
</body>
</html>

 This page will still look the same when accessed since the default values of the features are set to be the same as for the prototype page. However, the user may now modify or customize the page. A link to the customization page has been provided on the same document for convenience. You may inspect the result of accessing this feature-enhanced page here and proceed to click the link to customize the page.

Features can be used to enhance more than the look of the page. Features may consist of variable used in affecting the functioning of a page. Because all the NetVIOS GUI types are available for use in Webface features, features can be used by the programmer to introduce variables which can be controlled by the user without resorting to extensive programming that would have been required to achieve such customization. The example presented here in the manual uses the features more extensively in a real web page.

 

Memory Management

Notice that there is no noticeable reduction in the speed of accessing the page which is pure html compared to the page with features. Actually, the same size of file is still sent to the client computer. On the client-side the memory requirement for storing the features is handled using patent-pending, advanced caching procedures such that most recent and most frequently (MRMF algorithms) requested features are saved in memory. The current website, for instance, contains thousands of features that make site management easy without significantly impacting access speed. We see web features as the way to truly deliver web applications in future.

 

Registering the Features

A frequent question for new adopters of Webfeatures is - after creating a feature on a page, how is the feature registered by the programmer so that users can set those features in future? The answer is never. NetVIOS web features is designed to be self registering so that the programmer does not have to bother with registering the features or creating means for the user to set or provide the feature's values. The system registers the feature on a first encounter basis. The flip-side of this is that a page that is never accessed on a website will never have its feature registered or presented to the user to be set. Is this not the perfect scenario? Another advantage is that web pages and applications obtained from other developers can be added daily and have their features self-install without any programmer intervention. Features may also take advantage of the existence of "standard" features usually declared on every website to "self-customize" when installed on a feature endowed website. This is described in greater detail in the manuals.

 

Webfaces Technical Architecture

NetVIOS Webfaces components sits on top of the webserver and connects to the database. Other html and script files that do not contain webface files can coexist with webface script files. Therefore, webface components can be installed on an existing webserver and webface files can be added to an existing website without affecting the previous functioning of the website.

 

Cost of Webfaces Technology

NetVIOS is committed to providing this technology free to the web developer community. This technology is supposed to be an application development tools for asp developers similar to that enjoyed by java programmers using the Java Server Faces technology. However, the development of Webfaces has been ongoing for several years which may explain why Webfaces technology contains much more element types than Java Server Faces. In addition, the Webface Features is an application development feature that we know to be unique to Webfaces. Development is ongoing to enable Webface elements and features to be defined in a pure XML context. Interested programmers and collaborators may contact NetVIOS or register as NetVIOS developers.

 

Downloads
Download Webfaces

 

Installation of NetVIOS Webfaces

NetVIOS webfaces consists of a single dll or component that needs to be initialized. There are also several GUI elements that require a database such as the State element or the Country element. For programmers who wish to make use of these elements, the Webfaces database also needs to be installed. Alternateively, webface tables may be imported into an existing website's database. For webface features, it is mandatory that the features table be installed i.e. the database has to be installed or the tables imported into an existing website's database. The links to download Webfaces can be access here. The installation instructions for NetVIOS Webfaces files can be found here.

 

Manuals

Developers Manuals

Technical Manuals
pdf
html

Upload Manuals (upload component contained within webfaces but can be used separately)
html

Editbox Manuals (richtext component contained within webfaces but can be used separately)
pdf
html
Editbox home

 

Example Site

View examples of usage here http://webfacesite.netvios.com/. In each example, there is an active file (.asp), and a view file (.htm) that shows the script contents of the active file.

 

Future Direction of Webfaces Technology

To find out the current activities on Webfaces and how to contribute to this technology, click here.

 

Contact and Additional Information

NetVIOS Webfaces technology is free. However, to further the contribution to the technology, you may join the NetVIOS developer community, rate this product here, or send a link to this technology to a fellow web developer by clicking here.

To contribute to developments on Webfaces technology through our message boards, click here.

You may also leave a testimonial describing your use of Webfaces as well as a link to your site here.

To contact NetVIOS concerning the Webfaces technology, click here

Home