Tag Archives: WebEssentials

Using WebListBox in Line-of-business Scenarios

WebListBox is one of the controls included in WebEssentials collection. To learn more about WebEssentials, you can read this post or visit WebEssentials product information here.

As explained in the previous post, WebListBox can be used as input control and navigation control. In this post, I will discuss two of the most common line-of-business (LoB) scenarios where WebListBox can be useful.

Using WebListBox as Input Control

Let’s say you have an employee form where employees can choose their origin country in a list box. Of course, you can always use .NET ListBox to list all of the country options in the employee form, such as shown in the following screenshot.

With WebListBox, you can display the countries in more compelling presentation. For instance, it would be nice to have the country’s flag image in addition to the text.

Let’s start with the data binding and see how easy it is to bind an XML data to a WebListBox. Consider you have a Country data in XML, such as shown below.

<Countries>
  . . .
  <Country Id="49" Name="United Kingdom" Image="UnitedKingdom.png">
  </Country>
  <Country Id="50" Name="United States" Image="UnitedStates.png">
  </Country>
</Countries>

Similar to .NET ListBox, you can declaratively bind an XML data source to WebListBox using DataSourceID property. You can also specify the data member properties such as text and value data member. Unlike .NET ListBox, WebListBox provides more data member properties, such as NameFieldDataMember, TextFieldDataMember, ValueFieldDataMember, and ImageFieldDataMember. You can set these properties to the related attribute member in the XML data, for example, set TextFieldDataMember property to Name which will bind the text of each item in WebListBox to the Name attribute in the XML data. You can also set the ImageFieldFormatString property to specify the image folder path of the image field, e.g.: ./images/{0}.

The following code shows how to bind WebListBox to XMLDataSource and use the provided data member properties such as ImageFieldFormatString for easy data binding.

<ISWebEssentials:WebListBox ID="wlbCountry" runat="server" DataSourceID="XmlDataSource1"
     DefaultStyleMode="Minimalist" Height="200px" ImageFieldDataMember="Image"
     ImageFieldFormatString="./images/{0}" NameFieldDataMember="Id" TextFieldDataMember="Name"
     ValueFieldDataMember="Id" Width="150px">
     <LayoutSettings DisplayMode="TextAndImage" ImageSize="25, 15" ItemHeight="25" 
     ScrollMode="ScrollBar" />
</ISWebEssentials:WebListBox>

To show the text and image in WebListBox’s item, you can set DisplayMode property to TextAndImage. You can also specify the size of the image using ImageSize property. The following screenshot shows the result of the above WebListBox configuration. Compared to .NET ListBox in the earlier screenshot, the following employee form using WebListBox looks more intuitive and compelling.

Note that you can navigate through the country options using up and down arrow keys when the EnableKeyboardSupport property of the WebListBox is enabled.

Using WebListBox as Navigation Control

In addition to using WebListBox as input control, you can also use WebListBox as navigation control since it has been enhanced to include navigation functionality. When WebListBox is used as navigation control and users select an item in WebListBox, he will be redirected to a specific URL based on the item’s TargetURL property value.

In this post, I will show you how to use WebListBox as a navigation control in a travel agent website where users can browse and navigate through a list of hotels.

Consider the following XML data as the data source. It contains the name, image, and website URL of each hotel. You can bind this data to WebListBox using the data binding related properties, like described in the above Employee Form scenario.

<Hotels>
   <Hotel Id="1" Name="Oberoi Vanyavilas" Image="oberoi-vanyavilas.jpg" URL="http://www.oberoihotels.com/">
   </Hotel>
   <Hotel Id="2" Name="Triple Creek Ranch" Image="triple-creek-ss.jpg" URL="http://www.triplecreekranch.com/">
   </Hotel>
   . . .
</Hotels>

Besides the NameFieldDataMember, TextFieldDataMember, ValueFieldDataMember, and ImageFieldDataMember properties, you can also specify the TargetURLFieldDataMember property to indicate the field data member used as target URL of each item.

