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

Hi guys, Arief here from the Intersoft Consultant team. Today I will talk about how to use iOS Collection View and Android Grid View in order to create a beautiful cross-platform navigation menu. At the end of this tutorial, you’ll learn how to use the collection view in your Crosslight applications, which looks similar to the following illustration.

Introduction

Collection View / Grid View (will be referred as Collection View from now on) is a very versatile user interface. As a matter fact, both iOS and Android have always been using it as a native pattern for Springboard (iOS home) as well as lots of other Android launchers. Nowadays those trends start to spread throughout business apps considering how user-friendly and eye-pleasing when compared to the plain old list view.

If you are interested in creating a gorgeous and cool business apps, using collection view is a must! In this tutorial, I will guide you step by step how you can create collection view using the Crosslight style.

Here are the steps that you need to follow:

• Core Preparation
• Assets Preparation
• Designing Android Grid View
• Designing iOS Collection View
• Capturing Selection

Without further ado, let’s get started!

Preparing the Project

The first thing you’ll need is, of course, the project itself. Start by creating a new project using Crosslight Project Wizard and choose the Blank template. To do this, from Visual Studio 2012 and upwards, choose New, Project. From the dialog that appears, choose Crosslight and choose to create a new Crosslight application with the Blank template. For the purposes of this tutorial, we’ll name this project: CollectionView. Now that you have your project ready, let’s move on.

Core Preparation

Here are several things you need to prepare at the project Core level:

• Prepare the ViewModel
• Prepare the BindingProvider

Prepare the ViewModel

Begin by creating a new ViewModel in CollectionView.Core/ViewModels folder. Simply right-click on the ViewModels folder and choose Add, New Item. We will be repeating this method several times in later sections to add new items to our project, so keep this in mind.

Crosslight also ships with built-in item templates that are integrated with Visual Studio, so you can quickly create Crosslight classes right within Visual Studio or Xamarin Studio. In the next dialog that appears, choose Visual C#, Crosslight, then choose Crosslight List View Model. Name this ViewModel as CollectionViewModel.

Copy-paste these codes to the newly-created CollectionViewModel.cs:

using Intersoft.Crosslight;
using Intersoft.Crosslight.ViewModels;
using System.Collections.Generic;

namespace CollectionView.Core.ViewModels
{
    public class CollectionViewModel : ListViewModelBase
    {
        #region Constructors

        public CollectionViewModel()
        {
			List items = new List();

			items.Add(new NavigationItem("Ride", typeof(SimpleViewModel)) { Image = "CrosstransRide.png" });
			items.Add(new NavigationItem("Delivery", typeof(SimpleViewModel))  { Image = "CrosstransDeliver.png" });
			items.Add(new NavigationItem("Food", typeof(SimpleViewModel))  { Image = "CrosstransFood.png" });
			items.Add(new NavigationItem("Shop", typeof(SimpleViewModel))  { Image = "CrosstransShop.png" });

			this.SourceItems = items;
        }

        #endregion
    }
}

Let’s take a quick look at the above code. In the constructor of the CollectionViewModel, we initialize a list of NavigationItems that holds the navigation menus. NavigationItem is a very useful class provided by Crosslight that you can utilize to create a menu, as it holds all the common properties you need to create a navigation item. All you have to do is simply populate it with the menu title, image/icon name, and the target ViewModel as navigation target.

Preparing the BindingProvider

Next step would be adding a new Crosslight List Binding Provider under your CollectionView.Core/BindingProviders folder. Give it a name of CollectionBindingProvider.cs.

And change the code to the following:

using Intersoft.Crosslight;

namespace CollectionView.Core.BindingProviders
{
    public class CollectionViewBindingProvider : BindingProvider
    {
        #region Constructors

        public CollectionViewBindingProvider()
        {
            ItemBindingDescription itemBinding = new ItemBindingDescription
            {
                DisplayMemberPath = "Title",
                ImageMemberPath = "Image",
                NavigateMemberPath = "Target"
            };

            this.AddBinding("GridView", BindableProperties.ItemsSourceProperty, "Items");
            this.AddBinding("GridView", BindableProperties.ItemTemplateBindingProperty, itemBinding, true);
            this.AddBinding("GridView", BindableProperties.IsBatchUpdatingProperty, "IsBatchUpdating");
            this.AddBinding("GridView", BindableProperties.SelectedItemProperty, "SelectedItem", BindingMode.TwoWay);
            this.AddBinding("GridView", BindableProperties.SelectedItemsProperty, "SelectedItems", BindingMode.TwoWay);
            this.AddBinding("GridView", BindableProperties.IsEditingProperty, "IsEditing", BindingMode.TwoWay);

            this.AddBinding("RefreshButton", BindableProperties.RefreshCommandProperty, "RefreshCommand");

            // navigation
            //this.AddBinding("TableView", BindableProperties.DetailNavigationTargetProperty, new NavigationTarget(typeof(TViewModel)), true);

            // edit commands
            this.AddBinding("AddButton", BindableProperties.CommandProperty, "AddCommand");

            this.AddBinding("DeleteButton", BindableProperties.CommandProperty, "DeleteCommand");
            this.AddBinding("DeleteButton", BindableProperties.CommandParameterProperty, "SelectedItems");
        }

        #endregion
    }
}

In the above code, we simply comment out the DetailNavigationTargetProperty, as it won’t be needed because our goal is only to create a navigation menu. It will be needed if you want to create Master-Detail Navigation. We also assign the MemberPaths with the properties from NavigationItem, such as ImageMemberPath for the icon, DisplayMemberPath for displaying the title, and NavigateMemberPath for the target ViewModel menu. To learn more about Crosslight Binding Provider, check out this link.

Your Core is up and ready. Let’s prepare our assets next.

Assets Preparation

Previously in the Binding Provider, you have already specified the Image property in NavigationItem from ViewModel which contains the filename for the .png file that we will use. When you bind it to the BindableProperties.ImageProperty or ImageMemberPath, it will find the appropriate files to use in CollectionView.Android/Resources/drawable or in CollectionView.iOS/Resources. So you need to put these files inside both folders because we will be using it for our app’s interface.

