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

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.

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.

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

Flashing back several months ago when I posted a depth details on MVVM and Silverlight, I have described how simple and easy it was to build a rich contacts application using ClientUI controls with pure MVVM pattern. Since then, the contacts sample has become one of the most popular examples that helps developers learn about MVVM pattern, commanding, and write better XAML that supports unified development model. You can see the contacts sample online here, or open the Visual Studio 2010 solution available from your local ClientUI installation.

The contacts sample project was originally designed using non-persisting model classes that loads up data from an XML data source. It’s made that simple and remain unchanged in the RTM to keep the code focused on the MVVM implementation. In this blog post, I decided to revisit this nice contacts application and take it to the next level by extending it with full-blown database connectivity and solid persistence layer.

ClientUI Meets DevForce

The contacts application shows a number of interesting implementation – such as commanding, input binding, key binding, and how the entire presentation controls can be elegantly connected to the entity through MVVM pattern – which are also the main reasons why it’s chosen for our joint case study with IdeaBlade, the maker of DevForce.

In case you haven’t aware, DevForce is a powerful ORM solution that thoughtfully designed to cover many of the lacking data access layer in the Silverlight and WCF RIA Services. Furthermore, DevForce uniquely supports WPF using the same codebase – which simply makes it the perfect match for ClientUI as the ClientUI controls already support WPF out-of-the-box. To learn more about DevForce, please visit their website here.

The outcome is incredible – you can now create rich client applications that target both Silverlight and WPF using the same presentation controls and now the same persistence and data access layer. The capability to write once and reuse is really something exciting for the multi-platform development as we received tremendous requests from our customers asking about the best practice in leveraging the MVVM pattern and unified development model in real-world apps. For developers, that all comes down to this simple line: more maintainable code, better scalability, and significantly accelerated development process.

Using DevForce as Persistence Layer and Data Programmability Services

We’ve been working closely with IdeaBlade team in the past few weeks and managed to put together a comprehensive case study that demonstrates how to implement DevForce as the persistence layer for the contacts application, as well as showing a host of interesting line-of-business scenarios including retrieving data from the database, performing update and delete asynchronously, and validating input.

The joint case study also shows some of the DevForce’s advanced features that are really helpful to solve real-world development challenges and business scenarios such as support for complex type (which RIA Services completely lacking of), and support for persistence layer in both design-time and runtime through a combination of several design patterns such as repository and entity manager factory design pattern.

The following illustration shows the design-time entity manager factory and the contact editing dialog box which is bound to the same view models used in runtime/production.

On the other hand, many of the user interface and usability aspects have been further enhanced and polished to reflect the scenarios in the real-world data-aware application. For instance, the page now shows busy indicator when the data is being loaded by DevForce, the editing form now closes the window automatically after the data is saved successfully by DevForce. Please note that all DevForce’s data operations are executed in the view model, while the interaction with the view is elegantly done through data binding to the ClientUI controls.

See the following shot for the busy indicator enhancement for the contacts sample.

Notice that the commands (such as those in toolbar) are automatically disabled when the page is busy, and enabled again when the operation completes. For more information on user experience features implemented in ClientUI, see User Experiences Overview.

Silverlight and WPF – Truly One Codebase

A few vendors out there stated they supported one XAML codebase for Silverlight and WPF development. This turns out to be true – but only up to the control/component level. When it comes to the XAML for the application-specific and framework markups, particularly those missing in Silverlight such as commanding, gestures and binding (as well as certain MVVM aspects such as delegates and command references), those tools came out failed. The workarounds? An old, classy answer – make two separate version for the views layer.

We are thrilled to share our new findings – ClientUI turns out to be, so far, the only presentation toolkit that allows you to build applications that run flawlessly in Silverlight and WPF with identical XAML and codebase. More than just control level XAML unification, ClientUI also unifies many of the framework and application-specific API – from the command bindings, input bindings, MVVM, to drag-drop framework and data binding markup. To learn more, see Unified Development Model.

Even better, you can now add persistence layer and remote data connectivity to your application using the same bits, and still run flawlessly in both Silverlight and WPF. Credits goes to DevForce which, similar to ClientUI, was thoughtfully architected to support data programmability in both client platforms. The following screenshot compares the code and designer of both Silverlight and WPF solution side-by-side.

Get ready to dive deeper?

Download the enhanced contacts sample application and play it around for yourself. Both Silverlight and WPF solutions are included. Make sure you check out the walkthrough article (ClientUI_DevForceIntegration.pdf) once you extracted out the files from the zip package, or click here to read it online.

Ward Bell of IdeaBlade shares his thought about the joint case study – read his blog post here.

I hope you enjoyed the enhanced, DevForce-integrated contacts sample. For any questions and feedback on the sample, please post to ClientUI forum.

What’s Next

