This release packed-in numerous important updates across all platform lineups since the last year’s release. One noteworthy milestone is the full support for Visual Studio 2017 (all editions), bringing in the toolbox, project and item templates, designers and editors, extensions, and get started wizards.

Furthermore, this release shipped cumulative updates for WebUI lineups, particularly improved standards compliance and support for latest major browsers such as Chrome 58, Firefox 54, and Safari 10. Several flagship components such as WebGrid Enterprise and WebCombo have received major improvements in client-side data access and templating. Specifically, a new extensible binding foundation has been built, allowing these data powerhorse to be used in conjunction with next-generation templating frameworks that we will introduce in the near future. Finally, with significant reliability updates committed so far, we made sure this release to be most stable Premier Studio release yet, perfectly balancing the major innovations we set forth in previous release.

As for the Crosslight lineup, we will be making it as a separate update through the NuGet channels, so you won’t find the latest bits in the 2017 installer. There are really a lot of exciting stuff that the team has worked on since the last release, with 1000+ commits and counting so far. It’s truly an over-delivery this time as we’re adding new scopes to our roadmap such as Nougat support, transition to Firebase Cloud Messaging, and more. We’ll keep you posted when the bits is available in NuGet.

Last but not least, the 2017 release is free to download for all customers with active subscriptions. Simply login to your Intersoft account to start downloading. Enjoy and have fun building your next big apps!

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 light of Microsoft’s Build Event 2016 last week, Microsoft has officially announced partnership with Xamarin on March 2016, making Xamarin accessible to even more mobile developers across the world.

What’s great about this partnership is that Xamarin’s price has been significantly reduced from $1000/developer/platform/year to absolutely FREE. This is a huge news for us and it effectively reduces Crosslight’s subscription price to a total of $999, from $2,999 (including Xamarin). A whopping 66.66% reduction in total cost.

Our years of investing in Xamarin technologies have finally paid off and now you can easily build mobile apps with even faster than ever, thanks to Crosslight. Built on top of Xamarin’s technologies, Crosslight bridges the gaps between Xamarin.iOS and Xamarin.Android, effectively allowing 100% business logic code sharing with strong MVVM patterns.

Leveraging extensible architecture, MVVM design pattern and integration with Xamarin Platforms, Crosslight lets you easily build powerful iOS, Android and Windows native apps with a common application codebase including domain model, data access, and user interaction logic. And that’s nearly 96% of your project’s codebase. Built with cutting-edge portable framework and MVVM pattern, Crosslight lets you build cross-platform mobile apps by leveraging the programming skills and tools you loved – such as C#, MVVM, .NET and Visual Studio. Key features include:

• Comprehensive and advanced mobile frameworks leveraging MVVM design pattern
• Build native iOS, Android, Windows Phone 8 and Windows 8 apps with a single application codebase
• Elegant, developer-friendly API based on platform standards
• Universal data management with automatic binding
• Streamlined navigation services supporting push, modal and nested navigation mode
• Rich form builder with 20+ pre-built editors
• Highly customizable editor controls ranging from auto resize textbox to image picker with camera support and more
• Comprehensive mobile services for business apps
• Native user experiences conforming to platform design guidelines
• Support Visual Studio 2012 and Xamarin Studio
• Integrated to Xamarin platforms with full AOT compliance
• Time-saving Project Wizard featuring 30+ templates variants supporting iOS, Android, Windows Phone 8 and Windows 8

Sample Code

Display a button, then when clicked, show the number of taps. This is the default Xamarin’s cross-platform, single-view template.

Xamarin.iOS Code

With Xamarin.iOS, the code is more event-based, handled in the ViewController level.

using System;
        
using UIKit;

namespace XamarinCrossPlatform.iOS
{
    public partial class ViewController : UIViewController
    {
        int count = 1;

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

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

            // Perform any additional setup after loading the view, typically from a nib.
            Button.AccessibilityIdentifier = “myButton“;
            Button.TouchUpInside += delegate
            {
                var title = string.Format(“{0} clicks!“, count++);
                Button.SetTitle(title, UIControlState.Normal);
            };
        }

        public override void DidReceiveMemoryWarning()
        {        
            base.DidReceiveMemoryWarning();        
            // Release any cached data, images, etc that aren‘t in use.        
        }
    }
}

And on Android,

using Android.App;
using Android.Widget;
using Android.OS;

namespace XamarinCrossPlatform.Droid
{
    [Activity(Label = “XamarinCrossPlatform“, MainLauncher = true, Icon = “@mipmap/icon“)]
    public class MainActivity : Activity
    {
        int count = 1;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the “main“ layout resource
            SetContentView(Resource.Layout.Main);

            // Get our button from the layout resource,
            // and attach an event to it
            Button button = FindViewById<Button>(Resource.Id.myButton);
            
            button.Click += delegate
            {
                button.Text = string.Format(“{0} clicks!“, count++);
            };
        }
    }
}

Which may lead to problems if you’re trying to centralize the business logic. Let’s compare this with Crosslight. With Crosslight, simply create a new ViewModel that will contain the centralized business logic, which will be bound to the View using BindingProvider. Here’s the ViewModel.

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

