Based on your valuable feedbacks, we’ve compiled a list of Crosslight essential walkthroughs that will help you get started with Crosslight in no time. These topics cover a wide range of development scenarios, such as creating your first Crosslight app from a Xamarin template, performing navigation from the ViewModel, executing commands, and much more. This blog post aims to give you a rough overview on each walkthrough has to offer.

You can find these walkthroughs under Getting Started with Crosslight section in the Developer Center. Without further ado, let’s get started.

Introduction to Crosslight NuGet Packages

Starting from Crosslight 5, all Crosslight dependencies are now streamlined to NuGet package manager for a more streamlined dependency management and allows for more timely Crosslight updates and hotfixes.

Now you no longer have to deal with tedious references when working with Crosslight. This guide provides a comprehensive overview on how to work with the NuGet packages on both Xamarin Studio Mac as well as Visual Studio Windows, such as installing, updating and restoring NuGet packages.

Working with Crosslight NuGet Packages

Similar to the previous guide, this walkthrough provides a more hands-on approach to working with NuGet packages with step-by-step guidances and rich visual walkthrough.

Creating Your First Crosslight App

This guide will walk you through the process of converting a simple Xamarin template that uses shared PCL project and transform it into a working Crosslight project.

It is highly recommended to follow this walkthrough if you’re coming from a Xamarin background. After you’ve finished this project, you’ll get a rough idea of how Crosslight works and its excellent design pattern.

Creating New Project with Crosslight Project Wizard

If you’re using Visual Studio for mobile development, then this guide will help you create your first Crosslight app in no time with the Crosslight Project Wizard.

With Crosslight Project Wizard, you can easily create various quick-start projects easily such as the Blank template, Master-Detail template, Navigation Drawer template, Business template, Localizable Business template as well as the Multi-Page template.

Creating a Simple Tip Calculator

Once you’ve finished creating a starter Crosslight app, it’s best to start working with simplest data binding capabilities available in Crosslight, and there’s no better app to learn it from other than building a simple tip calculator.

This simple app will help you understanding how to perform a centralized data binding in the PCL project, and process your app’s business processes from the ViewModel, making it more centralized than ever.

Performing Navigation

In this guide, you’ll learn how to perform various screen navigation by utilizing Crosslight’s built-in navigation service, which will be invoked directly from the ViewModel. This is one of the essential knowledge needed to build a mobile app with Crosslight.

You’ll also learn how to perform various types of navigation, such as push navigation, modal navigation, push navigation and modal navigation with parameters, modal navigation with callback, and navigating to a new ViewModel with Identifier.

Executing Commands

This walkthrough will help you learn how to execute commands with parameters on buttons and bar items.

With Crosslight’s solid MVVM data binding, you’ll learn how to update a button’s state with a flick of a switch, which will update the invalidate the CanExecute state of all commands.

Getting Started with MVVM Data Binding

In this tutorial, you’re going to learn how to perform simple data binding, in MVVM-fashion with Crosslight, such as:

• Binding text to labels and text boxes
• Binding numeric values to slider, text boxes and stepper
• Binding boolean values to switch
• Binding DateTime values to DateTime picker
• Binding image to image view
• Binding simple list of data to a list

Showing Presenters

In this tutorial, you’re going to learn how to use Crosslight Presenters that are built-in to the Crosslight ViewModels, which consists of Action Presenter, Message Presenter, Toast Presenter, Dialog Presenter and Action Toast Presenter. 

These presenters will surely help you display actions and messages to your users without any further hassles.

Accessing Crosslight Mobile Services

Crosslight ViewModels comes with built-in mobile services that are very handy to achieve various native functions of the devices.

In this walkthrough, you’ll learn how to use the following mobile services:

• Browser Service
• Camera Service
• Contact Service
• Local Notification Service
• Location Service
• Mail Service
• Map Service
• Media Library Service
• Media Service
• Messaging Service
• Reachability Service
• Social Service
• Telephony Service

Getting Started with Crosslight Form Builder

When building enterprise mobile apps, you’ll inevitably come across mobile forms. Although it may look simple, building forms that works and render beautifully across platforms often requires tremendous efforts, especially ones that also includes client-side validation support.

Crosslight Form Builder makes this process very easily and seamless, thanks to the intuitive Form Metadata that allows you to build forms in minutes, not days.

Getting Started with Crosslight Charting

Starting with Crosslght 4, Crosslight comes with a handy UI component that is very much sought after by mobile developers, which is mobile charting capabilities.

With Crosslight Charting, you can now easily build cross-platform mobile charts quickly and easily, with full MVVM capabilities. Just bind your data right within the ViewModela, and voila, your mobile chart is done.

Create CRM App with Crosslight AppFramework and WebApi

Now that you’ve managed to build basic mobile apps, now it’s time to take it up a notch. In this tutorial, you’ll learn how to create a simple mobile CRM app that works with Microsoft WebAPI.

Thanks to Crosslight’s built-in tooling support, the process of creating shared models between client and server is made seamless. Simply save your EDMX file from Visual Studio and let the code generator works its wonders.

Create a To-Do App with SQLite Storage

Now that you’ve managed to create a simple CRM app, in this tutorial you’ll learn how to create a simple, working to-do app that you can use on a daily basis.

This To-Do app will allow you add and complete tasks and saves right into SQLite mobile database. With Crosslight, you’ll learn how to achieve this scenario effortlessly.

Create a To-Do app with Data Synchronization

Next, you’ll upgrade this project to include cross-platform data synchronization with WebAPI. With this tutorial, you’ll learn how to create a cross-platform to-do app that syncs data to each other.

This app also comes with pull-to-refresh support to directly refresh and syncs the data.

Wrapping Up

Not stopping here, these list of walkthroughs will continue to grow and hopefully will become a very valuable resources for Crosslight developers who are just starting with the framework.

Till next post,
Nicholas Lie

One of the greatest new components in Crosslight 4 is a powerful, full-fledged Charting component, enabling Crosslight developers to easily add stunning charts to their business cross-platform mobile apps. Fully MVVM capable, it works beautifully across iOS and Android platforms.

Have you checked out the new Crosslight Charting yet? If not, then this post is the perfect guide for you. This post will help you learn how to get started with Crosslight Charting.

Starting Off

Let’s try to create the illustrated column chart from scratch. To start off, I created a Blank Crosslight project with Crosslight Project Wizard. I’ll call this CrosslightCharting for now. After the project is created, don’t forget to add the necessary references as well.

Necessary References

• Core project: Add Intersoft.Crosslight.UI.DataVisualization assembly.
• iOS project: Add Intersoft.Crosslight.UI.DataVisualization and Intersoft.Crosslight.UI.DataVisualization.iOS assembly.
• Android project: Add Intersoft.Crosslight.UI.DataVisualization and Intersoft.Crosslight.UI.DataVisualization.Android assembly.

Now you’re ready to begin writing some codes.

Preparing the ViewModel

Let’s prepare the ViewModel that will provide the data to the chart. I’m going to create a ColumnViewModel class inside the CrosslightCharting.Core/ViewModels folder, and write really simple code to initialize the Chart model. Here’s how.

using Intersoft.Crosslight.UI.DataVisualization;
using Intersoft.Crosslight.ViewModels;

namespace CrosslightCharting.Core
{
    public class ColumnViewModel : ViewModelBase<ColumnSeries>
    {
        private Chart _chart;

        public Chart Chart
        {
            get { return _chart; }
            set
            {
                _chart = value;
                OnPropertyChanged("Chart");
            }
        }

        public ColumnViewModel()
        {
            InitializeChart();
        }

        private void InitializeChart()
        {
            this.Chart = new Chart();
            this.Chart.Title.Text = "Agile Sprint Status";

            // setup series for In Progress
            Series inProgressSeries = new ColumnSeries();
            inProgressSeries.Title = "In Progress";
            inProgressSeries.Items = new List<DataPoint>();
            inProgressSeries.Items.Add(new DataPoint("Android", 70));
            inProgressSeries.Items.Add(new DataPoint("iOS", 42));
            inProgressSeries.Items.Add(new DataPoint("WinPhone", 20));
            this.Chart.Series.Add(inProgressSeries);

            // setup series for Resolved
            Series resolvedSeries = new ColumnSeries();
            resolvedSeries.Title = "Resolved";
            resolvedSeries.Items.Add(new DataPoint("Android", 53));
            resolvedSeries.Items.Add(new DataPoint("iOS", 32));
            resolvedSeries.Items.Add(new DataPoint("WinPhone", 40));
            this.Chart.Series.Add(resolvedSeries);
        }
    }
}

