WebUI Studio 2010 SP1 Is Here

We’re pleased to announce the immediate availability of WebUI Studio 2010 service pack 1, the most significant updates to our flagship suite since its initial release few months ago. The new service pack delivers hundreds of enhancements and dozens of fixes across all product lineups – thanks to our customers for the continuous support and feedback. Click here to view the complete release notes for WebUI Studio 2010 service pack 1.

All existing customers and prospects are highly recommended to download the new service pack for increased performance, reliability and stability. Click here to download the latest product installer.

Over 5000 Documentation Topics for Silverlight and WPF – Delivered!

The new release also includes a comprehensive MSDN-style product documentation for the Silverlight and WPF lineups, packing in over 150 new walkthroughs and how-to topics, and over 80 conceptual topics that cover fundamental topics such as MVVM pattern development, application framework, navigation framework, and much more – not to mention the documentation for over 4500 classes, types and members at the class library level along with complimentary examples and remarks!

Accessing the new help content is easy and straightforward – here’s how.

• From Windows program group.
  The new ClientUI documentation is now built upon Microsoft’s latest help viewer technology. This allows you to read the documentation with your favorite browser. Simply point and click the shortcut shown in the following screenshot, which opens a web browser with the help content ready. 
• From Visual Studio.
  Having a hard time locating the help content for a particular property or class? With the new ClientUI help system, that’s a thing of the past! Now, you can simply place your cursor to a property or class in your XAML within the code editor and hit F1 key to bring up the help content for that particular member. The same contextual help is also applicable to the selection in the property window and class view, thanks to the seamless integration with the Visual Studio’s help viewer library. 

I think it’s noteworthy to mention that all the topics in the ClientUI documentation have passed our rigorous three-level review: technical review, content and formatting review, and US English proof-read review. Of course, what’s matter the most in such a product documentation is always the content. The content of the ClientUI documentation itself is arranged in the way that lets you locate certain help content easily and intuitively. Let’s tour the documentation highlights.

Getting Started

This is the best place to get started with ClientUI. The topics are ranging from introduction, system requirements, development environment overview, and quick walkthroughs for beginners.

Application Development

Get enough with the introduction? Jump straight to the application development using ClientUI. This section includes several interesting topics that guide you to work with Visual Studio 2010 and Expression Blend 4, as well as describing the designer features supported in ClientUI.

ClientUI Fundamentals

The MVVM pattern, navigation framework and the load-on-demand composite application framework are three of the most interesting fundamental architecture in ClientUI – which are also the most frequently asked questions in our community forum since the RTM release two months ago. Satisfy your hunger on the architectural and fundamental topics – all centralized in this section from core application unity, to commanding concept, to drag and drop and user experiences, and more.

Licensing

Browse to this section when you’re ready to deploy your ClientUI-powered applications, or when you have other difficulties in the development licensing which is very unlikely.

Walkthroughs

And last but not least, here is the place where you can find all the walkthroughs and how-to topics you need to get up to speed with Silverlight and WPF development using ClientUI. Despite of the huge list in number, every walkthrough is written very thoroughly with step-by-step details, accompanied with screenshots and XAML examples so you would never get lost. You definitely have to read it to see the details yourself.

---

What’s Next

What makes us even busier in the past few months is that we are going to release our new support site with hundreds of fresh content (of course!) in just the next couple days. It will include dozens of new tutorial videos particularly for the Silverlight and WPF lineups. The new support site will also unveil our new online documentation browser that sports a blazing fast tree navigation with auto sync TOC, as well as featuring Windows 7-style address bar and on-the-fly searching. Sneak preview it in the following screenshot.

When the new support site is available, I will blog more details about the new resources that you can play immediately, as well as aggregating a high level overview of the ClientUI documentation for easy reference.

Again, click here to learn the enhancements and fixes implemented in WebUI Studio 2010 service pack 1, and here to download the latest product installer.

We hope you enjoyed the new release! Stay tuned for the next announcement.

All the best,
Jimmy

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.

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] + "<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.

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.

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