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

In my previous post, I’ve shown you how to use a header and footer with custom views in a list/table view. Now, what if I want to show a dockable view at the bottom of the screen? Let’s take the previous sample a bit further to look like the following.

Starting off

To start off, I’ll just copy off the previous sample. If you haven’t read the previous post on how to provide header and footer to your TableView / ListView, it is highly recommended for you to do so before continuing.

If you have done so, let’s move on.

Creating dockable view on iOS

To create the dockable view on iOS, you’ll need to do the following:

• Preparing custom table root view
• Modifying the View
• Modifying the View Controller

Preparing custom table root view

To provide the custom table root view, you’ll need to create a new Crosslight iOS View for iPhone, which is accessible from the Item Templates, available after you’ve successfully installed Crosslight.

Right click on the Views in HeaderAndFooter.iOS/Views folder and select Add, New Item.

Then choose, Crosslight iOS View for iPhone. Give it a name of CustomTableRootView.

First, let’s try to create a the custom table root view. Open the CustomTableRootView.xib in Xcode Interface Builder.

Adding the Docked View

Drag a new View from the Object library, set the outlet as DockedView, and provide the following constraints:

• Horizontal Space Constraint: from Superview.Trailing equal to the View.Trailing with the following values.
  
• Vertical Space Constraint: from Superview.Bottom equal to the View.Bottom with the following values.
  
• Horizontal Space Constraint: from DockedView.Leading equal to the Superview.Leading with the following values.
  

Now that the docked view is ready, let’s drag a Label, set the outlet as TxtHeader, and drag a button, set the outlet as BthHeader. Both of them are given the previous outlet names, so that no code changes will be required in the BindingProvider side. If you wish, you can set the following constraints:

• Give the DockedView a height of 45.
  
• Vertically align the label as well as the button.
  
• Give an inner padding of 20.
  

That’s pretty much it. Let’s modify the View a bit.

Modifying the View

Let’s open the CustomTableRootView.cs and modify that a bit by adding a new ResizeTableView method.

using System;
using System.Drawing;
using System.Linq;
using CoreGraphics;
using Foundation;
using UIKit;

namespace HeaderAndFooter.iOS
{
    public partial class CustomTableRootView : UIView
    {
        #region Constructors

        public CustomTableRootView(IntPtr handle) : base(handle)
        {
        }

        #endregion

        #region Fields

        public static readonly UINib Nib = UINib.FromName("CustomTableRootView", NSBundle.MainBundle);

        #endregion

        #region Methods

        public static CustomTableRootView Create()
        {
            return (CustomTableRootView) Nib.Instantiate(null, null)[0];
        }


        internal void ResizeTableView(nfloat top)
        {
            var tableView = this.Subviews.FirstOrDefault(o => o is UITableView);
            tableView.Frame = new CGRect(0, top, tableView.Bounds.Width, this.Bounds.Height - top - this.DockedView.Bounds.Height);
        }

        #endregion
    }
}

Here, we prepare a handy method to resize the table view when the view is used, called ResizeTableView. By calling this method, the TableView that contains this dock view will have its bounds re-adjusted. This is done so that the scrolling container in the TableView does not exceed the docked view. Take a closer a look at the contents of the method.

In line 36, we first search for the TableView that is added as a subview of the ViewController. In line 37, we set a new bounds for it, not changing the width at all, but just by adjusting the height by taking account the DockedView.Bounds.Height as well.

Modifying the View Controller

Next, open up the MainViewController.cs. Here’s the contents.

using CoreGraphics;
using Foundation;
using HeaderAndFooter.ViewModels;
using Intersoft.Crosslight;
using Intersoft.Crosslight.iOS;
using UIKit;

namespace HeaderAndFooter.iOS.ViewControllers
{
    [Register("MainViewController")]
    [ImportBinding(typeof(MainBindingProvider))]
    public class MainViewController : UITableViewController<MainViewModel>
    {
        #region Properties