Tip: Make sure to optimize the size of your image files. In some phones, images with humongous file size will be ignored and they won’t show. Okay, since you have finished preparing the assets, let’s continue to Android GridView!

Designing Android GridView

Designing a view for Android is relatively easy and simple. In overall, we’ll be doing these tasks:

• Create an Activity for CollectionActivity.
• Create the view layout.
• Define the ContentLayoutId and ItemLayoutId.

To start, simply add a new item and use Crosslight Android Activity to get started. Put it inside the CollectionView.Android/Activities folder and name it CollectionActivity.cs.

After your CollectionActivity is created, change the contents of the class to the following code.

using Android.App;
using Intersoft.Crosslight;
using Intersoft.Crosslight.Android;

namespace CollectionView.Android.Activities
{
    [Activity(Label = "Menu")]
    [ImportBinding(typeof(CollectionBindingProvider))]
    public class CollectionActivity : GridActivity
    {
        public override ListViewInteraction InteractionMode
        {
            get{ return ListViewInteraction.Navigation; }
        }

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

        protected override int GridItemLayoutId 
        {
	       get{ return Resource.Layout.ItemLayout; }
	    }

        protected override void InitializeView()
        {
            base.InitializeView();
            this.GridView.NumColumns = 2;
        }
    }
}

We need to replace the Activity with GridActivity, in which then you have more properties to override: ListViewInteraction. By overriding the ListViewInteraction into ListViewInteraction.Navigation, it allows the user to use the grid as a navigation button when an item is tapped.

ContentLayoutId is also overridden since we want to customize the appearance of our GridView, which we will do in just a moment. The ItemLayoutId is overridden to customize the item layout to be used with the GridView. Both ContentLayoutId and ItemLayoutId refers to Android layout files which exist in the CollectionView.Android/Resources folder.

Since we only have two columns for this scenario, we can simply provide the number of columns to show in the overridden InitializeView method by setting this.GridView.NumColumns to 2. The advantage of using this method is: you actually don’t need to specify the width of the Grid. The GridActivity automatically adjusts the optimal number of items by taking account the viewport width.

Earlier, we’ve specified the ContentLayoutId and ItemLayoutId in our Activity. Now let’s create those layouts. You will need to create two layouts inside CollectionView.Android/Resources/layout folder using Android Layout item template. We will name it CollectionLayout.axml & ItemLayout.axml.

Here’s the code for CollectionLayout.axml and ItemLayout.axml respectively.

<?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="@drawable/CrosstransBg"
    android:minWidth="25px"
    android:minHeight="25px">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_marginBottom="25dp"
        android:layout_marginTop="50dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/linearLayout1"
        android:gravity="center_horizontal">
        <ImageView
            android:src="@drawable/CrosstransLogo"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:id="@+id/imageView1" />
    </LinearLayout>
    <GridView
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_margin="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:verticalSpacing="20dp"
        android:horizontalSpacing="20dp"
        android:id="@+id/GridView" />
</LinearLayout>

From the designer’s view, the CollectionLayout looks like the following:

and here’s the contents for ItemLayout.axml:

<?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:minWidth="25px"
    android:minHeight="25px"
    android:background="#CC2368C0"
    android:gravity="center_horizontal">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/linearLayout1"
        android:gravity="center_horizontal|center_vertical">
        <ImageView
            android:src="@android:drawable/ic_menu_gallery"
            android:scaleType="centerCrop"
            android:adjustViewBounds="true"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:id="@+id/ImageView" />
    </LinearLayout>
    <TextView
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:id="@+id/TextLabel"
        android:gravity="center_horizontal" />
</LinearLayout>

From the designer’s view, it looks like this:

In summary, what I do in CollectionLayout.axml is setting the background for the page, add a header, and provide enough spacing between GridView items. The most important things to note is I’ve defined the GridView id,  @+id/GridView. The will be the reference that we defined in BindingProvider to the property in ViewModel, so make sure the id name is right!

We will be doing a similar task with ItemLayout.axml, where we assign both ImageView to the Image Property in ViewModel and TextView to Title Property in ViewModel. By default, Crosslight provides two built-in ids for showing an image and a text for item template, which has the name ImageView and TextLabel respectively. But if you want to add additional view elements to the item template, then you can simply add a new binding definition in the binding provider like this which must be done in BindingProvider:

itemBinding.AddBinding ("CustomView", BindableProperties.TextProperty, "Title");

Run the project. You should get a result similar to the following:

Next, let’s create the iOS version.

Designing iOS CollectionView

Similar to Android, building CollectionView on iOS follows a pretty similar path:

• Create a ViewController for MainCollectionView.
• Create the cell and the header.
• Set the outlets.

Let’s start from the ViewController. Add a new item using Crosslight iOS Collection View Controller template and put it inside your CollectionView.iOS/ViewControllers folder and name it MainCollectionView.cs.

This is the code for the ViewController.

using CollectionView.ViewModels;
using CollectionView;
using Intersoft.Crosslight;
using Intersoft.Crosslight.iOS;
using Foundation;
using UIKit;

namespace CollectionView.iOS
{
	[Register ("MainCollectionView")]
	[ImportBinding (typeof(CollectionBindingProvider))]
	public class MainCollectionView : UICollectionViewController
	{
		#region Constructors

		public MainCollectionView ()
			: base ("MainCollectionView", null)
		{
		}

		#endregion

		#region Properties

		public override UIViewTemplate CellTemplate {
			get { return new UIViewTemplate (CollectionViewCell.Nib); }
		}

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

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

		public override UIViewTemplate SectionHeaderTemplate {
			get { return new UIViewTemplate(CollectionHeader.Nib); }
		}

		#endregion

		#region Methods

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

			this.NavigationItem.Title = "Home";
                        UIImageView backView = new UIImageView(UIImage.FromFile ("CrosstransBg.png")); 
                        backView.ContentMode = UIViewContentMode.ScaleAspectFill; 
                        this.CollectionView.BackgroundView = backView;
			// Register Views
			this.RegisterViewIdentifier ("GridView", this.CollectionView);
		}

		#endregion
	}
}

Let’s take a look at some of the overridden methods and properties.

