Intersoft Solutions Corporate Blog » WebEssentials

The All-new WebUI. Experience It Yourself.

Nicholas Lie — Thu, 03 Mar 2016 04:26:48 +0000

Our months of hard work finally paid off. It’s finally here. With excellent craftsmanship and fine attention to detail, we’re very proud to announce the all-new and powerful WebUI 2016. The entire WebUI lineup consisting of highly-advanced 40+ web components now finally receives a truly deserved facelift.

Accessing the New WebUI Live Experience

For so long, customers have enjoyed our live WebUI demos through http://live.intersoftsolutions.com. While this experience is adequate, being redirected to another site for a hands-on experience just won’t cut it anymore. So we decided to integrate the new samples right our website. That’s right, now you can experience the new WebUI samples with the gorgeous unified modern theme, right from our website.

Don’t worry, we’ve put these buttons everywhere, so you can easily access them from various pages in WebUI, although it is very much recommended to access them from /WebUI. Should you miss this experience and open the old live samples, you’ll be greeted with the following dialog box.

Without further ado, let’s get right onto the new WebUI Live Experience.

The Home Screen

Right when you launch the new Live Experience, you’ll be greeted with a nice and modern blurred background, showcasing the flagship products of WebUI. This experience works best on modern desktop browsers supporting HTML5 and CSS3.

If you click on products such as WebDesktop and WebEssentials, you can also find a grid of sub-components in them.

WebGrid

When you launch WebGrid for the first time, you’ll be greeted with the First Experience.

This first experience sample demonstrates many of the top UI features available in WebGrid, combined with some unique features such as column freezing, filter suggestion and more.

Some of the top features demonstrated in this sample are:

Sleek look and feel with the all-new “Elegant” Default Style. The Default Style feature significantly reduces page output size by eliminating in-line styles. Try to view source and notice there are no styles generated in the page level.
Improved user interface with a new set of fresh icons, background images and UI elements.
New context menu engine. Try to right click on the Grid area to experience the new context menu system.
LiveFreeze™ column freezing feature. The only column freezing implementation that perfectly simulates Excel® freezing behavior.
Automatic Filter Suggestion. Try to right click on a cell (eg, “Owner”), then choose one of the available filter options. The suggested filter options are based on selected cell’s data type and value.
Filter Status Indicator. When one or more columns are filtered, notice that the filter indicator status is changed to “Filtered”. This indicator helps end users to understand the current state of filters without has to display filter bar. You can click on the filter status indicator to toggle the filter state.
SmartWebResources™. This innovative technology enable this sample to run without dependencies to “physical” client resources. All client resources such as scripts and images are retrieved directly from resource assembly.
Declarative datasource control binding. Notice that there are no codes required for the data binding operation (see C# and VB tab).

Samples Navigation Experience

To navigate between samples, you can easily use the arrows on the left and right-hand side of the screen, or use the menu button on the top-left corner of the screen. This will open the Menu panel and you can easily jump between samples.

If you wish to go back the controls grid, simply click the Home button. Should you encounter any problems or hassles with the samples, feel free to chat with us directly using the live messenger on the bottom-right corner.

WebCombo

This the First Experience when you launch the WebCombo sample.

This sample demonstrates the unified modern theme of WebCombo and many of its key features such as SmartWebResources™ and declarative datasource control binding.

Notice that there are no code required for the data binding operation (see C# and VB tab). Try experimenting with the WebCombo controls in this page to see some unique features in action. For instance, Reports-To is using multiple selection feature combined with image column type.

WebInput

This is the First Experience when you launch the WebInput sample.

This sample demonstrates the unified modern theme of WebInput and its key features.

Some of the new features demonstrated in this sample are:

Sleek look and feel with the all-new “Elegant” Default Style. The Default Style feature significantly reduces page output size by eliminating in-line styles. Try to view source and notice there are no styles generated in the page level.
Ordinary input text and multiline input text features, like demonstrated in FirstName, LastName, Address, City, Country fields.
Display and edit format features, like demonstrated in Birth Date field.
Other edit format feature, like demonstrated in First Name, Last Name, Phone, Extension fields.

This sample also demonstrate integration between WebInput and .NET Validator Control such as RequiredValidator and CompareValidator.

WebScheduler

This is the First Experience when you launch the WebScheduler sample.

This sample is designed to model a car-rental tracking scenario – demonstrating how WebScheduler performs in real-world enterprise application. Bound to over 3000 events, WebScheduler delivers responsive user experiences regardless of the data size.

The powerful JSON technology and smart client paging rendering significantly improved the overall WebScheduler performance to a new level not possible before. This sample combines both the ViewPort™ and EventPageSize™ Client Paging rendering enabling WebScheduler to load in a flash.

Try to play around with the scheduler. Use the upper right vehicle locator for a quick jump. Click on the visual indicator on the resources area to populate the car information.

WebDesktop

This is the First Experience when you launch the WebDesktop sample.

This reference sample demonstrates the beautiful modern theme and many groundbreaking features in WebDesktopManager such as shortcuts and comprehensive window management. It also showcases the integration of various WebDesktop components to create full-fledge and immersive web applications, which include WebPaneManager, WebToolBar, WebTab, WebDialogBox, WebNotification and more. Try to double click each icon to see the WebDesktop components in action.

WebEssentials

This is the First Experience when you launch the WebEssentials sample.

This reference sample perfectly demonstrates WebEssentials component suite which comprised of 8 innovative controls, ranging from accordion, calendar, slider, to rating. WebEssentials enables you to create interactive and visually engaging modern web applications.

In this Online Resume scenario, WebAccordion is used as the main container, dividing this lengthy form into three sections. WebProgressBar is used to indicate the section completion process. The bar will be filled as users click on next. WebCalendar is used for date input and WebSlider for selecting a specific range. WebSlidingMenu is used on the right FAQ section. Click on a question and the answer is shown in a swift and smooth sliding animation.

Additionally, WebFlyPostBackManager is used to populate the section’s content on demand as users click the next button. In Section 1, WebFileUploader is used for image uploading, demonstrating its seamless AJAX upload experience.

WebTextEditor

This is the First Experience when you launch the WebTextEditor sample.

WebTextEditor is the industry’s first text editor that integrates intuitive writing tools, in-line spelling checker, and sophisticated uploading capability in a single interface – enabling you to rapidly build rich CMS application that delivers breakthrough, unique editing experience to your end users.

This sample demonstrates tight integration with Desktop Manager, Spell Checker, File Uploader and many UI components from WebDesktop to produce sophisticated, state-of-the-art CMS application that ultimately feels like a desktop word processing application.

WebTreeView

This is the First Experience when you launch the WebTreeView sample.

WebTreeView provides rich features that lets you easily create hierarchical data presentation. This powerful control incorporates numerous unique features such as:

Data Binding
Tristate checkbox
Add, edit, and delete node
Drag and Drop node(s)
Keyboard Navigation
Load On Demand
Layout Manager and Structure Manager
Auto Postback
Flexible and highly customizable to meet your design needs
client-side API – WebTreeView Designer

The above sample utilizes Enable Tristate CheckBox and Keyboard Navigation features.

Explore the Samples

We hope that you liked our new samples. To start taking advantage of our best WebUI release yet, feel free to download the new Premier Studio 2016 here. Happy exploring!

Introducing WebSlidingMenu

gordont — Thu, 02 Dec 2010 07:05:38 +0000

It has been a while since my last blog post. In this post, I want to introduce you to Intersoft’s new ASP.NET control that we shipped in 2010 release. Called WebSlidingMenu, it is a unique navigation control with superb navigation experience. With WebSlidingMenu, you can swiftly move from one page to another page in fewer clicks. WebSlidingMenu is one of the controls that included in WebEssentials suite. Click here to learn more about WebEssentials.

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.

In this post, I will deep dive on each feature of the WebSlidingMenu.

Data Binding

Data binding is one of the control basics that generally populates the items based on the given data source. WebSlidingMenu provides an intuitive DataBinding Editor makes it easy for you to connect the WebSlidingMenu control to your existing XML documents.

The WebSlidingMenu’s Data Binding Editor is shown in the following screenshot.

Notice that you can define the data binding node in hierarchical to easily match your XML data structure. Click here to learn more about WebSlidingMenu’s data binding concept.

Load-on-Demand

Performance is always an issue as users demanded intuitive and responsive user experience even with large set of data. We, at Intersoft Solutions are fully aware of this problem and offer an innovative load-on-demand feature in WebSlidingMenu. You can enable the load on demand feature by simply enabling the LoadOnDemand property.

You can check the WebSlidingMenu’s load on demand sample here.

Header Template and Item Template

Sometimes having text as a display is not enough, you need a better layout like images or maybe some HTML tables or even server side controls. In WebSlidingMenu, you can create the header and item display that you want by choosing the appropriate mode like text, text and image or inline.

The following illustration shows the WebSlidingMenu configured with inline mode in the Header and Item. You can also check the sample here.

Auto Height

In certain scenarios, you often need to specify dynamic height for each item. The easiest way to do this is setting the height of each item individually, which is not a good practice. WebSlidingMenu provides a more elegant approach with its Auto Height feature. All you need to do is simply setting the AutoHeight property to true. WebSlidingMenu will automatically determine the height for each item to fit the item’s content. Please refer to the following screenshot for clearer picture.

You can try the online demo here.

Summary

In this post, I have covered only some of the best features available in WebSlidingMenu. Please click here to learn more, and here for more online demos.

If you haven’t downloaded WebUI Studio, click here to grab your 30-day free trial and test drive WebSlidingMenu for yourself. Feel free to unleash your creativity and spice up your applications with stunning navigation experiences. For questions, feedbacks or suggestions, please post it in Intersoft’s community.

Warm Regards,

Gordon Tumewu
WebEssentials Team

Using Multiple Calendars in WebCalendar

intersoftbram — Thu, 02 Dec 2010 04:48:18 +0000

Continuing my posts about Intersoft WebCalendar control for ASP.NET, I have described how to configure the holiday collection in WebCalendar, and how to get selected dates and perform multiple selection. If you missed the blog posts, please check it out here.

In this post, I will show you about how to configure WebCalendar to multiple calendars in multiple columns. Let’s start configuring the WebCalendar.

Unlike similar calendar controls, WebCalendar enables you to display multiple calendars. This behavior is controlled by the NumberOfCalendarDisplayed property.

When multiple calendars feature is enabled, only 1 calendar will be active when users switched to the year view or decade view.

The following screenshots show the multiple calendars feature in WebCalendar using different type of view mode.

As you can see from the above screenshots, WebCalendar’s default behavior is to display the multiple calendars in one column. To enable multiple columns option in WebCalendar, we can customize the CalendarItemWidth property to set the width of each calendar, and the Width property to control the WebCalendar’s width.

As an example, I will show you how to display a whole year calendar in 4×3 configurations.
Please follow the steps below.

Set the NumberOfCalendarDisplayed property to 12.
Set the CalendarItemWidth to 170px. The CalendarItemWidth is 1/4 from the entire WebCalendar’s width.
Set the CalendarItemHeight to 180px. The CalendarItemHeight is 1/3 from the entire WebCalendar’s height.
Set the Width property to 680px. We can get the Width property value from multiply the total column with CalendarItemWidth’s value.
Set the Height property to 540px. We can get the Height property value from multiply the total row with CalendarItemHeight’s value.

Here is the result from the above WebCalendar configurations.

Now you have learned how to use WebCalendar to display multiple calendars in multiple columns. If you have any question, feedbacks or comments, feel free post them to our community forum. You can also check the online demos of WebCalendar here.

Warm Regards,
Budianto Muliawan
Intersoft Software Architect

WebExpander with Google Maps

glayaar — Thu, 18 Nov 2010 04:57:47 +0000

In the 2010 R1 release, Intersoft introduces a new ASP .NET collection control under the WebEssentials suite. Further information about WebEssentials can be found here. One of the controls in the WebEssentials is WebExpander. In this post, I will show you how to mashup Google Maps service with WebExpander to display contact list address. The following screenshot illustrates the above scenario. You can achieve the above scenario by customizing the WebExpander’s Mode and Flow property, and use custom inline template for the WebExpander’s header and content section. You also need to implement WebExpander’s OnClick client side event to call the Google Maps service. I have provided a working sample which you can download at the end of this post. Now, let’s start customizing the WebExpander.

Customize the Mode property I’m going to set the Mode property to Fixed.
Customize the Flow property I’m going to set the Flow property to Right because I want the Google Maps service to expand to the right of the header.
Customize WebExpander’s header and content section As you can see from the above screenshot, there are two sections in the WebExpander. The list of contacts and the Google map address of the selected contact. The list of contacts is the header section and the Google map is the content section. The following code shows the customization of the header and content section using custom template.
```
    
        
        
            
                Patrice Johnson
        
            191 North Cowley Drive
        
    
    
        
            
                Loading Map ...
        
    
```
The content section is set using a predefined size to hold the Google Maps service.

OnClick client side event The Google Maps service API is called in the WebExpander’s OnClick event handler. In order to get the correct map size, you should ensure that the content section is fully expanded before calling the Google Maps API.

function WebExpander1_OnClick(ctrlId, itemName)
{
    var exp = ISGetObject(ctrlId);
    var itemObj = exp.Items.GetNamedItem(itemName);

    var intervalExpandObj = setInterval(function ()
    {
        if (itemObj.State == "Expanded")
        {
            clearInterval(intervalExpandObj);
            intervalObj = null;

            var idx = itemName.substring(itemName.length - 1);

             //Function to call Google Maps API
            ShowMapByAddress(parseInt(idx));
        }
    }, 50);
}

Once you have finished configuring the WebExpander, you will get something similar to the above screenshot. In summary, I have explained some WebExpander features such as mode, flow, custom template, and client side API which you can use to create a mashup service between WebExpander and Google Maps. For further information about WebExpander features, please visit WebExpander product page here. As mentioned earlier, you can download the sample for this post here. You can also explore other WebExpander samples in the online demo here. If you have questions or feedback about this post or anything related to WebExpander control, feel free to post it to Intersoft community forum. Regards, Glenn Layaar Intersoft Member

Page Index Indicator Using WebProgressBar

glayaar — Thu, 28 Oct 2010 06:19:16 +0000

In the 2010 R1 release, Intersoft introduces a new ASP .NET collection control under the WebEssentials banner. One of the controls in the collection is WebProgressBar. Further information about WebEssentials can be found here.

In this post, I will show how to use WebProgressBar to indicate the page index in a paged form scenario.

The following screenshots show page index information in a paged form using WebProgressBar.

You can achieve such scenario with WebProgressBar in several simple steps. The basic idea is to customize the Mode and Orientation property of the WebProgressBar, and provide a client side event to update the WebProgressBar’s Value with the latest page index.

For your information, I have provided a working sample which you can download at the end of this post.

Now, let us start customizing the progress bar.

Customize the Mode property
I am going to set the Mode property to Determinate with MaxValue property is set to the number of page in the form. I will also set the Value property of the progress bar to the initial page index value. In this sample, I set the MaxValue property to 4 and Value property to 1.
Customize the Orientation property
Since, we would like to show the progress bar in vertical position, let us set the Orientation property of the progress bar to Vertical.
Update the Value property in GoPrev and GoNext client side method
As the page index changed, we also need to update the value of the progress bar. You can update the value programmatically in the client side event using SetValue client side API. In this sample, I am going to update the progress bar value during page transition client side method.
```
function GoPrev() {
	if (curPage > 1) {

		curPage -= 1;

                ...

                var progBar = ISGetObject("ProgressBar1");
		progBar.SetValue(curPage);
	}

}
```

Once you have finished configuring the WebProgressBar, you will get something similar to the above screenshot.

In summary, I have discuss some WebProgressBar features such as mode, orientation, and client side API which you can use to indicate the page index in a paged form scenario. For further information about WebProgressBar features, visit WebProgressBar web page here.

As mentioned earlier, you can download the working sample here.

You can also explore other WebProgressBar features in the online demo here.

Regards,

Glenn Layaar
Intersoft Member

Get Multiple Selected Dates with WebCalendar

intersoftbram — Fri, 22 Oct 2010 09:50:37 +0000

Calendar is a control that looks simple but very useful in desktop or web development, so there is no question why there are lots of calendar control out there. Those calendar controls usually can select single date or can return single date only.

In certain scenario, there is a requirement where you would like to be able to perform multiple selections or get multiple dates from the calendar control. For example in scheduling scenario, there is a condition that the event will be a range event or occur in custom date (the dates does not align), and many other scenarios that require more than just single selection or single date.

To overcome the above scenarios, WebCalendar control is implemented with “MultipleSelection” feature which can give you a range of date and multiple selections. In this post, I will show you how to enable this feature.

For your information, WebCalendar is part of WebEssentials suite for ASP.NET which contains 8 new controls such as WebAccordion, WebProgressBar, WebListBox, etc. For further information about WebEssentials can be found here.

Enable MultipleSelection in WebCalendar

The default selection behavior in WebCalendar is single selection. In single selection, you can access WebCalendar’s selected date value in SelectedDate property. In multiple selections, you can access WebCalendar’s slected dates value in SelectedDates collection property.

To enable MultipleSelection in WebCalendar, set EnableMultipleSelection property to True.

The following images show SelectedDate, SelectedDates and EnableMultipleSelection property in WebCalendar control.

When multiple selections feature is enabled, you can highlight multiple dates in WebCalendar using mouse. The behavior is the same with performing multiple selections in desktop OS (press, hold and drag the mouse).

Actually, you can also perform the multiple selections using keyboard. In order to use the keyboard action, EnableKeyboardSupport property in WebCalendar should be enabled. You will get the comprehensive multiple selection behavior in WebCalendar with the combination of mouse and keyboard. Like desktop OS, you can highlight WebCalendar’s date with click and drag using mouse, use CTRL, SHIFT, or CTRL + SHIFT to get random selections.

When keyboard support is enabled, you can also start using the directional keyboard keys to move between months and dates in WebCalendar. [Enter] key is used to select a date and [Space] key is used to cycle through the available views (Day, Month, Year) in WebCalendar.

Some illustration of multiple selections in WebCalendar is shown in the following screenshots and video.

For your information the multiple selections feature in WebCalendar is designed to work in Day view mode only.

Get Multiple Selected Dates from WebCalendar

In this post sample, I will show you how to get the previous/old selected dates and the latest/new selected dates from WebCalendar through OnSelectedDateChanged client side events and display the information for user. OnSelectedDateChanged client side event is the client side event in WebCalendar that will be triggered when WebCalendar’s SelectedDate or SelectedDates property value is changed.

First, enable WebCalendar’s EnableMultipleSelection and EnableKeyboardSupport property by set the property value to True then start implementing OnSelectedDateChanged client side event.

The following screenshots show the implementation of OnSelectedDateChanged client side event in WebCalendar.

function WebCalendar1_OnSelectedDateChanged(controlId, oldDates, newDates)
{
	var WebCalendar1 = ISGetObject(controlId); 

	return true;
}

Notice that OnSelectedDateChanged client side event has 3 parameters:

controlId is the id of the WebCalendar control
oldDates is the collection of the old selected dates
newDates is the collection of the new selected dates

Next, I will write simple code that will get the old and new selected date and put them as the div element’s innerHTML like illustrated in the following sample.

Here is the result after the above code implementation.

function WebCalendar1_OnSelectedDateChanged(controlId, oldDates, newDates)
{
    var WebCalendar1 = ISGetObject(controlId); 

    var oldDatesDiv = document.getElementById("oldDatesDiv");	    var newDatesDiv = document.getElementById("newDatesDiv");

    for (var i = 0; i < oldDates.length; i++)
	oldDatesDiv.innerHTML += oldDates[i] + "
";
	         for (var j = 0; j < newDates.length; j++)
	newDatesDiv.innerHTML += newDates[j] + "
";

    return true;
}

Here is the result after the above code implementation.

In this post, you have learned how to enable multiple selections and get multiple selected dates in WebCalendar. If you have any question, feedbacks or comments, feel free post them to our community forum.

Best Regards,

Budianto Muliawan

How to Configure Holiday in WebCalendar

intersoftbram — Fri, 22 Oct 2010 04:25:06 +0000

Since Intersoft WebUI Studio 2010 R1, there is a new suite called WebEssentials for ASP.NET. WebEssentials contains 8 new controls in this release. WebCalendar control is one of the new controls which are part of WebEssentials. Further information about WebEssentials can be found here.

In business applications that use calendar user interface to create appointments or events, it is common to show the days which are holiday, and the days which are working days. This is important to avoid arranging meetings or events in undesired schedule. Our new WebCalendar control provides built-in features that let you easily define the holidays, which will be consequently marked in different color. In this post, I will show you how to setup the holiday in WebCalendar.

You can specify holiday in WebCalendar’s Holidays collection property as illustrated in the following screenshot.

Click on the Holidays property to open Holidays collection editor, as illustrated in the following screenshot.

Here are several points that should be notes in the Holidays Collection property.

Name
The name of the holiday
Description
The description of the holiday. This is the value of the WebCalendar’s date tooltip. Date The date of the holiday
IsGeneral
The property that indicates whether date with the same specified date and month even though it is not in the same year will be set as a holiday. For example, you can specify IsGeneral to True when the specified holiday is Christmas Day.

Input the holiday value and click the Add button to add the new holiday to WebCalendar. Repeat the same steps to add another holiday.

Save and run the page after you have finished specifying the holiday to WebCalendar. You will have something like the following screenshot.

Notice that in WebCalendar, the holiday is marked with red color. This is because WebCalendar has a style which will be assigned to each of the holiday. The style property is called HolidayStyle. The default style for holiday in WebCalendar is marked the date with red color. However you can custom your own holiday style too by customizing the HolidayStyle property.

In this post you have learned how to create holiday in WebCalendar. For more information about WebCalendar and its feature, please click here. You can also play with WebCalendar samples from our live demos. If you have feedbacks, questions or suggestions, feel free to post them in the Community Forum.

Cheers,
Budianto Muliawan

Using WebProgressBar as Busy Indicator

glayaar — Fri, 15 Oct 2010 02:26:56 +0000

The recent WebUI Studio 2010 release shipped with a host of innovative controls for the Silverlight, WPF and ASP.NET platform. One of the new controls for ASP.NET is WebProgressBar, which is part of WebEssentials product suite. WebEssentials includes 8 rich ASP.NET controls, which you can learn more here.

In this post, I will blog about WebProgressBar and how it can be used as a busy indicator in your ASP.NET application.

As its name implies, WebProgressBar is used to show a progress of a long running operation. One of the unique features in WebProgressBar is its ability to show progress bar in indeterminate mode. For example, consider a scenario where you have an editing form with a save button and you would like to show progress indicator when the save operation is in progress such as shown in the following illustration.

To achieve the result such as shown above, I am going to demonstrate several key features of WebProgressBar, such as predefined theme, event handling, orientation, and progress mode. In this demonstration, the saving progress is simulated using .NET threading and ASP.NET session.

I will only focus on detailing the WebProgressBar feature required to achieve the result. A download link to download the working sample is available at the end of this post.

The following settings are applied to the WebProgressBar control to achieve the result that similar to the above image.

Predefined Theme
WebProgressBar in the screenshot is using Office2007 theme.
Mode
The Indeterminate mode is used since the exact time and progress of the saving process cannot be determined in this scenario.
Orientation
The WebProgressBar is using Horizontal orientation.

Event Handling
Multiple event handlers must be used to achieve the desired result, both in the client side and in the server side.

Handling ProgressInterval Server-side Event
Periodically check if the saving process has been completed in the server side. If the process is completed set the value of the WebProgressBar to MaxValue (default is 100) to indicate the progress has been completed.
```
protected void ProgressBar1_ProgressInterval(object sender,
  ISNet.WebUI.WebEssentials.WebProgressBarProgressIntervalEventDataArgs e){   if (int.Parse(Session["SimulatedVal"].ToString()) >= maxValue){     e.Value = 100;   }
}
```

Handling OnResponse Client-side Event

Invoked after the WebProgressBar sent a request to the server, in this implementation I am updating the WebProgressBar caption with the elapsed time after each successful requests determined by the ProgressInterval property.

function ProgressBar1_OnResponse(controlId, action, xmlResp) {
var progBar = ISGetObject(controlId);
  if (action == "OnProgressInterval") {
    if (progBar.GetCaptionElement() != null) {
      var current = new Date();
      var currentTime = Date.UTC(current.getFullYear(), current.getMonth(), current.getDate(),
      current.getHours(), current.getMinutes(), current.getSeconds(), current.getMilliseconds());
      var elapsedTime = currentTime - progBar.StartTime;
      progBar.SetCaption("Elapsed time: " + (elapsedTime / 1000).toFixed(2) + " second(s)");
    }
  }
}

Handling OnFinished Client-side Event

This client side event is implemented to set the status label of WebProgressBar with the amount of time needed to finish the process. The amount of time could be obtained from the StartTime and EndTime property of the WebProgressBar control.

function ProgressBar1_OnFinished(controlId, endTime, value, caption) {
  var progBar = ISGetObject(controlId);
  var duration = progBar.EndTime - progBar.StartTime;
  progBar.Value = 0;
  document.getElementById("lblStatus").innerHTML = "Save complete in " +
    (duration / 1000).toFixed(2) + " second(s)";
}

In summary, I have explained some of the key features available in WebProgressBar which is useful to show busy indicator for a long running process. The features that discussed in this post are predefined theme, mode, orientation, and event handling. To learn more about WebProgressBar and its features, please visit WebProgressBar product page. As promised earlier, the sample for this post can be downloaded here.

You can also try more WebProgressBar examples in different scenarios here. If you have question or feedback about this post or anything related to WebProgressBar control, feel free to post it to Intersoft community forum.

Glenn Layaar

Intersoft Member

Using WebListBox in Line-of-business Scenarios

erikaa — Sat, 09 Oct 2010 07:49:23 +0000

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.


  . . .

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.

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.

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.

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

intersoftbram — Thu, 07 Oct 2010 10:41:19 +0000

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.

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.

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.

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.

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