        public override UIViewTemplate FooterViewTemplate
        {
            get { return new UIViewTemplate(CustomFooter.Nib); }
        }

        public override TableViewInteraction InteractionMode
        {
            get { return TableViewInteraction.Navigation; }
        }

        public override bool ShowGroupHeader
        {
            get { return false; }
        }

        public override UITableViewStyle TableViewStyle
        {
            get { return UITableViewStyle.Plain; }
        }

        public override bool UseCustomRootView
        {
            get { return true; }
        }

        #endregion

        #region Methods

        protected override void InitializeView()
        {
            base.InitializeView();

            // set navigation title
            this.NavigationItem.Title = "Crosslight App";
        }

        protected override UIView GetCustomRootView()
        {
            return CustomTableRootView.Create();
        }

        public override void ViewWillLayoutSubviews()
        {
            base.ViewWillLayoutSubviews();

            // adjust tableview frame based on top layout guide	
            ((CustomTableRootView)this.View).ResizeTableView(this.TopLayoutGuide.Length);
        }

        #endregion
    }
}

Here, we removed the overridden property for HeaderViewTemplate, since we’re going to use the new DockedView to replace the header. Therefore, we then override a new property called UseCustomRootView and return true.

After we’ve done that, we then override the GetCustomRootView() method to return the CustomTableRootView that we’ve just created by calling CustomTableRootView.Create();

The custom root view is one of the unique features introduced in Crosslight’s advanced UITableViewController. It allows you to easily replace the root view with a custom one with just a few property sets, while still retaining the developer experience and automatic binding feature. In the case above, when UseCustomRootView is returning a true value, the GetCustomRootView method will be automatically called when the controller is initializing.

Lastly, we override the ViewWillLayoutSubviews method. This method is called when a new subview is added to the ViewController, which can be done at any time, whether during ViewController creation or programmatically adding a subview at runtime, therefore, when the DockedView is added, we then call our handy method to resize the TableView so that the scrolling container wouldn’t “bleed” past the DockedView.

That’s it. Run the project and you should get the result similar to the following video.

Creating dockable view on Android

Now that we’ve finished the iOS version, let’s create the Android version. To create the docakble view on Android, you’ll need to complete the following:

• Preparing custom layout
• Replacing the content layout in Activity

Preparing custom layout

First things first, let’s create a new Android Layout, and let’s name it CustomLayout.axml. To do this, right click on the HeaderAndFooter.Android/Resources/layout folder.

Select Add, New Item. Under Android, select Layout.

Provide the layout for the CustomLayout.axml as follows.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/Footer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="1px"
            android:background="#f2f2f2" />
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingLeft="20dp"
            android:paddingRight="20dp">
            <TextView
                android:id="@+id/TxtHeader"
                android:layout_width="fill_parent"
                android:layout_height="30dp"
                android:layout_weight="1"
                android:gravity="left"
                android:textSize="20sp" />
            <Button
                android:id="@+id/BtnHeader"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>
    <ListView
        android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@id/Footer" />
</RelativeLayout>

Let’s take a closer look. Here, we’ve used a RelativeLayout as the root ViewGroup and we’ve added 2 major elements to the RelativeLayout, which is a LinearLayout that will act as our DockedView and ListView.

At a glance, you might be wondering why the ListView is defined after the LinearLayout. This is purely for build purposes. The XML parser parses the text from top to bottom. Since in the ListView, we’ve defined android:layout_above=“@id/Footer”, the build will fail if the LinearLayout is not defined beforehand. Hence, the ListView is defined after the LinearLayout.

One important thing to notice that the ListView’s id is set to @android:id/list. This conforms the standard method to override the built-in ListActivity’s layout in native Android development itself. For more information on that topic, click here. This is done because in the ListActivity class, you can reference the ListView as simply as calling this.ListView, however since you’ve overridden the whole layout, then the ListView must be re-referenced this way so that the Android understands. Everything else is just standard Android layouting process.

Replacing the content layout in Activity

