Introducing WebEssentials. Coming Soon in WebUI Studio for ASP.NET 2010.

Ever since Web 2.0 concept emerges years ago, it has revolutionized the way people interact with Web. Now, sites like social bookmarking, wikis, and social networking, are among the top visited sites in most countries.

WebEssentials is introduced as a frontal response to cover the huge demand for building an interactive Web 2.0 site easily.  7 controls are introduced in its prime release, ranging from slider, rating, to expander.

WebSlider

Slider control is highly popular in Web 2.0 sites for selecting a finite range or a specific number due to its higher accuracy than a regular blank text box. Coined from this simple perspective, WebSlider combines the essential sliders capabilities with innovative features.

This versatile slider offers tons of customization. You can tweak the slider orientation and direction, customize the item alignment, predefined your own item, and many more.

It also features a ranged selection with two handles. A simple scenario that describes the functionality the most is a Job Search Form, where users are offered with multiple fields and a slider to select the salary range.

WebCalendar

Most commonly found in a blog site, a calendar lets you jump to a date and the page is usually refreshed coincide with the selected date or in an online ticket or hotel room reservation application. Built around this concept, the objective of WebCalendar is to provide the easiest date navigation or hassle-free date selection experience.

As a navigation control, WebCalendar provides several view modes. Users can switch to Year, Quarter, or Month view by clicking on the header.

It also provides extensive holiday support that you can define via the control’s Component Designer.

Taken the above plane ticket reservation scenario, most sites use two separated calendars. WebCalendar does it more elegantly with multiple calendars display and multiple selections using keyboard and mouse support.

Simply click and drag your mouse in a WebCalendar or across WebCalendars. Or, use the keyboard and mouse combo support for making multiple date range selections.

You can also leverage the multiple WebCalendars mode to display 12 months. A simple scenario which requires this capability is a corporate calendar, complete with public and corporate holidays.

WebAccordion

Accordion is generally used by websites to display multiple links in limited screen estate, by expanding or collapsing a section (or an accordion item). You can define the content directly, or assigned it to a specific page using IFrame mode. This unlocks the possibility to use WebAccordion in more advanced scenario, for example: building a form filling Web app with collapsible sections to save the screen estate.

Various tweaking and configurations are available. You can set the orientation and direction, interaction mode, layout customization, client-side events and APIs, and many more.

WebRating

WebRating enables you to integrate a comprehensive rating system to your wiki, blog, or forum. Similar to other WebEssential lineups, you can manually configure the direction and orientation, layout, total number of stars, and more.

One of the most unique features is the precise selection mode. If a user selects 1/8^th of the star, instead of selecting the whole, it will only select 1/8^th. This feature is particularly useful for in a product review scenario for showing the overall score of a product.

With built-in flypostback (AJAX) and full postback capabilities, WebRating enables you to capture the selected rating for server-side processing.

WebExpander

WebExpander is basically a collection of collapsible panels with two types of expand modes. Adopting tab interface concept, the fixed mode only allows one item to be expanded at a time. The flow mode is more unique with its multiple expanded items in a time.

The full Visual Studio IDE integration enables you to fill in the content easily. You can use either the inline content mode or iFrame mode.

WebProgressBar

AJAX technology helps you deliver rich and interactive Web application with its partial page refresh concept. However, in certain scenarios, it can be confusing for users. A clear example is an airline reservation app. When the selected data is sent to server for processing, the page just stays as it is. With a WebProgressBar instance on that page, users will be able to see the progress of the booking process.

You can freely customize the orientation and the progress direction. The built-in AJAX and FullPostBack actions lets you take full control while WebProgressBar is running or after it reaches 100%.

WebListBox

As an input control, WebListBox offers many exciting features, such as the ability to select multiple items using keyboard and mouse. Either you use the CTRL or SHIFT and mouse click combo, or simply drag your mouse cursor to select a range. It also provides the ability to obtain the selected value or set the value from server-side.

Apart from its capability as an input control, WebListBox can be used as a navigation control. You can use text and image on the list box item and customize the styles on each item. Set the NavigateUrl property to your desired link and TargetUrl property to the target frame.

WebSlidingMenu

WebSlidingMenu offers a hierarchical navigational concept in drill-down mode. As a navigation control, WebSlidingMenu is perfectly suitable for a complex structured navigation as it allows users to drill-down to a specific menu and navigate to the specific item instantly.

The built-in Load-on-Demand mechanism ensures that all items are loaded swiftly regardless of the structure complexity and total number of items. It also enables you to connect to your XML document through XmlDataSource.

As other WebEssentials family, WebSlidingMenu provides countless customizations through the available properties, APIs, and client-side events. The content template feature gives you the power to develop your custom content more easily than you can imagine.

Regards,
Jemmy.