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

Many mobile developers who are just starting out with Crosslight often asked us with this question: I have an existing Xamarin.Forms app and would like to get started with Crosslight. How can I do that? This post aims to provide the answer to that question. However, I’d have to be straightforward to you. There’s no easy way, since Xamarin.Forms isn’t compatible with Crosslight at all.

Xamarin.Forms vs. Crosslight

When should you build with Xamarin.Forms? According to Xamarin’s site:

Well, in our opinion, the best time to use Xamarin.Forms is never to use it all. Why? There are two reasons: user experience and design pattern.

The User Experience

Sure, with Xamarin.Forms you can create an app that works. Even though you’re building a simple app that works, developers should at least pay attention to user experience. If the user experience is bad, prepare to receive 4-or-less-stars all over the App Store and Play Store. How bad is the user experience with Xamarin.Forms? Here’s two quick videos taken when running the XamarinFormsSample from Xamarin’s Introduction to Xamarin.Forms. One for Android:

And another for iOS:

What do you think? I’m not even sure where to begin. Xamarin.Forms tries to generalize the user experience for all platforms, which is not a good idea. When the app is first launched, a blank table view is shown. And then when the + button is tapped, a login form is shown. Why not display a login form at the beginning instead? On iOS, I’m not quite sure I’ve seen an app that places the Save button side-by-side with the Delete button.  Typically, they’re placed on the navigation controller as bar items. What’s worse, when I try to rotate the iOS sample, the bottom section below the image is practically unusable. In Android, when I rotate the device, I’m automatically kicked back out to the ListView screen and the list seems to be corrupted. Magic. Let’s compare them with the converted sample to Crosslight.

And here’s on the one on Android.

I’ll let you be the judge. Take a look with the forms created with Crosslight Form Builder.

With the Form Builder, you can easily create beautiful forms that complies with each platform’s user experience guidelines. And they’re all working correctly without any annoying user experience found in Xamarin.Forms. Buttons are correctly placed and rotation works perfectly. This is what a “minimal-working” app should look like.

The Design Pattern

Let’s take a brief look at the Xamarin.Forms code for the editor screen. Click on the image to see the large version.

As you can see, Crosslight Form Builder showcases a better pattern where you design a form focused more on the model, rather than the View, as the View approach will not produce native-looking forms when used in cross-platform fashion. With Crosslight, developers are focused on models, making the View loosely-coupled. This will also lead in better long-term extensibility and clearer separation of concerns. Also, you’ll notice that the code to build forms are much lighter and shorter.

It’s important to note that Form Builder is only one of many features available in Crosslight. In addition to Form Builder, developers can use Crosslight’s advanced data binding features to bind native views to a shared ViewModel and enjoy 100% UI logic reuse. However, this post specifically highlights the Form Builder feature to provide a comparable approach to Xamarin Forms.

In this tutorial, I’m going to convert the existing sample XamarinFormsSample to Crosslight. In high-level overview, here’s what we’re going to accomplish:

• Add bootstrapper files for Android.
• Remove Xamarin.Forms references.
• Begin creating the views and ViewModels
• Add bootstrapper files and views for Android.
• Add bootstrapper files and views for iOS.

Sounds good? Let’s begin.

What You’ll Need

To accomplish this tutorial perfectly, you’ll need to download the initial project from Xamarin’s website. Grab it here. Extract the files and use only the XamarinFormsSample project.

Open the .sln file and we’ll start from there. If you’re on Mac, you’ll need to have your Mobile Studio 2016 or higher installed on your Mac, since we’re going to be installing NuGet references via Xamarin Studio.

If you’re on Windows with Visual Studio, you should be able to follow this tutorial through without any hassles, since NuGet package management is built-in right into Visual Studio. You’ll also need to use at least Crosslight 5.0.5000.569 or higher. This package is available in the NuGet repository. We’ll add this package in the next step.

Install Crosslight Packages

Let’s begin by installing the necessary Crosslight references to these projects. If you’re on Mac, start by opening the Intersoft Package Console Extension from Xamarin Studio.

• Install Intersoft.Crosslight package to all of your projects.
  
• Install Intersoft.Crosslight.Android.v7 to the Android project.
  

If you’re unfamiliar with installing Crosslight NuGet packages, it is highly recommended to check out the docs: Introduction to Crosslight NuGet Packages.

Remove Xamarin.Forms References

As radical as it seems, Crosslight is not designed to work with Xamarin.Forms, and therefore all Xamarin.Forms references have to be removed. Remove these highlighted references from your project.

After you’ve removed these references, make sure to double check the References folder once more, because there might be additional references such as these, which you need to remove as well.

Also, remove the Views folder from the XamarinFormsSample (PCL) project entirely and including the Colours.cs and Fonts.cs.

Also, you might want to remove references to Xamarin.Forms inside the packages.config that exists in each project, so you can easily update Crosslight assemblies for this project without the Xamarin.Forms references re-appearing each time.

Bootstrapping the PCL Project

Add a new folder called Infrastructure inside the XamarinFormsSample (PCL) project and an empty class called AppService.cs.

Then replace the contents as follows.

using XamarinFormsSample.Core.ViewModels;
using Intersoft.Crosslight;

namespace XamarinFormsSample.Infrastructure
{
    /// <summary>
    ///     Crosslight’s shared application initializer.
    ///     This is the perfect place to register repositories, custom services, and other dependencies via IoC.
    /// </summary>
    /// <seealso cref=“Intersoft.Crosslight.ApplicationServiceBase“ />
    public sealed class CrosslightAppAppService : ApplicationServiceBase
    {
        #region Constructors