As you can see, all we did is simply initializing the chart in the ViewModel and populated two ColumnSeries for it, and add the data points for each series which will be displayed side-by-side. Crosslight Charting library includes component models that you can consume in the shared Core project. The Chart model represents the data source required for the chart, and also provides a wealth of chart configuration and settings. The Series, ColumnSeries, and DataPoint are another example of the component models available in the Charting library.

For the sake of simplicity, the above sample uses static data points as the items source for each series. If your data points are heavily reused across your application, you can definitely refactor the data points into a repository or data manager class which you can easily consume with a simple method call. Later, you can learn more about it from my sample project.

It’s also noteworthy to point out that changes to the Chart model will automatically propagated to the view, thanks to the powerful binding architecture of Crosslight. This means you can add or remove Series dynamically in your app. Of course, you can also set the items source of the Series later in the app’s cycle, such as after fetching data from the server in most real-world scenarios. Better yet, changes you made to the Chart model will not be only propagated to the view, they will be also smoothly animated from the current point to the new point. Absolutely no additional code needed, it just works!

For your reference, here’s a code snippet how to initialize the items source of a Series combined with an async data load.

protected override async void Navigated(NavigatedParameter parameter)
{
    this.Chart.Series.First().Items = await this.Repository.GetAgileStatusAsync("In Progress");
}

That’s pretty cool, right?

Crosslight Charting emphasizes not only on powerful charting capabilities, but also provides developers with easy-to-use and intuitive APIs, so you can get things done without having to worry about the heavy work. If you notice, you don’t necessarily need to define the dependent and independent axes for the chart, since Crosslight Charting comes with automatic axis detection that generates meaningful axis and range, purely based on the given data. Simply beautiful.

Preparing the BindingProvider

Since our ViewModel and Chart model is ready, let’s prepare the Binding Provider which will bind the Chart model to the view. This is where the magic will happen.

Simply create a new Crosslight Binding Provider using the item templates built into Visual Studio (Windows) or Xamarin Studio (Mac). I’ll call this ColumnBindingProvider, and I’ll put it inside the CrosslightCharting.Core/BindingProviders folder.

#region Usings

using Intersoft.Crosslight;
using Intersoft.Crosslight.UI.DataVisualization;

#endregion

namespace CrosslightCharting.Core
{
    public class ColumnBindingProvider : BindingProvider
    {
        #region Constructors

        public ColumnBindingProvider()
        {
            this.AddBinding("ChartView", ChartProperties.ChartProperty, new BindingDescription("Chart", BindingMode.TwoWay));
        }

        #endregion
    }
}

There’s not much to explain here as the code is self explanatory. It simply binds the ChartView to the Chart property of the ViewModel. That’s it. Now you have the ViewModel with complete data populated as well as the BindingProvider.

Creating the Chart for iOS

You’re now ready to create the ViewController that will host the chart in iOS. I’ll create a new ViewController called ColumnViewController inside the CrosslightCharting.iOS/ViewControllers folder. Here’s the ColumnViewController file:

#region Usings

using CrosslightCharting.Core;
using Intersoft.Crosslight;
using Intersoft.Crosslight.UI.DataVisualization.iOS;

#endregion

namespace CrosslightCharting.iOS
{
    [ImportBinding(typeof(ColumnBindingProvider))]
    public partial class ColumnViewController : UIChartViewController<ColumnViewModel>
    {
        protected override void InitializeView()
        {
            base.InitializeView();

            this.NavigationItem.Title = "Column Series";
        }
    }
}

As you see from the code above, the ViewController contains almost nothing except for the BindingProvider and the ViewModel I’ve just created before. Also note that you need to subclass the UIChartViewController class. The UIChartViewController provides a ChartView property which returns the instance of UIChartView that it manages. It also automatically registers the ChartView as an identifier, allowing you to easily bind to the chart view in the binding provider.

Simply run the project to see the Crosslight Charting in action.

You’ve just created your first Crosslight Charting application in iOS. Congratulations! Well, how about the Android platform?

Creating the Chart for Android

Well, since you’ve prepared the ViewModel and the BindingProvider, so, as you guessed it, all you need to do, is just to provide the “view” for Android platform. Let’s create an Activity for that. I’ll call it ColumnActivity, and put it inside the CrosslightCharting.Android/Activities folder.

#region Usings

using Android.App;
using Intersoft.Crosslight.Android;
using CrosslightCharting.Core;
using Intersoft.Crosslight;

#endregion

namespace CrosslightCharting.Android
{
    [Activity(Label = "Column Series")]		
    [ImportBinding(typeof(ColumnBindingProvider))]
    public class ColumnActivity : Activity<ColumnViewModel>
    {
        protected override int ContentLayoutId
        {
            get
            {
                return Resource.Layout.ColumnSeriesLayout;
            }
        }
    }
}

Again, nothing’s here except for the ViewModel and the BindingProvider we’ve created earlier. As you can see, I’ve provided a layout for this activity by creating an Android layout file inside the CrosslightCharting.Android/Resources/Layout folder, called ColumnSeriesLayout.axml. Let’s see how this file looks like.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/white"
    android:gravity="center">
    <Intersoft.Crosslight.UI.DataVisualization.Android.ChartView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/ChartView" />
</LinearLayout>

The layout is simply a ChartView that covers the entire screen. I’ve also put a white background to get better visibility of the chart. Android version is done. Let’s see it in action.

Now, I want you to pay attention to how Crosslight Charting manages to create the axes automatically for you, and define the “smart” ranges for those axes that fits the screen nicely. Also notice that the legend is automatically generated for you based on the given data points. How cool is that? See, I told you that it works consistently between iOS and Android platform.

And if you need to customize anything about the Chart, whether its data source, series, or other settings, you do it only once in the  ViewModel. At this point, I hope you’ve started to get the point how Crosslight works in overall, and how it lives to its highly acclaimed 100% shared UI logic.

Learning more about Crosslight Charting

You’ve successfully created a column chart with Crosslight Charting. In addition to column charts, Crosslight Charting also supports many other chart types such as area, bar, doughnut, line, pie, scatter, step area, and much more.

If you’re interested in learning more, I highly suggest you to check out the list of topics here:

• Understanding chart series
• Understanding chart axis
• Understanding chart legend
• Understanding chart title
• Configuring chart appearance
• Understanding animation
• Enabling zoom
• Using data annotation

I also highly recommend you to check out the samples directly to see all of the features hands-on. It is available in the Git repository in this link.

You can also find the source code to this our Git repository here.

Till next post,

Cheers
Nicholas Lie

For those of you new to cross-platform development, fear not. Crosslight is here to the rescue. Building cross-platform apps has never been easier using Crosslight. Crosslight is a cross-platform toolset that helps you to create cross-platform apps using C#, leveraging the MVVM pattern. If you haven’t got a copy of Crosslight, grab one here!

To help you get started, we have just released a new video tutorial that will help you to create your first Crosslight app using the Crosslight Project Wizard and run the project on all four platforms: iOS, Android, Windows Phone and Windows Store.

Find out more about Crosslight at our Developer Center. Also checkout our newbie-proof Crosslight tutorial. If you have any questions, feel free to post it in our community forum, or drop us a mail.

Crosslight 2 provides a capability to view enterprise reports across multiple platforms including iOS, Android, Windows Phone and Windows 8. The reporting services is built upon the company’s flagship reporting, ClientUI Reporting, to produce identical reports across multiple platforms. You can quickly add reporting feature to your apps since Crosslight has encapsulated all of the functionality required to display the reports on multiple platforms natively. Check out the following video to learn how to configure the report server and display the report on Crosslight apps, which runs on four major platforms: iOS, Android, Windows Phone 8 and Windows Store.