After the layout is prepared, let’s modify some codes in the Activity. Open up MainActivity.cs inside HeaderAndFooter.Android/Activities folder and see the contents as follows.

using Android.App;
using HeaderAndFooter.ViewModels;
using Intersoft.Crosslight;
using Intersoft.Crosslight.Android;

namespace HeaderAndFooter.Android
{
    [Activity(Label = "Crosslight App", Icon = "@drawable/icon")]
    [ImportBinding(typeof(MainBindingProvider))]
    public class MainActivity : ListActivity<MainViewModel>
    {
        #region Properties

        protected override int ContentLayoutId
        {
			get { return Resource.Layout.CustomLayout; }
        }

        protected override int FooterLayoutId
        {
            get { return Resource.Layout.CustomFooter; }
        }

        public override ListViewInteraction InteractionMode
        {
            get { return ListViewInteraction.Navigation; }
        }

        #endregion

        #region Methods

        protected override void InitializeView()
        {
            base.InitializeView();

            this.RegisterViewIdentifier("TableView", this.ListView);
        }

        #endregion
    }
}

In the ContentLayoutId property, we’ve replaced the old layout to the new CustomLayout that we’ve created earlier and we’ve also removed the HeaderLayoutId. You’ve completed the Android version. Let’s run this project and you should get the result similar to the following.

Wrapping Up

You’ve seen how easy and elegant it is to provide a dockable view to your table view on iOS as well as list view on Android. Achieving the same task without Crosslight would be really tedious and time consuming. The dockable view also comes with automatic binding support, so you can take advantage of native binding process with whatever layout you have. Nice and simple.

You can find the code to the sample here:
http://git.intersoftsolutions.com/projects/CT/repos/crosslightdockableview/browse. To use this sample, you’ll need at least Crosslight build 4.0.5000.323 and above.

See you in the 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

We are truly excited to announce that the ultimate cross-platform development toolset now sports even more features and stability updates. This new service pack update includes a new localizable business template, over 50+ item templates for Visual Studio, dynamic localization service, new template definitions for iOS, major stability updates for Android, support for application-wide single sign-on, and much more.

The Crosslight Project Wizard now includes an additional and noteworthy template, which is the localizable business template. The new localizable business template allows you to change the language of the application dynamically at runtime, thanks to the dynamic localization service. If automatic language is set, when the device’s language is set to the one supported by the application, then the language changes automatically. However, you can also force an application to use a specific language of your choice, regardless of the language setting used by the device. The following screenshots show the improved Crosslight Project Wizard and the running app respectively.

We have also shipped more than 50 templates for Visual Studio, ranging for variety of projects, this includes, Android, iOS, Windows Phone, and shared Core project. The templates itself is clear and concise, with instructions inside each template on how to use it. Your development process will be significantly accelerated since you can now quickly add common Crosslight items to your project. Say goodbye to the tedious, error-prone copy and paste.

In addition, Crosslight for Android platform has received major stability improvements, including the support of Xamarin.Android.Support.v4 library, revamped overall lifecycle, elegant rotation handling to ensure that view state is restored without performance degradation, improved tab caching, and reliability of the Android services, such as camera service, location service, social services, and more.

So far, we’ve only touched the surface of what’s revamped in this SP1 release. For a complete list of the updates, make sure you check out the Crosslight 2.3 release notes in our Developer Center page.

All the installers on our site have also been updated to reflect the new bits. Of course, this update is free of charge for customers with existing subscription for Mobile Studio or Premier Studio. Click here to sign in and access your downloads. If you haven’t tried Crosslight today, request a trial now and see how Crosslight transform the way you build cross-platform apps entirely.

Last but not last, we hope you enjoy Crosslight as much as we love building it! Stay tuned for our upcoming video tutorials and hands-on guide to apply these exciting features in your apps!

Cheers,
Nicholas Lie

We’re very happy to introduce the release of our flagship development toolset for Silverlight and WPF, ClientUI 10. ClientUI 10 has now equipped with powerful enterprise reporting services that allows you to author any kind of reports quickly and easily. What’s also great about the enterprise reporting services is also that the reports are completely viewable in Crosslight applications.

