Author Archives: rutherford

New in ClientUI 4: Versatile Calendar Control

The recently released 2010 R2 features ClientUI 4, a major version of our flagship development suite for the Silverlight and WPF platforms. ClientUI 4 is strongly focused in three areas: rich content and UI controls, advanced input controls, and fundamental navigation controls. For further information about ClientUI 4, please click here.

Introducing UXCalendar

One of the controls introduced in ClientUI 4 is UXCalendar, a sophisticated calendar control featuring multiple month views, multiple date selection feature and data binding support using MVVM design pattern.

UXCalendar sports a sleek yet authentic style and user interface, complete with today link, navigational buttons, week number and adjacent days. The following illustration shows what you get when you dropped an instance of UXCalendar in your Visual Studio or Blend designer surface.

image

We designed the UXCalendar to be ultimately lightweight and high performance, despite of its rich user interface. For instances, when clicking the Calendar Header, you will see responsive zoom-in and zoom-out transition similar to the one in Windows 7.

What’s really powerful is the multiple month views capability in UXCalendar – with the sleek user interface and styles consistently applied. You can easily set how many calendars to display by setting the CalendarViewCount property to the desired number. See the multiple month views interface in the following illustration.

image

Suffice to say, UXCalendar is the ultimate, cross-platform solution for all your calendaring needs. It also features built-in commands and flexible key gestures, multiple selection (and even multiple range), MVVM data binding for events source, display range customization, culture and localization support, and many more. Click here to learn more about UXCalendar.

Customizing UXCalendar Layout

UXCalendar is uniquely built on solid architecture that leverages our ItemsControl content model. This means that each calendar that represents an item in the UXCalendar can be easily and flexibly styled according to your need. You can even completely change the way it is arranged, let’s say, showing the calendars in 2 columns and 1 row, or 3 columns and 2 rows.

By default, the layout of UXCalendar is using a horizontal StackPanel. You can override this default layout through the ItemsPanel property of the UXCalendar.

In this blog post, I will show you how to create a UXCalendar with multiple month views displayed in 3 columns and 2 rows. Please follow the steps below:

  1. Drag and drop an instance of UXCalendar to the designer surface. You can use either Visual Studio 2010 or Expression Blend 4.
    image
    <Intersoft:UXCalendar Name="uXCalendar1"
    HorizontalAlignment="Center" VerticalAlignment="Center" />

  2. Show six months calendar view by setting the CalendarViewCount property to 6.
    <Intersoft:UXCalendar Name="uXCalendar1" CalendarViewCount="6"
    HorizontalAlignment="Center" VerticalAlignment="Center" />

  3. And now the final step, customize the ItemPanels of the UXCalendar. I’m using Intersoft’s WrapPanel and set the MaxWidth property to 600 to get the 3 x 2 display configuration.

    <Intersoft:UXCalendar Name="uXCalendar1" CalendarViewCount="6"
    HorizontalAlignment="Center" VerticalAlignment="Center">
        <Intersoft:UXCalendar.ItemsPanel>
            <ItemsPanelTemplate>
                <Intersoft:WrapPanel MaxWidth="600" />
            </ItemsPanelTemplate>
        </Intersoft:UXCalendar.ItemsPanel>
    </Intersoft:UXCalendar>

  4. Save and run the project in the browser. You should get the results such as shown in the following illustration.image

Truly simple and straightforward, isn’t it?

In this short post, you have now learned the basics of UXCalendar, and how to customize its layout arrangement. You can play around with the UXCalendar features through the properties, or try some readily designed samples here. To see all available features, please see UXCalendar Overview.

You will need the latest 2010 R2 bits which you can download it here. If you have questions or feedback about UXCalendar, feel free to post them to our community forum.

Best Regards,

Budianto Muliawan

Using Multiple Calendars in WebCalendar

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.

clip_image002clip_image004clip_image006

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.

  1. Set the NumberOfCalendarDisplayed property to 12.
  2. Set the CalendarItemWidth to 170px. The CalendarItemWidth is 1/4 from the entire WebCalendar’s width.
  3. Set the CalendarItemHeight to 180px. The CalendarItemHeight is 1/3 from the entire WebCalendar’s height.
  4. Set the Width property to 680px. We can get the Width property value from multiply the total column with CalendarItemWidth’s value.
  5. 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.

clip_image008

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

Get Multiple Selected Dates with WebCalendar

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.

image

image

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.

image

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.

image

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] + "<br />";
	         for (var j = 0; j < newDates.length; j++)
	newDatesDiv.innerHTML += newDates[j] + "<br />";

    return true;
}

Here is the result after the above code implementation.

image

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

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.

image

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

image

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.

clip_image006

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

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

Server Side Paging in WebScheduler Timeline view

Performance and scalability are among our strongest focus in WebScheduler v3 release. Since Timeline view is capable to show a wide range of data (from minutes to quarters), loading all the data at once will significantly degrade the server and client performance and ultimately slowing down the application responsiveness in overall. The problem is even more noticeable when the loaded data is relatively huge and when Quarter view mode is used.

WebScheduler 3 addresses the performance bottleneck from top to bottom by introducing smart client paging (EventPageSize),  ViewPort paging, and server paging. The smart client and ViewPort paging are designed to provide paging solution for the client-side which dramatically improves user experiences. I’ve discussed the client paging features in my previous blog post.

In this post, we’ll learn the new server paging capability in WebScheduler 3, and how you can implement it in your application. Let’s take a clear and deep down look at it.

Concept

Designed to be an enterprise-ready scheduling component, we’ve added numerous new features in WebScheduler 3 to control the data retrieval mechanism. One of the most powerful features is server paging.