• CellTemplate: This property is the equivalent of Android’s ItemLayoutID, which will define the view to be used as navigation item inside the Collection View.
• InteractionMode: This method is the equivalent of Android’s ListViewInteraction, that defines the interaction when users tap on the navigation item.
• SectionHeader & SectionHeaderTemplate: It will be used to specify the header for the Collection View.
• InitializeView: This method is called when the view is initialized. Here, we set the background view of the Collection View. Afterward, this.RegisterViewIdentifier (“GridView”, this.CollectionView); is used to associate the Collection View with the GridView view identifier to be used by the Binding Provider.

Now your view controller is done! Next, we’ll create the CollectionView Header and Cells. Inside your CollectionView.iOS/Views, add 2 new items: Crosslight iOS Collection Cell, we will name it CollectionViewCell.cs (feel free to choose between iPhone or iPad) and  Crosslight iOS Collection View Group Header which we will name it CollectionHeader.cs.

If you check back your MainCollectionView.cs, you can see that both CollectionViewCell.Nib & CollectionHeader.Nib are now detected. The Nib represents both .cs files that we’ve created before. However, we won’t touch any codes, instead we will play around with the layout using iOS XCode.

Let’s first open the MainCollectionView.xib inside your CollectionView.iOS/Views using Apple XCode. Inside the Document Outline, you can select File’s Owner, then the Identity Inspector will change according to what  you selected. Specify the Custom Class as MainCollectionView.

Using the Connections Inspector, control + drag the view from Outlets to the Collection View to set the outlet, as shown in the following illustration.

Then, in the File Inspector, turn off Auto Layout.

In the Size Inspector, specify the cell’s width and height, also adjusting the auto-resizing behaviors so that it will layout nicely when the device is rotated.

Now you are done configuring your MainCollectionView.xib.

Let’s continue to CollectionViewCell.xib, in this case, you don’t need to worry about  your File’s Owner,  Simply drag and drop a Label and ImageView from the Object Library to the view.

Select your Label (or anything in your designer interface), Press the conjoined circle button on the right top. A panel with codes will appear, this is the Assistant Editor which will help you create Binding without having you to code anything.

Next, let’s set the outlets using the Assistant Editor. Select your CollectionViewCell.m and change it to CollectionViewCell.h, control + drag your Label into the panel and give it TextLabel as a name, then set the ImageView outlet with the name of ImageView.

You need to turn off the auto layout from both image, label, and their parent to use auto resizing. Here’s what I’ve done to each of them:

• View: Change the background color, turn on the horizontal and vertical scaling so that it won’t grow or shrink when the display rotates.
• TextLabel: Change the alignment to the middle,  Pin it to the bottom using auto resizing and change the width to 120 and height to 50
• ImageView: Change the view mode to Aspect fit, turn on the horizontal and vertical arrow inside auto-resizing, and changes the width and height to 60

In CollectionHeader.xib, what we do is just drag and drop an ImageView. Here are the settings for ImageView:

• Change the image with CrosstransLogo.png,
• View Mode to Aspect Fit,
• Width = 150,
• Turn on the horizontal and vertical arrow inside auto resizing

Here is the result:

Your app is pretty much done, but we still ned to capture what user has selected.

Capturing Selection

In this section, we’ll learn how to capture selection made when the user taps on any of the navigation items.

If you recall earlier, we’ve defined how our CollectionView should navigate, which is done in our BindingProvider in the NavigateMemberPath inside using ItemBindingDescription.

ItemBindingDescription itemBinding = new ItemBindingDescription
            {
                DisplayMemberPath = "Title",
                ImageMemberPath = "Image",
                NavigateMemberPath = "Target"
            };

As you are aware, each MemberPath represents the component of our menu. In fact, it also contains the whole data associated with the specific Item you choose from the list that you have created in your ViewModel back then.

public CollectionViewModel()
        {
			List items = new List();

			items.Add(new NavigationItem("Ride", typeof(SimpleViewModel)) { Image = "CrosstransRide.png" });
			items.Add(new NavigationItem("Delivery", typeof(SimpleViewModel))  { Image = "CrosstransDeliver.png" });
			items.Add(new NavigationItem("Food", typeof(SimpleViewModel))  { Image = "CrosstransFood.png" });
			items.Add(new NavigationItem("Shop", typeof(SimpleViewModel))  { Image = "CrosstransShop.png" });

			this.SourceItems = items;
        }

BindingProvider will obtain the target of your navigation, represented by typeof(SimpleViewModel)). However even though we already successfully navigate,  in our case each of our Item have the same Navigation target. What if we want to know which item/menu is selected? Here is how:

When you navigate to a new ViewModel, the Navigated method is called in the target ViewModel, and it contains the sender value which holds the information of the caller ViewModel. For the simplicity of this tutorial, we’ll change the SimpleViewModel to handle user input. Let’s change our SimpleViewModel.cs (CollectionView.Core/ViewModels folder):

using Intersoft.Crosslight;
using Intersoft.Crosslight.Input;
using Intersoft.Crosslight.ViewModels;

namespace CollectionView.ViewModels
{
    public class SimpleViewModel : ViewModelBase
    {
        #region Fields

        private string _footerText;
        private string _greetingText;
        private string _newText;

        #endregion

        #region Properties

        public string FooterText
        {
            get { return _footerText; }
            set
            {
                if (_footerText != value)
                {
                    _footerText = value;
                    OnPropertyChanged("FooterText");
                }
            }
        }

        public string GreetingText
        {
            get { return _greetingText; }
            set
            {
                if (_greetingText != value)
                {
                    _greetingText = value;
                    OnPropertyChanged("GreetingText");
                }
            }
        }

        public string NewText
        {
            get { return _newText; }
            set
            {
                if (_newText != value)
                {
                    _newText = value;
                    OnPropertyChanged("NewText");
                }
            }
        }

        public DelegateCommand ShowToastCommand { get; set; }

        #endregion

        #region Constructors