Not only that, push notification services introduced in Crosslight 2 takes away developers’ pain of having to tediously configure the necessary configurations to allow push notifications on their apps. Crosslight 2 has streamlined this process into a single unified entry point, starting from registering the device token to the platform service, receiving the device token back and saving them to the WebAPI database, and much more.

The social networking services also allows developers to perform various social network operations such as authenticating with social networks, getting the user profile info, getting list of friends, sharing content, and much more. What’s great about the social networking services, is that services are completely UI-agnostic. You can design any kind of views to use with our social network services and have them in your application, just the way you want it to be.

Watch as Nicholas introduces you to the integrated enterprise reporting services, how to view the reports on Crosslight apps, push notification services for Crosslight and how to send them across multiple devices. Last but not least, the social network services that allows you to perform various Facebook authentication completely with custom UI.

You can also find the recordings to the first and second day of the webinar, in case you’ve missed them. Also, visit our Developer Center to learn more about Crosslight. It contains hundreds of documentation topics, illustrations, walkthroughs, video tutorials, and more. If you have any questions regarding Crosslight, feel free to open up a new thread at Crosslight community forum.

Cheers,
Nicholas Lie

Building enterprise apps will almost certainly involves data access. Crosslight aims to be the holistic solution you need to build enterprise mobile apps quickly and easily. Therefore, in this release, Crosslight 2 ships with powerful data access that supports the latest Microsoft techonlogies such as WebAPI 2 and MVC 5. To accelerate your development even further, Crosslight 2 took the extra step of creating entity designer extensions for VIsual Studio 2012 and 2013.  The entity designer extensions allow you to create reusable entity models, entity context, entity controllers, and entity services.

Watch as our Chief Technology Officer, Andry Handoko Soesilo, introduces you to the plethora of data access services such as using the entity designer extensions, explaining the concepts of data synchronization and RESTClient for streamlined data retrieval, creating a simple mobile CRM app complete with incremental loading and pull to refresh, and much more.

Also, visit our Developer Center to learn more about Crosslight. It contains hundreds of documentation topics, illustrations, walkthroughs, video tutorials, and more. If you have any questions regarding Crosslight, feel free to open up a new thread at Crosslight community forum.

Cheers,
Nicholas Lie

Crosslight 1 marks a great start for developers jumping into cross-platform mobile development. Built solid grounds, the MVVM pattern, Crosslight paves the way for extensible, maintainable, scalable, testable, and making your code highly reusable to use on four platforms: iOS, Android, Windows Phone and Windows 8.

Crosslight 2 introduces an even more comprehensive additions to the powerful toolset to easily create enterprise mobile apps in just a very short time. This includes versatile data access services, beautiful UI components such as the navigation drawer, advanced master detail view, two new templates: business app template and the navigation drawer template. Watch the webinar recording to see how you can leverage Crosslight 2 and take advantage of its powerful features and start developing your own mobile apps today.

Also, visit our Developer Center to learn more about Crosslight. It contains hundreds of documentation topics, illustrations, walkthroughs, video tutorials, and more. If you have any questions regarding Crosslight, feel free to open up a new thread at Crosslight community forum.

Cheers,
Nicholas Lie

Happy new year to you from all of us at Intersoft! Thank you for being part of the Intersoft community in 2013. Your success means everything to us. Looking ahead, the new year is ripe with possibility. At Intersoft, we resolute to serve you better with improved products and new product category that will truly save development time and cost, as well as providing you with even better, responsive support.

We’re very excited to welcome 2014 with some great product plans and roadmap that we think you will really love. However, before we get into the new year’s roadmap, let’s take a quick recap on the achievements we’ve made during the past year.

2013 Year In Review

2013 was absolutely an incredible year for us! Considered our busiest and most productive year ever, we managed to ship over 400 high quality components across 7 platforms. And for the first time ever, we expanded our product portfolio to 4 new platforms and deliver them at once in a single release. At a glance, all 2013 product plans were successfully delivered, and exceeded much more than the plans.

