Tag Archives: Navigation Control

Crosslight Adds Stunning Drawer Navigation UI Components

It’s been really busy yet exciting time for all of us here at Intersoft. In just a few weeks time frame, we have recorded 9 new Crosslight video tutorials and publish all of them last week. At the same time, our engineering team is laser-focused in delivering new exciting updates across all product lineup. Today, we’re pleased to announce the first service pack of Premier Studio 2013 which is immediately available for download. Existing customers with active subscriptions can download the update from the account portal.

The service pack includes many important updates that you surely won’t miss. In particular, the new update includes full support for Visual Studio 2013. It also readies support for Microsoft’s latest browser, Internet Explorer 11. This is huge one – given that IE11 is completely redesigned for modern web standards and many proprietary API are no longer existed. The good news is we make it just in timely fashion. All 40+ ASP.NET components with over thousands of features have been enhanced and revived – each tested to work flawlessly in this latest browser. Go ahead and download the latest release to add IE11 support to your WebUI Studio-powered apps.

In addition to huge updates on ASP.NET, we also delivered significant improvements to our flagship cross-platform mobile toolset, Crosslight. There have been a lot of new features and addition to Crosslight since its update on iOS 7 support last month. Specifically, we’ve added a new, stunning drawer navigation for both iOS and Android platforms which lets you easily add Facebook or Path style navigation menu to your Crosslight apps. I’ll dedicate this blog post to discuss about this exciting component, share its key features and quickly brief what you can do with it.

Drawer Navigation Done Right

Many drawer navigation implementation I’ve seen were implemented in such a way where the view and content are tightly coupled, for instance, the drawer content should be a table controller in order for the drawer navigation component to work. Although the tight coupling between the view and interaction may sound common in this case, it creates a number of drawbacks and limitations to the way the component is used. Put simply, you cannot use any arbitrary content to the drawer which actually defeats the purpose of a content control.

When we designed our drawer navigation component from the ground up, we were strongly focused in the view architecture to make sure it is built right from the start. As the results, the Crosslight drawer navigation conforms to the industry-standards content control which allows developers to put any arbitrary content in the drawer while seamlessly automating all navigation processes to the view’s delegate. This is made possible thanks to the thoughtfully designed architecture that emphasize pure separation between the view and the user interaction. Crosslight was built right since the beginning, which enables future components (drawer navigation in this case as the proof) to leverage the same design pattern and get everything working seamlessly – without changes to the existing codebase.

To show you how easy and straightforward it is to change a standard table view navigation into a drawer navigation, let’s take the original Data Samples that shipped with Crosslight and transform it to a stunning drawer navigation.

First, create a new ViewModel based on the DrawerViewModelBase class – new in this release. Let’s name it DrawerViewModel.

    public class DrawerViewModel : DrawerViewModelBase
    {
        public DrawerViewModel()
        {
            this.LeftViewModel = new NavigationViewModel();
            this.CenterViewModel = new SimpleListViewModel();

            this.Open(DrawerSide.Left);
        }
    }

Then change the root view model of the app to the drawer view model that we just created. Generally, you set the root view model in the OnStart method of the application service

    public sealed class DataSamplesAppService : ApplicationServiceBase
    {         
        protected override void OnStart(StartParameter parameter) { base.OnStart(parameter); this.SetRootViewModel<DrawerViewWodel>();         } }

Finally, on the iOS project, simply add a new view controller class that derives from UIDrawerNavigationController generic class which is new in this release. Unless you’re doing extra customization to the drawer, you can leave the class empty without any single code within.

    [Register("DrawerNavigationController")]
    public class DrawerNavigationController : UIDrawerNavigationController<DrawerViewModel>
    {
    }

Similarly, add a new class to the Android project which derives from the DrawerActivity class. Remember to specify the drawer view model that we’ve just added earlier as the generic type parameter of the class.

    [Activity(Label = "Drawer Activity")]
    public class DrawerNavigationActivity : DrawerActivity<DrawerViewModel>
    {
    }

Run the project – and you’ll see the classic table navigation now magically turn into a stunning drawer navigation interface – complete with the touch gestures, close on navigate, and automatic navigation bar synchronization, all done right.

Crosslight Drawer Navigation

Incredibly easy, isn’t it? More importantly, you can reuse existing ViewModel as the content for either left or right drawer by specifying them in the DrawerViewModel. In case you would like to change back to the previous table navigation, you simply change the root ViewModel back to NavigationViewModel – and everything on the UI side reflects automatically.

