Tag Archives: Crosslight

Webinar: Building Data-Aware Apps with Crosslight Enterprise Framework

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

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

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

Nicholas Lie

Webinar: Crosslight 2 Highlights

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

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

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

Nicholas Lie

Advanced Batch Update with MVVM support in Crosslight iOS

If you are iOS users, you might already familiar with the Mail app. When new messages arrived, notice that the new items are inserted smoothly with beautiful animation. The implementation for such insertion is in deed challenging since it needs to take account the actual insertion position based on the sorted data. Furthermore, multiple insertions are also supported with simultaneous animation which adds complexity to the logic. Technically, inserting an item will cause the index of remaining items invalid — and not to mention if there are deletion along the process. There are a lot of aspects that need to be considered. In this blog post, I will share how we support this user experience seamlessly in Crosslight 2.

iOS supports this simultaneous updates through a feature called batch updating. Implementing this feature requires deep knowledge of how iOS works — and typically what you want to avoid, particularly if your code is targeting multiple platforms. Thankfully, Crosslight has supported this batch update operation since its first version by allowing you to simply perform updates to your collection in .NET way. You don’t need to know about iOS even a bit.

Recently, we made several improvements to Crosslight for batch update support in a sorted collection. This allows you to simply adding items or deleting items on a sorted collection without concerning the actual position where it will be displayed or removed. The Crosslight’s table view component now takes care everything behind the scene, including the batch updating process, maintaining the delta changes and simultaneously animate the changes.

Consider you have a raw collection of countries: US, China, Japan, Netherlands, and Greece. When bound to the view, the collection is sorted by the country name in ascending with LINQ. At runtime, you then add few more countries: Indonesia, Brazil, and Mexico.

In ViewModel, the C# code looks like below.

public class BatchUpdateListViewModel : EditableListViewModelBase<Country>
    public DelegateCommand BatchUpdateCommand { get; set; }

    public BatchUpdateListViewModel()
        var items = new List<Country>();
        items.AddRange(Countries.Create("US", "China", "Japan", "Netherlands", "Greece"));

        // just a plain .NET collection here
        this.SourceItems = items.ToObservable();

        this.BatchUpdateCommand = new DelegateCommand(ExecuteBatchUpdate);

    private void ExecuteBatchUpdate(object parameter)
        // Begin batch updating
        this.IsBatchUpdating = true;

        // Perform multiple inserts simultaneously to the source items
        this.SourceItems.Add(new Country("Indonesia"));
        this.SourceItems.Add(new Country("Brazil"));
        this.SourceItems.Add(new Country("Mexico"));

        // End batch updating
        // After this code, the bound list view will be automatically updated with smooth animation
        this.IsBatchUpdating = false;

    protected override void OnSourceItemsChanged(ICollection<Country> items)
        // Sort the source items by country name, and use the sorted collection for the display items
        this.Items = items != null ? items.OrderBy(country => country.Name) : null;

Notice that the above code simply adds items to the source collection, you don’t have to concern the actual positions in the view. The only thing you need to ensure is to perform the collection changes while the IsBatchUpdating property value is true. As soon as the property is set to false, the bound view will be automatically notified and perform the animation simultaneously. This simple and intuitive code lets you to achieve the stunning user experience similar to Apple’s built-in Mail app when new items are added dynamically at runtime.

The following illustration shows what happened to the sorted collection at runtime.


To demonstrate this feature, we have added a new Sorted Batch Update to the Data Samples which you can download from our Git server. The bits is under the batch-update-sorted branch. You’ll also need nightly build (revision 54 or higher) to try out this new improvement.

In addition to multiple insertions, the sample also demonstrates multiple deletion. And to add more complexity, it also modifies the items which cause its order to change. For your convenience, you can see how the sample works below.

Improved batch update support on sorted collection


Most cross-platform frameworks I found today provide just a set of API without thoughtful consideration of the user experience that native to the platform. That’s where Crosslight sets apart. More than just a set of API, we designed Crosslight with the simplicity you expected, while taking account many other important factors behind the scene which will make your apps shine.

Join us for a 3-day live webinars on June 10 – 12, and learn how you can build great cross-platform business apps with Crosslight. We will be demo’ing how to create a fully-functional CRM app in just mere minutes — live. Seat is limited, so reserve yours now.

Video Tutorials: Using Crosslight Unified Push Notification Services

In my previous blog post, I’ve covered how to create a new business app using the Crosslight Project Wizard. Today, I would like to share how to handle push notifications in Crosslight apps using the new Unified Push Notification Services introduced in recent release. This video will cover push notifications for Crosslight-powered iOS, Android and Windows Phone applications. You will also learn how Crosslight has streamlined all the push notifications intricate processes such as registering the device with the platform store service (App Store, Play Store and Windows Store), obtaining the device token and saving it to the WebAPI database. Without further ado, check out the video below.