In the above XML data structure, the URL attribute specifies the website URL for each hotel. You can set the URL as the value of TargetURLFieldDataMember property. In addition, you also need to specify the TargetWindow property. When users click on an item in WebListBox, the target URL of the item will be opened in the target window, which is specified in TargetWindow property. The complete WebListBox configuration can be seen in the following code.

<ISWebEssentials:WebListBox ID="WebListBox1" runat="server" Height="99%" Width="100px"
     DefaultStyleMode="Natural" EnableKeyboardSupport="true" DataSourceID="XmlDataSource1"
     TextFieldDataMember="Name" ImageFieldDataMember="Image" ImageFieldFormatString="./images/{0}"
     ValueFieldDataMember="Id" NameFieldDataMember="Id" TargetURLFieldDataMember="URL" SelectedIndex="0">
     <LayoutSettings ItemHeight="80" ScrollMode="Scroller" DisplayActiveItemIndicator="true"
     TargetWindow="paneContent" DisplayMode="TextAndImage" ImagePosition="AboveText" ItemAlignment="Center" />
</ISWebEssentials:WebListBox>

To adjust the WebListBox layout with its navigation functionality, you can set several properties in LayoutSettings group, such as DisplayMode, ImagePosition, ItemAlignment, ItemHeight, and ScrollMode property.

WebListBox also includes a unique feature that shows a callout-style indicator to mark the active item, which is particularly useful in navigation scenario. To enable this feature, you set the DisplayActiveItemIndicator property of the WebListBox to True.

The following screenshot illustrates the result of the WebListBox as described in the above code.

When users select one of the hotels in the left pane, the navigation process will be invoked and the related URL will be displayed in the right pane. You don’t need to add any script or server side code, because the navigation process is handled by WebListBox automatically.

Conclusion

In this post, you have learned how to implement two of the most common LoB scenarios using WebListBox. The first is to use WebListBox as input control, and the other as navigation control. You can download the samples here, or click here to play with WebListBox samples from online demos.

For more information about WebListBox and its features, please visit WebListBox product page. If you have further questions or feedback, feel free to post them in Intersoft community forum.

Cheers,

Erika

Introducing WebAccordion Design-time Wizard

There are lots of new ASP.NET, Silverlight and WPF controls introduced in Intersoft WebUI Studio 2010. One of the new ASP.NET controls is WebAccordion, which is part of WebEssentials Suite. For your information, WebEssentials contains 8 new controls in this release. Further information about WebEssentials can be found here.

In this post, I will show you about how to create WebAccordion’s item using the design-time wizard and how the global and individual item settings can help you quickly customize the WebAccordion control.

Creating WebAccordion using the Design-time Wizard

The screenshot below shows WebAccordion control with the smart tag after it is added to ASP.NET page. You can add WebAccordion control to ASP.NET page by drag and drop or double click on the WebAccordion control from Visual Studio toolbox.

image

Usually when you add an item for a control, you access the control’s properties window, find and click on its ItemCollection property, input the item value, specify the item settings, and click add button to add the new item to the control, and then repeat the same steps to add another item.

With WebAccordion’s design-time wizard, adding new item is much easier. You can click on the “Add New Item” visual hint in WebAccordion control to open the design-time wizard dialog box which is described in the following images.

image image

In the design-time dialog box, you can specify the WebAccordion’s item properties and settings such as HeaderText, HeaderContentMode, ContentMode and ContentURL.

The first image in the following describes how to add a WebAccordion’s item using “Inline” mode for the HeaderContentMode and ContentMode property. The second image shows adding content to WebAccordion’s header and content in design-time.

image image

There are several points to note about the WebAccordion’s item properties:

  • “Inline” in HeaderContent or ContentMode property means that you can input the content directly from design-time.
  • “IFrame” in ContentMode property means that the content will be an iframe. The url of the iframe is supplied from ContentURL property.
  • “Default” in HeaderContentMode and ContentMode property means that the WebAccordion’s item will follow the specified settings in ItemSettings property.