namespace XamarinToCrosslight
{
    public class SimpleViewModel : ViewModelBase
    {
        public SimpleViewModel()
        {
            this.ButtonText = “Hello World, Click Me!“;
            this.Count = 0;
            this.ClickCommand = new DelegateCommand(ExecuteClick);
            this.Title = “XamarinToCrosslight“;
        }

        private string _buttonText;
        private int _count;

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

        public int Count
        {
            get
            {
                return _count;
            }
            set
            {
                if (_count != value)
                {
                    _count = value;
                    this.OnPropertyChanged(“Count“);
                }
            }
        }

        public DelegateCommand ClickCommand { get; set; }

        public void ExecuteClick(object parameter)
        {
            this.ButtonText = ++this.Count + “ clicks!“;  
        }
    }
}

And here’s the BindingProvider.

using Intersoft.Crosslight;

namespace XamarinToCrosslight
{
    public class SimpleBindingProvider : BindingProvider
    {
        #region Constructors

        public SimpleBindingProvider()
        {
            this.AddBinding(“myButton“, BindableProperties.TextProperty, “ButtonText“);
            this.AddBinding(“myButton“, BindableProperties.CommandProperty, “ClickCommand“);
        }

        #endregion
    }
}

Then, in iOS,

using System;
using UIKit;
using Intersoft.Crosslight.iOS;
using Intersoft.Crosslight;

namespace XamarinToCrosslight.iOS
{
    [Storyboard(“Main“)]
    [ImportBinding(typeof(SimpleBindingProvider))]
    public partial class ViewController : UIViewController<SimpleViewModel>
    {
        public ViewController(IntPtr handle)
            : base(handle)
        {       
        }
    }
}

And in Android,

using Android.App;
using Android.Widget;
using Android.OS;
using Intersoft.Crosslight.Android.v7;

namespace XamarinToCrosslight.Droid
{
    [Activity]
    public class MainActivity : AppCompatActivity<SimpleViewModel>
    {
    }
}

As you can see, the View-level code is very minimal, since the code is very much centralized in the ViewModel and glued to the View using MVVM data binding pattern, which makes it very efficient to develop and maintain enterprise-scale apps. Should you wish to check out the full scource code, find it here.

To learn how to create your first Crosslight app, follow this step-by-step tutorial here: http://developer.intersoftsolutions.com/display/crosslight/Walkthrough%3A+Creating+Your+First+Crosslight+App. Or, if you’re interested in a more full-fledged app that showcases Crosslight’s prowess, we’ve recently released the Crosslight Field Service sample, which was revamped from the Xamarin Field Service sample. I highly recommend you to read these two posts to learn more about the Crosslight Field Service sample: part 1 and part 2.

Should you ready to purchase Crosslight, simply head over to our store. To celebrate this occassion, we offer a limited-time offer: You can get Crosslight now for $499 using this coupon code: LAUNCH2016 and start developing great mobile apps in no time!

Till next post,
Nicholas Lie

Back in November 2015 I wrote a blog post on Redesigning Xamarin Field Service Sample – Part 1. Well, in that post I’ve discussed various design quirks and what improvements can be made to made the overall Xamarin Field Service sample better. First of all, we’re glad to receive many positive responses towards that post and very happy to see many Crosslight developers are taking UI and UX very seriously in designing their cross-platform apps.

Many of you have asked when will the blogpost see the light of day. Well, now it is. We’re very excited to announce that the sample is now available for you guys to check out and experiment for yourself. It is available here: http://git.intersoftsolutions.com/projects/CS/repos/app-fieldservice/browse. Before I can delve into the technical aspects of this sample, in this second part of the post, I would like to re-highlight what we’ve promised in the first post and see it in action, in the form of shots and videos, with codes if possible. We tried to retain the business logic as much as we can to adhere to the original sample.

Better Device Compatibility

When you try to run the original sample, you won’t be able to run the sample on phone devices, which is kind of disappointing. But not with Crosslight. You can definitely deploy the sample on phones and tablet devices.

With this, you can easily target more devices as phone devices are greater in number when compared to tablets. One note: we’re discarding Windows-based platforms for now due to low market receptivity. Once it has gained more traction amongst cross-platform mobile developers, we’ll definitely revive the Windows lineup.

The Login Screen

First, let’s take a look at the original sample login screen experience.

One thing’s for sure: I can’t definitely use this screen on landscape orientation. When I try to focus on the username text box, the login box just flies away from the screen up to the point I can’t see where the text box is and input my username. You can still use this screen on portrait orientation though. Which is weird. Let’s take a look at Crosslight’s login screen.

No matter how you rotate it, it works consistently on both portrait and landscape orientation, on phones as well.

The Assignment List Screen

The assignment screen is pretty much the same, except for a few changes:

1. We don’t feel that the “sticky” header feels common in modern mobile apps, therefore we opted for “grouped” assignments instead. Sticky headers tend to take too much space, obstructing the user’s view and may cause confusion. Active assignments are put on the top of the list, followed by Completed assignments and Pending assignments. On iOS, you can easily tap the status bar to get to the topmost part of the TableView (this is the default behavior of the TableView) to see the Active Assignment quickly.
2. We removed the the button click behavior from the “assignment status”. Instead, we opted for swipe gesture, as this is more commonly used in mobile apps. If the assignment is On Hold, you can only see Active and Complete as options (as shown in the shot above). It feels counter-intuitive to have two clickable UI elements inside an assignment. The user might wonder if there’s any additional UI elements that can be clicked in addition to the “Play” button.
3. Also notice that you can’t perform the swipe gesture if the assignment isn’t accepted yet, or is currently the running assignment. The secret lies in the AssignmentListViewModel.cs inside FieldService.Core/ViewModels folder. /// <summary>
   /// Determines whether the edit command can be executed.
   /// </summary>
   /// <remarks>>
   /// Allow users to perform swipe actions only when:
   /// 1. The item status is Active or Pending
   /// 2. The active assignment is not currently running.
   /// </remarks>
   protected override bool CanExecuteEdit(object parameter)
   {
       if (parameter is EditingParameter)
       {
           EditingParameter editingParameter = parameter as EditingParameter;
           if (editingParameter.Item is Assignment)
           {
               Assignment item = editingParameter.Item as Assignment;
               if (item == this.AssignmentViewModel.Item && this.AssignmentViewModel.IsStarted)
                   return false;
               else
                   return (item.Status == “Active“ || item.Status == “Pending“);
           }
       }    return false;
   }

The Assignment Detail Screen

This is where things get pretty interesting.

As promised, on tablets, we’ve used the new Dialog Presenter that will slide from the right hand side that will cover at least 3/4 of the screen. You can easily dismiss the detail by hitting the back button on Android or tapping on the area outside the dialog. On phones, normal push navigation is used. To use the Dialog Presenter on iPad, at the TabViewController’s constructor, simply use this code:

public AssignmentDetailTabViewController()
{
    var isPad = UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Pad;

    this.ConfigurePresenter(o =>
    {
        o.PreferredContentSize = new CGSize(640, 768);
        o.PreferredContentSizeLandscape = new CGSize(704, 768);
        o.DismissOnTap = true;

        if (isPad)
        {
            o.PresentationStyle = ContentPresentationStyle.Edge;
            o.EdgePresentationPosition = EdgePresentationPosition.Right;
            o.EntryTransition = new SlideFromRightTransition()
            {
                FadeOutSource = false
            };
            o.ContentShadowRadius = 10;
        }
    });
}

And when navigating, you can do something similar as follows:

// on phone, perform standard navigation, while on tablet show the dialog presenter for better experience
if (this.GetService<IApplicationService>().GetContext().Device.Kind == DeviceKind.Phone)
{
    this.ActiveViewModel.NavigationService.Navigate<AssignmentDetailTabViewModel>(new NavigationParameter(parameter));
}
else
{
    this.ActiveViewModel.DialogPresenter.ShowAsync<AssignmentDetailTabViewModel>(
        new NavigationParameter(parameter),
        new DialogOptions()
    {
        HideButtons = true
    });
}

You can see more detail on that inside the FieldService.Core/ViewModels/AssignmentViewModel.cs file.

Special and very important note for iOS: When using the TabViewController after push navigation, you must hide the root navigation controller in order for many correct UX to work properly, for example, the navigation controller transitions, search bar controller, and much more. This needs to be done because the TabViewController has its own NavigationController. It is simply done by calling the following code in the AssignmentDetailTabViewController.

protected override bool EnsureNavigationContext
{
    get { return true; }
}

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

    // Important: Hide the root navigation bar since the tab will have its own.
    this.NavigationController.SetNavigationBarHidden(true, true);
}

We also added a little touch.

You can click the call button to immediately call the specified number, or click on the address to launch Maps with immediate directions to the specified location. If you try to click any of the documents below, the report will be displayed in a modal ViewController.

To launch the report on Android devices, you’ll need a PDF viewer installed to the emulator or device.

The Footer View Template

On iOS, notice that the new FooterViewTemplate is used, which resembles Apple-music style view template. On Android, since the tabs are placed on the top, the view template is used at the bottom of the screen.

The FooterViewTemplate is a new feature added in Crosslight 5.1. In iOS, to use thew new FotoerViewTemplate, simply override the property in the TabViewController and return the Nib file.

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

If you’d like, you can also apply the translucent blur effect to the FooterViewTemplate by providing a Visual Effect View element using Xcode.

Here’s the result when applied.

Also note that when you use the FooterViewTemplate, Crosslight.iOS automatically calculates the height of the FooterViewTemplate and readjusts the content bounds above it, so that the contents not “overlayed” and obscured by the FooterViewTemplate. Very nifty.

On Android, you would simply override the ContentLayoutId of the AssignmentDetailTabFragment and return the layout you would like to use.