How’s that possible – you might asked. The answer lies in the architecture design that carefully separates the user interaction out from the view. In this scenario, the master and detail view are actually two separate objects which is controlled by user interaction logic, in this case, the navigation logic. Since the navigation logic is implemented in a different layer, this allows us to tear these views apart and put them side by side without requiring code changes on the application’s end. The following illustration gives you a better visualization to understand how we built Crosslight to be a truly extensible, future-proof framework.

Drawer navigation done right

All The Great Features You’ve Ever Wanted

So that now you’ve got a handsome drawer navigation UI ready to be plugged into your next-gen mobile apps, let’s explore what you can do to make it looks and feels the way you desire. Note that the drawer navigation component is available for both iOS and Android platforms – both designed with the native UI guidelines.

Flexible one or two-sided drawer

Crosslight drawer navigation supports various drawer interface found in many popular apps today. You can choose one-sided drawer – where the drawer is either at the left or right side of the content; or two-sided drawer which are trending in recent apps such as Path, Worthy, and more.

The following illustration shows the left-side and right-side drawer navigation in iOS.

iOS Drawer Navigation

And the Android counterpart below.

Android Drawer Navigation

Keep in mind that although the drawer interface is designed according to the respective platform guidelines, the drawer view model and user interaction logic are entirely platform neutral which is defined in the shared application layer (portable project). As the results, when you modified the properties of drawer view model for example, the same app on both platforms will naturally reflect the changes.

Intuitive design based on platform’s native UI guidelines

In the iOS platform, the UIDrawerNavigationController class features dozens of drawer-related settings that you can easily customize through a single property set. One noteworthy feature is the status bar transition particularly useful in iOS 7 apps. We provided not only one status bar transition mode, but three. The first is the Facebook-style status bar transition where it smoothly fades from the original color to black. The second is the fading from any arbitrary custom color. The most interesting is perhaps the third one, translucent blur transition, where the status bar is smoothly faded with stunning translucent blur effect.

Crosslight drawer navigation features stunning status bar transition

Another noteworthy feature is the panoramic background image feature which lets you easily add beautiful photo to the drawer navigation control. Amaze your users with the combination of iOS7-style frosted-blur visual effect in the content view – creating sense of depth and great user experiences to your apps.

Background image with translucent blur drawer navigation

Other drawer settings on iOS that you might want to explore are drawer width, various shadow settings, fading animation, flick velocity, navigation bar tint color, status bar colors, status bar content styles, landscape background image, and much more.

The Android version has fewer customizable settings compared to iOS, although certain essential settings are must-have such as the background color, drawer width, and more.

5 Drawer Samples Included

Along with the service pack release, we’ve also updated Mobile Studio installer for both Windows and Mac with the latest Crosslight assemblies. The installers also include five new drawer samples that you can refer to learn more about the drawer navigation features. Or better, use it to quickly jump start your next mobile apps.

The included drawer samples are: Drawer Data Samples, Simple Drawer Style, Facebook Drawer Style, Translucent Drawer Style, and Two-sided Drawer Style.

Login to your account, download the new bits and test drive the new drawer UI components today.

What’s Next

In this blog post, I’ve covered the basics of our new drawer navigation UI components, how it’s designed and what features you can bring to your apps. In this milestone, you can now easily create great mobile apps for your business featuring great user experiences such as those popular apps in the store.

But, we still have a lot more to cover. In the upcoming 2013 R2 release, we’re planning to ship Crosslight vNext which will include a multitude of new cross-platform components and data services that will forever change the way you build data-intensive, enterprise-grade mobile apps. Stay tuned for our next announcement!

Best,
Jimmy

Using WebListBox in Line-of-business Scenarios

WebListBox is one of the controls included in WebEssentials collection. To learn more about WebEssentials, you can read this post or visit WebEssentials product information here.

As explained in the previous post, WebListBox can be used as input control and navigation control. In this post, I will discuss two of the most common line-of-business (LoB) scenarios where WebListBox can be useful.

Using WebListBox as Input Control

Let’s say you have an employee form where employees can choose their origin country in a list box. Of course, you can always use .NET ListBox to list all of the country options in the employee form, such as shown in the following screenshot.

With WebListBox, you can display the countries in more compelling presentation. For instance, it would be nice to have the country’s flag image in addition to the text.

Let’s start with the data binding and see how easy it is to bind an XML data to a WebListBox. Consider you have a Country data in XML, such as shown below.