You can also get the source code for this video from our new Git server: http://git.intersoftpt.com/projects/CROS-SUPP/repos/simple-reporting/browse. To learn more about Crosslight reporting service and how it works, see Viewing Enterprise Reports. If you have any questions, feel free to post it in our community forum, or drop us a mail.

If you are iOS users, you might already familiar with the Mail app. When new messages arrived, notice that the new items are inserted smoothly with beautiful animation. The implementation for such insertion is in deed challenging since it needs to take account the actual insertion position based on the sorted data. Furthermore, multiple insertions are also supported with simultaneous animation which adds complexity to the logic. Technically, inserting an item will cause the index of remaining items invalid — and not to mention if there are deletion along the process. There are a lot of aspects that need to be considered. In this blog post, I will share how we support this user experience seamlessly in Crosslight 2.

iOS supports this simultaneous updates through a feature called batch updating. Implementing this feature requires deep knowledge of how iOS works — and typically what you want to avoid, particularly if your code is targeting multiple platforms. Thankfully, Crosslight has supported this batch update operation since its first version by allowing you to simply perform updates to your collection in .NET way. You don’t need to know about iOS even a bit.

Recently, we made several improvements to Crosslight for batch update support in a sorted collection. This allows you to simply adding items or deleting items on a sorted collection without concerning the actual position where it will be displayed or removed. The Crosslight’s table view component now takes care everything behind the scene, including the batch updating process, maintaining the delta changes and simultaneously animate the changes.

Consider you have a raw collection of countries: US, China, Japan, Netherlands, and Greece. When bound to the view, the collection is sorted by the country name in ascending with LINQ. At runtime, you then add few more countries: Indonesia, Brazil, and Mexico.

In ViewModel, the C# code looks like below.

public class BatchUpdateListViewModel : EditableListViewModelBase<Country>
{
    public DelegateCommand BatchUpdateCommand { get; set; }

    public BatchUpdateListViewModel()
    {
        var items = new List<Country>();
        items.AddRange(Countries.Create("US", "China", "Japan", "Netherlands", "Greece"));

        // just a plain .NET collection here
        this.SourceItems = items.ToObservable();

        this.BatchUpdateCommand = new DelegateCommand(ExecuteBatchUpdate);
    }

    private void ExecuteBatchUpdate(object parameter)
    {
        // Begin batch updating
        this.IsBatchUpdating = true;

        // Perform multiple inserts simultaneously to the source items
        this.SourceItems.Add(new Country("Indonesia"));
        this.SourceItems.Add(new Country("Brazil"));
        this.SourceItems.Add(new Country("Mexico"));

        // End batch updating
        // After this code, the bound list view will be automatically updated with smooth animation
        this.IsBatchUpdating = false;
    }

    protected override void OnSourceItemsChanged(ICollection<Country> items)
    {
        // Sort the source items by country name, and use the sorted collection for the display items
        this.Items = items != null ? items.OrderBy(country => country.Name) : null;
    }
}

Notice that the above code simply adds items to the source collection, you don’t have to concern the actual positions in the view. The only thing you need to ensure is to perform the collection changes while the IsBatchUpdating property value is true. As soon as the property is set to false, the bound view will be automatically notified and perform the animation simultaneously. This simple and intuitive code lets you to achieve the stunning user experience similar to Apple’s built-in Mail app when new items are added dynamically at runtime.

The following illustration shows what happened to the sorted collection at runtime.

To demonstrate this feature, we have added a new Sorted Batch Update to the Data Samples which you can download from our Git server. The bits is under the batch-update-sorted branch. You’ll also need nightly build (revision 54 or higher) to try out this new improvement.

In addition to multiple insertions, the sample also demonstrates multiple deletion. And to add more complexity, it also modifies the items which cause its order to change. For your convenience, you can see how the sample works below.

Most cross-platform frameworks I found today provide just a set of API without thoughtful consideration of the user experience that native to the platform. That’s where Crosslight sets apart. More than just a set of API, we designed Crosslight with the simplicity you expected, while taking account many other important factors behind the scene which will make your apps shine.

Join us for a 3-day live webinars on June 10 – 12, and learn how you can build great cross-platform business apps with Crosslight. We will be demo’ing how to create a fully-functional CRM app in just mere minutes — live. Seat is limited, so reserve yours now.

We have released two new video tutorials on Crosslight to help you better understand how to develop better mobile applications using Crosslight.

Understanding MVVM Pattern in Crosslight

This video tutorial outlines in general how the MVVM pattern works in Crosslight apps development. You will learn how Crosslight leverages the MVVM concept in order to produce cross-platform projects with a single shared application layer. By the end of this video, you will be able to grasp the MVVM pattern in general as well as getting the right mindset when building apps using Crosslight.

Building Simple Tip Calculator using Crosslight

This video tutorial explains how you can build a simple tip calculator app using Crosslight  within minutes that target all four major platforms at once (Android, iOS, Windows Phone, Windows 8). This video aims to highlight the data binding capabilities in Crosslight that leverages the MVVM pattern found in .NET applications to mobile apps development. You can find the source code for this video in our GitHub link: https://github.com/IntersoftSolutions/CrosslightSimpleTipCalculator

Should you have any further questions, feel free to contact us at technical@intersoftpt.com or raise a thread in our forums. Hopefully this video will give you a clearer concept how Crosslight works and how you can slash development time in more than half and increase your productivity. Stay tuned for more Crosslight video tutorials. Don’t forget to subscribe to our YouTube channel as well!

Cheers,
Nicholas Lie

This is the second post of cross-platform mobile development with Crosslight series. Continuing from the previous post , I am most pleased to share two of the exciting features shipped with Crosslight: unified navigation framework and powerful data binding.

Unified Navigation Framework

As navigation differs from one mobile framework to another, it’s a challenging task for mobile developers to streamline the navigation logic all in one place that can work consistently between platforms. Take iOS, Android, Windows Phone, and WinRT for example. iOS uses push navigation while Android uses Intent-based navigation while Windows Phone and WinRT use Page-based navigation. Gone are the days you will have to worry about these troubles with Crosslight. This section will outline the features supported by Crosslight navigation framework.

Basic Navigation

Crosslight navigation supports basic navigation to a page using the view model.  This is achieved using the navigation service from the view model and calling the Navigate method then specify the desired view model to navigate. It’s as simple as that.

At its simplest form, basic navigation can simply be done with the following simple calls from the view model:

private void ExecuteNavigateIdentifier(object parameter)
{
    this.NavigationService.Navigate("ViewModel1Derivative");
}

private void ExecuteNavigateParameter(object parameter)
{
    // You can pass any objects as parameter during navigation
    this.NavigationService.Navigate(new NavigationParameter(parameter));
}

private void ExecuteNavigateType(object parameter)
{
    this.NavigationService.Navigate();
}

Note that you can also navigate to the same view model but consumed by different views using the NavigationParameter as shown above.

List Navigation (Push Navigation)

Crosslight navigation service enables you to perform navigation from within the view model. You can navigate to a view model by providing the type, or a known identifier.

The navigation view model looks as simple as this:

public class NavigationViewModel : ListViewModelBase
{
    public NavigationViewModel()
    {
        IApplicationContext context = this.GetService().GetContext();

        List items = new List();

        items.Add(new NavigationItem("Simple List", "Data View", typeof(SimpleListViewModel)));
        items.Add(new NavigationItem("Grouped List", "Data View", typeof(GroupListViewModel)));
        items.Add(new NavigationItem("Grouped List (Section)", "Data View", new NavigationTarget(typeof(GroupListViewModel), "GroupStyle")));
        items.Add(new NavigationItem("Grouped List with Index", "Data View", new NavigationTarget(typeof(GroupListViewModel), "GroupIndex")));
        items.Add(new NavigationItem("Searchable List", "Data View", typeof(FilterListViewModel)));
        
	...

        this.SourceItems = items;
        this.RefreshGroupItems();
    }

    public override void RefreshGroupItems()
    {
        if (this.Items != null)
            this.GroupItems = this.Items.GroupBy(o => o.Group).Select(o => new GroupItem(o)).ToList();
    }
}