Server paging is an innovative feature built to eliminate sluggish performance due to the large data download while working in Timeline view mode. With server paging enabled, WebScheduler will download only a small chunk of data based on the viewport during initial load and intelligently requests more data as users scroll downward. This means reduced page load time and increased overall application responsiveness.

Not only that – you can also combine the server paging with smart client paging, JSON serialization and other features to boost your Scheduling application performance even more.

The following screenshot shows the WebScheduler with server-side paging enabled. Notice that it will load data on demand as needed.

ServerSidePaging

Benchmark Result

To compliment this post with a more realistic performance comparison, I decided to do some simple testing and provided the screenshots that show the data and response time benchmark of server-side paging. In this benchmark, I’m using HighPerformanceScheduler sample which is included in the WebScheduler’s sample.

Also keep in mind that the HighPerformanceScheduler sample is using database with 3000+ records of events with 66 resources. All events are purposely recorded within 1 month to load test the WebScheduler performance in Timeline month view.

Using HttpWatch Professional 6.1, we can inspect the data size and the content returned from server. Notice that WebScheduler with server paging enabled loads only 176KB of data. That’s nearly 10x smaller when comparing it with server paging disabled which yielded 1553KB (1.5MB).

In addition, the server paging also significantly reduces data transfer time. For instances, assuming if you have 100kb/s internet connection, the load time with ServerPaging enabled will be done in approximately 1.7 seconds. Contrary, you will need to wait at least 15 seconds or more without ServerPaging.

The beauty of server paging is that it also keeps your browser light and responsive by rendering only a small amount of data at a time. Instead of loading all 3000 events at once, WebScheduler makes efficient use of resources by loading required events on demand when the page is scrolled downward.

You might be wondering how WebScheduler detects which data to be loaded in the next request. That is where smart client paging and ViewPort paging comes to rescue. To learn more on the new performance improvements in WebScheduler 3, please see the video below.

Implementation

And here’s the best part. Taking advantage of this powerful feature isn’t rocket science – thanks to the WebScheduler’s bare-metal architecture. All you need to do is simply enabling the EnableServerPaging property in ViewSettings under the TimelineView property group.

Note: Server paging feature is only applicable when the client paging is set to ViewPort or Both. For certain scenarios with smaller data (less than a thousand of records in a month view), the server paging may not be necessary enabled so that the complete data can be transmitted in a single page load. In such scenarios, the client paging will perform data rendering immediately.

That’s all for now. I’d love to hear any comments, feedback or thoughts about this feature. Feel free to drop your comments here or post it to our forum.

Warm Regards,
Budianto Muliawan

Timeline view’s Client Paging in WebScheduler 3

Hello everyone, Happy New Year 2010! In this post, I’m going to discuss one of the most exciting features that we added in the recently released WebScheduler. As you may already aware, WebScheduler 3 is strongly focused on performance and usability, especially when used in enterprise applications where they require to display large dataset in consistently fast performance. The new Client Paging feature in WebScheduler 3 elegantly addresses many of these performance issues.

In the following section, we’ll learn how client paging work specifically in Timeline View (the other views will be discussed in future blog posts). We introduce several client paging modes which can help improving overall application response based on your scenarios.

Let’s start by enabling the client paging in Timeline view. We’ve made it extremely easy to use, so that you can enable the feature by simply setting EnableClientPaging property to true. The property can be found in ViewSettings, then expand TimelineView property.

After enabling the client paging, the next step is to choose the client paging mode that is more suitable to your application scenario. WebScheduler 3 introduces three client paging mode to choose from:

  1. Paging based on number of events
    Called EventPageSize mode, this paging mode restricts the numbers of event displayed in each Timeline cell. If the total number of events exceeds the value of the EventPageSize property, an arrow indicator will appear notifying that more events are available. Click on the arrow indicator to reveal the complete events in the Timeline cell.To use this paging mode, simply set the ClientPagingMode property to EventPageSize.


  2. Paging based on screen viewport
    Called ViewPort, this paging mode will render all events based on the currently visible viewport. This means that even if you have hundreds of resources, WebScheduler will present your events in consistently fast performance. When scrolled down, WebScheduler seamlessly render the complete events of the new visible viewport. As the result, this advanced paging mode significantly improves overall responsiveness and user experiences.
    You should consider using this paging mode if you have fairly large number of resources bound to your WebScheduler.

    To activate this mode, set the ClientPagingMode property to ViewPort.

  3. The combination of both event size and viewport paging
    This mode combines the best of both EventPageSize and ViewPort client paging for the most efficient event rendering. With this mode, the events will be rendered based on the visible viewport and also be restricted based on the number of allowed events. This mode is best used for applications with considerably large number of resources and events bound to WebScheduler.

    To enable this mode, set ClientPagingMode property to Both.

<!–[if gte mso 9]> <![endif]–><!–[if gte mso 9]> Normal 0 false false false EN-US X-NONE X-NONE <![endif]–><!–[if gte mso 9]> <![endif]–> <!–[endif]–>Timeline events are displayed when paging arrow indicator is clicked

At this point, you should have learnt the new key features in WebScheduler 3 that elegantly address critical performance limitations in web-based scheduling application. So if you’ve got large, enterprise data to be presented in scheduling interface, go ahead, download and try WebScheduler 3, and impress your users big time!

Last but not least, you can find out more information on WebScheduler 3’s new features here and the live demos here. For questions and feedback, please drop by our forum.

Happy scheduling!

Warm Regards,
Budianto Muliawan.