ItemSettings property is the default settings for entire WebAccordion’s items. However you are still able to configure WebAccordion’s item individually. This is what I called global and individual settings in WebAccordion.

Understanding WebAccordion Global and Individual Settings

You can use global or individual setting to configure WebAccordion’s item. Global settings are useful when you have numerous WebAccordion’s items with same settings, so you can quickly setup the WebAccordion’s items settings without have to specify it 1 by 1 in each of the Item. Individual settings are useful if you would like to customize a specific WebAccordion’s item without affecting the other items.

The individual item settings configuration can be found inside each of the item’s property as describe in the first image below. The second image describe about the global item settings in ItemSettings property. As you can see, the ContentMode property is set to “Inline” so whenever WebAccordion’s item ContentMode is set to “Default” in WebAccordion item’s property, like illustrated in the first image. The WebAccordion item will use “Inline” as the ContentMode value.

image image

Hopefully this blog post gives you a better understanding about using WebAccordion’s design-time wizard and WebAccordion’s global and individual item settings. To learn about the features available in WebAccordion, you can explore the online demos here.

If you have any feedback, questions or suggestions, feel free to post to Intersoft community forum.

 

Budianto Muliawan

Software Architect

WebListBox. A List Box with Hybrid Functionalities.

List box is perhaps one of the most popular and most used user interface element next to textbox and button in any user input scenarios. Along with the fast growing need for richer and more intuitive applications, developers have been reinventing the wheel trying to create and incorporate a better list box control to their apps.

Seeing this great need and opportunity, we at Intersoft began to research for the best concept which extends far beyond to those available and widely used now days. Put it simple. We promise you a list box control that is easy-to-use, powerful in features, rendered reliably in various browsers, plus its comprehensive set of client-side and server-side events and APIs bring a new level in web programming.

Data Entry Control

Intersoft’s WebListBox is designed to cater the need for an all-around list box control coping diverse data entry needs, for example: in a form which requires list box item with image or the ability to select more than one item.

Essential Customization

Let’s start with the basic. WebListBox provides additional setting for adding an image to each item. You can display text, text and image, or image only. Additional setting related is the image positioning. When using the text and image mode, you can change the image position relative to the text, for example: above or below the text and after or before the text.

All of the above settings can be made under LayoutSettings group property for global application. Or, you can use individual item’s properties for more personalized setting.

Scroll Mode

Scroll mode is provided to anticipate having many items in WebListBox exceeding the container’s height. The common practice is to use scrollbar. WebListBox offers several scroll options, ScrollBar, Scroller, or None.


As the name implies, ScrollBar mode uses the default browser’s scroll bar. Users can simply move the scroll bar to see the hidden items. One that worth mentioning is that the ScrollBar is also styled according to the selected predefined styles. This gives a more polished and uniformed look on WebListBox.

Instead of using scroll bar, Scroller mode adds up and down buttons located on the top and bottom of the control. Users only need to stop the mouse cursor on top of it and it will start scrolling immediately. This option is fancy, but the usability in a WebListBox with many items isn’t very effective.

The None option simply disable the scrolling feature and prevent users from seeing any hidden items.

Selection Mode

The result of user’s interaction with any list box controls is selection. WebListBox provides two selection modes, single and multiple, configurable through a property set. When multiple selections feature is enabled, users can use the CTRL or SHIFT key to select more than one item. Or, simply click and drag the mouse. As the mouse touches the bottom or the top most part of the control, the item will be scrolled and selected immediately.

Data binding Support

Its comprehensive data binding capability unlocks more possibility for you to deliver a sophisticated list box control targeting enterprise applications by connecting your existing data to WebListBox by simply assigning the data source ID. Supporting dozens of datasource controls, WebListBox’s user friendly Component Designer 2 lets you access all data binding properties.

WebListBox also support unbound mode, which basically allows you to add items manually.

