Author Archives: jimmyps

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.

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.


Crosslight 2 Update 1 is Available

Last week, we released the first update for Crosslight 2 which includes enhancements and stability improvements. One of the noteworthy improvements is better support for the iOS navigation drawer control, particularly when used in conjunction with other containers such as tab bar and collection view. The Android components are more stable than ever as we addressed issues specific to release builds and improved compliance to Xamarin Android’s assembly linking mechanism. You can read the complete release notes in our new Developer Center here.

In my previous post, I have mentioned about our recent transition to a better agile development methodology. There have been a few changes as the result. Foremost, we have increased transparency in how we resolve issues and deliver updates, particularly for the Crosslight product. This allows you to see which backlogs that we are currently working on, which have been addressed, and where to get the builds for testing.

Now, you can conveniently obtain nightly builds that we provide in our enterprise Git server, thanks to the new Intersoft Release Management that automatically pick up desired commits and produce new builds automatically on daily basis. Once the build is available, the relevant release notes page is automatically updated as well, showing closed and resolved backlogs. With most of these redundant operations being automated, our goal to deliver updates in the fastest and most efficient way have now come to a reality. The Update 1 build was an instant proof of our new agile system taking into affect.

For now, if you’ve installed Crosslight 2, the easiest way to obtain stable update is through Update Manager for Windows, see the screenshot below. For Mac users, you can download the updates manually from your account. Please bear with us as we’re making our way to bring Update Manager to the OS X platform.

For more information about the band quality and new product update cycle applied in Crosslight, see Updating Crosslight.


Intersoft Premier Studio 2014 is here!

Today, we’re very excited to deliver our most anticipated release yet. Shipping over 200 new features and a multitude of enhancements across all 7 platforms, the new 2014 release is our latest masterpiece dedicated to all our customers worldwide. Thank you for all your feedback and support! You can download the new 2014 product bits here.

In addition to new products, this release also marks several important launches for new kind of services that we’ve been working on these past months. In this blog post, I will share some key highlights of the new products and services.

Premier 2014 Highlights

As planned in our roadmap, the Premier 2014 is strongly focused on Crosslight 2, a major release of our development tools for cross-platform mobile development. Building on solid architecture on top of Microsoft and Xamarin technologies, Crosslight 2 features a vast array of powerful components and services that makes cross-platform enterprise apps development truly a breeze.

Some key highlights of the new features in Crosslight 2 are the comprehensive data access services which cover most data access strategies typically used in mobile apps. You can now easily display data from a remote source and update them back through REST service. Alternatively, you can also load data from a local database which is supported through our advanced SQLite API. Or even better, you can combine both strategies and use two-way synchronization service to sync offline and server changes seamlessly. Best of all, everything can be programmed in the shared ViewModel with just a few line of code. Strictly no tedious platform-specific code is required.

Crosslight 2 ships 200+ new features including frameworks, services and UI components across all platforms.

Crosslight 2 ships 200+ new features including frameworks, services and UI components across all platforms.

Of course, there are still a lot of great features that you should try yourself, from social network integration, unified push notifications, async image loader, pull-to-refresh, to advanced master-detail UI component and sophisticated drawer navigation. Keep in mind that all these features are fully supported on iOS, Android and Windows Phone. Click here to find out more.

ClientUI for Silverlight and WPF, now upgraded to v10, includes dozens of new features for the Reporting lineup. It now comes with over 150 beautiful, professionally-designed report samples. And you’re really going to love this: the report viewer for Crosslight is also shipped in this release. So yup, you can now build some great apps and let users view reports on-the-go. Learn more about the new ClientUI Reporting here.

ClientUI Reporting Samples

Beautiful, professional-designed report samples are now available for your references.

ASP.NET product lineup also receives great improvements. Your web apps should run much faster with the enhanced ASP.NET components, thanks to the much reduced Javascript files, now 40% smaller than the previous version. This improvement applies to all 40+ components, so you can enjoy significantly faster and more responsive web apps.

Introducing Intersoft Developer Center

At Intersoft, we strived to create and release only the best-quality products. But, great products without comprehensive documentation isn’t so great. That said, we’re so excited to announce the launch of our new developer-centric portal where you can now find comprehensive documentation of our products, all in a single, intuitive web interface.

Comprehensive developer-focused content in an intuitive web interface lets you conveniently learn and master Intersoft's products.

Comprehensive developer-focused content in an intuitive web interface lets you conveniently learn and master Intersoft’s products.

Unlike other help platforms, our Developer Center is designed with an advanced integrated workflow that allows truly agile product release cycle. Documentation API is automatically published in realtime with each class and member seamlessly linked to the conceptual topics, slashing two third of the time compared to our previous release workflow. You can also watch for certain pages you are interested in, and get updates when the pages are updated.

In this launch, the Crosslight product documentation in the new Developer Center is officially released. You will find in-depth conceptual topics, sample code, videos, learning resources, and much more. Visit Intersoft Developer Center now.

Introducing Intersoft Git Server

When downloading our new product setup, you will notice significantly smaller download size. The mobile studio is now only 65 MB, down from 110 MB. Due to our improved agile workflows which emphasize on shorter release cycle and efficient delivery , the setup no longer include offline samples.

The good news is that we now have a better place to host all our fast-evolving product samples. Introducing Intersoft’s own enterprise-grade Git server, you can easily find new code and samples right from your browser. Even better, if you’re familiar with Git, you can simply open the terminal or command prompt, then clone the sample projects in a single command.

Easily browse samples from Intersoft's online code repository

Easily browse samples from Intersoft’s online code repository

With the new Git server, this also marks an important breakthrough in the way we release our products. With our recent transition to an advanced GitFlow working model, you can easily find out what features we are working on, and what new samples we are currently preparing. You can easily switch branch and get yourself the latest development bits to give it a try.

More importantly, we are now starting to adopt open-source initiatives to contribute back to the our customers and community. Our first open-source project is the Crosslight enterprise app framework which provides design pattern, reusable libraries and best practices for building enterprise apps rapidly. In addition, code samples for technical support will now be published — all hosted in the new Git Server. Click here to visit Intersoft Git server, and here for the instructions to get started with Crosslight samples hosted on the Git server.

Update 5/12/2014: Please download the recently updated installer which includes a number of improvements made to the Crosslight Project Wizard such as automatic web server detection for business template and improved overall experience.

What’s Next

More exciting Crosslight reference samples will be made available soon. You can also expect series of blogs and tutorial videos discussing the new features available in Crosslight 2. Also, stay tuned for our upcoming webinar.

Last but not least, I hope you enjoyed our new products and the comprehensive, much improved services. Again, if you have not started your download, click here to get the new bits right now.


Welcoming 2014 With Exciting Product Roadmap

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

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

2013 Year In Review

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

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

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

2014 Focus — Enterprise Mobile Development Made Easy

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

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

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

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

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

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

Crosslight v1

Crosslight v2 introduces over 200 new features

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

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

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

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

All the best,