        /// <summary>
        ///     Initializes a new instance of the <see cref=“CrosslightAppAppService“ /> class.
        /// </summary>
        /// <param name=“context“>
        ///     The application context that implements <see cref=“T:Intersoft.Crosslight.IApplicationContext“ />
        /// </param>
        public CrosslightAppAppService(IApplicationContext context)
            : base(context)
        {
        }

        #endregion

        #region Methods

        /// <summary>
        ///     Called when the application is starting.
        /// </summary>
        /// <param name=“parameter“>The startup parameters.</param>
        protected override void OnStart(StartParameter parameter)
        {
            base.OnStart(parameter);
            //Specify the first ViewModel to use when launching the application.
            this.SetRootViewModel<LoginViewModel>();
        }

        #endregion
    }
}

This is the application service for the Core project, which is the perfect place to register custom services and additional dependencies via IoC. In this project, we won’t add anything except for just simple constructor that takes in one IApplicationContext parameter. This is the default constructor for this class. Also, in the overridden OnStart method, we’ve defined the root ViewModel as LoginViewModel, which we will create in just a moment.

Next, add another empty class inside the Models folder and give it a name of ModelBase.cs.

Replace the content as follows.

using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using Intersoft.Crosslight;

namespace XamarinFormsSample.Models
{
    /// <summary>
    ///     A handy model class that conforms to Crosslight lifecycle.
    ///     Most of the time you will only need to subclass this class when introducing a new domain model.
    ///     Includes validation features as well.
    /// </summary>
    /// <seealso cref=“System.ComponentModel.INotifyPropertyChanged“ />
    /// <seealso cref=“System.ComponentModel.INotifyDataErrorInfo“ />
    /// <seealso cref=“Intersoft.Crosslight.IDataValidation“ />
    public class ModelBase : INotifyPropertyChanged, INotifyDataErrorInfo, IDataValidation
    {
        #region Fields

        private readonly List<ValidationResult> _validationResultList = new List<ValidationResult>();

        #endregion

        #region Properties

        /// <summary>
        ///     Gets a value that indicates whether the entity has validation errors.
        /// </summary>
        public virtual bool HasErrors
        {
            get { return _validationResultList.Count(o => !o.IsSuccess) > 0; }
        }

        #endregion

        #region Methods

        /// <summary>
        ///     Clears all errors.
        /// </summary>
        public void ClearAllErrors()
        {
            List<string> properties = new List<string>();

            foreach (var result in this._validationResultList)
            {
                foreach (var member in result.MemberNames)
                {
                    if (!properties.Contains(member))
                        properties.Add(member);
                }
            }

            _validationResultList.Clear();
            this.OnErrorsChanged(““);

            foreach (string property in properties)
            {
                this.OnPropertyChanged(property);
            }
        }

        /// <summary>
        ///     Clears the error.
        /// </summary>
        /// <param name=“propertyName“>Name of the property.</param>
        public void ClearError(string propertyName)
        {
            var emptyValidationResult = new List<ValidationResult>();

            foreach (var result in _validationResultList)
            {
                if (result.MemberNames.Contains(propertyName))
                {
                    ((IList) result.MemberNames).Remove(propertyName);

                    if (!result.MemberNames.Any())
                        emptyValidationResult.Add(result);
                }
            }

            foreach (var result in emptyValidationResult)
            {
                _validationResultList.Remove(result);
            }

            this.OnErrorsChanged(propertyName);
        }

        /// <summary>
        ///     Gets all errors.
        /// </summary>
        /// <returns></returns>
        public IEnumerable<ValidationResult> GetAllErrors()
        {
            return _validationResultList.Where(o => !o.IsSuccess).ToList();
        }

        /// <summary>
        ///     Gets the validation errors for a specified property or for the entire entity.
        /// </summary>
        /// <param name=“propertyName“>
        ///     The name of the property to retrieve validation errors for; or null or
        ///     <see cref=“F:System.String.Empty“ />, to retrieve entity-level errors.
        /// </param>
        /// <returns>
        ///     The validation errors for the property or entity.
        /// </returns>
        public IEnumerable GetErrors(string propertyName)
        {
            var validationResult = new List<ValidationResult>();

            foreach (var result in _validationResultList)
            {
                if ((string.IsNullOrEmpty(propertyName) || result.MemberNames.Contains(propertyName)) && !result.IsSuccess)
                    validationResult.Add(result);
            }

            return validationResult;
        }

        /// <summary>
        ///     Called when [errors changed].
        /// </summary>
        /// <param name=“propertyName“>Name of the property.</param>
        protected virtual void OnErrorsChanged(string propertyName)
        {
            this.OnErrorsChanged(new DataErrorsChangedEventArgs(propertyName));
        }

        /// <summary>
        ///     Raises the <see cref=“E:ErrorsChanged“ /> event.
        /// </summary>
        /// <param name=“e“>The <see cref=“DataErrorsChangedEventArgs“ /> instance containing the event data.</param>
        private void OnErrorsChanged(DataErrorsChangedEventArgs e)
        {
            var handler = this.ErrorsChanged;

            if (handler != null)
                handler(this, e);
        }

        /// <summary>
        ///     Called when [property changed].
        /// </summary>
        /// <param name=“propertyName“>Name of the property.</param>
        protected virtual void OnPropertyChanged(string propertyName)
        {
            this.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
        }

        /// <summary>
        ///     Raises the <see cref=“E:PropertyChanged“ /> event.
        /// </summary>
        /// <param name=“e“>The <see cref=“PropertyChangedEventArgs“ /> instance containing the event data.</param>
        private void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            var propertyChanged = this.PropertyChanged;