Skip to end of metadata
Go to start of metadata

Introduction

WebUI Framework was developed with one key strength in mind: Rich. Intersoft's view of Rich behavior has two main scopes: Rich in Runtime Elements for end users and Rich in Design Elements for application developers. To achieve this Rich behavior, a component should have extremely customizable styles, look and feels and appearance. More than that, a Rich component should have the capability to let the developers design the styles and layout "visually", and manage them conveniently instead of requiring developers to "manually" write the CSS codes, manually move the files to properlocation etc. To overcome these issues, achieving Rich behavior and increasing developer's productivity, here born the new Layout Manager at Framework level.

The Layout Manager User Interface is available in Designer module of each WebUI Studio components. It is contained in a Tab with name Layout Manager and it seems similar to the one found in initial products such as WebCombo or WebGrid. However, the new Layout Manager exposes new enhancements such as integration in framework level and more.

Layout Manager User Interface

 

A

The treeview lists all available layouts and grouped it in 2 main nodes. Predefined Layout and Custom Layout. The number of predefined layouts shipped with each product are vary. However, Intersoft team will ensure that most common styles are always included such as WinXP Blue, Office 2003 and more. In addition to the Predefined Layout, you can also creates your own layout and they will appear under the Custom Layout node.

When you select a layout whether it is Predefined or Custom Layout, the preview of the layout will be automatically generated which you can see and interact directly.

BIf you have new layouts that you probably just download from Intersoft's Style Gallery, you can add the new layouts so that they appear under the Custom Layout node. Use the Add Layout button to add new layout from existing file.
CUse Save Layout to save the currently selected WebInput.NET instance into layout file. The saved layout file will appear under Custom Layout node.
DAfter you selected a predefined or custom layout, you can apply it to your currently selected instance by clicking Apply Layout.
EPreview Current Layout used OnTheFly Preview technology implemented in framework-level to let you easily change the styles or other properties in Properties tab and preview it right away. No longer do you need to set each property, save, build and run it in browser that are very time consuming process, now you can use one single click to preview any changes modification.
FSave Layout Options allow you to choose whether you want to save only the StyleSettings of current instance or whether you want to save both StyleSettings and any behavior properties. Behavior properties are configuration such as IsEnabled state of a feature or control's behavior such as MaskFormat, CharacterCasing and so on. Instance-specific properties will be automatically detected and will not be saved, such as ControlId, EnableViewState, DataSource, Enabled, Visible and other properties that are instance specific.
GThe preview area of current selected layout (when treeview is clicked) or current instance's layout (when Preview button is clicked). The OnTheFly Preview technology allow you to not only "preview" the style, but also allow you to interact with the control just as if you run it in browser. Most interactivity features such as onclick and popup window such as in the screenshot above are fully supported and therefore you can design your preferred styles much quicker and easier than ever. Only a few interactivity features that related to core function (no style and UI elements) are disabled, such as onkeydown and any keyboard events.

Style and Behavior

The Layout Manager has the ability to filter style and behavior. With this capability, developers have the flexibility to choose whether they want to save the layout file that contains style only or both style and behavior.

Some examples of the Style are properties those derived from WebStyle class or DynamicStyle class, such as FrameStyle, DropDownStyle and so on.

Behavior properties are those categorized for changing the behavior and the way the control worked. For example, AcceptEsc, CharacterCasing, Nullable and so on.

The Layout Manager has the capability to automatically strip out instance-related properties from Behavior as well as those marked as NonPersistable properties. Some example of instance-related properties are: Visible, Enabled, EnableViewState, ID, and so on.

ASP.NET 2.0 Compatible Skin Format

 One of the difference with Layout Manager functionality found in initial products is the file format of the layout. The previous version saved the file in Binary Format and thus you can't manually change or manipulate the contents. The new Layout Manager now supports XML-based format which is consistent with the server side object model and hierarchy. This XML-based format is also used by Microsoft in their upcoming ASP.NET 2.0, which they named it Skin. Since that both Intersoft and Microsoft used the same XML format, the same layout for WS.NET components can be used forth-and-back in Intersoft's Layout Manager or ASP.NET 2.0 built-in Skin. 

Intersoft has decided to use Layout Manager and the term "Layout" (not "Skin") recognizing the nature of the function which not only have the capability to save the Style, but the Behavior as well. The Skin concept is much more to style and appearance only.

OnTheFly Preview technology

User Interface and Design are two things that can't be separated to achieve Rich behavior for web application. Today there are hundreds of components which claim they have full customizable styles, yet they are required to code the style in manual writing (either server tag or CSS codes) and the result can only be seen after it is being compiled and launch it in browser. Intersoft has invented lot of efforts and resources in order to let single developer "develop and design" quickly with the easiness of one click convenience. 

As you can see in the screenshot above, you can design the currently selected control's style in either Properties or Mode tab, then simply switch to Layout Manager tab and click Preview Current Layout button. You will see the rendered output in the Preview pane on-the-fly.

The OnTheFly Preview not only provides with you with the preview, but you can also interact directly with the component within the Preview pane. For instance in WebInput context, you can click on the dropdown button to see the styles you just designed for the CalculatorEditor.