In the Button's control partial XSLT above; two common templates are being used (applied) from the Visual WebGui's available common templates:
-
Styles (tplApplyStyles) applying the dynamic definitions within the style HTML attributes which are required for styling aspects in the button contents.
-
Padding (tplApplyPaddings) applying the dynamic definitions within the style HTML attributes which are required for padding aspects in the button contents.
JavaScript
In the process of choosing what existing code is reusable, you should think of the following guidelines:
-
ASP.NET Ajax callbacks should be replaced with Visual WebGui's standard pipeline calls
-
It is recommended that the Visual WebGui naming standards would be kept in order for the internal kernel compiler to perform an efficient variables scoping.
-
It is highly recommended to replace common libraries with Visual WebGui internal services (samples are shown below).
The following code is taken from ListView JavaScript file and demonstrates some sample Visual WebGui client services which can and should be used:
function ListView_Click(strGuid,strId,objWindow,objEvent)
{
// Get the pressed key
var intKeyCode = Web_GetEventKeyCode(objEvent);
// Executig selection of list item
ListView_Select(strGuid, strId, objWindow, Web_IsShift(objEvent), Web_IsControl(objEvent), true);
if(Data_IsCriticalEvent(strGuid,mcntEventSelectionChangeId))
{
// Handles the click event and forces raise Web_OnClick(objEvent,objWindow, true);
}
}
In the code sample above:
-
Web_GetEventKeyCode method extracts the codes of the keys pressed from the JavaScript event object.
-
Data_IsCriticalEvent method verifies if this event is considered a critical event according to the current server code and control's definitions.
Web_OnClick method is responsible to raise an actual click event through Visual WebGui pipeline.
The next code sample shows a few other client-side JavaScript services:
function ListView_Select(strGuid,strId,objWindow,blnShiftKey,blnCtrlKey,blnSuspendRaiseEvents,intKeyCode)
{
// Exit on disabled control
if(Data_IsDisabled(strGuid)) return;
// Get the multiselect attribute.
var objNode = Data_GetNode(strGuid);
var blnMultiple = Xml_IsAttribute(objNode,"Attr.Multiple","1");
List_Click(strGuid,strId,(blnMultiple?0:3),false,false,
objWindow,blnShiftKey,blnCtrlKey,blnSuspendRaiseEvents);
}
In the code sample above:
-
Data_IsDisabled method figures out if the control is disabled of not.
-
Data_GetNode method retrieves the updated xml node of a specified control from the "state behind" (client-side state).
-
XML_IsAttribute method checks the value of an attribute within the "state behind" (client-side state) xml node.
Like the services that have been demonstrated above, there many services to cover each and every JavaScript task including the interaction with the client-side state and Visual WebGui's unique events mechanism.
CSS
Existing CSSs can be reused almost as is, the only consideration here would be whether the imported control should be theme-able or not. If it is, the parameters method, as shown bellow should conform to Empty Client standards.
In the code sample bellow, taken from the ListView CSS file, it is shown that most of the CSS attributes are dynamically created by the server through the object model once the current theme is downloaded to the client. There are a few constant attributes:
ListView-Control
{
[Skin.Border];
[Skin.Background];
}
.ListView-FontData
{
[Skin.Font];
[Skin.Foreground];
}
.ListView-HeaderCell
{
[Skin.HeaderNormalStyle];
}
.ListView-HeaderCell_Enter
{
[Skin.HeaderHoverStyle];
}
.ListView-HeaderCell_Down
{
[Skin.HeaderPressedStyle];
}
.ListView-HeaderSeperator
{
width:[Skin.HeaderSeperatorWidth]px;
[Skin.HeaderSeperatorNormalStyle];
cursor: w-resize;
overflow:hidden;
}
4.3 Summary
The transformation that an ASP.NET control should go through in order to become usable within Empty Client consists of reusing the client rendering parts, most of the layouts, JavaScript and CSS and creating the control's server-side code strongly based on the existing ASP.NET server-side code only as a Visual WebGui compliant object model (which is actually an extended form of WinForms object model)