<?xml version=“1.0“ encoding=“utf–8“?>
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android“
    xmlns:app=“http://schemas.android.com/apk/res–auto“
    android:layout_width=“match_parent“
    android:layout_height=“match_parent“
    android:orientation=“vertical“>
    <android.support.design.widget.TabLayout
        android:id=“@+id/tab_layout“
        android:layout_width=“match_parent“
        android:layout_height=“wrap_content“
        app:tabTextAppearance=“@style/CustomTabText“ />
    <FrameLayout
        android:id=“@+id/fragment_container“
        android:layout_width=“match_parent“
        android:layout_height=“match_parent“
        android:layout_weight=“1“ />
    <LinearLayout
        android:id=“@+id/FooterLayout“
        android:layout_width=“match_parent“
        android:layout_height=“50dp“
        android:orientation=“horizontal“
        android:paddingLeft=“10dp“
        android:paddingRight=“10dp“
        android:background=“#DADADA“>
        <LinearLayout
            android:orientation=“horizontal“
            android:layout_weight=“1“
            android:layout_width=“0dp“
            android:layout_height=“50dp“>
            <FrameLayout
                android:id=“@+id/StartButtonLayout“
                android:orientation=“horizontal“
                android:layout_width=“30dp“
                android:layout_height=“wrap_content“>
                <ImageButton
                    android:id=“@+id/StartButton“
                    android:layout_gravity=“center“
                    android:scaleType=“fitCenter“
                    android:layout_width=“match_parent“
                    android:layout_height=“match_parent“
                    android:background=“#00000000“
                    android:src=“@drawable/Start“ />
            </FrameLayout>
            <TextView
                android:id=“@+id/FooterElapsedTimeLabel“
                android:layout_width=“wrap_content“
                android:layout_height=“wrap_content“
                android:layout_marginLeft=“10dp“
                android:text=“ElapsedTime“
                android:layout_gravity=“center_vertical“
                android:textColor=“#000000“ />
        </LinearLayout>
        <LinearLayout
            android:orientation=“vertical“
            android:layout_weight=“1“
            android:layout_width=“0dp“
            android:gravity=“center_horizontal“
            android:layout_height=“match_parent“>
            <LinearLayout
                android:orientation=“horizontal“
                android:layout_weight=“1“
                android:layout_width=“wrap_content“
                android:layout_height=“0dp“>
                <TextView
                    android:id=“@+id/FooterNameLabel“
                    android:layout_width=“wrap_content“
                    android:layout_height=“wrap_content“
                    android:text=“Name“
                    android:textStyle=“bold“
                    android:singleLine=“true“
                    android:layout_gravity=“center_vertical“
                    android:textColor=“#000000“ />
            </LinearLayout>
            <LinearLayout
                android:orientation=“horizontal“
                android:layout_weight=“1“
                android:layout_width=“wrap_content“
                android:layout_height=“0dp“>
                <TextView
                    android:id=“@+id/FooterContactPersonLabel“
                    android:layout_width=“wrap_content“
                    android:layout_height=“wrap_content“
                    android:text=“ContactPerson“
                    android:singleLine=“true“
                    android:layout_gravity=“center_vertical“
                    android:textColor=“#000000“ />
            </LinearLayout>
        </LinearLayout>
        <FrameLayout
            android:orientation=“horizontal“
            android:layout_weight=“1“
            android:layout_width=“0dp“
            android:layout_height=“match_parent“
            android:gravity=“right“>
            <LinearLayout
                android:id=“@+id/ActivePendingLayout“
                android:orientation=“horizontal“
                android:layout_width=“70dp“
                android:layout_gravity=“right|center_vertical“
                android:layout_height=“30dp“>
                <Button
                    android:id=“@+id/ActivePendingButton“
                    android:text=“ACTIVE“
                    android:textColor=“#3BD606“
                    android:textSize=“10sp“
                    android:layout_gravity=“right|center_vertical“
                    android:layout_width=“70dp“
                    android:layout_height=“30dp“
                    android:background=“@drawable/circularTextViewGreen“ />
            </LinearLayout>
            <LinearLayout
                android:id=“@+id/AcceptRejectLayout“
                android:orientation=“horizontal“
                android:layout_width=“80dp“
                android:layout_height=“match_parent“
                android:layout_gravity=“right“>
                <LinearLayout
                    android:orientation=“vertical“
                    android:layout_width=“0dp“
                    android:layout_height=“match_parent“
                    android:gravity=“center“
                    android:layout_weight=“1“>
                    <Button
                        android:text=“✓“
                        android:textColor=“#ffffff“
                        android:textSize=“22sp“
                        android:layout_width=“32dp“
                        android:layout_height=“32dp“
                        android:gravity=“center“
                        android:background=“@drawable/circularButtonBlue“
                        android:id=“@+id/AcceptButton“ />
                </LinearLayout>
                <LinearLayout
                    android:orientation=“vertical“
                    android:layout_width=“0dp“
                    android:layout_height=“match_parent“
                    android:layout_weight=“1“
                    android:gravity=“center“>
                    <Button
                        android:text=“X“
                        android:textColor=“#ffffff“
                        android:textSize=“22sp“
                        android:gravity=“center“
                        android:layout_width=“32dp“
                        android:layout_height=“32dp“
                        android:background=“@drawable/circularButtonRed“
                        android:id=“@+id/RejectButton“ />
                </LinearLayout>
            </LinearLayout>
        </FrameLayout>
    </LinearLayout>
</LinearLayout>

One thing to note is the middle FrameLayout with the ID fragment_container. You’ll need to provide this or the fragment transaction would not work properly.

Single-Responsibility Principle

Before we proceed, I want you to think about this problem for a second: since an assignment can be manipulated from so many places: the list screen, the detail screen and the map screen, what design approach is best used to “sync” the assignment state from any screens, but in an elegant way? For example, the user can start an assignment from the list screen, then from the detail screen, the user pauses, changes the assignment status, then go back to the map screen, plays the assignment once more, change the assignment status to Active, and so on.