<Countries>
  . . .
  <Country Id="49" Name="United Kingdom" Image="UnitedKingdom.png">
  </Country>
  <Country Id="50" Name="United States" Image="UnitedStates.png">
  </Country>
</Countries>

Similar to .NET ListBox, you can declaratively bind an XML data source to WebListBox using DataSourceID property. You can also specify the data member properties such as text and value data member. Unlike .NET ListBox, WebListBox provides more data member properties, such as NameFieldDataMember, TextFieldDataMember, ValueFieldDataMember, and ImageFieldDataMember. You can set these properties to the related attribute member in the XML data, for example, set TextFieldDataMember property to Name which will bind the text of each item in WebListBox to the Name attribute in the XML data. You can also set the ImageFieldFormatString property to specify the image folder path of the image field, e.g.: ./images/{0}.

The following code shows how to bind WebListBox to XMLDataSource and use the provided data member properties such as ImageFieldFormatString for easy data binding.

<ISWebEssentials:WebListBox ID="wlbCountry" runat="server" DataSourceID="XmlDataSource1"
     DefaultStyleMode="Minimalist" Height="200px" ImageFieldDataMember="Image"
     ImageFieldFormatString="./images/{0}" NameFieldDataMember="Id" TextFieldDataMember="Name"
     ValueFieldDataMember="Id" Width="150px">
     <LayoutSettings DisplayMode="TextAndImage" ImageSize="25, 15" ItemHeight="25" 
     ScrollMode="ScrollBar" />
</ISWebEssentials:WebListBox>

To show the text and image in WebListBox’s item, you can set DisplayMode property to TextAndImage. You can also specify the size of the image using ImageSize property. The following screenshot shows the result of the above WebListBox configuration. Compared to .NET ListBox in the earlier screenshot, the following employee form using WebListBox looks more intuitive and compelling.

Note that you can navigate through the country options using up and down arrow keys when the EnableKeyboardSupport property of the WebListBox is enabled.

Using WebListBox as Navigation Control

In addition to using WebListBox as input control, you can also use WebListBox as navigation control since it has been enhanced to include navigation functionality. When WebListBox is used as navigation control and users select an item in WebListBox, he will be redirected to a specific URL based on the item’s TargetURL property value.

In this post, I will show you how to use WebListBox as a navigation control in a travel agent website where users can browse and navigate through a list of hotels.

Consider the following XML data as the data source. It contains the name, image, and website URL of each hotel. You can bind this data to WebListBox using the data binding related properties, like described in the above Employee Form scenario.

<Hotels>
   <Hotel Id="1" Name="Oberoi Vanyavilas" Image="oberoi-vanyavilas.jpg" URL="http://www.oberoihotels.com/">
   </Hotel>
   <Hotel Id="2" Name="Triple Creek Ranch" Image="triple-creek-ss.jpg" URL="http://www.triplecreekranch.com/">
   </Hotel>
   . . .
</Hotels>

Besides the NameFieldDataMember, TextFieldDataMember, ValueFieldDataMember, and ImageFieldDataMember properties, you can also specify the TargetURLFieldDataMember property to indicate the field data member used as target URL of each item.

In the above XML data structure, the URL attribute specifies the website URL for each hotel. You can set the URL as the value of TargetURLFieldDataMember property. In addition, you also need to specify the TargetWindow property. When users click on an item in WebListBox, the target URL of the item will be opened in the target window, which is specified in TargetWindow property. The complete WebListBox configuration can be seen in the following code.

<ISWebEssentials:WebListBox ID="WebListBox1" runat="server" Height="99%" Width="100px"
     DefaultStyleMode="Natural" EnableKeyboardSupport="true" DataSourceID="XmlDataSource1"
     TextFieldDataMember="Name" ImageFieldDataMember="Image" ImageFieldFormatString="./images/{0}"
     ValueFieldDataMember="Id" NameFieldDataMember="Id" TargetURLFieldDataMember="URL" SelectedIndex="0">
     <LayoutSettings ItemHeight="80" ScrollMode="Scroller" DisplayActiveItemIndicator="true"
     TargetWindow="paneContent" DisplayMode="TextAndImage" ImagePosition="AboveText" ItemAlignment="Center" />
</ISWebEssentials:WebListBox>

To adjust the WebListBox layout with its navigation functionality, you can set several properties in LayoutSettings group, such as DisplayMode, ImagePosition, ItemAlignment, ItemHeight, and ScrollMode property.