        public SimpleViewModel()
        {
            IApplicationContext context = this.GetService().GetContext();
            if (context.Platform.OperatingSystem == OSKind.Android)
                this.GreetingText = "Hello Android from Crosslight!";
            else if (context.Platform.OperatingSystem == OSKind.WinPhone)
                this.GreetingText = "Hello WinPhone from Crosslight!";
            else if (context.Platform.OperatingSystem == OSKind.WinRT)
                this.GreetingText = "Hello WinRT from Crosslight!";
            else if (context.Platform.OperatingSystem == OSKind.iOS)
                this.GreetingText = "Hello iOS from Crosslight!";

            this.FooterText = "Powered by Crosslight®";
            this.ShowToastCommand = new DelegateCommand(ShowToast);
        }

        #endregion

        #region Methods

        public override void Navigated (NavigatedParameter parameter)
        {
            if (parameter.Sender is CollectionViewModel) 
            {
                this.ToastPresenter.Show("You are choosing: " + (parameter.Sender as CollectionViewModel).SelectedItem.Title);
            }
        }

        private void ShowToast(object parameter)
        {
            this.ToastPresenter.Show("You entered: " + this.NewText);
            this.GreetingText = this.NewText;
        }

        #endregion
    }
}

The menu that user chooses will be represented by SelectedItem and there are two things to note here: SelectedItem actually obtained from the sender ViewModel which is from CollectionViewModel.cs and SelectedItem actually the default property provided from CollectionViewModel implementing the ListViewModelBase. In this case, we will show a toast presenter to indicate which menu the user has chosen, by obtaining the Title of SelectedItem and show it using Toast Presenter.

Also, If you put a breakpoint in the highlighted line above and inspect the NavigatedParameter, you can see from the shot below that it holds lots of information not only the SelectedItem but the whole CollectionViewModel.

You will use this neat trick to accomplish a lot of cool things using Crosslight, so don’t forget to save this favourite this blog for later uses. Okay, now let’s run our project!

Wait… should we also change the Android and iOS? No need at all using Crosslight you only need to change it in Core and it will be applied to each platform, very convenient! Here is the result:

Wrapping Up

With Crosslight, you will never have to worry about the code behind the scene. However, in  this session, I want to emphasize the customizability of Crosslight, using minimal effort and codes we already successfully create a simple and gorgeous navigation menu. I believe the next steps for you is to discover more about Crosslight features and we still have more tutorials coming in the futures! So stay tuned with us and have fun!

You can find the source code for this post here: http://git.intersoftsolutions.com/projects/CT/repos/crosslightcollectionview/browse

See you in the next post,
Arief Handany

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

Hi guys, I’m back with another blog post, this time covering how to use the a custom view for header and footer to be used alongside iOS TableView / Android TableView. You’ll see how you can easily create custom views and use them as headers and footers in your Crosslight apps.

After this project has completed, you’ll end up with a custom header and footer in your ListView/TableView. When you click on the Add Item button on the top, new item will be added to the list, and you can see how the header and footer is correctly persisted when the items collection is updated.

To complete this project, there are several steps need to be completed:

• Preparing the project
• Creating custom views for iOS
• Preparing the BIndingProvider
• Preparing the ViewModel
• Modify iOS ViewController and running the project
• Creating custom views for Android
• Modifying Android ListActivity and running the project

Without further ado, let’s get started.

Preparing the project

For this sample, I’ll keep it nice and simple. This time, I’ll start from the Navigation template created using Crosslight Project Wizard. I’ll name this project: HeaderAndFooter.

Creating custom views for iOS

Let’s begin by creating a new custom header view for iOS, by right-clicking on the VIews folder in HeaderAndFooter.iOS/Views folder and choose Add, New File.

Then choose Crosslight, Crosslight iOS View for iPhone.

Give it a name of CustomHeader. This will generate two files, CustomHeader.xib and CustomHeader.cs for the designer files.

Then open the CustomHeader.xib using Xcode Interface Builder.

In Xcode Interface Builder, drag a Label and a button.

Set the label outlet as TxtHeader and the button as BtnHeader. I won’t go too much on the layouting details, but you can ensure the followings are set:

• Set the View size as Freeform, so you can adjust the view size freely.
  
• Turn off Auto Layout.
  
• Ensure that the View background is set to Default (no fill), this will avoid clipping issues when placed as the header view.
  

Your custom header is now ready. Let’s move on to custom footer.

Basically, you’re going to perform the same tasks as adding a custom header, but the difference is that you’re going to give it a file name of CustomFooter, then provide a label with the outlet of TxtCopyright.

Preparing the BindingProvider

Since you’ve successfully created the custom views, let’s prepare the BindingProvider first to prepare the properties and commands you wish to bind to the View. Open up NavigationBindingProvider (I renamed this file to MainBindingProvider to avoid confusion) and add the highlighted lines.

using Intersoft.Crosslight;

namespace HeaderAndFooter
{
    public class MainBindingProvider : BindingProvider
    {
        #region Constructors

        public MainBindingProvider()
        {
            ItemBindingDescription itemBinding = new ItemBindingDescription()
            {
                DisplayMemberPath = "Title",
                NavigateMemberPath = "Target"
            };

            this.AddBinding("TableView", BindableProperties.ItemsSourceProperty, "Items");
            this.AddBinding("TableView", BindableProperties.ItemTemplateBindingProperty, itemBinding, true);
            this.AddBinding("TableView", BindableProperties.SelectedItemProperty, "SelectedItem", BindingMode.TwoWay);
            
            this.AddBinding("BtnHeader", BindableProperties.TextProperty, "ButtonText");
            this.AddBinding("BtnHeader", BindableProperties.CommandProperty, "AddCommand");
            this.AddBinding("TxtCopyright", BindableProperties.TextProperty, "CopyrightText");
            this.AddBinding("TxtHeader", BindableProperties.TextProperty, "HeaderText");
        }

        #endregion
    }
}

From the added lines, notice that we’re going to do the following:

• Bind ButtonText property in the ViewModel to the BtnHeader button.
• Bind the ViewModel’s built-in AddCommand to the BtnHeader button. This is available in the EditableListViewModel shipped in Crosslight.
• Bind the HeaderText property in the ViewModel to the TxtHeader label.
• Bind the CopyrightText property in the ViewModel to TxtCopyright label. This is for the footer.

Since you’ve prepared everything in the BindingProvider, let’s modify the ViewModel.

Modifying the ViewModel

The  NavigationViewModel now looks like the following. It’s located inside the HeaderAndFooter.Core/ViewModels folder.

