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.

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.

Advertisements

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”;
   		};

	    panel.Children.Add(label);
	    panel.Children.Add(button);
			
	    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.

Best,
Jimmy

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.

Best,
Jimmy

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.

Best,
Jimmy

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,
Jimmy

Crosslight Adds Stunning Drawer Navigation UI Components

It’s been really busy yet exciting time for all of us here at Intersoft. In just a few weeks time frame, we have recorded 9 new Crosslight video tutorials and publish all of them last week. At the same time, our engineering team is laser-focused in delivering new exciting updates across all product lineup. Today, we’re pleased to announce the first service pack of Premier Studio 2013 which is immediately available for download. Existing customers with active subscriptions can download the update from the account portal.

The service pack includes many important updates that you surely won’t miss. In particular, the new update includes full support for Visual Studio 2013. It also readies support for Microsoft’s latest browser, Internet Explorer 11. This is huge one – given that IE11 is completely redesigned for modern web standards and many proprietary API are no longer existed. The good news is we make it just in timely fashion. All 40+ ASP.NET components with over thousands of features have been enhanced and revived – each tested to work flawlessly in this latest browser. Go ahead and download the latest release to add IE11 support to your WebUI Studio-powered apps.

In addition to huge updates on ASP.NET, we also delivered significant improvements to our flagship cross-platform mobile toolset, Crosslight. There have been a lot of new features and addition to Crosslight since its update on iOS 7 support last month. Specifically, we’ve added a new, stunning drawer navigation for both iOS and Android platforms which lets you easily add Facebook or Path style navigation menu to your Crosslight apps. I’ll dedicate this blog post to discuss about this exciting component, share its key features and quickly brief what you can do with it.

Drawer Navigation Done Right

Many drawer navigation implementation I’ve seen were implemented in such a way where the view and content are tightly coupled, for instance, the drawer content should be a table controller in order for the drawer navigation component to work. Although the tight coupling between the view and interaction may sound common in this case, it creates a number of drawbacks and limitations to the way the component is used. Put simply, you cannot use any arbitrary content to the drawer which actually defeats the purpose of a content control.

When we designed our drawer navigation component from the ground up, we were strongly focused in the view architecture to make sure it is built right from the start. As the results, the Crosslight drawer navigation conforms to the industry-standards content control which allows developers to put any arbitrary content in the drawer while seamlessly automating all navigation processes to the view’s delegate. This is made possible thanks to the thoughtfully designed architecture that emphasize pure separation between the view and the user interaction. Crosslight was built right since the beginning, which enables future components (drawer navigation in this case as the proof) to leverage the same design pattern and get everything working seamlessly – without changes to the existing codebase.

To show you how easy and straightforward it is to change a standard table view navigation into a drawer navigation, let’s take the original Data Samples that shipped with Crosslight and transform it to a stunning drawer navigation.

First, create a new ViewModel based on the DrawerViewModelBase class – new in this release. Let’s name it DrawerViewModel.

    public class DrawerViewModel : DrawerViewModelBase
    {
        public DrawerViewModel()
        {
            this.LeftViewModel = new NavigationViewModel();
            this.CenterViewModel = new SimpleListViewModel();

            this.Open(DrawerSide.Left);
        }
    }

Then change the root view model of the app to the drawer view model that we just created. Generally, you set the root view model in the OnStart method of the application service

    public sealed class DataSamplesAppService : ApplicationServiceBase
    {         
        protected override void OnStart(StartParameter parameter) { base.OnStart(parameter); this.SetRootViewModel<DrawerViewWodel>();         } }

Finally, on the iOS project, simply add a new view controller class that derives from UIDrawerNavigationController generic class which is new in this release. Unless you’re doing extra customization to the drawer, you can leave the class empty without any single code within.

    [Register("DrawerNavigationController")]
    public class DrawerNavigationController : UIDrawerNavigationController<DrawerViewModel>
    {
    }

Similarly, add a new class to the Android project which derives from the DrawerActivity class. Remember to specify the drawer view model that we’ve just added earlier as the generic type parameter of the class.

    [Activity(Label = "Drawer Activity")]
    public class DrawerNavigationActivity : DrawerActivity<DrawerViewModel>
    {
    }

Run the project – and you’ll see the classic table navigation now magically turn into a stunning drawer navigation interface – complete with the touch gestures, close on navigate, and automatic navigation bar synchronization, all done right.

Crosslight Drawer Navigation

Incredibly easy, isn’t it? More importantly, you can reuse existing ViewModel as the content for either left or right drawer by specifying them in the DrawerViewModel. In case you would like to change back to the previous table navigation, you simply change the root ViewModel back to NavigationViewModel – and everything on the UI side reflects automatically.