We need to access the assignment from various ViewModels across the app, but we must ensure that the assignment states are correct whenever it is accessed anywhere. In this sample, we’ve used the Single-Responsibility Principle to address this problem, exhibited by AssignmentViewModel.cs located inside FieldService.Core/ViewModels folder. This single class holds a unified information for the Active Assignment as well as any other commands that can interact with the assignment, such as accepting, rejecting, starting, changing status, etc.

Crosslight provides an elegant solution to this problem with the IoC (Inversion of Control) pattern. By registering the ViewModel once in the Container class, you can easily resolve and use this ViewModel anywhere. To begin with, open the AppService.cs file inside FieldService.Core/Infrastructure folder where you’ll an entry that looks similar to the following.

// the assignment view model streamlines all assignment–related logics
// which is resolved in numerous ViewModels such as list, map, and detail
Container.Current.Register<AssignmentViewModel>(c => new AssignmentViewModel()).WithLifetimeManager(new ContainerLifetime());

To resolve the registered ViewModel anyhwere, all you need to do is create a getter-only property that resolves the ViewModel from the Container. For example, as follows.

public AssignmentViewModel AssignmentViewModel
{
    get
    {
        return Container.Current.Resolve<AssignmentViewModel>();
    }
}

Once this is done, you can easily use the object inside your BindingProvider and ensure that the data bindings work flawlessly across screens.

// Command bindings
this.AddBinding(“ActivePendingButton“, BindableProperties.CommandProperty, “AssignmentViewModel.ChangeStatusCommand“);
this.AddBinding(“ActivePendingButton“, BindableProperties.CommandParameterProperty, “Assignment“);
this.AddBinding(“RejectButton“, BindableProperties.CommandProperty, “AssignmentViewModel.RejectCommand“);
this.AddBinding(“RejectButton“, BindableProperties.CommandParameterProperty, “Assignment“);
this.AddBinding(“AcceptButton“, BindableProperties.CommandProperty, “AssignmentViewModel.AcceptCommand“);
this.AddBinding(“AcceptButton“, BindableProperties.CommandParameterProperty, “Assignment“);
this.AddBinding(“StartButton“, BindableProperties.CommandProperty, “AssignmentViewModel.StartCommand“);

Very simple and elegant.

The Items Screen

Let’s take a brief look at the Items screen.

At a first glance, there’s nothing quite special in the Items screen. Until you try to swipe down.

Notice that when you hit on the search bar, the status bar color changes according to the overridden PreferredStatusBarStyle.

public override UIStatusBarStyle PreferredStatusBarStyle()
{
    if (this.SearchDisplayController != null && this.SearchDisplayController.Active)
        return UIStatusBarStyle.Default;
    else
        return UIAppearanceSettings.StatusBarStyle;
}

When you try to run this project on an iPad, you’ll get a popover controller when you try to add an item, and when you edit an item, you’ll get a nice modal ViewController that is displayed in the middle of the screen.

This corresponds to the BindingProvider defined for this view.

if (isTablet)
    this.AddBinding(“TableView“, BindableProperties.SelectedCommandProperty, “NavigateToEditorCommand“);
else
    this.AddBinding(“TableView“, BindableProperties.DetailNavigationTargetProperty, new NavigationTarget(typeof(AssignmentExpenseEditorViewModel)), true);

And in the ViewModel, the NavigateToEditorCommand invokes the following method.

public void ExecuteNavigateToEditor(object parameter)
{
    this.DialogPresenter.ShowAsync<AssignmentItemsEditorViewModel>(
        new NavigationParameter(parameter),
        new DialogOptions()
        {
            NeutralButtonStyle = new DialogButtonStyle(Colors.Red)
        });
}

When executing the Add command:

protected override void ExecuteAdd(object parameter)
{
     this.NavigationService.Navigate<AssignmentItemsEditorViewModel>(
        new NavigationParameter(this.TabViewModel.Assignment)
        {
            NavigationMode = NavigationMode.Modal,
            EnsureNavigationContext = true,
            ModalPresentationStyle = ModalPresentationStyle.FormSheet,
            PreferPopover = true,
            CommandId = “Add“
        });
}

The Labor Hours Screen

In the Labor Hours screen, the experience is pretty similar when adding or editing an item.

Perhaps one particular interesting technique is how to update the footer total Labor Hours at runtime. If you notice closely, when you edit any of the labor hours or add a new entry with a specified Labor Hours, the total labor hours sums up automatically.

To achieve that effect, we provide the FooterViewTemplate for the Labor Hours screen.

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

And here’s the DetailFooterLayout.

Then in the BindingProvider, we bind the label to.