Modal Navigation

The integrated navigation service supports a special navigation type called as modal navigation. It is particularly useful to present a view that waits for user input; you can return a navigation result indicating whether the user provided the input or cancelled the input, as well as capturing additional data as the result of the modal navigation.

To execute a modal navigation, in the view model, we can specify as follows:

private void ExecuteNavigateModal(object parameter)
{
    NavigationParameter navigationParameter = new NavigationParameter()
    {
        NavigationMode = NavigationMode.Modal
    };

    ...

    this.NavigationService.Navigate(
        new NavigationTarget(typeof(ViewModel3), navigationParameter),
        (result) =>
        {
            if (result.Action == NavigationResultAction.Cancel)
                this.MessagePresenter.Show("You cancelled the data input");
            else
                this.MessagePresenter.Show("You entered: " + result.Data.ToString());
        });
}

Notice that after modal navigation is executed, you can handle the result of the modal navigation through action callbacks.

Nested Modal Navigation

In addition to basic modal navigation, the Crosslight navigation service also supports advanced modal navigation that allows you to perform navigation within the modal view context. Called Nested Modal Navigation, this feature is particularly useful when you need to capture numerous data input that are split to multiple views (wizard-like).

The navigation service manages the navigation stack made during the modal session. When the Close method is called, it automatically discards the entire modal navigation stack, and return to the initiator view.

It is quite simple to execute a nested modal navigation:

private void ExecuteNavigateModal(object parameter)
{
    NavigationParameter navigationParameter = new NavigationParameter(new RegistrationData())
    {
        NavigationMode = NavigationMode.Modal,
        EnsureNavigationContext = true
    };

    this.NavigationService.Navigate(
        new NavigationTarget(typeof(NestedStep1ViewModel), navigationParameter),
        (result) =>
        {
            if (result.Action == NavigationResultAction.Cancel)
                this.MessagePresenter.Show("You cancelled the data input");
            else
                this.ShowRegistrationData(result.Data as RegistrationData);
        });
}

Similar to the previous modal navigation, you can handle the result of the nested modal navigation through action callbacks through the nested modal view initiator.

Master-Detail Navigation

The Crosslight navigation service supports master-detail navigation, both when deployed to a phone device or a tablet device. On a phone device, the navigation would be interpreted as push navigation while on a tablet it would be treated differently based on the targeted platform.

On phone, it will look like this:

While on tablet:

For iOS and Android, you would need a binding provider that specifies the detail view model when the item is tapped.

public class ListNavigationBindingProvider : BindingProvider
{
    #region Constructors

    public ListNavigationBindingProvider()
    {
        ItemBindingDescription itemBinding = new ItemBindingDescription()
        {
            DisplayMemberPath = "Name",
            DetailMemberPath = "Location",
            ImageMemberPath = "ThumbnailImage"
        };

        this.AddBinding("TableView", BindableProperties.ItemsSourceProperty, "Items");
        this.AddBinding("TableView", BindableProperties.ItemTemplateBindingProperty, itemBinding, true);
        this.AddBinding("TableView", BindableProperties.SelectedItemProperty, "SelectedItem", BindingMode.TwoWay);
        this.AddBinding("TableView", BindableProperties.DetailNavigationTargetProperty, new NavigationTarget(typeof(ItemDetailViewModel)), true);
    }

    #endregion
}

Tab Navigation

The navigation service also supports tab navigation using selected index. By inheriting a special view model called MultiPageViewModelBase, you can perform navigation setting the selected index of the navigation items. You can also send parameters and custom objects during tab navigation.

The TabViewModel that enables tab navigation:

public class TabViewModel : MultiPageViewModelBase
{
    #region Constructors

    public TabViewModel()
    {
        var items = new List();
        items.Add(new NavigationItem("Simple Page", typeof(SimpleViewModel)) { Image = "first.png" });
        items.Add(new NavigationItem("About", typeof(AboutNavigationViewModel)) { Image = "second.png" });

        this.Items = items.ToArray();
    }

    #endregion
}

Powerful Data-Binding Features

Crosslight was designed with the powerful MVVM design pattern in mind. The MVVM design pattern itself is almost always associated with data-binding concept. .NET developers targeting Silverlight and WPF will be at home with the concept. However, this post will not cover the concepts of data-binding itself, but more on how Crosslight leverages this concept to the mobile development world, which were only available to platforms such as Silverlight and WPF. If you would like to learn more about data-binding concept, Microsoft has detailed a very good article here that covers the topic in-depth.

Property-to-Property Binding

Crosslight data-binding framework supports the very basic property-to-property data binding, enabling you to bind a property to another property using various information contained in BindingDescription using a BindingProvider class.

public class BindingModeBindingProvider : BindingProvider
{
    public BindingModeBindingProvider()
    {
        this.AddBinding("Label1", BindableProperties.TextProperty, "Text", BindingMode.OneTime);
        this.AddBinding("Label2", BindableProperties.TextProperty, "Text", BindingMode.OneWay);
        this.AddBinding("TextField1", BindableProperties.TextProperty, "Text", BindingMode.TwoWay);
        this.AddBinding("Label3", BindableProperties.TextProperty, "Amount", BindingMode.OneWay);
        this.AddBinding("Slider1", BindableProperties.ValueProperty, "Amount", BindingMode.TwoWay);
        this.AddBinding("TextField2", BindableProperties.TextProperty, "Amount", BindingMode.TwoWay);
        this.AddBinding("Stepper1", BindableProperties.ValueProperty, "Amount", BindingMode.TwoWay);
    }
}

Universal Data Management

Crosslight data binding framework supports automatic UI updates when bound to a collection. This allows for easier data management as well as saving you the trouble of updating the UI when the underlying data model changes. Consider the following view model:

private void ExecuteBatchUpdate(object parameter)
{
    // Begin updating
    this.IsBatchUpdating = true;

    // Perform multiple add and remove simultaneously
    var items = this.Items.ToObservable();
    var updatedItem = items.ElementAt(0);

    updatedItem.Name = "Modified at " + DateTime.Now.ToString("hh:mm:ss");
    this.OnDataChanged(updatedItem);

    items.Insert(1, new Item {Name = "New Item " + this.NewIndex++, Location = "New warehouse", ThumbnailImage = updatedItem.ThumbnailImage});
    items.Insert(3, new Item {Name = "New Item " + this.NewIndex++, Location = "New warehouse", ThumbnailImage = updatedItem.ThumbnailImage});
    items.Insert(6, new Item {Name = "New Item " + this.NewIndex++, Location = "New warehouse", ThumbnailImage = updatedItem.ThumbnailImage});

    items.Remove(items.ElementAt(5));
    items.Remove(items.ElementAt(7));

    this.ToastPresenter.Show("Added 3 items, removed 2 items, updated 1 item", null, null, ToastDisplayDuration.Immediate, ToastGravity.Center);

    // End updating
    this.IsBatchUpdating = false;
}

After you have finished inserting items to the model, the view updates accordingly.

Binding to Nested Property

Aside from binding to a top-level property, you can also bind to a nested property.

Case 1: Loan Calculator

A simple app that can be made using the data-binding framework is the loan calculator where you would input the amount of loan, the loan term in years, and the interest rate per year.

Each of the textboxes and the button is bound using a BindingProvider.

public class LoanCalculatorBindingProvider : BindingProvider
{
    public LoanCalculatorBindingProvider()
    {
        this.AddBinding("AmountTextField", BindableProperties.TextProperty, "Amount", BindingMode.TwoWay);
        this.AddBinding("LoanTermTextField", BindableProperties.TextProperty, "LoanTerm", BindingMode.TwoWay);
        this.AddBinding("InterestRateTextField", BindableProperties.TextProperty, "InterestRate", BindingMode.TwoWay);
        this.AddBinding("MonthlyPaymentLabel", BindableProperties.TextProperty, new BindingDescription("MonthlyPayment") { StringFormat = "{0:c}" });
        this.AddBinding("CalculateButton", BindableProperties.CommandProperty, "CalculateCommand");
    }
}