WebListBox also includes a unique feature that shows a callout-style indicator to mark the active item, which is particularly useful in navigation scenario. To enable this feature, you set the DisplayActiveItemIndicator property of the WebListBox to True.

The following screenshot illustrates the result of the WebListBox as described in the above code.

When users select one of the hotels in the left pane, the navigation process will be invoked and the related URL will be displayed in the right pane. You don’t need to add any script or server side code, because the navigation process is handled by WebListBox automatically.

Conclusion

In this post, you have learned how to implement two of the most common LoB scenarios using WebListBox. The first is to use WebListBox as input control, and the other as navigation control. You can download the samples here, or click here to play with WebListBox samples from online demos.

For more information about WebListBox and its features, please visit WebListBox product page. If you have further questions or feedback, feel free to post them in Intersoft community forum.

Cheers,

Erika

WebListBox. A List Box with Hybrid Functionalities.

List box is perhaps one of the most popular and most used user interface element next to textbox and button in any user input scenarios. Along with the fast growing need for richer and more intuitive applications, developers have been reinventing the wheel trying to create and incorporate a better list box control to their apps.

Seeing this great need and opportunity, we at Intersoft began to research for the best concept which extends far beyond to those available and widely used now days. Put it simple. We promise you a list box control that is easy-to-use, powerful in features, rendered reliably in various browsers, plus its comprehensive set of client-side and server-side events and APIs bring a new level in web programming.

Data Entry Control

Intersoft’s WebListBox is designed to cater the need for an all-around list box control coping diverse data entry needs, for example: in a form which requires list box item with image or the ability to select more than one item.

Essential Customization

Let’s start with the basic. WebListBox provides additional setting for adding an image to each item. You can display text, text and image, or image only. Additional setting related is the image positioning. When using the text and image mode, you can change the image position relative to the text, for example: above or below the text and after or before the text.

All of the above settings can be made under LayoutSettings group property for global application. Or, you can use individual item’s properties for more personalized setting.

Scroll Mode

Scroll mode is provided to anticipate having many items in WebListBox exceeding the container’s height. The common practice is to use scrollbar. WebListBox offers several scroll options, ScrollBar, Scroller, or None.


As the name implies, ScrollBar mode uses the default browser’s scroll bar. Users can simply move the scroll bar to see the hidden items. One that worth mentioning is that the ScrollBar is also styled according to the selected predefined styles. This gives a more polished and uniformed look on WebListBox.

Instead of using scroll bar, Scroller mode adds up and down buttons located on the top and bottom of the control. Users only need to stop the mouse cursor on top of it and it will start scrolling immediately. This option is fancy, but the usability in a WebListBox with many items isn’t very effective.

The None option simply disable the scrolling feature and prevent users from seeing any hidden items.

Selection Mode

The result of user’s interaction with any list box controls is selection. WebListBox provides two selection modes, single and multiple, configurable through a property set. When multiple selections feature is enabled, users can use the CTRL or SHIFT key to select more than one item. Or, simply click and drag the mouse. As the mouse touches the bottom or the top most part of the control, the item will be scrolled and selected immediately.

Data binding Support

Its comprehensive data binding capability unlocks more possibility for you to deliver a sophisticated list box control targeting enterprise applications by connecting your existing data to WebListBox by simply assigning the data source ID. Supporting dozens of datasource controls, WebListBox’s user friendly Component Designer 2 lets you access all data binding properties.

WebListBox also support unbound mode, which basically allows you to add items manually.

The Smart Navigator

List box as a navigation control may sound uncommon, yet we manage to fit it quite nicely in our upcoming Support Site 2010.

When a list box item is clicked, the page will be loaded on the right IFrame. You can specify the target in TargetWindow property for global application or [Item] >> TargetWindow for individual customization. Use the TargetURL property to specify the URL.

Additional visual hint feature, called active item indicator, provides users a quick glance on the control and spot the active item instantly. Ultimately, WebListBox enhances navigation experiences with both visually appealing design and intuitive interfaces that meet industry’s usability standards.

Summary

With all the bells and whistles, WebListBox is a full-fledge control that packs innovative features, pleasant visual interface, and a developer-friendly designer window, that no similar solution can barely touch. It will surely satisfy most developers’ need and goes along very well with most business Web-applications.

Stay tuned for more as we will update you with the latest and hottest news directly from the development kitchen.