Here are the list of our top 8 achievements that I would like to share.

• Shipped Crosslight — the industry’s first advanced toolset for cross-platform native mobile apps development supporting iOS, Android, Windows Phone and Windows 8
• Delivered 400+ UI components across 7 platforms, covering desktop, RIA, web, and mobile apps development — all packed with comprehensive documentation and tons of samples
• All 40+ ASP.NET components revamped to support latest web standards, HTML5 and CSS3
• Released Reporting lineup for Silverlight, the industry’s first reporting tool offering end-to-end, comprehensive business reporting capabilities.
• Redesigned websites, streamlined account and license management with single sign-on, yielding more compelling and engaging user experiences
• Modernized Intersoft experiences leveraging balanced design aspects that takes account minimalism, content exposure, layout, identity and typography.
• Major product rebranding with the introduction of Premier Studio, the first time in our history as we’re expanding our products portfolio into new market segments such as the cross-platform mobile development industry
• Joined Visual Studio 2013 Launch Partner, releasing a major service pack that updates all components to support Visual Studio 2013, Internet Explorer 11 and Windows 8.1 in timely fashion

2014 Focus — Enterprise Mobile Development Made Easy

In 2014, we will be laser-focused on the cross-platform mobile development tools. Our works in 2013 is just the beginning of our holistic mobile roadmap. Building on the foundations laid in the initial Crosslight release, we’re striving to make cross-platform enterprise apps development even easier and simpler with a multitude of new features, components and services that work reliably across multiple platforms such as iOS, Android, Windows Phone 8, and Windows 8.

Our team is currently hard at work creating the next iteration of Crosslight which will make available many functionalities common to line-of-business apps development. Announcing “Crosslight 2”, we will be adding over 200 new features and dozens of new, highly reusable services to the already powerful mobile toolset.

The new Crosslight will be the industry’s first, one of its kind, that lets you create the most demanding business apps that leverage advanced capabilities such as offline data storage, pending changes management, automatic synchronization to cloud, push notifications, user authentication, social network integration and much more. And better yet, all these services can be programmed in a single codebase — not each codebase per platform. So imagine how many months you can shave off from your development time table!

Building fully functional, usable data-driven apps is really time-consuming as there are a lot of things to consider. For examples, your apps need to be “timezone aware” if you have users located in different regions and time zone. Your apps need to handle two-way time zone conversion between the local device’s timezone with the server. Adding to the complexity — data synchronization, offline storage, and data editing — all need to be thoughtfully considered and integrated for them to work in harmony, ultimately producing great apps that are beautiful inside and out. Sounds too much hassles? Fear not — we’ve got it covered!

The new data services in the upcoming release will be built with “timezone aware” enabled by default. Furthermore, it will take account the best practices of building highly scalable enterprise-class apps, and consider every little detail that you might not aware of. All you need is simply consuming the services and customize the settings with a few lines of code, and Crosslight will handle the rest behind the scene.

To summarize the Crosslight roadmap, please take a look at the following diagram which lets you easily overview and compare the existing state of Crosslight with the expanded offering in the upcoming release.

As seen in the diagram above, the upcoming release will be strongly focused on enterprise data services and core mobile services such as discussed above which include entity services, authentication, social network integration and push notifications. In the second release later this year, you can expect more data visualization and user interface components optimized for the mobile apps scenarios.

An important announcement with regards to our release cycle, we will be adjusting the first iteration of the release to the beginning of the year while the second one is planned for the mid of the year. We believe this schedule changes are beneficial to us, our partners and our valued customers as the releases will occur in more appropriate timing for project planning, and more ideal time to market.

This blog post only provides a high level overview of the planned mobile tools roadmap. In the near future, we will post the complete details of the mobile features as well as the roadmap for other platforms such as ASP.NET and Silverlight in our public community forum. Stay tuned for the next announcement.