After inputting the specified amount, loan term, and interest rate, and hit calculate, it calculates the monthly payment by calling the command specified in the view model, as follows:

private decimal GetCalculateMontlyPayment()
{
    return decimal.Round((this.Amount + (this.Amount * this.InterestRate * (decimal)this.LoanTerm)) / ((decimal)this.LoanTerm * (decimal)12),2);
}

Case 2: Currency Converter

Another simple example would be to make an offline currency converter. This example demonstrates Crosslight support for binding with full converter and UpdateSourceTrigger support.

Full Converter Support

Just like the native binding found in Silverlight and WPF platforms, Crosslight also supports binding with converter, complete with converter parameter and converter culture.

UpdateSourceTrigger Support

Intersoft Crosslight provides four predefined UpdateSourceTrigger values, namely Default, Explicit, LostFocus, and PropertyChanged. By default, the update process to the bound property will be done after lost focus event is triggered. The following code shows how you can use the two-way BindingMode as well as setting the UpdateSourceTrigger to PropertyChanged.

public class CurrencyConverterBindingProvider : BindingProvider
{
    public CurrencyConverterBindingProvider()
    {
        CurrencyFormatConverter converter = new CurrencyFormatConverter();

        this.AddBinding("BaseCurrencyTextField", BindableProperties.TextProperty, new BindingDescription("USCurrency", BindingMode.TwoWay, UpdateSourceTrigger.PropertyChanged));
        this.AddBinding("BritishCurrencyTextField", BindableProperties.TextProperty, new BindingDescription("UKCurrency") { Converter = converter, ConverterParameter = "{0:c}", ConverterCulture = new CultureInfo("en-gb") });
        this.AddBinding("EuroCurrencyTextField", BindableProperties.TextProperty, new BindingDescription("EuroCurrency") { Converter = converter, ConverterParameter = "{0:c}", ConverterCulture = new CultureInfo("nl-NL") });
        this.AddBinding("SGCurrencyTextField", BindableProperties.TextProperty, new BindingDescription("SGCurrency") { Converter = converter, ConverterParameter = "{0:c}", ConverterCulture = new CultureInfo("zh-sg") });
        this.AddBinding("AUCurrencyTextField", BindableProperties.TextProperty, new BindingDescription("AUCurrency") { Converter = converter, ConverterParameter = "{0:c}", ConverterCulture = new CultureInfo("en-au") });
    }
}

As a result, the respective currencies will be converted in real time when the text is changed.

StringFormat Support

Crosslight BindingProvider also supports binding with StringFormat support.

public class StringFormatBindingProvider : BindingProvider
{
    public StringFormatBindingProvider()
    {
        this.AddBinding("Label1", BindableProperties.TextProperty, new BindingDescription("Amount", BindingMode.OneWay) { StringFormat = "{0:c0}" });
        this.AddBinding("Label2", BindableProperties.TextProperty, new BindingDescription("Amount", BindingMode.OneWay) { StringFormat = "{0:###,###.00}" });
        this.AddBinding("Label3", BindableProperties.TextProperty, new BindingDescription("Date", BindingMode.OneWay) { StringFormat = "{0:g}" });
        this.AddBinding("Label4", BindableProperties.TextProperty, new BindingDescription("Date", BindingMode.OneWay) { StringFormat = "{0:F}" });

        this.AddBinding("Slider1", BindableProperties.ValueProperty, "Amount", BindingMode.TwoWay);
        this.AddBinding("DatePicker1", BindableProperties.ValueProperty, "Date", BindingMode.TwoWay);
    }
}

Wrap-up

Navigation and data-binding are just some of the features Crosslight introduced to the mobile development world. It is important to note while all these features are shown platform specific, they work consistently across multiple platforms. The diverse pictures shown in this blog post is to give you an overview about the features described earlier were not platform-specific; they can be applied cross-platform. Some of the Crosslight API outlined in the code snippets are not explained in detail here; they will be covered comprehensively in our product documentation upon release. You might wonder, while these features sound too good to be true, in fact, they really are. These magical features will be available as soon as we hit our 2013 R1 milestone, which is going to be released very soon in early September.

Regards,

Nicholas Lie

Introducing the new data controls lineups such as UXPageableComboBox UXMultipleSelectionComboBox and UXTreeList, developers can now build large-scale data entry applications with blazing fast performance. UXGridView also adds with several enhancements and advanced features such as columns collection binding, column header binding and batch items validation. Click here to find out more about the new controls in ClientUI 7.

In this blog post, I will share some of the new samples demonstrating the new products, as well as reviewing the key features.

Below are some of the top new samples that goes to my favorite list.

1. Cabin Front Reservation
   

   UXPageableComboBox is an enhanced UXDataComboBox control featuring highly efficient server paging mechanism. The control addresses performance issues in large data scenario by retrieving only the required data on demand, and perform incremental data retrieval when the total item count exceeds the specified page size.

   In this sample, you are able to perform Multiple columns layout with built-in column type such as Text, Images and Templates. You can perform sorting and description text feature using this control. With description text, you can show additional information related to the selected item in the right edge of the control. It is used to allow you easily understand the meaning of the input value at a glance. Explore the sample.

   

    

2. Customer Order
   In this sample, you will see the tight integration between UXGridView and UXPageableComboBox. You can edit a column in UXGridView and bind it with UXPageableComboBox. With this feature, you can fully use all features available in UXPageableComboBox inside UXGridView, such as Multiple columns layout, Auto-complete behavior, advanced data grouping and sorting capability and many more. Explore the sample.

   

3. Mail Application
   UXMultipleSelectionComboBox is an advanced queryable ComboBox control specially designed to support multiple selection. It provides an intuitive data entry mode that allows users to quickly select multiple items through type-and-tab gesture. It supports both Editable and Readonly mode. This control has every features that are available in UXPageableComboBox.

   In this sample, editable mode is used. It means that you can directly update the selection through the text input element. The control filters the data instantaneously as you type ahead, and the selection will be added with a single Tab key. Also, the built-in smart filter feature automatically prevents any items that you have selected to appear on the list for the next selection. Explore the sample.

1. Project Milestone
   UXTreeList is a unique data control used to display self-referencing hierarchical data. You can use the HierarchicalCollectionView to transform your self-reference table into a hierarchical self-reference data.

    
   UXTreeList combines all UXGrid features such as data editing, grouping and paging with UXTreeView’s expand/collapse functionality to perfectly present any hierarchical data.

   In this sample, some features demonstrated are variety of columns type, common data manipulation and data editing that includes drag and drop to re-arrange your data. Explore the sample.

   

2. Chart of Account
   

   UXTreeList supports load on demand scenario using MVVM pattern where only the root items are loaded initially. The children will be loaded on demand as users expanded the item for the first time. This feature is particularly useful to improve the overall performance when the assigned data source is relatively large.

   In this sample, IsLoadOnDemand property is set to True in order to activate the load-on-demand feature. In this mode, a busy indicator will be automatically displayed in each expanded item during the loading progress. Explore the sample.

   

3. Empty Row Visibility
   UXGridView lets you easily create beautiful data presentation with look and feel similar to popular desktop-based apps such as iTunes, Quick Books, or other business apps alike. With the new innovative rendering feature, UXGridView automatically fills the entire view port with alternating rows instead of leaving a large white empty space.

    
   This sample demonstrates the empty rows visibility feature in UXGridView. When this featuere is enabled the UXGridView will render all the empty rows within the view port. You can also insert a new row from bottom when NewRowPosition is set to Bottom and CanUserAddRows is set to True. Explore the sample.

   

4. Bottom New Row Position
   This new feature brings flexibility to the way users interact with the grid. Users can now rapidly add new items by clicking the bottom part of the grid, just like they would do in Excel. Activate this feature in your apps with a simple property set.

   In this sample, you can see there are new row position indicator on the last row in UXGridView. To go to the new row you can click the empty rows or use keyboard down on the last item. Explore the sample.

   

5. Sequence Column
   Introducing the new UXGridViewSequenceColumn, you can now effortlessly display a column that automatically display sequential number to your data grid.

    
   In this sample, we have UXGridViewSequenceColumn which is used to show the row index of the current display. Note that the sequence column can not be sorted and will always show the row index regardless of the sorting or filtering state. Explore the sample.

   