using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.Linq;
using Intersoft.Crosslight;

namespace HeaderAndFooter.ViewModels
{
    public class NavigationViewModel : SampleListViewModelBase<NavigationItem>
    {
        #region Constructors

        public NavigationViewModel()
        {
            ObservableCollection<NavigationItem> items = new ObservableCollection<NavigationItem>();

            items.Add(new NavigationItem("Simple Page", "About", typeof(SimpleViewModel)));
            items.Add(new NavigationItem("About This App", "About", typeof(AboutNavigationViewModel)));

            this.SourceItems = items;

            this.ButtonText = "Add Item";
            this.CopyrightText = "Copyright © Intersoft Solutions";
        }

        #endregion

        #region Properties

        private string _aboutText { get; set; }
        private string _buttonText { get; set; }
        private string _copyrightText { get; set; }
        private string _headerText { get; set; }

        public string AboutText
        {
            get { return _aboutText; }
            set
            {
                if (_aboutText != value)
                {
                    _aboutText = value;
                    OnPropertyChanged("AboutText");
                }
            }
        }

        public string ButtonText
        {
            get { return _buttonText; }
            set
            {
                if (_buttonText != value)
                {
                    _buttonText = value;
                    OnPropertyChanged("ButtonText");
                }
            }
        }

        public string CopyrightText
        {
            get { return _copyrightText; }
            set
            {
                if (_copyrightText != value)
                {
                    _copyrightText = value;
                    OnPropertyChanged("CopyrightText");
                }
            }
        }

        public string HeaderText
        {
            get
            {
                _headerText = this.Items.Count() + " items.";
                return _headerText;
            }
            set
            {
                if (_headerText != value)
                {
                    _headerText = value;
                    OnPropertyChanged("HeaderText");
                }
            }
        }

        #endregion

        #region Methods

        protected override bool CanExecuteAdd(object parameter)
        {
            return true;
        }

        protected override void ExecuteAdd(object parameter)
        {
            base.ExecuteAdd(parameter);

            NavigationItem newItem = new NavigationItem("Simple Page", "About", typeof(SimpleViewModel));
            var items = this.SourceItems.ToObservable();
            items.Add(newItem);
        }

        protected override void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
        {
            this.OnPropertyChanged("HeaderText");
        }

        #endregion
    }
}

Let’s take a deeper look at this class, starting from the top. In the constructor, we’ve prepared our SourceItems with ObservableCollection. We then initialize the ButtonText property and the CopyrightText property. The ButtonText and CopyrightText property are all MVVM-ready properties. The HeaderText is also an MVVM-ready property, but in the property getter, the text is always updated according to the number of items which exists in the list.

Right after the properties, we then override the built-in CanExecuteAdd method to return true so that the AddCommand can be executed, as well as overriding the actions for the ExecuteAdd method. Here, we simply add a new NavigationItem to the list. Just right after the method, Crosslight has provided an elegant way to perform any additional changes to other properties or any other implementation by overriding the OnCollectionChanged method. In the method, we trigger the OnPropertyChanged of the HeaderText, so that the number of items is always updated in our custom header.

Modify iOS ViewController and running the project

Now that you got the Core project covered, let’s modify the MainViewController (located inside HeaderAndFooter.iOS/ViewControllers) a bit.

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<NavigationViewModel>
    {
        #region Properties

        public override UIViewTemplate HeaderViewTemplate
        {
            get { return new UIViewTemplate(CustomHeader.Nib); }
        }

        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; }
        }

        #endregion

        #region Methods

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

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

        #endregion
    }
}

In the MainViewController, we’ve overridden the HeaderViewTemplate as well as FooterViewTemplate to return the Nib for each custom header and footer view that we’ve just defined. We also made things simpler by not showing the group header as wellas ensuring that the used TableViewStyle is Plain. Run the project. You should get the following result.

If you’re curious about the separator that exists between the header with the table view, as well as the footer with the table view, it’s because I’ve added an additional view in the custom header and footer layout, with the height of 1 unit and giving it a light gray background, to show the boundaries of the custom header and custom footer view. We’re going to do the same with Android layout later. You’ve completed the iOS version. Let’s move on to the Android.

Creating custom views for Android

Similar to iOS, you’ll need to create a custom header view first for Android. To do this, simply right click on the Resources/layout folder in the HeaderAndFooter.Android/Views folder, then choose Add, New Item.

From the dialog that appears, choose Android, Layout, and give it a name of CustomHeader.

And here’s the contents of the CustomHeader.axml file.

<?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="wrap_content"
    >
    <LinearLayout 
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
        <TextView
        	android:id="@+id/TxtHeader"
        	android:layout_width="fill_parent"
        	android:layout_height="30dp"
        	android:textSize="20sp"
        	android:gravity="left"
            android:layout_weight="1"
        />
        <Button 
            android:id="@+id/BtnHeader"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
        />
    </LinearLayout>
    <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="1px"
            android:background="#f2f2f2"
        />
</LinearLayout>

This layout simply contains a pretty much similar layout with iOS, that contains a label, a button, and a gray separator at the bottom. Repeat the same procedure for the custom footer layout. Here’s the contents of the CustomFooter.axml file.

<?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="wrap_content"
    >
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="1px"
        android:background="#f2f2f2"
    />
    <TextView
    	android:id="@+id/TxtCopyright"
    	android:layout_width="fill_parent"
    	android:layout_height="30dp"
    	android:textSize="12sp"
    	android:gravity="center"
        android:fontFamily="sans-serif-light" 
    />
</LinearLayout>

Modifying Android ListActivity and running the project

Since you’ve prepared the custom views let’s modify the Android ListActivity to display our custom header and footer. Open up MainActivity in the HeaderAndFooter.Android/Activities folder and take note of the following changes.

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<NavigationViewModel>
    {
        #region Methods

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

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

        #endregion

        #region Properties

        protected override int ContentLayoutId
        {
            get { return Intersoft.Crosslight.Android.Resource.Layout.listgroupsectionlayout; }
        }

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

        protected override int HeaderLayoutId
        {
            get { return Resource.Layout.CustomHeader; }
        }

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

        #endregion
    }
}