You have seen how Crosslight elegantly streamlines and handles push notification-related processes into streamlined entry points. To learn more about this topic, visit our developer center: Handling Push Notifications, which outlines the concepts and architecture of the Crosslight push notifications. If you have any questions, feel free to post it in our community forum, or drop us a mail.

Till next time,
Nicholas Lie

Understanding Design Patterns for Cross Platform Mobile Development

Since the inception of Crosslight last year, we have seen a number of approaches which attempt to address cross-platform development, particularly on the native mobile platforms. We have received frequently asked questions regarding the best practices for cross-platform mobile development, and what would be the ideal solution for building cross-platform apps that are highly flexible, maintainable and extensible. Since then, we have helped a lot of our customers understanding the design patterns which allow them to better architect their solutions. In this blog post, I will share some insights based on our past successful experiences.

There are various approaches in designing cross-platform solution depending on the development goals. At the simplest, you can come up with basic code sharing solution without applying design pattern, i.e., through file linking to each platform-specific project. However, that will be definitely less-than-ideal and is not recommended. In this blog post, I’ll be focusing on approaches with applied design pattern such as unified view abstraction pattern and ViewModel pattern.

Unified View Abstraction Pattern

This design pattern comes from the idea that the user-interface element (View) in each platform can be unified into a single intermediate API that reside in the shared project. The intermediate View API represents only the abstraction of the View, while the actual implementation is done at each platform behind the scene. The unification of the View seems interesting and promising at a glance, but it actually exposes more problems than the gained benefits.

One of the biggest problems is that view abstraction pattern makes sense only if the user interaction logic is defined within the View implementation itself. The nature of this pattern commonly disregards the separation of concern (SoC) between the user interaction logic and the view implementation — which is very similar to outdated patterns such as WinForms. This means that your application and user interaction logic will be “tightly coupled” to the view.

To help you understand it better, see the following code snippet which shows an example of a View implemented with this pattern.

public class ItemDetailPage : DetailPage
    public ItemDetailPage()
	public MainPage ()
 	    var panel = new Panel();
	    var label = new Label();
	    var button = Button() { Text = “Click me!” };

	    button.Clicked += (sender, e) => 
		    label.Text = “Button clicked”;

	    Page = panel;

As seen in the code above, the application and user interaction logic are tightly coupled to the view definition, mostly through event handlers. With such design, we can quickly identify some of the major limitations and design issues such as:

  • Limited UI Definitions — the impact of the design creates limitation in which only the lowest common denominations of the features across platforms are supported. It’s obvious that you cannot easily leverage the feature available only in certain platform.
  • Poor Maintainability — the code is hard to maintain and extend since logics are coupled to the view.
  • Not Testable — Functional layer cannot be unit tested since the implementation requires event initiated from the actual user interface elements.
  • Not Designable — View definition must be done with hand-coding to comply with the intermediate View API. There are typically no designer support for such view abstraction.
  • Not Scalable — As view is defined through code, all works are done by developers, including both coding and implementing the design. You cannot have a design team specialized in implementing the iOS screen, while another separate team implementing Android screen.
  • Low Adaptability — Changing views will often breaking functionality since the application logic is coupled to the view. As the results, modifying views can be tedious, complex, and commonly break the existing code, for instance, consider changing a list view into a collection view.

It is tempting to think that you can also create Model and ViewModel layers to use in conjunction with the unified view pattern. However, doing so brings us back to zero degree. Applying the view abstraction pattern will be pointless when you find yourself needing to create extra layers. So it’s an one-off approach — you can choose to apply the unified view pattern with the imposed limitations and design drawbacks, or choose the ViewModel pattern that emphasize on strong separation of concerns principle.

That said, the view abstraction pattern is actually one that we avoided at best since the first day we laid out our apps infrastructure and components design. Our architect team never consider this approach as a feasible solution due to the limitations and issues it brought. Unless you are implementing super simple apps that do not concern on code’s maintainability, testability and extensibility; you should avoid building cross-platform apps with this pattern.

ViewModel (MVVM) Pattern Comes to Rescue

An ideal cross-platform development based on our years of experience in building cross-platform apps and tools is to adapt the SOLID principle in our design pattern. The principles suggest the architectural pattern to be designed in ways that produce the following results:

  • Low coupling between layers, high cohesion within them.
  • Separation of concerns, user interaction logic and view should be implemented in separate layers, resulting in greater code maintainability, testability, extensibility and scalability.
  • User interface (View) layer should contain no business or interaction logic, enabling changes or modification to the views without affecting user interaction logic.
  • Business/application logic layer contains no user interface (view) and don’t refer to any of the view layers.

It is imperative to conform to these principles if your goal is to create great cross-platform apps that are highly scalable, maintainable, and can be easily scaled at times.

