Tag Archives: iOS

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.

Cheers,
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.

Cheers,
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.

BatchUpdateIllustration

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

Video Tutorials: Understanding Screen Navigation in Crosslight – 2

We have posted another video tutorial to help you better understand how screen navigation works in Crosslight apps. In this video we covered the tabbed navigation and the most popular navigation pattern seen in mobile apps nowadays, the navigation drawer. This video will highlight the features of the two and also how you can easily integrate the navigation drawer into your Crosslight-enabled apps. See the rest of the video for more details.

You have seen how Crosslight greatly takes care of the intricate details of the navigation in overall mobile apps development: whether it is push, modal, list, tabbed, or the navigation drawer, so you can focus on what is really important for your app, all done right within the centralised and streamlined view model development pattern. So, grab a copy of Mobile Studio on our site to see for yourself! In the next video, I will explain how you can create your own custom service into Crosslight development.

To learn more about Crosslight navigation, check out Designing Consistent Navigation Interface in our online documentation. Should you have any further questions, feel free to raise a thread in our forum. Stay tuned for more Crosslight video tutorials. Don’t forget to subscribe to our YouTube channel as well!

Cheers,
Nicholas Lie

Video Tutorials: Understanding Screen Navigation in Crosslight – 1

To start off a wonderful new year in cross-platform mobile applications development using Crosslight, we have released another video tutorial to help you better understand how screen navigation in Crosslight works.  This is the first of two video parts that covers push navigation, modal navigation and list navigation in Crosslight.

As you may have aware, navigation is a very complex subject in mobile apps development – not to mention various kind of navigation across multiple platforms. The navigation in a single platform itself, for example Android, requires deep understanding on how Android works and its user experiences pattern. This could probably take weeks to months only to make “usable” simple navigation works – including passing data between different screens, capturing input, back mechanism, rotation handling, layout persistence, and more.

Thankfully, we’ve done all those heavy lifting works – so you don’t have to. The good news is we’ve managed to streamline various navigation scenarios across different platforms into a single, unified API – so you can build powerful navigable apps with a single set of codebase. With the screen navigation scenarios fully covered across iOS, Android, Windows Phone and Windows 8 – you should be able to focus on what is more important: business processes, user experience, and visual aspects of your app. With Crosslight, surely cross-platform mobile development had never been easier. Check out the new video tutorial below to learn how navigation works in Crosslight.

To learn more about Crosslight navigation, check out Designing Consistent Navigation Interface in our online documentation. Should you have any further questions, feel free to raise a thread in our forum. Stay tuned for more Crosslight video tutorials. Don’t forget to subscribe to our YouTube channel as well!

Cheers,
Nicholas Lie

Video Tutorials: Understanding MVVM Pattern and Building Simple Tip Calculator App with Crosslight

We have released two new video tutorials on Crosslight to help you better understand how to develop better mobile applications using Crosslight.

Understanding MVVM Pattern in Crosslight

This video tutorial outlines in general how the MVVM pattern works in Crosslight apps development. You will learn how Crosslight leverages the MVVM concept in order to produce cross-platform projects with a single shared application layer. By the end of this video, you will be able to grasp the MVVM pattern in general as well as getting the right mindset when building apps using Crosslight.

Building Simple Tip Calculator using Crosslight

This video tutorial explains how you can build a simple tip calculator app using Crosslight  within minutes that target all four major platforms at once (Android, iOS, Windows Phone, Windows 8). This video aims to highlight the data binding capabilities in Crosslight that leverages the MVVM pattern found in .NET applications to mobile apps development. You can find the source code for this video in our GitHub link: https://github.com/IntersoftSolutions/CrosslightSimpleTipCalculator

Should you have any further questions, feel free to contact us at technical@intersoftpt.com or raise a thread in our forums. Hopefully this video will give you a clearer concept how Crosslight works and how you can slash development time in more than half and increase your productivity. Stay tuned for more Crosslight video tutorials. Don’t forget to subscribe to our YouTube channel as well!

Cheers,
Nicholas Lie