All you need to do is just override the FooterLayoutId as well HeaderLayoutId and provide the layout you’ve just created. If you notice in the template, right in the InitializeView method, we’re registering the ListView with the TableView identifier at runtime. This is how you would register a view at runtime. For more information in registering view at runtime, check out this document in the Developer Center.

You’re now ready to run the project. You should get the result similar to the following.

Wrapping Up

You’ve seen how easy it is to set up a custom header and footer view to use with iOS TableView and Android ListView. With Crosslight, the custom views are automatically compatible with data binding and Crosslight takes care of the magic, so you can focus on building your app instead of having to worry about wiring behind the scenes. Hopefully this gives you a good insight on how Crosslight accomplishes business scenarios elegantly, without compromising any of the MVVM-design pattern enforced throughout the app.

As always, you can find the source code to this post here: http://git.intersoftsolutions.com/projects/CT/repos/crosslightheaderandfooter/browse.

See you in the next post,
Nicholas Lie

After we’ve improved our customer experience several months ago, we’ve started receiving many great feedbacks from you, our valued customers. One of the feedback that we received is how to get started with the Crosslight Form Builder. We then realized that this feature is a “hidden gem” supported in Crosslight, and most of our customers didn’t realize of its tremendous value in creating functional forms in a very short time. This post will help you learn more about the Crosslight Form Builder and get started.

What is Crosslight Form Builder?

Crosslight Form Builder is a built-in cross-platform form bulider framework that helps developers to create native forms easily with UI aesthetics that conforms to each platform’s user interface guidelines. The metadata definiton itself is shared amongst other platforms as well, resulting in a clean, functional form in minutes.

Several features of the Crosslight Form Builder:

• Simple, metadata-based form
• Intuitive section and property definitions
• Built-in validation support
• Customizable appearance
• Cross-platform native forms on iOS, Android and Windows Phone.
• Customizable behaviors
• Functional forms in 5 minutes.

Creating a driver pickup form

To demonstrate Crosslight Form Builder capabilities, we will create a simple taxi order form, which consists of two sections: Passenger Details and Taxi Choice. In Passenger Details, we’ll have two form fields: Name and Pickup Time whereas in Taxi Choice we’ll have Car Type and Airport choices. In overall, our form structure looks like this:

• Passenger Details
  • Name
  • Pickup Time
• Taxi Choice
  • Car Type
  • Airport

Now that we have our form fields, how can we translate that form using Form Builder?

Readying the project

As always, let’s start off from the Blank project created using Crosslight Project Wizard. Let’s name this project as CrosslightFormBuilder.

Creating the form metadata

As we have established earlier, you need to create 2 sections, with 2 property each. And that’s exactly how our form metadata looks like. Let’s create a new Model file that will contain our model as well as the form metadata. I’m going to give it a name of Order.cs and place it under CrosslightFormBuilder.Core/Models folder. Let’s begin by creating the model.

public class Order : ModelBase
{
    #region Fields

    private CarType _carType;
    private bool _isAirport;
    private string _name;
    private DateTime _pickupTime;

    #endregion

    #region Properties

    public CarType CarType
    {
        get { return _carType; }
        set
        {
            if (_carType != value)
            {
                _carType = value;
                OnPropertyChanged("CarType");
            }
        }
    }

    public bool IsAirport
    {
        get { return _isAirport; }
        set
        {
            if (_isAirport != value)
            {
                _isAirport = value;
                OnPropertyChanged("IsAirport");
            }
        }
    }

    public string Name
    {
        get { return _name; }
        set
        {
            if (_name != value)
            {
                _name = value;
                OnPropertyChanged("Name");
            }
        }
    }

    public DateTime PickupTime
    {
        get { return _pickupTime; }
        set
        {
            if (_pickupTime != value)
            {
                _pickupTime = value;
                OnPropertyChanged("PickupTime");
            }
        }
    }

    #endregion
}

The Order model derive from ModelBase that is shipped by default in project creation using Crosslight Project Wizard. This class contains the necessary implementations that automatically implements INotifyPropertyChanged, INotifyDataErrorInfo, as well as IDataValidation needed for binding and validation purposes.

All you need is to provide the necessary properties, as shown in the code above, and don’t forget to trigger the OnPropertyChanged method in the property setter to reflect data changes to the UI. This is the standard MVVM-enabled property that is required for data binding to work properly.

Next up, let’s create the form metadata definition. Still in the same file, first we need to create the sections. Simply prepare two classes that will act as the sections. We’ll call this PassengerDetailsSection and TaxiChoiceSection.

public class PassengerDetailsSection
{
    #region Fields

    [Display(Caption = "Name")]
    [Editor(EditorType.AutoDetect)]
    [Layout(Style = LayoutStyle.RightDetail)]
    public string Name;

    [Display(Caption = "Pickup Time")]
    [Editor(EditorType.DateTime)]
    [Layout(Style = LayoutStyle.RightDetail)]
    [Binding(StringFormat = "{0:d MMM, HH:mm}", Mode = BindingMode.TwoWay)]
    public DateTime PickupTime;

    #endregion
}

public class TaxiChoiceSection
{
    #region Fields

    [Display(Caption = "Car Type")]
    [Editor(EditorType.AutoDetect)]
    [Layout(Style = LayoutStyle.RightDetail)]
    public CarType CarType;

    [Display(Caption = "Airport?")]
    [Editor(EditorType.Switch)]
    [Layout(Style = LayoutStyle.RightDetail)]
    public bool IsAirport;

    #endregion
}

Take a look at the code above. It is recommended that fields definitions has the same name as your property to be able to perform binding automatically. There are many attributes that you can choose from to decorate each fields. You can easily customize the appearance, layout, behavior, editor to use, interactivity, binding, and more. If you would like to explore them all, check out these articles:

• Supported Editor Types
• Configuring Editor Behaviors

Also, if you notice, we have defined an enum for the car type. Form Builder automatically supports the use of enums in the form, so you don’t have to create the picker for it. Simply define the editor as AutoDetect and it will create the appropriate editor automatically.

The CarType enum is defined inside the CrosslightFormBuilder.Core/Models folder and is simply defined as follows.

public enum CarType
{
    Standard,
    Executive
}