One of the popular design patterns today called Model-View-ViewModel (MVVM) allows you to achieve most of the principles described above. By nature, MVVM separates the user interaction logic out from the view layer, but still cohesive within them through the use of two-way data binding. This enables you to easily implement the user interaction logic in a separate layer called ViewModel — without concerning the views. Likewise, you can flexibly design the views without concerning or fearing to break the functional logic. This makes MVVM pattern one of the most appealing solutions for cross-platform development.

The following diagram illustrates a typical architecture implementation with MVVM design pattern.

MVVM Pattern

The only issue with this pattern is that you require a seriously solid MVVM framework and tools that are built with the MVVM pattern. This includes the frameworks for the ViewModels, dependency delegation, event aggregators, commands, as well as View components that support data binding and the ViewModel paradigm.

Well, the good news is that we’ve got you covered. Read on.

Cross Platform Mobile Development Done Right

By now, you should already have insights what’s the most ideal solution for building cross-platform apps. Applying a design pattern is required to build highly successful one, and choosing the right design pattern is crucial in determining the future of the apps.

When our team engineered Crosslight last year, we decided to build it on a solid design pattern — one that can serve as a foundation for mission critical apps. We chosen MVVM, not only because it’s real good, but because we have great success in building cross-platform tools with it. And more importantly, we’ve helped countless of enterprise customers building highly successful apps with this pattern. We’ve experienced it, and seen how development team get real results — clear responsibility, improved productivity and accelerated development speed.

Instead of unifying the heterogenous views across different platforms into a single API, Crosslight lets you build cross-platform mobile apps in the most natural way possible. You write the user interaction logic code entirely in ViewModel, while freely designing the view in each IDE of the platform. The view doesn’t contain any UI logic, so the designer team is free to unleash their creativity to build great user experiences that matter on each platform. It’s the best of three worlds — developers, designers, and users.

The following illustrations show how a Crosslight view is designed in iOS and Android respectively:
iOS Designer

Android Designer

As seen in the above screenshots above, you can easily design the view and layout to your liking – all within your favorite IDE. More importantly, you can access all the properties and modify them conveniently in a flick of finger. In contrast, accessing platform-specific properties is something you’re limited to do with unified view abstraction pattern.

The comprehensive data binding support in Crosslight means that you are free to use any existing controls available in your toolbox, arrange and size them the way you want, and set the behaviors and appearance settings the way you desire. As long as the ID matches the binding definition, everything will work beautifully at runtime. No new API to learn. No code required for implementing design. It just works.

With MVVM, Crosslight offers great benefits not available in other solutions such as:

  • Targets multiple platforms at once (efficiency)
  • High code reusability (maintainability)
  • Great native user experiences (usability)
  • High extensibility (customizability)
  • Loosely-coupled components (testability, scalability)

To learn more about Crosslight architecture and how it applies the MVVM design pattern, see Understanding Crosslight Architecture.

To see Crosslight in action with the supported MVVM capabilities, download the MVVM Samples here.

Fostering Innovative Design, Yet Sharing Single Codebase

While building cross-platform apps, you want to reuse as much code as possible, from the domain models, data access layer, to the application and user interface logic. Yep, we got that! Crosslight allows you to share 100% of these code base, thanks to the solid architecture. And even better, you don’t have to sacrifice the design and user experiences of each platform. Building apps with great user experiences is arguably the most important aspect particularly in native mobile platforms.

One of the features that our developers love the most is the ability to instantly change the user interface elements (view) without breaking any of the existing business and interaction logic. In short, you can have a single ViewModel and have it presented in various type of views. That’s just one of the many benefits of using MVVM pattern.

For example, consider you have a list of items displayed with a table view on the phone. Later, you realized that it doesn’t look so good in the tablet and wish to change it to a collection view. You can easily achieve such scenarios with Crosslight since it embraces the MVVM design pattern. Thinking to use unified view abstraction to achieve this simple goal? Good luck with that : )

The following illustration shows the list view on the iPhone and collection view on the iPad — all done in a single ViewModel.

Table View

Collection View

As seen in the above illustrations, creating great experiences that are unique for each platform and even for each device kind becomes so straightforward and manageable, thanks to the MVVM pattern which emphasizes clear separation of concerns. More than just static user interface elements, Crosslight ships dozens of UI components that are optimized with native user experiences – such as the one shown in iPad screenshot above.

You can download the Inventory samples here and try it for yourself. Seeing is believing.

Wrapping Up

So far, I have only scratched the surface of the benefits of MVVM design pattern, and how Crosslight is built to leverage it to the fullest. Notably, applying a solid design pattern is crucial in apps development, particularly if you are targeting cross-platform. Hopefully this post gives you inspirations and better insights in understanding design patterns for cross- platform development.

You can quickly get started and learn more from the Crosslight Developer Center. In the next blog, I will discuss more UI goodness included in Crosslight, which features to use for particular scenarios, and how you can use them together to build great apps experiences.