The previously MVVM-only contacts sample is now a fully database-connected application in just a few days implementation, thanks to the DevForce’s powerful library and easy-to-use designer integration. In this first part of multi-series joint solutions, you have learned how to create a rich contacts application using ClientUI controls, MVVM, commanding and DevForce together as one ubiquitous solution for the Silverlight and WPF development platform. In the project sample, you can find a completely working solution that demonstrates a full-fledged contact application that retrieves data from SQL, perform insert, update and delete, and validate data input – all elegantly designed with best practices and solid design patterns.

In the next series, we will make available more joint solutions with more interesting scenarios geared toward business applications such as client-side caching and offline scenarios, batch update with transactions, complex projection and advanced client-side LINQ, and more. Stay tuned…

Best,
Jimmy
Chief Software Architect

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.
  

  <ISWebEssentials:WebExpanderItem Name="WebExpander1_item0" 
      State="Expanded">
      <headertemplate>
          <div style="margin-left: 10px; padding-top: 12px;
              font-family: Segoe UI;">
          <div style="background-repeat: no-repeat;
              background-position: left center;
              height: 50px; padding-left: 50px; font-size: 12px;
              background-image: url('images/photo1.png');">
              <div style="line-height: 80px; font-size: 12px;
                  font-weight: bold;
                  line-height: 80px;">
                  Patrice Johnson</div></div>
          <div style="height: 18px; line-height: 18px;
              padding-top: 2px; font-size: 11px;">
              191 North Cowley Drive</div>
          </div>
      </headertemplate>
      <contenttemplate>
          <div id="canvas_map_0" style="width: 623px;
              height: 483px;">
              <div style="text-align: center;
                  padding-top: 240px;">
                  Loading Map ...</div>
          </div>
      </contenttemplate>
  </ISWebEssentials:WebExpanderItem>

  
  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

Although the documentation has been neatly organized based on the topic category, locating a certain topic may take sometime due to the comprehensiveness of the documentation. In this blog post, I’m going to outline some of the topics that I think interesting for both beginners and advanced Silverlight and WPF developers. Let’s get it started.

Introduction to ClientUI

Learn the basic concepts and the philosophy behind the ClientUI architecture, such as the comprehensive application framework in addition to the rich controls. Also learn about unified development model in ClientUI which enables you to develop solutions for both Silverlight and WPF using both shared XAML and API.

• ClientUI Multi-series Blogs
• Introduction to ClientUI
• Unified Development Model
• ClientUI Architecture Overview
• System Requirements
• Supported Development Environment

Getting Started Walkthroughs

Jump start your Silverlight and WPF projects using the installed ClientUI templates. Also learn how to create basic applications using ClientUI controls with MVVM pattern.

• Walkthrough: Create New Silverlight Project from Project Templates
• Walkthrough: Create New WPF Project from Project Templates
• Walkthrough: Create Your First ClientUI Application
• Walkthrough: Create Your First ClientUI Application using MVVM Pattern
• Walkthrough: Create Basic Website Navigation Application
• Walkthrough: Create Basic Navigation Application using MVVM Pattern
• Walkthrough: Create Line-of-Business Navigation Application using MVVM Pattern
• Walkthrough: Create Rich Application using Windowing and MVVM Pattern

Getting Started Videos

Preferred to watch the walkthrough videos with voice narration instead of reading text? Then check out the getting started videos below. Notice that several MVVM walkthroughs are divided into multi-series videos, so that you can skip the earlier series if you already familiar with it.

• Create Your First ClientUI Application
• Create Your First ClientUI Application Using MVVM Pattern – Part I – Preparing Project
• Create Your First ClientUI Application Using MVVM Pattern – Part II – Implementation
• Create Basic Website Navigation Application
• Create Basic Navigation Application Using MVVM Pattern – Part I – Preparing Project
• Create Basic Navigation Application Using MVVM Pattern – Part II – Implementation
• Create Line-of-Business Navigation Application using MVVM Pattern – Part I – Preparing Project
• Create Line-of-Business Navigation Application using MVVM Pattern – Part II – Implementing Model and Views
• Create Line-of-Business Navigation Application using MVVM Pattern – Part III – Implementing View Model and Binding
• Create Rich Application using Windowing and MVVM Pattern – Part I – Preparing Project
• Create Rich Application using Windowing and MVVM Pattern – Part II – Implementation

Commanding and MVVM Pattern

All you need to know about commanding and MVVM pattern in one place. Learn the basics of commanding and why you should use commanding in your application. Also learn the fundamentals of MVVM pattern with illustrated charts followed with a host of MVVM examples.

• Commanding Overview
• Hybrid Commands
• Walkthrough: Create Consistent UI for Rich Text Editor using Routed Command
• Walkthrough: Create Windows 7 Explorer UI using Hybrid Command
• Walkthrough: Change Data Source from ViewModel using DelegateCommand
• Commanding How-to Topics
• MVVM Pattern Overview
• Advanced MVVM
• Walkthrough: Use Command Binding and Key Binding with MVVM Pattern
• Walkthrough: Create Contact Editing Form using MVVM Pattern
• More MVVM Pattern Walkthroughs
• MVVM Pattern How-to Topics

Navigation Framework