The Smart Navigator

List box as a navigation control may sound uncommon, yet we manage to fit it quite nicely in our upcoming Support Site 2010.

When a list box item is clicked, the page will be loaded on the right IFrame. You can specify the target in TargetWindow property for global application or [Item] >> TargetWindow for individual customization. Use the TargetURL property to specify the URL.

Additional visual hint feature, called active item indicator, provides users a quick glance on the control and spot the active item instantly. Ultimately, WebListBox enhances navigation experiences with both visually appealing design and intuitive interfaces that meet industry’s usability standards.

Summary

With all the bells and whistles, WebListBox is a full-fledge control that packs innovative features, pleasant visual interface, and a developer-friendly designer window, that no similar solution can barely touch. It will surely satisfy most developers’ need and goes along very well with most business Web-applications.

Stay tuned for more as we will update you with the latest and hottest news directly from the development kitchen.

WebEssentials, A Better Visual Presentation.

Let’s take a quick look back. A couple of years ago, website is quite boring and dull, at least by today’s standard, and it isn’t anywhere close to Desktop in terms of user experience and usability. As information grows rapidly, content management and layout has become a necessity to deliver a better web experience.

Most users, including me, will skip any sites with lengthy content and unattractive presentations. Take an online form filling scenario as an example. In the past, you need to scroll down to see the next fields, which is very inconvenience for users with lower screen resolutions. Another example is the navigation system in an online store. There is no way for users to directly jump to a specific sub-category.

WebEssentials is about improving the overall user experience of your Web applications with its 8 innovative controls, ranging from collapsible panels, a diverse set of input fields, rating system, progress indicator, and many more.

From Regular to Spectacular

If you have read my previous post, I believe you should have a quick insight on what the controls are and what they are capable of. In this blog, I want to share you several samples that we have prepared for WebEssentials.

We decided to go outside the box with more real-world scenarios that we encounter regularly for better demonstration on these new controls’ true capability.

Customer Address Locator with Google Maps

Customer Address Locator with Google Maps
Utilizing the free and powerful Google Maps service, this WebExpander sample will show a customer’s address when it is clicked. The map area will be expanded in a very cool slide animation.

WebExpander’s rich support for inline content and IFrame content enables you to embed your content to this control immediately.

New Photo Session Registration

New Photo Session Registration
Rather than using two dropdowns, WebEssentials’ slider control is used for a time range selection in the new photo session scenario. Users simply glide the two handrails to select the duration. Using WebSlider, you can eliminate any invalid users’ input, such as: the start time is greater than the end time.

Complementing its dual handrails feature, WebSlider also provides two types of interaction modes when users glide a handrail towards the next one. The Locked mode disables any further movement when a handrail touches the other one. The Pushed mode enables the selected handrail to push the other one.

Online Product Satisfaction Survey

Online Product Satisfaction Survey
In an online survey scenario, WebProgressBar is used to indicate the overall questions users have answered. As users click on the next page, the progress will be filled and the color is changed.

With its selectable horizontal or vertical orientation and two types of progress modes, WebProgressBar lets you add a progress indicator to any of your Web applications.

Online Resume Creation

Online Resume Creation
There are certain conditions when we need to place specific information in a very limited screen estate, like the FAQ section in the above screenshot.

Online Resume Creation

Using WebSlidingMenu, the interactive FAQ section is added without cluttering the other layout. When users click on a question, the answer will be slide out in smooth animation.

Equipped with Load-on-Demand feature, the content will be fetched as soon as users select on an item for the best performance. It also features various built-in styles and mostly configurable elements.

This post only touches the surface of what WebEssentials is capable of. The practically unlimited implementation means your creativity is your only limit. In my next post, I’ll dive deeper into each control and its unique features.

Stay tuned and be prepared for WebEssentials in the upcoming WebUI Studio 2010.

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.
WebSlider

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.

WebSlider

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/8th of the star, instead of selecting the whole, it will only select 1/8th. 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.