Intersoft Solutions Corporate Blog » 2015 R1

Getting Started with Crosslight Charting

Nicholas Lie — Wed, 21 Oct 2015 06:25:00 +0000

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
    {
        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();
            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
    {
        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
    {
        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.

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:

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

Improving Crosslight App Performance with Compression Filter

Jimmy Petrus — Thu, 10 Sep 2015 08:53:28 +0000

In my post last month, I mentioned about data optimization feature in Crosslight 4 which could greatly improve the overall performance and experience of your Crosslight apps. So here we are, this week’s post will feature this optimization feature, and you will learn how to apply it to your apps. Read on.

In Crosslight 4, we shipped a lot of new stunning components like charting, barcode reader, dialog presenters and much more. But that’s not all. We also pay a lot of attention on small and unseen areas such as the data framework, logging, and view projection. In fact, no feature is too small. For instance, the new extensible filters in RestClient enable you to add request and response compression and make your apps work 75% faster, particularly if you’re building enterprise apps that sync relatively large data. Let’s see how it works.

Adding a new request or response filter to the RestClient is extremely easy, thanks to the new, intuitive API. Here’s how:

this.GetService().Register(
c =>
{
    RestClient restClient = new RestClient(appSettings.RestServiceUrl);
    restClient.AddRequestFilter(new GZipRequestFilter());
    restClient.AddResponseFilter(new GZipResponseFilter());

    return restClient;
});

If you’re using Crosslight App Framework, you can simply add the code in the AppService class where all container registrations are defined. The Rest client in the entire app will automatically have the filters applied.

Since the filter is provided as interface, you can plug any capabilities you desire, whether it is a compression filter, an encryption filter, etc. In this case, let’s not reinvent the wheel. We’ll just grab an existing Microsoft.Bcl.Compression library from NuGet. Here’s an example how we can extend a third-party library to work with our filter interface:

public class GZipRequestFilter : GZipFilter, IRestRequestFilter
{
    public void Filter(IRestRequest request)
    {
        request.AddHeader("Accept-Encoding", "gzip, deflate");
        Parameter requestBody = request.Parameters.Where(o => o.Type == RequestParameterType.RequestBody).FirstOrDefault();

        if (requestBody != null)
        {
            request.AddHeader("Content-Encoding", "gzip");
            requestBody.Value = this.Compress(requestBody.Value.ToString());
        }
    }
}

public class GZipResponseFilter : GZipFilter, IRestResponseFilter
{
    public void Filter(IRestResponse response)
    {
        Parameter contentEncoding = response.Headers.Where(o => o.Name == "Content-Encoding").FirstOrDefault();

        if (contentEncoding != null && contentEncoding.Value.ToString().ToLowerInvariant() == "gzip")
            response.Content = this.Decompress(response.RawBytes);
    }
}

As seen above, we can just extend an existing class, say, the GZipFilter class, then implement the IRestRequestFilter and IRestResponseFilter. Both interfaces require an implementation of Filter method, that’s where you perform the actual logic of the filter.

On the server-side, if you’re using IIS for the web server, then you can just enable the dynamic compression feature. Afterward, the WebAPI response will be automatically compressed.

One thing to note though, WebAPI doesn’t automatically recognize the compressed requests. Fortunately, Microsoft already has a NuGet package for that. So we’ll just grab the ASP.NET WebAPI Compression Support, then add the following code to the WebAPI config class.

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services
        config.MessageHandlers.Insert(0, new ServerCompressionHandler(new GZipCompressor(), new DeflateCompressor()));
    }
}

Pretty easy, right?

Based on performance test on one of the apps we built for our enterprise client, enabling the compression filters speed up our apps performance by nearly 4x. Previously, in certain case, the app took 9 minutes to synchronize a thousand of data over the Edge connection. With compression enabled, the app only took only 2 minutes to sync the same set of data over Edge, and only a few seconds over Wifi. The user couldn’t be happier. So we hope you can do the same too, your users will thank you so much.

To see the feature in action, pull the sample from our Git, and play around with it. The feature is also fully documented, which you can find here. Happy optimizing!

Best,
Jimmy

New Crosslight 4 IDE Integration Features

Nicholas Lie — Mon, 24 Aug 2015 10:02:35 +0000

Howdy ho! I’m back with another video.

In this video I’m going to show you the new IDE integration features of Crosslight 4, and we’ll focus on VS 2015 support as well as the improved Crosslight Project Wizard.

Watch the entire video to see everything that has been improved.

See you guys in the next video!

Cheers,
Nicholas Lie

Upgrading Crosslight 3 to Crosslight 4

Nicholas Lie — Thu, 13 Aug 2015 10:02:01 +0000

How are you guys?

I’m sure you guys have heard a lot about all the exciting new stuff in Crosslight 4 and can’t wait to get your hands dirty. But, for existing Crosslight developers, you might be wondering how to upgrade your existing projects to use Crosslight 4?

That’s why I made this video. In this video, I’m going to show you how to upgrade your existing projects to use Crosslight 4. It’s quite simple actually, it only involves four simple steps. What are those steps? Watch my video to find out!

Oh yeah, you can follow the full upgrade guide here: http://developer.intersoftpt.com/display/crosslight/Crosslight+4+Upgrade+Guide. In case you missed out all the exciting goodies of Crosslight 4, it’s available here: http://developer.intersoftpt.com/display/crosslight/Crosslight+4.0+Release+Notes.

It’s been a while since I made my last video tutorial. It feels great and I can’t wait to share more Crosslight tips and tricks for you guys!

See you in the next post.
Nicholas Lie

Introducing Crosslight View Projection

Jimmy Petrus — Mon, 10 Aug 2015 11:05:42 +0000

Couple weeks ago, we’ve finally released Premier Studio 2015, one of our most remarkable milestones. We shipped Crosslight 4 with a host of new exciting components, Visual Studio 2015 across all product lineup, and Windows Edge support for WebUI components. That’s not all. We also launched a fully redesigned website which was the result of months of redesign works. In case you missed the news, check out the full coverage on the release here, and the website redesign concept here.

So now you’ve got the new Studio installed, what’s next? We’ve made available a wealth of resources to help you quickly get started. For the starting point, I recommend you to check out the release notes and follow the links in the page. Over the next few weeks, we’ll blog around the new features introduced in this release, covering each of them in more practical way.

This week, I’d like to discuss about the new features in Crosslight data access components, and how you can leverage them to build faster, more reliable data intensive apps.

Displaying a list of data that includes information from several related tables is a very typical application scenario. Consider the order list in an order tracking app, it makes a good sense to show aggregated amount and shipping information along with the order item, perhaps something like this.

Showing the list from orders table only is certainly straightforward, but how to include the related information? That’s easy, thanks to the data service component (both client & server) included in Crosslight. Just use the Includes API in the query definition, so the related entities will be fetched automatically from the server, like so:

public override QueryDescriptor GetQueryDescriptor()
{
    QueryDescriptor queryDescriptor = this.GetBaseQueryDescriptor();
    queryDescriptor.Includes.Add("Customer");
    queryDescriptor.Includes.Add("Address1");

    return queryDescriptor;
}

That works well in most cases, particularly for list with few included related entities. However, when you added more related entities to the list, the payload will become larger too, exponentially. This often leads to issues like: longer time to transfer the data, more overhead in entity processing, and more critically, larger memory allocation. But, that’s all natural due to the way related entities work. To understand how a response with related entities look like, take a look at the JSON below.

{
  "$id": "1",
  "$type": "Intersoft.Data.WebApi.QueryResult, Intersoft.Data.WebApi.v4",
  "AffectedRows": null,
  "InlineCount": null,
  "Results": [
    {
      "$id": "2",
      "Address1": {
        "$id": "3",
        "AddressID": 1092,
        "AddressLine1": "99700 Bell Road",
        "AddressLine2": null,
        "City": "Auburn",
        "StateProvince": "California",
        "CountryRegion": "United States",
        "PostalCode": "95603",
        "rowguid": "79cdd89c-3c91-48db-8277-46d04aad7251",
        "ModifiedDate": "2002-09-01T00:00:00.000",
        "CompleteAddress": "99700 Bell Road\nAuburn, California"
      },
      "Customer": {
        "$id": "4",
        "CustomerID": 29847,
        "NameStyle": false,
        "Title": "Mr.",
        "FirstName": "David",
        "MiddleName": null,
        "LastName": "Hodgson",
        "Suffix": null,
        "CompanyName": "Good Toys",
        "SalesPerson": "adventure-works\\linda3",
        "EmailAddress": "david16@adventure-works.com",
        "Phone": "969-555-0117",
        "PasswordHash": "+gtwbVycsIIj2loVtrHNRN6IBLl20lQpRK8+JhzxyEo=",
        "PasswordSalt": "AwqZdYk=",
        "rowguid": "fdd7d9cb-9a81-40fc-baf6-facde8da4923",
        "ModifiedDate": "2002-09-01T00:00:00.000"
      },
      "SalesOrderID": 71774,
      "RevisionNumber": 2,
      "OrderDate": "2015-06-01T00:00:00.000",
      "DueDate": "2015-06-13T00:00:00.000",
      "ShipDate": "2015-06-08T00:00:00.000",
      "ModifiedDate": "2015-06-08T00:00:00.000"
    }
}

As seen in the above JSON, every included entity will be added as a child record in the server response. This allows the Crosslight entity manager to attach the records properly in the client side. In our simple test, the order list retrieved with the Includes approach took 72 KB in size.

If you’re new to Crosslight or unfamiliar with the QueryDescriptor API, you might want to check out Dynamic Data Access with Query Descriptor.

Obviously, you can address the above issues with custom server query or custom views, which are well supported by Crosslight. But, creating custom query every time you need to display data is counter-productive and tedious at best, agree?

So what solution do we have in store? Read on.

Enter View Projection.

Building on our experiences in architecting large scale enterprise apps, and also based on our customer’s feedback, we are introducing a more efficient way to create a shaped view in Crosslight 4. Called view projection, you can easily create a data view comprised of various information from related tables into a single flat list – dramatically shrinking payload size and processing time. We believe this is a better, more efficient, and more reliable way to fetch and present data in Crosslight apps.

Using the same order list scenario above, we can now extend the order entity with new properties to contain the additional information we’d like to fetch, then simply add the new Select attribute to indicate which property and related table to fetch, like so:

public partial class SalesOrderHeader
{
    [Select("Address1.CompleteAddress")]
    public string ShipAddress { set; get; }

    [Select("Customer.CompanyName")]
    public string CustomerCompany { set; get; }
}

By defining such a simple metadata in the client side, the server will automatically construct the query behind the scene. Back in the client, you’ll get the data with the additional information in a flat list, then simply bind it to a list view. Piece of cake.

Here’s the example result of the response.

{
  "$id": "1",
  "$type": "Intersoft.Data.WebApi.QueryResult, Intersoft.Data.WebApi.v4",
  "AffectedRows": null,
  "InlineCount": null,
  "Results": [
    {
      "$id": "2",
      "$type": "ViewProjectionSample.DomainModels.SalesOrderHeader, ViewProjectionSample.DomainModels",
      "SalesOrderID": 71774,
      "RevisionNumber": 2,
      "OrderDate": "2015-06-01T00:00:00.000",
      "DueDate": "2015-06-13T00:00:00.000",
      "ShipDate": "2015-06-08T00:00:00.000",
      "ModifiedDate": "2015-06-08T00:00:00.000",
      "SalesOrderDetails": [ ], 
      "Address": null,
      "Address1": null,
      "Customer": null,
      "ShipAddress": "99700 Bell Road\nAuburn, California",
      "CustomerCompany": "Good Toys"
    }
}

As expected, the Customer and Address entities are no longer included in the returned result. Instead, the ShipAddress and CustomerCompany properties are simply filled with the requested information.

Per our test using the same order query, the view projection took only 37 KB, about half the size of the response size using Includes approach. If you build relatively complex data apps, this view projection alone could reduce the response size up to 75%.

That’s not all. Nested properties is also supported, so you can easily include any entity regardless of the depth, as long as their relationships are well defined. Here’s an example of nested property selection.

[Select("Product.Category.CategoryName")]
public string ProductCategory { set; get; }

[Select("Order.ShipToAddress.Country.Name")]
public string ShipCountry { set; get; }

In addition to nested properties, the new Select attribute is also smart enough to do some heavy data aggregation and calculation. Say you want to include the order details count and total to the order list, you can specify the Select attribute like this:

[Select("SalesOrderDetails.OrderQty", Aggregate.Sum)]
public int ProductQuantity { set; get; }

As expected, the returned result will look something like this:

{
  "$id": "1",
  "$type": "Intersoft.Data.WebApi.QueryResult, Intersoft.Data.WebApi.v4",
  "AffectedRows": null,
  "InlineCount": null,
  "Results": [
    {
      "$id": "2",
      "$type": "ViewProjectionSample.DomainModels.SalesOrderHeader, ViewProjectionSample.DomainModels",
      "SalesOrderID": 71774,
      "RevisionNumber": 2,
      "OrderDate": "2015-06-01T00:00:00.000",
      "DueDate": "2015-06-13T00:00:00.000",
      "ShipDate": "2015-06-08T00:00:00.000",
      "ModifiedDate": "2015-06-08T00:00:00.000",
      "SalesOrderDetails": [ ], 
      "Address": null,
      "Address1": null,
      "Customer": null,
      "ShipAddress": "99700 Bell Road\nAuburn, California",
      "CustomerCompany": "Good Toys",
      "ProductQuantity": 2
    }
}

Unbelievably simple, isn’t it? We haven’t quite finished yet, read on.

How about using some mathematical operations along with the data aggregate, you asked. Well, we’ve got those covered too. Here’s a quick example:

[Select("SalesOrderDetails", "OrderQty * UnitPrice * (1 - UnitPriceDiscount)", Aggregate.Sum)]
public double SubTotal { set; get; }

In addition to sum, as you might already have in mind, we also supported other aggregate options such as count, min, max, and average.

And if you just realized, we haven’t touch the server part even a bit, are we missing something? Nope. The server recognizes all these new Select metadata, thanks to the much improved WebApi component introduced in the new Intersoft.Data.WebApi.v4 assembly.

In fact, all you have to do at the server side is to update the Intersoft WebApi assemblies and the related Nuget packages to the latest version. Check out this upgrade guide for details.

Last but not least, all the powerful new capabilities above are equally supported in Crosslight SQLite as well, so if you build sync-aware apps, the same metadata will work just fine, whether the app loads data from the remote server or local storage. In addition, the view projection has been carefully designed to support data editing and update scenario as well which I’ll cover in the next post.

We’ve designed Crosslight with strong focus on developer experience since the initial release. We continue to provide even greater developer experience in this new release, making the impossible possible with intuitive and simple API design.

We still have a lot of stories to cover around data access improvements, but for now, let’s pull some samples and see the demo of view projection features for yourself. If you have any questions, join us in our community forum.

Best,
Jimmy