this.AddBinding(“StatusLabel“, BindableProperties.TextProperty, new BindingDescription(“TabViewModel.Assignment.TotalLaborHours“) { StringFormat = “Labor Hours ({0:0.#})“ });

Which corresponds to the parent ViewModel (TabViewModel) property’s active Assignment with its TotalLaborHours property.

[IgnoreDataMember]
public double TotalLaborHours
{
    get
    {
        return TimeSpan.FromTicks(this.Labors.Sum(o => o.Ticks)).TotalHours;
    }
}

This way, we should be able to centralize the labor hours binding to the same property, eliminating unnecessary workarounds to elegantly achieve this effect.

Validating Input Using Form Validation Metadata

When you input a new labor hour entry, or edit an existing one. If you open the FieldServiceModel.Metadata.cs file inside FieldService.Core/DomainModels folder, you’ll see the following.

If you notice there, there are two validation metadata, one is for the Expense entry and one is for the Labor entry. In this example, we’ve ensured that the Ticks property is a Required Entry and the minimum number for the ticks is 1. Once these conditions are satisfied, then the form is considered a vaild entry and the changes will be saved. Similar to the Expense entry, we’ve enforced that the Price should be greater than 1.

The important thing to ensure that the validation metadata works properly is that you create a partial class from the model that you want to validate, and decorate it with the EntityMetadataAttribute.

[EntityMetadata(typeof(Labor.LaborValidationMetadata))]
partial class Labor
{
    class LaborValidationMetadata
    {
        [Required]
        [Min(typeof(long), “1“, ErrorMessage = “Hours must be greater than 0“)]
        public long Ticks { get; set; }
    }
}

The Expense Screen

The Expense screen also uses pretty much the same technique with the Items and Labor Hours screen, which uses popover for adding new items and modal ViewController for the editing screen.

When you go to the editor screen, we improved on the Form Builder experience a bit to support the image editor detail scenario as follows.

And in Android,

The FormMetadata is as simply as follows.

public class ImageSection
{
    [Editor(EditorType.Image)]
    [Layout(Style = LayoutStyle.DetailOnly)]
    [Image(Height = 200, Placeholder = “photo.png“, Padding = 8, ScaleMode = ImageScaleMode.ScaleAspectFill)]
    [ImagePicker(ImageResultMode = ImageResultMode.Both, UseThumbnailResult = false, PickerResultCommand = “FinishImagePickerCommand“)]
    public static byte[] Image;
}

Jump to Complete Screen

Another interesting interaction in this app is how you can directly jump to the Complete screen when you decide Complete the assignment, either from the List screen, Map screen, or from the assignment detail.

Due to the Single Responsibility principle that we’ve used in this application, achieving this scenario is very easy. In the AssignmentViewModel, simply navigate to the Confirmation screen.

public void ExecuteComplete(object parameter, bool isFromConfirmationPage = false)
{
    if (isFromConfirmationPage)
    {
        this.ExecutePendingOrComplete(parameter, “Complete“);
    }
    else
    {
        if (this.ActiveViewModel is AssignmentDetailTabViewModel)
        {
            // already in the detail view, focus to the confirmation screen
            this.SetDetailSelectedIndex();
        }
        else
        {
            // we‘re in the main view, perform navigation to detail
            this.AutoFocusToConfirmation = true;
            this.ExecuteNavigateToDetail(parameter);
        }
    }
}

The Completion Screen

In the Completion screen, you’ll be greeted with two major UI elements: the Photos Grid/Collection View and a Signature Pad. If you try to complete the assignment immediately without entering any signature, you’ll get a toast message as follows.

You can add additional photos when completing the assignment for extra information.

The code to execute the completion of an assignment is pretty straightforward.

public void ExecuteComplete(object parameter)
{
    if (this.Assignment.Status == “Complete“)
    {
        this.ToastPresenter.Show(“This assignment already completed“);
    }
    else if (this.Assignment.Status == “Active“)
    {
        if (this.Signature == null)
        {
            this.ToastPresenter.Show(“To complete this assignment, please draw your sign in the signature pad.“);
            return;
        }

        this.Assignment.Signature = this.Signature;
        this.TabViewModel.AssignmentViewModel.ExecuteComplete(this.Assignment, true);

        this.IsSignatureImageViewVisible = true;
        this.IsSignatureCanvasVisible = false;
        this.CompleteCommand.RaiseCanExecuteChanged();
        this.AddPhotoCommand.RaiseCanExecuteChanged();
        this.ClearSignatureCommand.RaiseCanExecuteChanged();

        this.ToastPresenter.Show(“Assignment completed“);
    }
    else
    {
        this.ToastPresenter.Show(“You need to activate the assignment first“);
    }
}

You can also clear the signature you’ve entered by hitting the Clear button above the Signature Pad.

Disable Editing After Completed

After you’ve completed an assignment, you won’t be able to make any changes to any of the items available in the Assignment Detail. This includes Items, Labor Hours, Expenses, Photos and Signature. This is possible because we simply need to check for the current Assignment’s Status and see if an operation can be completed.

[MaxLength(255)]
public string Status 
{ 
    get { return (string)this.GetValue(StatusPropertyMetadata); } 
    set { this.SetValue(StatusPropertyMetadata, value); } 
}

In the ViewModel, you would simply override the CanExecute method and see if the assignment is completed before executing your method.

protected override bool CanExecuteSave(object parameter)
{
    if (!this.IsNewItem && this.Item.Assignment.Status == “Complete“)
        return false;

    return base.CanExecuteSave(parameter);
}

This is done so elegantly that you don’t have to access any of the platform-specific views to accomplish this.

Wrapping Up

Hopefully this post provides you with even more insights on what’s happening behind the scenes with the new Crosslight Field Service sample. If you’d like to see more Xamarin samples to be converted to Crosslight, please do let us know in the comments section below.

Till next post,
Nicholas Lie

Good news! For those of you who’ve waited for so long for Crosslight Field Service sample, it’s now available here. This sample highlights many of the best practices found when developing Crosslight applications with no tedious workarounds whatsoever. Works on iPhone, iPad, Android phones and tablets, this sample sets a new standard for Crosslight app development.

Features highlight:

• Works on iOS and Android, on both phones and tablets devices.
• Showcases best coding practices when using Crosslight.
• Supports Dialog Presenter on tablet mode.
• True data binding capabilities with UI live updates.
• Saving and loading data through SQLite.
• Crosslight Form Builder to create a truly versatile form that works consistently on iOS and Android.
• FooterViewTemplate on iOS that mimics Apple-style app.
• The use of Crosslight Signature Pad to obtain customer’s signature upon assignment completion.
• Deep navigation to the completion screen when attempting to complete an assignment.
• Full iOS storyboard support.
• Use of CollectionView/GridView for photos.
• Supports changing ViewController’s Status Bar Style at runtime.
• Showing directions with the Crosslight Location Service.

If you haven’t figured out why we made this sample, I highly recommend you to check out the my previous blog post where I highlight many parts of the sample that can be fixed and enhanced to produce a better app with Crosslight.

In the next blogpost, I’m going to elaborate more on the interesting scenarios found in this sample and the code behind to achieve each scenarios gracefully, which will hopefully be of great tips for seasoned and pro Crosslight developers alike.

Stay tuned,
Nicholas Lie

Starting from Premier Studio 2016, WebUI took a completely new look and feel with the new Unified Theming made for ASP.NET. As the name implies, Unified Theming allows you to impose a unified design language that applies to the entire suite of WebUI components with a modern CSS theming language that combines mixins and overridable variables.

This blog post is simply made to show you how to create a new Unified Theming project using the new project template that comes with Premier Studio 2016 or higher.

What You Need

To follow this tutorial, simply install Premier Studio 2016 or newer. You’ll also need to have Visual Studio 2012 or higher installed on Windows 7 or newer. If you haven’t installed it yet, please download it from our site. Or, simply login to your account.

Let’s Do This

Simply open up your Visual Studio instance, then hit New, Project. From the dialog that appears, choose Visual C#, Intersoft Solutions, ASP.NET, then choose Intersoft Unified Empty Web Application.

Enter the necessary details such as the project name, location and solution name. Hit OK when you’re done. To run this project, simply right-click on the Default.aspx file, then choose View in Browser.

You’ll get the following screen.

This new Unified Theming template is intuitively design so as to provide basic ideas on how to get started quickly with a new WebUI Unified Theming application, complete with working data bindings for WebCombo, WebInput, WebGrid, and more. At the bottom part of this page we’ve also provided several business-inspiring samples to help inspire your next big web applications.

Wrapping Up

To learn more what you need to do to use the new Unified Theming in your existing applications, check out the documentation. Or, if you prefer to try migrating an existing WebUI sample, for example the WebGrid’s Enterprise sample, I highly recommend you to check out my previous blog post, where I’ve covered a step-by-step walkthrough on how to migrate the sample to use Unified Theming.

To get a better grasp on the Unified Theming feature and what customizable areas available for each control, feel free to check out these great documentations:

• WebGrid Modern Theme Style Reference
• WebCombo Modern Theme Style Reference
• WebInput Modern Theme Style Reference
• WebDesktop Modern Theme Style Reference
• WebScheduler Modern Theme Style Reference
• WebEssentials Modern Theme Style Reference
• WebTextEditor Modern Theme Style Reference
• WebTreeView Modern Theme Style Reference

We can’t wait to see what you’ve built with this new Unified Theming feature. Let us know in the comments section below!

Till next post,
Nicholas Lie

In my last post, I wrote an in-depth, step-by-step tutorial on how to create you can migrate a Xamarin.Forms sample and turn it into a Crosslight solution. The process might seem intricate at first, but once you understood the basics of Crosslight and its design pattern, you’ll be able to do things very quickly. That’s made possible as Crosslight enforces clear separation-of-concerns and strong and extensible design patterns.

In this post, I’m going to modify the login screen from the finished sample in the previous blog post to use the native UI views instead of Crosslight Form Builder. Hopefully at the end of tutorial you’ll have rough ideas how to bind data to native UI views with Crosslight, and gain insights how to take advantage of many different Crosslight features to achieve a goal in the most efficient way.

Starting Off

To follow this tutorial perfectly, you’ll need clone this repository. This is the finished sample from the previous blog post. To run this sample, you’ll need to restore the necessary NuGet packages. After you’ve managed to clone and run this sample, you’re ready to begin. If you have any trouble in restoring the NuGet packages, consult the documentation.

Modifying the Android Login View

First, open up the LoginFragment.cs located inside the XamarinFormsSample.Android/Fragments folder. Replace the contents with this code.

using System;
using Android.Runtime;
using XamarinFormsSample.Core.BindingProviders;
using XamarinFormsSample.Core.ViewModels;
using Intersoft.Crosslight;
using Intersoft.Crosslight.Android.v7;

namespace XamarinFormsSample.Android.Fragments
{
    /// <summary>
    ///     The main Fragment contained inside LoginActivity.
    ///     This class is decorated with the ImportBindingAttribute that indicates
    ///     the binding provider to be used with this Activity.
    /// </summary>
    [ImportBinding(typeof(LoginBindingProvider))]
    public class LoginFragment : Fragment<LoginViewModel>
    {
        #region Constructors

        /// <summary>
        ///     Initializes a new instance of the <see cref=“LoginFragment“ /> class.
        /// </summary>
        public LoginFragment()
        {
        }

        /// <summary>
        ///     Initializes a new instance of the <see cref=“LoginFragment“ /> class.
        /// </summary>
        /// <param name=“javaReference“>The java reference.</param>
        /// <param name=“transfer“>The transfer.</param>
        public LoginFragment(IntPtr javaReference, JniHandleOwnership transfer)
            : base(javaReference, transfer)
        {
        }

        #endregion

        #region Properties

        /// <summary>
        ///     Gets the content layout identifier.
        /// </summary>
        /// <value>The content layout identifier.</value>
        protected override int ContentLayoutId
        {
            get { return Resource.Layout.main; }
        }

        #endregion

        #region Methods

        /// <summary>
        ///     Initializes this instance.
        /// </summary>
        protected override void Initialize()
        {
            base.Initialize();

            this.IconId = Resource.Drawable.ic_toolbar;
        }

        #endregion
    }
}

The FormFragment requires 2 default constructors, which is becoming the new standard for Fragment initialization when using the new Material library. The ContentLayoutId defines the layout file that will be used to render this screen. Then the IconId is provided for the Toolbar icon that will be used with this view. Then create the main.axml layout inside the XamarinFormsSample.Android/Resources/layout folder. Use the following layout.

<?xml version=“1.0“ encoding=“utf–8“?>
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android“
    android:orientation=“vertical“
    android:layout_width=“match_parent“
    android:layout_height=“match_parent“
    android:gravity=“center“>
    <LinearLayout
        android:orientation=“vertical“
        android:layout_width=“match_parent“
        android:layout_height=“match_parent“
        android:layout_gravity=“center“
        android:gravity=“center_vertical“
        android:layout_marginLeft=“30dp“
        android:layout_marginRight=“30dp“>
        <android.support.design.widget.TextInputLayout
            android:layout_width=“match_parent“
            android:layout_height=“wrap_content“>
            <EditText
                android:id=“@+id/TxtUserName“
                android:layout_height=“wrap_content“
                android:layout_width=“match_parent“
                android:layout_gravity=“center“
                android:singleLine=“true“
                android:hint=“@string/hint_username“ />
        </android.support.design.widget.TextInputLayout>
        <android.support.design.widget.TextInputLayout
            android:layout_width=“match_parent“
            android:layout_height=“wrap_content“>
            <EditText
                android:id=“@+id/TxtPassword“
                android:layout_height=“wrap_content“
                android:layout_width=“match_parent“
                android:layout_gravity=“center“
                android:singleLine=“true“
                android:hint=“@string/hint_password“ />
        </android.support.design.widget.TextInputLayout>
        <Button
            android:id=“@+id/BtnLogin“
            android:text=“@string/login“
            android:layout_gravity=“center“
            android:layout_width=“match_parent“
            android:layout_height=“wrap_content“ />
    </LinearLayout>
</LinearLayout>

Similar to previous login form, this screen contains two EditTexts, with the ID TxtUserName and TxtPassword respectively. These two EditTexts are wrapped in inside a TextInputLayout. This is a relatively new layout available in Material Design that provides intuitive hinting when used inside a EditText. Next, we’re going bind these textboxes to the ViewModel using the BindingProvider.

Create a new BindingProvider inside the XamarinFormsSample/BindingProviders folder and call it LoginBindingProvider. Use the following code.

using Intersoft.Crosslight;

namespace XamarinFormsSample.Core.BindingProviders
{
    public class LoginBindingProvider : BindingProvider
    {
        #region Constructors

        public LoginBindingProvider()
        {
            this.AddBinding(“TxtUserName“, BindableProperties.TextProperty, “LoginInfo.UserName“, BindingMode.TwoWay);
            this.AddBinding(“TxtPassword“, BindableProperties.TextProperty, “LoginInfo.Password“, BindingMode.TwoWay);
            this.AddBinding(“BtnLogin“, BindableProperties.CommandProperty, “LoginCommand“);
        }

        #endregion
    }
}

This is the BindingProvider that provides data binding definitions between the View and the ViewModel. We’re basically binding both of the views with ID TxtUserName and TxtPassword, bind their Text property to the LoginInfo.UserName in the ViewModel. Then we also bind the view with ID BtnLogin to the LoginCommand.

One question we often heard is, why the binding provider is not needed when using Crosslight Form Builder while it’s needed in native views binding? That’s because the form metadata automatically map the defined property to the underlying model, and a binding is created behind the scene as the Form Builder generates the views at runtime.

Since we’re no longer using Form Builder for the login screen, you can safely delete the LoginInfo.FormMetadata file found inside the XamarinFormsSample/Forms folder.

Next, we need to modify the LoginViewModel a bit. Open up the LoginViewModel.cs file inside the XamarinFormsSample/ViewModels folder and modify the ExecuteLogin method. Replace it with the following snippet.

private void ExecuteLogin(object parameter)
{
    if (!string.IsNullOrEmpty(this.LoginInfo.UserName) && !string.IsNullOrEmpty(this.LoginInfo.Password))
        this.NavigationService.Navigate<EmployeeListViewModel>();
    else
        this.ToastPresenter.Show(“Please enter any username and password.“);
}