For more information about ClientUI, you can explore our Live Samples or read through our Online Documentation.

Feel free to download your copy here. And while waiting for the download, be sure to check out the complete what’s new list here. Existing customers with valid subscription can obtain the latest WebUI Studio from Developer Network, under My Components shortcut.

If you have any questions regarding sales or licensing, you can directly email me at martin@intersoftpt.com. Any comments or feedbacks are welcome.

Thank you and have a nice day.

Regards,
Martin

Handling client files which are uploaded to a server is a common requirement for application. Files can be uploaded either to the FileSystem of your server or directly to the database as BLOB.

However, there has been a lot of debate about the best way to store the files. I’m sure there are many people who have strong favor for why one option is better than the other and vice versa.

So there must be interesting differences between the two solutions. Let’s have a brief comparison between these two options.

FileSystem – Pros and Cons

Storing the files on disk is much easier and simple to implement. Having the files in the filesystem allow accesing it from many different standard applications such FTP, web browser etc. and users as well, independent of access to the database itself etc.

Another advantage is that files on disk are easy to backup; you just copy the files to another location. This also makes it easier to do incremental backups; files that have already been backed up don’t need to be copied again.

Probably the most problematic issue is the loosely coupled nature of the files on disk as they have no strong relation with a record in the database. So, when you delete, say, a customer from the database, you may end up with an orphaned customer’s image/photo. There is no direct way to do a JOIN between the customer table and your images folder to determine what orphaned files you have left.

Nevertheless, to store uploaded files on disk, your web server needs permissions to write to the file system. This is easy to overcome by when you run your own server, but may prove to be more problematic in an ISP scenario.

Database – Pros and Cons

The loosely coupled nature of the files on disk problem will not happen when the uploaded files are stored in database. They have strong relation with a record in the database. It will automatically gets deleted when record of an employee is terminated.

Another advantage of storing files in a database is the fact that all data is contained in a single location. Make a backup of your database and you’re ready to go. No need to copy files, set up permission and so on.

Performance is probably one of the disadvantages of storing files in a database. Storing files in a database somehow degrading the performance as putting binary data into the database has obviously some overhead.

Another cons is that whenever you make a full backup of your database, all the files are included, whether they have been changed or not. If you copy your backups to a different machine or network for safety reasons, you need to move the entire backup file. With a file based solution, you can use diff programs that can determine which files have been changed since the last backup, and only download those.

Realizing that both methods have their pros and their cons, the question is: what to choose? Personally, due to its easier and simpler to be implemented, I’d prefer to store the uploaded files on FileSystem.

However, in this occasion, I will not discuss further on the pros and cons of the file storage matter. I’m going to present the solution on how to store the uploaded files of UXFileUpload ClientUI control to database.

UXFileUpload Introduction

UXFileUpload is a feature-rich file upload control supporting Silverlight 3, Silverlight 4, and WPF. It includes all standard features you expected in a file upload control, plus a multitude of innovative features that unique to UXFileUpload such as multiple upload worker process, comprehensive MVVM and commanding support, smart file chunk algorithm, very large file upload support, file-level cancellation, drag-and-drop files from operating system, and more.

Despite of the large number of features, UXFileUpload is designed for an ultimate ease-of-use. The simplest UXFileUpload control can be defined with only two properties set, the ServiceUrl and the TargetFolder property. You set the ServiceUrl property to a value that determines the absolute web address where the server-side handler is configured to accept the file upload requests. The TargetFolder determines where the files should be stored in the server.

ClientUI includes a built-in ASP.NET server-side handler that you can use to accept the file upload requests from the UXFileUpload control. When using the built-in server-side handler, you can set the TargetFolder to a relative path in your web server, for an instance, ~/Upload.

Creating a Simple UXFileUpload Control

The following code shows the most basic configuration of a UXFileUpload control.

<Intersoft:UXFileUpload ServiceUrl="http://localhost:9041/UXFileUploadHandler.ashx"
                        TargetFolder="~/ClientBin/Assets/Documents" />

You need to register the server-side upload handler in your ASP.NET web project in order for the UXFileUpload control to work properly. For more information configuring the server-side handler for the upload control, see How-to: Configure ASP.NET Server-side Handler for UXFileUpload.

When viewing the control in either design or runtime, you will find the results similar to the illustration in the following:

With the upload control shown above, users can start to add files immediately by clicking the Add Files command in the toolbar and click on the Start Upload command to start uploading the selected files.

Once the Start Upload command is invoked, the file upload request will be handled by UXFileUploadHandler.ashx server-side upload handler. The uploaded files will be stored inside the Upload folder of the server.

In order to store the uploaded files to database instead of keep them in file system, we need to prepare following items.

• Add and configure database which will be used as file storage.
• Add and configure custom UXFileUpload handler.

Adding and Configuring Database

A database, called Files.mdf, is added into the App_Data folder of the web project. This database has Files table which consist of following fields.

A Stored Procedure, sprocFilesInsertSingleItem, will be used to insert a single item of file into Files.mdf database.

INSERT INTO Files
(
	Id,
	FileUrl,
	FileData,
	OriginalName
)
VALUES
(
	@id,
	@FileUrl,
	@FileData,
	@originalName
)

Adding and Configuring Custom UXFileUpload Handler

UXFileUpload implements a smart file chunk logic where multiple files can fit into a single upload request thus minimizing the client-server requests. With the smart file chunk logic, UXFileUpload allows you to upload very large files without have to worry about the performance and memory consumption in both client and server side. It is not necessary to change the maximum upload request length or other configuration in the server-side to accommodate the large files upload using the UXFileUpload control.

The built-in UXFileUpload server handler is designed with a great level of customizability, allowing you to inherit the UXFileUploadHandler class and override the properties as necessary. We can also customize the upload post processing logic, by overriding the provided methods.

We will create a custom UXFileUpload handler that will store the uploaded files into the database by overriding the OnUploadCompleted method. Within this method, we can find all the information we need, such as: the number of uploaded files; the file path of uploaded files; saved name of the uploaded files; etc. In OnUploadCompleted we have files that has been completely uploaded. This is important to ensure that there is no file problem such as corrupted files or incomplete files during the saving of the files to the database.

Generally, the custom handler will process each of uploaded files and do the following:

• Read and manipulate the file using FileStream class.
• Invoke sprocFilesInsertSingleItem stored procedure to store the file on Files.mdf database.
• Delete the specified file from the location specified in TargetFolder property of UXFileUpload.

Open the UXFileUpload project and add a class library project, named as ExtendedUXFileUploadHandler.

Add the following code into the DatabaseFileUploadHandler.cs file.