In my previous ClientUI blog on navigation, I have described the outlines of the ClientUI navigation features such as the child navigation, role-based security and more. Many of these navigation features are discussed more deeply in the conceptual topics, walkthroughs and how-to topics listed below. Learn the supported navigation topologies, navigation hosts and navigation source support, navigation events and lifetime, and learn how to use navigation commands and more.

• Navigation Overview
• Advanced Features in ClientUI Navigation Framework
• Walkthrough: Create Simple Website Navigation Using Frame, Navigation Button and Hyperlink
• Walkthrough: Customize Visual Effect for Page Transitions
• Walkthrough: Configure Nested Navigation Frame to Support Browser-Journal Integration
• Walkthrough: Enable Authentication and Role-based Security to a Page using WCF Authentication Service
• Walkthrough: Edit the Navigation Button Template in Blend Designer
• Navigation How-to Topics

Application Framework

In the part 1 of my ClientUI blogs, I have touched the surface of the application framework in ClientUI. The most recent version of the ClientUI documentation now covers the basic concepts and architecture of the application framework, illustrated with many nice graphics and class diagrams. Learn how to easily write composite application for Silverlight and WPF in XAML declarative manner – without have to deal with MEF or tons of code. Also learn the best practice to partition your applications into smaller shareable modules for best performance, something not available in Silverlight or other solutions.

• Application Framework Overview
• ClientUI Application Services
• How-to: Implement IShellManager to Handle Application-wide Events
• How-to: Save and Load an Application-specific Settings
• How-to: Navigate to a Page in External ApplicationPackage with Direct URI
• How-to: Navigate to a Page in External ApplicationPackage with Shell Integration
• How-to: Map an ApplicationPackage to a Virtual URI for User-friendly Navigation
• How-to: Launch a Window in External ApplicationPackage

Drag-drop Framework

In several of my previous blog posts, I have outlined that many of the UI controls in ClientUI support fluid drag-drop and animation. Many of these stunning drag-drop effects are actually powered by the drag-drop framework available in the core of the ClientUI architecture itself. Learn how to take advantage of the powerful ClientUI drag-drop framework in your application. And if you haven’t aware, our drag-drop framework supports unified API between Silverlight and WPF where it supports data objects, visual hints, and we even bring the WPF-style DoDragDrop API down to Silverlight. Too good to be true? Check the topics below.

• Drag-drop Framework Overview
• Walkthrough: Enable Simple Drag Drop between Two Visual Elements
• Walkthrough: Customize Shadow Element during Drag Event
• Walkthrough: Perform Copy Operation during Drop Event
• Walkthrough: Customize Drag-able Area using DragDropPoint
• Walkthrough: Perform Drag-drop using API
• How-to: Drag an UIElement using API
• How-to: Store Data Object at Drag Init Event
• How-to: Enable Drag Drop to Standard ListBox using UXPanel
• Drag-drop Framework How-to Topics

Windowing Framework and User Experiences

In the part 7 of my ClientUI blogs, I have outlined many of the key features related to the windowing, dialog boxes, and desktop-style application development in ClientUI. Since then, we have made available a host of new walkthroughs and conceptual topics arranged in better flow – discussing from the windowing fundamentals then down to the implementation and examples. Also learn how to integrate the desktop to task bar, open a new window using command, and perform advanced operations related to the task bar and the desktop.

• Window and Dialog Boxes Overview
• Advanced Window Features
• User Experiences Overview
• Walkthrough: Create Rich Application using Windowing and MVVM Pattern
• Walkthrough: Add New Item such as Page, Dialog Box and Window
• Walkthrough: Create Windows 7 Explorer UI using Hybrid Command
• Walkthrough: Create Contact Editing Form using MVVM Pattern
• Walkthrough: Style a Window in Blend Designer
• Window and Dialog Boxes How-to Topics

ClientUI Control Library

With thoughtfully designed architecture from the ground up, plus 180+ controls for both Silverlight and WPF, ClientUI takes the rich UI development to a whole new level blowing off the competition few milestones away. So what does this all mean to developers? It could be a lot of things, from increased productivity to added new value to killer next-generation apps and more. The most important thing is that you get the tools right in your toolbox anywhere and anytime you need it. Forget about spending time looking for plumbing code just to make MVVM work, or other unproven workarounds.

• Button Controls Overview
• Content Controls Overview
• UI Controls Overview
• Input Controls Overview
• Layout Panels Overview
• Navigation Controls Overview
• Windowing Controls Overview
• Toolbar and Menu Controls Overview
• Advanced Content Controls Overview
• Multimedia Controls Overview
• Dock Controls Overview

More on ClientUI Fundamentals

Still looking to learn ClientUI architecture in even more details? Then please head straight to ClientUI Fundamentals.

All the best,
Jimmy

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. 
  

  <ISWebEssentials:WebProgressBar ID="ProgressBar1" runat="server"
  
  Mode="Determinate" Value="1" MaxValue="4" DefaultStyleMode="Default">
  
  </ISWebEssentials:WebProgressBar>

• 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

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

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

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

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. 
  1. 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;   }
     }

  2. 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)");
         }
       }
     }

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