How’s that possible – you might asked. The answer lies in the architecture design that carefully separates the user interaction out from the view. In this scenario, the master and detail view are actually two separate objects which is controlled by user interaction logic, in this case, the navigation logic. Since the navigation logic is implemented in a different layer, this allows us to tear these views apart and put them side by side without requiring code changes on the application’s end. The following illustration gives you a better visualization to understand how we built Crosslight to be a truly extensible, future-proof framework.

Drawer navigation done right

All The Great Features You’ve Ever Wanted

So that now you’ve got a handsome drawer navigation UI ready to be plugged into your next-gen mobile apps, let’s explore what you can do to make it looks and feels the way you desire. Note that the drawer navigation component is available for both iOS and Android platforms – both designed with the native UI guidelines.

Flexible one or two-sided drawer

Crosslight drawer navigation supports various drawer interface found in many popular apps today. You can choose one-sided drawer – where the drawer is either at the left or right side of the content; or two-sided drawer which are trending in recent apps such as Path, Worthy, and more.

The following illustration shows the left-side and right-side drawer navigation in iOS.

iOS Drawer Navigation

And the Android counterpart below.

Android Drawer Navigation

Keep in mind that although the drawer interface is designed according to the respective platform guidelines, the drawer view model and user interaction logic are entirely platform neutral which is defined in the shared application layer (portable project). As the results, when you modified the properties of drawer view model for example, the same app on both platforms will naturally reflect the changes.

Intuitive design based on platform’s native UI guidelines

In the iOS platform, the UIDrawerNavigationController class features dozens of drawer-related settings that you can easily customize through a single property set. One noteworthy feature is the status bar transition particularly useful in iOS 7 apps. We provided not only one status bar transition mode, but three. The first is the Facebook-style status bar transition where it smoothly fades from the original color to black. The second is the fading from any arbitrary custom color. The most interesting is perhaps the third one, translucent blur transition, where the status bar is smoothly faded with stunning translucent blur effect.

Crosslight drawer navigation features stunning status bar transition

Another noteworthy feature is the panoramic background image feature which lets you easily add beautiful photo to the drawer navigation control. Amaze your users with the combination of iOS7-style frosted-blur visual effect in the content view – creating sense of depth and great user experiences to your apps.

Background image with translucent blur drawer navigation

Other drawer settings on iOS that you might want to explore are drawer width, various shadow settings, fading animation, flick velocity, navigation bar tint color, status bar colors, status bar content styles, landscape background image, and much more.

The Android version has fewer customizable settings compared to iOS, although certain essential settings are must-have such as the background color, drawer width, and more.

5 Drawer Samples Included

Along with the service pack release, we’ve also updated Mobile Studio installer for both Windows and Mac with the latest Crosslight assemblies. The installers also include five new drawer samples that you can refer to learn more about the drawer navigation features. Or better, use it to quickly jump start your next mobile apps.

The included drawer samples are: Drawer Data Samples, Simple Drawer Style, Facebook Drawer Style, Translucent Drawer Style, and Two-sided Drawer Style.

Login to your account, download the new bits and test drive the new drawer UI components today.

What’s Next

In this blog post, I’ve covered the basics of our new drawer navigation UI components, how it’s designed and what features you can bring to your apps. In this milestone, you can now easily create great mobile apps for your business featuring great user experiences such as those popular apps in the store.

But, we still have a lot more to cover. In the upcoming 2013 R2 release, we’re planning to ship Crosslight vNext which will include a multitude of new cross-platform components and data services that will forever change the way you build data-intensive, enterprise-grade mobile apps. Stay tuned for our next announcement!

Best,
Jimmy

Crosslight Adds Full iOS 7 Support and New UI Features

It’s just a few weeks ago that we released Premier Studio 2013, our best release ever. Today, we’re pleased to announce our first update to Crosslight, our flagship cross-platform native mobile development tools. In case you missed the news, the 2013 release delivers a wide-range of exciting new tools across current lineups such as ASP.NET, Silverlight, and WPF – as well as the expansion to new mobile platforms including iOS, Android, Windows Phone 8 and Windows 8. Check out the complete details here.

In this update, Crosslight adds full support for iOS 7, Apple’s latest mobile operating system. Unlike HTML-based mobile tools, Crosslight adheres to the strict iOS 7 user experience and design guidelines which includes upgrade to the beautiful look and feel, tint color, translucency, ultra-smooth animation, and much more. In this blog post, I’d like to share the new enhancements and changes specifically for iOS 7 that we’ve made in this update.

Gorgeous Form Editor. Redesigned for iOS 7.