public class DatabaseFileUploadHandler : UXFileUploadHandler
{
    protected override void OnUploadCompleted(List<FileUploadInfoResponse> uploadedFiles)
    {
        if (uploadedFiles.Count > 0)
        {
            int FilesNumber = uploadedFiles.Count;

            for (int i = 0; i < FilesNumber; i++)
            {
                byte[] fileData = ReadFile(uploadedFiles[i].TargetFilePath);
                string originalName = uploadedFiles[i].SavedName;

                using (SqlConnection mySqlConnection = new SqlConnection(
                      @"Data Source=.SQLEXPRESS;AttachDbFilename=|DataDirectory|Files.mdf;
                           Integrated Security=True;Connect Timeout=30;User Instance=True"))
                {
                    // Set up the Command object
                    SqlCommand myCommand = new SqlCommand("sprocFilesInsertSingleItem", mySqlConnection);
                    myCommand.CommandType = CommandType.StoredProcedure;

                    // Set up the ID parameter
                    SqlParameter prmId = new SqlParameter("@id", SqlDbType.UniqueIdentifier);

                    prmId.Value = uploadedFiles[i].ID;
                    myCommand.Parameters.Add(prmId);

                    // Set up the FileData parameter
                    SqlParameter prmFileData = new SqlParameter("@fileData ", SqlDbType.VarBinary);

                    prmFileData.Value = fileData;
                    prmFileData.Size = fileData.Length;
                    myCommand.Parameters.Add(prmFileData);

                    // Set up the OriginalName parameter
                    SqlParameter prmOriginalName = new SqlParameter("@originalName", SqlDbType.NVarChar, 50);
                    prmOriginalName.Value = uploadedFiles[i].SavedName;
                    myCommand.Parameters.Add(prmOriginalName);

                    // Execute the command, and clean up.
                    mySqlConnection.Open();
                    bool result = myCommand.ExecuteNonQuery() > 0;
                    mySqlConnection.Close();
                }

                File.Delete(uploadedFiles[i].TargetFilePath);
            }
        }            

        base.OnUploadCompleted(uploadedFiles);
    }

    private static byte[] ReadFile(string filePath)
    {
        byte[] buffer;
        FileStream fileStream = new FileStream(filePath, FileMode.Open, FileAccess.Read);

        try
        {
            int length = (int)fileStream.Length; // get file length
            buffer = new byte[length];           // create buffer
            int count;                           // actual number of bytes read
            int sum = 0;                         // total number of bytes read

            // read until Read method returns 0 (end of the stream has been reached)
            while ((count = fileStream.Read(buffer, sum, length - sum)) > 0)
            {
                sum += count; // sum is a buffer offset for next reading
            }
        }
        finally
        {
            fileStream.Close();
        }

        return buffer;
    }
}

The ReadFile function will reads the source file into a byte array. The Read method of FileStream object returns zero only after reaching the end of the stream. Otherwise, Read always reads at least one byte from the stream before returning. Finally, close the current stream and releases any resources associated with the current stream when Read method returns zero.

After completing the read process and set up the required parameter, fileData byte array will then be inserted into Files table by invoking the sprocFilesInsertSingleItem stored procedure.

Finally, delete the uploaded file from the specified path after execute the stored procedure.

Before running the solution, build the project and add the reference of ExtendedUXFileUploadHandler.dll into the web project. Then re-define the handler in Web.Config file into the following.

<configuration>
  ...
  <system.web>
        <compilation debug="true" targetFramework="4.0" />
      <httpHandlers>
        <add verb="*" path="UXFileUploadHandler.ashx"
             type="ExtendedUXFileUploadHandler.DatabaseFileUploadHandler, ExtendedUXFileUploadHandler"/>
      </httpHandlers>
    </system.web>
  <system.webServer>
    <handlers>
      <add name="UXFileUpload" verb="*" path="UXFileUploadHandler.ashx"
           type="ExtendedUXFileUploadHandler.DatabaseFileUploadHandler, ExtendedUXFileUploadHandler" />      
    </handlers>
  </system.webServer>
  ...
</configuration>

Save all the changes and run the project.

Add files to be uploaded and click Start Upload. After the uploading process completed, the uploaded files is no longer available in the TargetFolder location. The file is now stored in database.

In this post, we have learnt how to store uploaded files of UXFileUpload to database by overriding the UXFileUpload handler.

Click here to download the sample project and feel free to drop me a line in the comment box if you find that this post useful, or have any questions and feedback regarding this topic.

Regards,
Yudi Ariawan

Recently I was assigned to create a simple Silverlight project that shows a list of data with full editing support. The first thing that comes to my mind is using the ClientUI project template as a first step to start working on this task.

After spending about 30 minutes trying all the project templates that come with Intersoft WebUI Studio 2011 R2 SP1, I decided to start the project using Intersoft ClientUI Ribbon Application template. This project template allows the creation of rich Silverlight application with rich Ribbon interface and integrated navigation interfaces.

Intersoft ClientUI Ribbon Application template is ideal to build business applications with relatively large modules and features. The template ships with predefined MVVM infrastructure that demonstrates how to use UXRibbonBar as a command placeholder that dynamically change its content based on the active module. It also includes fully-functional MVVM examples such as Mail and Calendar which are implemented with the advanced data controls available in ClientUI.

Building rich application using this Ribbon project template is easy and straightforward. In this blog post, I’ll share some of my experiences building the project such as adding the navigation, customizing the ribbon through XML configuration file, and drop-in the data grid to display data.

Let’s get started!

Creating a new project from the Ribbon Application project template

We’ll start by creating a new Silverlight project using Intersoft ClientUI Ribbon Application project template. This project template is available after install the Premier edition or Intersoft WebUI Studio 2011 R2 (or newer) for Silverlight and WPF. To create a new Intersoft ClientUI Ribbon Application project, open Visual Studio and select File > New > Project… (or press Ctrl+Shift+N) from the menu bar. Select Intersoft ClientUI Ribbon Application from New Project window. Enter the appropriate details to create the new application project.

One nice feature of Intersoft project template on New Project window of Visual Studio is that you can have the Intersoft project template grouped under Intersoft Solutions node of Installed Templates tree view.

The project template contains several predefined configuration, assembly references, and code files such as Assets, Factory, Selectors and several XAML files. Click here to learn more about the structure of this project template.

When you run the project for the first time, you’ll see a fully-functional user interface such as shown below.

Creating Inventory UXRibbon Structure

I’m going to add a new module which will show list of products. The module will have its own ribbon bar control which employs three buttons: add new data; edit selected item; and delete selected item.

Three image files are added into the [SilverligthProject]AssetsImagesInventory folder as the icon for each of the button.

<?xml version="1.0" encoding="utf-8" ?>
<RibbonBar Name="Inventory">
  <RibbonTab Header="Home" IsSelected="True"
             ResizeOrder=""
             KeyTipAccessText="H">
    <RibbonTabGroup Name="Edit" Header="Products" MinimumSize="Large" IsCollapsible="false"
                    Icon="/ClientUIRibbon1;component/Assets/Images/Inventory/Inventory.png">
      <RibbonButton Content="Add New" MinimumSize="Large" TooltipHeader="New Item" TooltipContent="Create a New Item."
                    LargeIcon="/ClientUIRibbon1;component/Assets/Images/Inventory/AddExistingStandard_32.png"/>
      <RibbonButton Content="Edit" MinimumSize="Large" TooltipHeader="Edit Selected Item" TooltipContent="Edit Selected Item."
                    LargeIcon="/ClientUIRibbon1;component/Assets/Images/Inventory/Edit32.png"/>
      <RibbonButton Content="Delete" MinimumSize="Large" TooltipHeader="Delete Selected Item" TooltipContent="Delete Selected Item."
                    LargeIcon="/ClientUIRibbon1;component/Assets/Images/Inventory/Delete.png"/>
    </RibbonTabGroup>
  </RibbonTab>

</RibbonBar>

Instead of declaring the ribbon structure directly in the xaml page, the ribbon structure is defined in an xml file, RibbonInventoryData.xml. The file is located inside the [SilverlightProject]AssetsData folder.

RibbonFactory.cs class will read each element, attributes of the xml file; parse them to the appropriate object; and create the ribbon to be displayed.

Once the ribbon structure is configured, we need to initialize the ribbon data source and register the Inventory module so that the ribbon tab will be dynamically updated when user select Inventory module.

To initialize the ribbon data source, find InitializeRibbonBar() method in the RibbonPageViewModel.cs class and add a line as shown in the following code. *The class can be found in [SilverlightProject]ViewModels folder.

private void InitializeRibbonBar()
{
    // Initializes application menu
    this.RibbonApplicationMenu = RibbonFactory.CreateMenu(RibbonDataFolder + "RibbonBarData.xml");

    // Initializes ribbon data sources
    this.RibbonData = new Dictionary<ModuleType, string>();
    this.RibbonData.Add(ModuleType.Overview, "RibbonOverviewData.xml");
    ...
    this.RibbonData.Add(ModuleType.Inventory, "RibbonInventoryData.xml");
}

Before running the project and showing the ribbon structure of Inventory module, we need to register the Inventory module in the UpdateRibbonTab method. UpdateRibbonTab is the method that will be invoked when users select a module.

internal void UpdateRibbonTab(ModuleType moduleType, object context)
{
    ...

    switch (moduleType)
    {
        case ModuleType.Calendar:
        case ModuleType.Contacts:
        case ModuleType.Inventory:
        case ModuleType.Mail:
            this.RibbonContextualGroups = RibbonFactory.CreateRibbonContextualTabGroups(RibbonDataFolder + this.RibbonData[moduleType]);
            this.RibbonTabs = RibbonFactory.CreateRibbonTabs(RibbonDataFolder + this.RibbonData[moduleType], context);
            break;

        default:
            this.RibbonTabs = RibbonFactory.CreateRibbonTabs(RibbonDataFolder + this.RibbonData[ModuleType.Overview], context);
            break;
    }

    this.ActiveModule = moduleType;
}

Save all the changes and run the Silverlight application project.

The ribbon structure for Inventory module has been successfully added. When users click/select the Inventory module from the navigation pane, the Add New button; Edit button; and Delete button will be shown.

Displaying The Product List with UXGridView

In this part, we are going to display a list of products. The list will be presented in an UXGridView control.

In this project, UXGridView is bound to WCF RIA Services. In this post, I will not describe in detail about how to configure the application to become WCF RIA Services-enabled; creating the data model; etc. I’d like to suggest you to refer to Intersoft ClientUI MVVM Data Application (WCF RIA SP1) project template. To learn more, see Walkthrough: Create New Intersoft ClientUI MVVM Data Application (WCF RIA SP1) Template.

Once the data repository of Products is completely added, Add UXGridView control and bind the ItemsSource property with Items property from ProductsViewModel; and bind each column of the UXGridView to their corresponding property of ProductsViewModel respectively.

<Intersoft:UXGridView Intersoft:DockPanel.IsFillElement="True" ItemsSource="{Binding Path=Items}"
                        AutoGenerateColumns="False">
    <Intersoft:UXGridView.Columns>
        <Intersoft:UXGridViewTextColumn Header="Category ID" Binding="{Binding CategoryID}"/>
        <Intersoft:UXGridViewTextColumn Header="Product ID" Binding="{Binding ProductID}"/>
        <Intersoft:UXGridViewTextColumn Header="Product Name" Binding="{Binding ProductName}"/>
        <Intersoft:UXGridViewTextColumn Header="Unit Price" Binding="{Binding UnitPrice}"/>
        <Intersoft:UXGridViewTextColumn Header="Units In Stock" Binding="{Binding UnitsInStock}"/>
        <Intersoft:UXGridViewTextColumn Header="Units On Order" Binding="{Binding UnitsOnOrder}"/>
        <Intersoft:UXGridViewTextColumn Header="Quantity Per Unit" Binding="{Binding QuantityPerUnit}"/>
    </Intersoft:UXGridView.Columns>
</Intersoft:UXGridView>

Save all the changes and run the project.

The Inventory module now has had a ribbon structure and will display a list of product in the ContentFrame.

Adding Commanding and Enabling/Disabling UXRibbon Button Based on UXGridView Selected Item.

In this part, I’d like to set the enable/disable state of each ribbon button based on the selected item of UXGridView. By default, the Add New UXRibbonButton is enabled since user should be able to add new item at any time. When no item is selected in UXGridView, Edit and Delete button should be disabled. They will be enabled when item(s) are selected.

In UXGridView, when a row is selected, the SelectedItem property will be automatically synchronized. I can bind this property to my ViewModel to capture the currently selected item. This property is then converted to a Visible/Collapsed and then consumed by IsEnabled property of UXRibbon button to determine whether the UXRibbon button is enabled or not.

Several questions arise when I started to check the feasibility to implement this approach.

• The Inventory.xaml page and the UXRibbon are located in different view. Each of them has their own ViewModel. Implementing converter seems not as easy as I thought earlier.
• The xml file of ribbon structure is processed by RibbonFactory.cs class by implementing parser. I need to ensure whether the ribbon button parser is equipped with binding parser or not.

I’m pretty sure there must be an elegant solution for a simple scenario such as this. So I decided to explore this project and hope to find an example that can be applied to my scenario.

After spending about 15 minutes exploring the project, clues are spotted when Mail module is opened. Some of the ribbon buttons are disabled when no message is selected.

This is exactly what I’m looking for!

It turns out that DelegateCommand play an important role in such scenario as shown in the Mail module. ClientUI provides DelegateCommand, a specialized command object that can be used to handle a delegate directly in the view model, and still can be bound to the view through binding. Furthermore, the DelegateCommand takes advantage of the routed command concept in which the IsEnabled state of the command sources will be automatically synchronized depending on whether the command can execute.

Many thanks to ClientUI development team who has extended the commanding framework to support MVVM through built-in DelegateCommand class. Not only this, they also have made this project template brilliantly. I mean it and don’t intend to exaggerate about what I say. Building Silverlight application based on Intersoft’s project template is considerably easy, even for beginners. I started to learn the implementation of DelegateCommand on Mail module and reset the plan to implement this scenario to be as follow.

There are three UXRibbon button: Add New; Edit; and Delete. Each button is bound to the AddAction; EditAction; and DeleteAction DelegateCommand respectively.

RibbonInventoryData.xml

<?xml version="1.0" encoding="utf-8" ?>
<RibbonBar Name="Inventory">
  <RibbonTab ...>
    <RibbonTabGroup Name="Edit" ...>
      <RibbonButton Content="Add New" MinimumSize="Large" TooltipHeader="New Item" TooltipContent="Create a New Item."
                    LargeIcon="/ClientUIRibbon1;component/Assets/Images/Inventory/AddExistingStandard_32.png"
                    Command="{Binding AddAction}" CommandParameter="AddNew"/>
      <RibbonButton Content="Edit" MinimumSize="Large" TooltipHeader="Edit Selected Item" TooltipContent="Edit Selected Item."
                    LargeIcon="/ClientUIRibbon1;component/Assets/Images/Inventory/Edit32.png"
                    Command="{Binding EditAction}" CommandParameter="Edit"/>
      <RibbonButton Content="Delete" MinimumSize="Large" TooltipHeader="Delete Selected Item" TooltipContent="Delete Selected Item."
                    LargeIcon="/ClientUIRibbon1;component/Assets/Images/Inventory/Delete.png"
                    Command="{Binding EditAction}" CommandParameter="Delete"/>
    </RibbonTabGroup>
  </RibbonTab>
  ...  
</RibbonBar>

ProductsViewModel.cs

public class ProductsViewModel : EditableGridViewModelBase<Product>
{
    public ProductsViewModel()
    {
        this.AddAction = new DelegateCommand(AddCommandAction, CanAddAction);
        this.EditAction = new DelegateCommand(EditCommandAction, CanEditAction);
        this.DeleteAction = new DelegateCommand(DeleteCommandAction, CanDeleteAction);
    }

    public DelegateCommand AddAction
    {
        get;
        set;
    }

    public DelegateCommand EditAction
    {
        get;
        set;
    }

    public DelegateCommand DeleteAction
    {
        get;
        set;
    }

    ...

    private bool CanAddAction(object obj)
    {
        //this method validate whether or not AddNew button is active
        //In this sample, I will keep this button to be always active
        return true;
    }

    private bool CanEditAction(object obj)
    {
        if (this.SelectedProductItem != null)
            return true;
        return false;
    }

    private bool CanDeleteAction(object obj)
    {
        if (this.SelectedProductItem != null)
            return true;
        return false;
    }

    private void AddCommandAction(object obj)
    {
        MessageBoxServiceProvider.Show("add new row is performed", "Information",
                    Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxButton.OK, Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxImage.Information, null);
    }

    private void EditCommandAction(object obj)
    {
        MessageBoxServiceProvider.Show("edit selected row is performed", "Information",
                    Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxButton.OK, Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxImage.Information, null);
    }

    private void DeleteCommandAction(object obj)
    {
        MessageBoxServiceProvider.Show("delete selected row is performed", "Information",
            Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxButton.OK, Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxImage.Information, null);
    }
}

In the next series of my blog post, I will add a final touch to this Ribbon application by displaying detail information of data (for adding and editing operation) in a form.

Download Sample Code

For your reference, the demo project can be downloaded here.

I hope that this project will help you to prepare a simple demo project and provide you with insights about how easy to start developing Silverlight project using Intersoft Silverlight project template.

I’d love to hear your feedback so be sure to drop your comments in the box below.

Regards,
Yudi