Last but not least, I hope you liked our upcoming product plans and roadmap. Please feel free to drop your comments or feedback related to the roadmap, or if you wish to see something in our next milestone.

All the best,
Jimmy

The best cross-platform mobile toolset refined to its core.

Two weeks ago, we released our SP1 milestone for Mobile Studio, bringing many new yet useful features such as the versatile navigation drawer for iOS and Android platforms. Today we have just released a more refined version of the the world’s most robust toolset for cross-platform development, with features that may not be plainly seen with the naked eye. In this post, we will cover many meticulous details such as elegant rotation handling for use with the Android navigation drawer and nested fragment navigation, updated navigation drawer samples, and also a delicate handling of the IsTransitioning state with the new left-edge swipe gesture and controller transition support introduced in iOS 7.

Rotation, Elegantly Handled.

Developers coming from the Android world will be familiar with the pain and frustration that we all share when designing apps for the Android platform, especially when fragments are used. When the Android device is rotated, the FragmentActivity as well as the Fragments are destroyed, which will then need to be recreated. Handled incorrectly, will result to incorrect app behavior that may confuse user and breaks overall user experience, not forgetting to mention how apps will crash more often.

Crosslight for Android has been updated to address this issue, and developers will appreciate how all the intricate details have been taken care of. Now you will only need to focus on the ViewModel as well as the look and feel of their app, instead of having to handle the delicate rotation lifecycle. The ViewModels are now automatically persisted across rotation lifecycle, making sure that the screen view state and user’s editing session are correctly persisted when the FragmentActivity is recreated. Tested and proven on all form factors and orientation, this great time-saving feature will definitely shave weeks off your time table.

Nested Fragment Navigation in Navigation Drawer.

Previously, we have introduced the stunning and elegantly designed navigation drawer for Crosslight. Now, it has been updated to support nested fragment navigation as well as keeping the navigation stack intact when the user has navigated and the device is rotated, allowing greater user experience and flexibility of your app when using the navigation drawer.

We have also introduced a new RightButtonDrawerId property for DrawerSettings in Android, allowing you to toggle the right navigation drawer using the action bar, if you wish to. The feature can be easily enabled by supplying the RightButtonDrawerId with the ID of menu item you wish to use as the toggle in the ActionBar. We also have updated our Facebook-style and Worthy-style navigation drawer samples to reflect the changes.

Left-edge Swipe Gesture and Controller Transition Support for iOS 7.

Since the introduction of iOS 7, Apple has introduced a new “hidden” gesture that most users might not be aware, which is the left-edge swipe gesture.  iOS 7 has introduced a new state where the view is transitioning, which is now handled correctly. Changes to the view model will now take place when the view has completely transitioned, which means, changes will not be processed if the user swipes halfway through and returns to the editing page. The view is now also smoothly transitioned with fading animation during transition. This subtle yet important feature reflects our commitment to pay attention the smallest details that can give impact to user experience.

This update marks as the last and most stable version of Crosslight until the next major version is available. Sign in to your account to download the new December 2013 update today.

In the next major release, Crosslight will ship the world’s first cross-platform data access framework with EntityContainer with tracking changes, async CRUD operation, async batch update, and much more . Supporting latest Microsoft technologies such as WebApi 2 and EntityFramework 6, Crosslight data service will provide advanced TT code generation as well as streamlined serialization and deserialization which were recently released, as well as support for transmission using OData. Stay tuned for more!

Got questions? Feel free to leave a comment or start a discussion at our forums.

Cheers,
Nicholas Lie

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

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

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

Drawer Navigation Done Right

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

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

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

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

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

            this.Open(DrawerSide.Left);
        }
    }

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

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

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

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

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

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

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

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

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

All The Great Features You’ve Ever Wanted

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

Flexible one or two-sided drawer

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

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

And the Android counterpart below.

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

Intuitive design based on platform’s native UI guidelines

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

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

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

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

5 Drawer Samples Included

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

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

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

What’s Next

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

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

Best,
Jimmy