Apple’s latest iOS 7 is the most significant overhaul since its first inception which delivers dramatic changes to the user interface and user experience aspects in addition to many other new features. One of the biggest changes is the introduction of translucent and motion to create beautiful interface with sense of depth in favor to heavier, real-life illustration design. If you’re a UI/UX designer, like us, this means it’s time to upgrade your design skillset and rework your iOS mobile apps.

The iOS 7’s new interface design is so interesting in how it makes minimal design looks not only great – but done right and well balanced. With translucent, hair-line precise rendering, yet incredibly stunning visual effects, iOS 7 redefines the experiences of modern apps. The first in the industry, the entire user interface components in Crosslight are now upgraded to adhere to the iOS modern experience, including the form builder, navigation controls and nearly 20+ editing controls. See the following illustration for details.

Form Builder Redesigned for iOS 7

As seen in the above visual, Crosslight’s Form Builder now leverages the new design elements and guidelines introduced in iOS 7. This includes improvements to the composite layout which sports minimal design and fluid entry layout similar to the Contacts app.

It also introduces a gorgeous circular photo mask which you can easily enable with a property set, and revamped picker components presentation which show the picker inline to the form field in favor to the modal view. The inline picker presentation is proven to be more intuitive than the modal view as users can conveniently select an item and scroll without dismissing the selection. In addition, when users opened another picker, the previous displayed picker will be smoothly hidden with transition – delivering elegant user experiences similar to the built-in Calendar app.

Every Detail. Meticulously Considered.

Apple’s revamped interface design in iOS 7 is thoughtfully-designed in every little detail. As the leading component provider for Apple’s platforms, we leverage the new visual changes in every detail too. In only a week timeframe, we redesigned every UI component, pixel-by-pixel, to match the new design principles and guidelines introduced in iOS 7. For instances, the form builder design that produced for the smaller screen such as iPhone – should look great not only in the iPhone, but in the iPad as well, in either modal view or popover view, in either portrait or landscape orientation – and in any scenarios you could think of.

Every detail is considered in Crosslight for iOS 7

The new update also adds new color tint support to help you easily branding your app’s design. By easily setting the new TintColor property of the application delegate, the buttons, icons, and other tint-aware visual indicators will reflect the specified tint color. This applies to the new date time editor in the form builder as well.

Crosslight applies iOS 7 design principles

The sample code below shows how easy it is to take advantage the tint color in your iOS apps.

[Register("AppDelegate")]
public partial class AppDelegate : IntersoftCore.UIApplicationDelegate
{
	protected override UIViewController WrapRootViewController(UIViewController contentViewController)
	{
		if (contentViewController is UISplitViewController || contentViewController is UITabBarController)
			return contentViewController;

		return new UINavigationController(contentViewController);
	}

        public override UIColor TintColor
        {
            get
            {
                return UIColor.Red;
            }
        }
}

Furthermore, a new useful feature is added to allow automatic hiding of the keyboard as users drag the screen – similar to the behavior in the iOS 7’s revamped calendar app. You can easily enable this feature by setting the HideKeyboardOnScroll property.

Both iOS 6 and iOS 7. Supported in a Single Assembly.

Crosslight sets a rock-solid foundation for cross-platform native mobile development which enables you to write user interaction logic elegantly in the ViewModel. And now, with the iOS 7 officially supported, you can easily upgrade your Crosslight-powered iOS apps to take advantage of iOS 7 features in just a simple few steps such as assembly update and rebuild – without any changes to your application codebase. And that’s a priceless benefit.

iOS 6 & iOS 7 support

It’s important to note that the new iOS 7 support is added to Crosslight without affecting the features and user interface design that target iOS 6. In the case you want to selectively enable the iOS 7 features, you can do it in the view controller by conditionally customizing the form builder attributes at runtime. See the example code below.

public partial class ItemEditViewController : UIFormViewController<ItemEditorViewModel>
{
        protected override void InitializeView()
        {
            base.InitializeView();

            // customize form metadata
            var thumbnailImage = this.Form.GetProperty("ThumbnailImage");
            var imageAttribute = thumbnailImage.GetAttribute<ImageAttribute>();

            if (this.IsOS7())
            {
                imageAttribute.UseCircleMask = true;
            }
        }
}

To learn more about Crosslight, its key features and advantages, please visit the Crosslight home page.

In addition to iOS 7 support, the latest Crosslight update also includes enhancements and stability improvements to the Android and Windows platforms. The navigation transition for the Windows Phone 8 and Windows 8 have been much improved to resemble the default platform’s experiences. For more details, please refer to Crosslight Version History.

Along with the announcement, we’ve also updated the Mobile Studio installer for both Mac and Windows. You can sign-in to your account to download the updated installer, or request a trial here. Feel free to ask any questions or drop your feedback in the comments box below.

Best,
Jimmy