Now that you have both sections ready, simply create the form by using the following code. Let’s call this OrderFormMetadata.

[Form(Title = "Order Form")]
public class OrderFormMetadata
{
    #region Fields
    
    [Section(Header = "Passenger Details")]
    public PassengerDetailsSection PassengerDetails;

    [Section(Header = "Taxi Choice")]
    public TaxiChoiceSection TaxiChoiceSection;

    #endregion
}

The OrderFormMetadata class also contains the fields with the section class types we’ve previously defined. You can also adjust the section header by decorating the fields with the SectionAttribute and fill out the Header property. You can also automatically set the title of the form with any caption you like. In this case, I’ll just simply define it as “Order Form”. This will displayed on top of the navigation controller on iOS, and Activity title on Android.

Creating the ViewModel

Just like any other MVVM apps, you will need to create the ViewModel layer that holds the business logic for the view. To do this, simply create a new OrderViewModel class file inside the CrosslightFormBuilder.Core/ViewModels folder. Its content are as follows.

#region Usings

using System;
using System.Text;
using Intersoft.Crosslight;
using Intersoft.Crosslight.Input;
using Intersoft.Crosslight.ViewModels;

#endregion

namespace CrosslightFormBuilder.Core.ViewModels
{
    public class OrderViewModel : EditorViewModelBase<Order>
    {
        #region Properties

        /// <summary>
        /// Gets the type of the form metadata associated to the editor.
        /// </summary>
        /// <value>
        /// The type of the form metadata.
        /// </value>
        public override Type FormMetadataType
        {
            get { return typeof(OrderFormMetadata); }
        }

        #endregion

        #region Methods

        /// <summary>
        /// Executes the save command.
        /// </summary>
        /// <param name="parameter">Parameter.</param>
        protected override void ExecuteSave(object parameter)
        {
            this.Validate();

            if (!this.HasErrors)
            {
                StringBuilder passengerDetails = new StringBuilder();
                passengerDetails.Append("Name: " + this.Item.Name + "\n");
                passengerDetails.Append("Pickup Time: " + this.Item.PickupTime + "\n");
                passengerDetails.Append("Going to the airport? " + this.Item.IsAirport + "\n");
                passengerDetails.Append("Car Type: " + this.Item.CarType);

                this.MessagePresenter.Show(passengerDetails.ToString(), "Confirm Order", new[] {"Yes", "No"}, selection =>
                {
                    if (selection == 0) //Yes
                    {
                        this.ToastPresenter.Show("Your order has been placed.");
                    }
                    else
                    {
                        this.ToastPresenter.Show("You cancelled the order.");
                    }
                });
            }
            else
            {
                this.MessagePresenter.Show(this.ErrorMessage);
            }

        }
        

        /// <summary>
        /// Called when this instance is navigated.
        /// </summary>
        /// <param name="parameter">Parameter.</param>
        public override void Navigated(NavigatedParameter parameter)
        {
            base.Navigated(parameter);

            this.Item = new Order();
            this.Item.PickupTime = DateTime.Now;
        }

        #endregion
    }
}

Let’s take it slowly from above. First things first, to use the Crosslight Form Builder, it’s highly recommended to use our built-in EditorViewModelBase<TModel> as this ViewModel holds the important data operations that can be done automatically at the background, such as performing save and validation, which we’ll explore in just a moment.

In the ViewModel, we’ve also overridden the FormMetadataType property. This will tell the Form Builder which class holds the FormAttribute that will act as the form.

In the next section, we’ve also overridden the ExecuteSave method. Inside the method, you’ll see that we’ve called the Validate method. This will validate the form with the conditions we’ve specified as our form validation. We’ll discuss the form validation in the next section. Next, if the form has no errors, then we can proceed with our business logic. In this case, I’m going to display the inputted data and display them using Crosslight Message Presenter. So when the Done button is pressed, the ExecuteSave method will be called.

Last but not least, we’ve also instantiated our Order model as new item for the Form Builder.

Enabling form validation

To enable form validation, there are several things to be done. First, open up the model file. In our Order model, override the Validate method.

public override void Validate()
{
    base.Validate();
    this.ClearAllErrors();

    if (string.IsNullOrEmpty(this.Name))
        this.SetError("Please enter your name.", "Name required");
}

Here, we set the error when the user did not enter their name in the form. The ClearAllErrors method should be called to reset the validation state. If any of the validation hits the condition, then SetError will be called, which in turn be displayed using Message Presenter that we’ve defined previously in ExecuteSave method.

protected override void ExecuteSave(object parameter)
{
    this.Validate();

    if (!this.HasErrors)
    {
        ...
    }
    else
    {
        this.MessagePresenter.Show(this.ErrorMessage);
    }
}

This is why it’s very important to use the built-in EditorViewModelBase shipped with Crosslight, since Crosslight has taken care of these details in the background, leaving you to focus only on your business logic.

Creating the Views

After you’re done set the M and VM in MVVM, let’s set up the Vs. We’ll proceed by creating the Views on iOS and Android that consumes the ViewModel. Right click on the ViewController folder in CrosslightFormBuilder.iOS project and choose Add, New File.

In the dialog that appears, choose Crosslight and select Crosslight iOS Form View Controller. Give it a name of OrderViewController.

In the newly created OrderViewController.cs file, simply specify the TViewModel as OrderViewModel that you’ve just created and remove this line.

[ImportBinding (typeof(TBindingProvider))]

The ImportBindingAttribute is used only when you want to add additional bindings to the form, which we’re not going to use in this scenario.

In addition, the DetermineNavigationMode overload method and the preferred content size can be completely removed since our app is not targeting iPad.

Here’s the final content of the OrderViewController.cs.

using CrosslightFormBuilder.Core.ViewModels;
using Intersoft.Crosslight.iOS;

namespace CrosslightFormBuilder.iOS.ViewControllers
{
    [Register("OrderViewController")]
    public class OrderViewController : UIFormViewController<OrderViewModel>
    {
    }
}

As seen above, it’s really only a simple class definition remaining since all the heavy lifting is done by the UIFormViewController class itself.

You’ve finished the iOS views. Let’s move on to Android.

Begin by right clicking on the Activities folder in the CrosslightFormBuilder.Android project. Select Add, New File.

