Tag Archives: Web 2.0 Controls

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

Advertisements

WebEssentials, A Better Visual Presentation.

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

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

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

From Regular to Spectacular

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

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

Customer Address Locator with Google Maps

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

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

New Photo Session Registration

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

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

Online Product Satisfaction Survey

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

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

Online Resume Creation

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

Online Resume Creation

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

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

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

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

Introducing WebEssentials. Coming Soon in WebUI Studio for ASP.NET 2010.

Ever since Web 2.0 concept emerges years ago, it has revolutionized the way people interact with Web. Now, sites like social bookmarking, wikis, and social networking, are among the top visited sites in most countries.

WebEssentials is introduced as a frontal response to cover the huge demand for building an interactive Web 2.0 site easily.  7 controls are introduced in its prime release, ranging from slider, rating, to expander.

WebSlider

Slider control is highly popular in Web 2.0 sites for selecting a finite range or a specific number due to its higher accuracy than a regular blank text box. Coined from this simple perspective, WebSlider combines the essential sliders capabilities with innovative features.
WebSlider

This versatile slider offers tons of customization. You can tweak the slider orientation and direction, customize the item alignment, predefined your own item, and many more.

It also features a ranged selection with two handles. A simple scenario that describes the functionality the most is a Job Search Form, where users are offered with multiple fields and a slider to select the salary range.

WebSlider

WebCalendar

Most commonly found in a blog site, a calendar lets you jump to a date and the page is usually refreshed coincide with the selected date or in an online ticket or hotel room reservation application. Built around this concept, the objective of WebCalendar is to provide the easiest date navigation or hassle-free date selection experience.

As a navigation control, WebCalendar provides several view modes. Users can switch to Year, Quarter, or Month view by clicking on the header.

It also provides extensive holiday support that you can define via the control’s Component Designer.

Taken the above plane ticket reservation scenario, most sites use two separated calendars. WebCalendar does it more elegantly with multiple calendars display and multiple selections using keyboard and mouse support.

Simply click and drag your mouse in a WebCalendar or across WebCalendars. Or, use the keyboard and mouse combo support for making multiple date range selections.

You can also leverage the multiple WebCalendars mode to display 12 months. A simple scenario which requires this capability is a corporate calendar, complete with public and corporate holidays.

WebAccordion

Accordion is generally used by websites to display multiple links in limited screen estate, by expanding or collapsing a section (or an accordion item). You can define the content directly, or assigned it to a specific page using IFrame mode. This unlocks the possibility to use WebAccordion in more advanced scenario, for example: building a form filling Web app with collapsible sections to save the screen estate.

Various tweaking and configurations are available. You can set the orientation and direction, interaction mode, layout customization, client-side events and APIs, and many more.

WebRating

WebRating enables you to integrate a comprehensive rating system to your wiki, blog, or forum. Similar to other WebEssential lineups, you can manually configure the direction and orientation, layout, total number of stars, and more.

One of the most unique features is the precise selection mode. If a user selects 1/8th of the star, instead of selecting the whole, it will only select 1/8th. This feature is particularly useful for in a product review scenario for showing the overall score of a product.

With built-in flypostback (AJAX) and full postback capabilities, WebRating enables you to capture the selected rating for server-side processing.

WebExpander

WebExpander is basically a collection of collapsible panels with two types of expand modes. Adopting tab interface concept, the fixed mode only allows one item to be expanded at a time. The flow mode is more unique with its multiple expanded items in a time.

The full Visual Studio IDE integration enables you to fill in the content easily. You can use either the inline content mode or iFrame mode.

WebProgressBar

AJAX technology helps you deliver rich and interactive Web application with its partial page refresh concept. However, in certain scenarios, it can be confusing for users. A clear example is an airline reservation app. When the selected data is sent to server for processing, the page just stays as it is. With a WebProgressBar instance on that page, users will be able to see the progress of the booking process.

You can freely customize the orientation and the progress direction. The built-in AJAX and FullPostBack actions lets you take full control while WebProgressBar is running or after it reaches 100%.

WebListBox

As an input control, WebListBox offers many exciting features, such as the ability to select multiple items using keyboard and mouse. Either you use the CTRL or SHIFT and mouse click combo, or simply drag your mouse cursor to select a range. It also provides the ability to obtain the selected value or set the value from server-side.

Apart from its capability as an input control, WebListBox can be used as a navigation control. You can use text and image on the list box item and customize the styles on each item. Set the NavigateUrl property to your desired link and TargetUrl property to the target frame.

WebSlidingMenu

WebSlidingMenu offers a hierarchical navigational concept in drill-down mode. As a navigation control, WebSlidingMenu is perfectly suitable for a complex structured navigation as it allows users to drill-down to a specific menu and navigate to the specific item instantly.

The built-in Load-on-Demand mechanism ensures that all items are loaded swiftly regardless of the structure complexity and total number of items. It also enables you to connect to your XML document through XmlDataSource.

As other WebEssentials family, WebSlidingMenu provides countless customizations through the available properties, APIs, and client-side events. The content template feature gives you the power to develop your custom content more easily than you can imagine.

Regards,
Jemmy.