In the preceding dialog, select Crosslight, then Crosslight Android Form Activity, give it a name of OrderActivity.

Similar to iOS, remove this line

[ImportBinding (typeof(TBindingProvider))]

And set the TViewModel to OrderViewModel. Since we’ll not be using any binding providers for now. If you notice in the OrderActivity.cs file we have just created, we have these codes.

protected override int MenuLayoutId {
    get { return Resource.Menu.editing_actions_id; }
}

This means we need to provide the action bar options to be used with the Activity. This defines the actions that resides in the Action Bar of Android Activity, usually located on the top right hand corner of the screen. In this case, we want to set it as the Save button. To do that, right-click on the Resource/layout folder in the CrosslightFormBuilder.Android project. Click Add, New File.

From the dialog, select Android, Layout. Give it a name of actionbareditinglayout.

Use the following code.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/SaveButton"
        android:title="@string/Save"
        android:showAsAction="ifRoom|withText" />
</menu>

On the 5th line, you’ll see @string/Save. This corresponds to the key of the string value that’s located inside the strings.xml file. You can find this file inside the Resources/values folder. Simply add this line as a child of the resources node.

<string name="Save">Done</string>

Back to the OrderActivity.cs, we can now use the new layout that we’ve created as MenuLayoutId so that it’ll appear on the ActionBar. Change it to

protected override int MenuLayoutId
{
    get { return Resource.Layout.actionbareditinglayout; }
}

You’re done with the views. One last thing before running the project.

Setting the Root ViewModel

Since you have everything ready, the last thing to do is tell the app which ViewModel to use as the root ViewModel. To do this, open up AppService.cs located inside CrosslightFormBuilder.Core/Infrastructure folder. In the OnStart method, change the root ViewModel to OrderViewModel.

protected override void OnStart(StartParameter parameter)
{
    base.OnStart(parameter);
    this.SetRootViewModel<OrderViewModel>();
}

You’re now ready to run the project. See that the validation works as well. Here’s how it looks like when the user hit the Done button and no Name is entered.

A deeper look at the result

Let’s take a deeper look at the resulting form created with Crosslight Form Builder. As you might have already noticed, the forms generated by Crosslight Form Builder are unlike any other. With Crosslight Form Builder, in just minutes, developers can easily build gorgeous-looking forms and provides the best user experience with mobile forms.

Just look at the screenshot above. The date time picker resulted from Crosslight Form Builder displays native inline iOS date picker, and the native Android date time picker as well.

Not only that, take a look at the automatic enum picker provided by Crosslight Form Builder. In Android, it shows a modal dialog with the choices, and on iOS, it performs push navigation that allows the user to choose between the choices. iOS users and Android users will definitely appreciate this native behavior exhibited by the form.

Creating this definition takes only minutes, saving you lots of time and money on development and implementation, while still providing ultra-great user experience. Other cross-platform frameworks might offer quick-and-dirty solution to the date time picker by showing small modal dialogs that hardly complies with each platforms UI guidelines. This is the power of the Crosslight Form Builder.

Where to go from here?

After you’ve completed this short tutorial blog post, I would definitely recommend you to jump in to the FormBuilderSamples, where you can easily explore various editors Form Builder can support as well as various customizability for each editor with different layouts as well. Check out the Form Builder Samples here.

Summing up

I hope this post helps you to learn Crosslight Form Builder and get started with it. In the next post, I’ll enhance the Form Builder to add minimum value to the Pickup Time as well as extending the Form Builder with our own custom views, complete with binding capabilities.

You can find the source files for this project in our Git repository here: http://git.intersoftsolutions.com/projects/CT/repos/crosslightformbuilder/browse.

To learn more about the Crosslight Form Builder, check out these links in the Developer Center:

• Building Rich Data Entry Form
• Form Builder Overview
• Supported Editor Types
• Configuring Editor Behaviors
• Enabling Form Interactivity
• Extending Form Builder
• Form Metadata Example
• Presenting a Form with EditorViewModel

Should you have any questions, feel free to initiate a live chat session with us on our website, or, leave your comments below and let me know what you think!

See you in the next post!
Nicholas Lie

This topic describes how you can easily display your data in a grid view for Android in Crosslight apps. You will learn how to configure GridFragment and create the binding provider for GridFragment. If you haven’t familiar with simple list in Crosslight, please check out Displaying Simple List. It is expected that you have successfully displayed a simple list and created the required View Model before continuing. Learn more.

The sample code is available to download in our Git server here. Feel free to leave any comment or feedback.

Cheers,
Martin Lie

Nowadays, you can see a lot of mobile apps displaying circular image on list view. This how-to topic shows how you can customize the appearance and presentation of cell template with image in a table view to achieve round corner in iOS, Android and Windows platforms. Learn more.

The sample code is available to download in our Git server here. Feel free to leave any comment or feedback.

Cheers,
Martin Lie

This how-to topic describes how to implement data synchronization using Crosslight Enterprise Framework. There is no doubt that data synchronization has becoming essential requirement in today’s business apps that allows online offline synschronization.

This post guides you how to implement data synchronization by creating a new Crosslight app from the Crosslight Business Template. You will learn how to enable the local data storage feature, configure the synchronization settings, preparing the domain models, and calling the synchronization API to perform two-way data sync. Learn more.

You can download the sample code from our Git server here. Feel free to leave your comment or feedback if any.

Cheers,
Martin Lie

This blog post shows you in-depth how to create apps that use SQLite as its local data storage using Crosslight Business Template. You will learn how to configure SQLite for the first time, setting up the domain model through Intersoft Entity Designer and add some simple settings and code to enable SQLite. Learn more.

We have made the sample code available to be downloaded from out Git server here. Feel free to post any comment or feedback.

Cheers,
Martin Lie

This blog post will discuss topic on how you can use Crosslight SQLite as a local data storage for your apps. Before you start using Crosslight SQLite, it is recommended that you have basic knowledge about data binding and MVVM design pattern. Learn more.

We have created a sample that lets you learn how to create SQLite tables with capability to insert, update and delete the record, use LINQ Query and custom SQL Query and many more. The sample code can be downloaded from our Git server here.

Happy Learning!

Cheers,
Martin Lie