Tag Archives: Cross Platform

Crosslight 2.3 Adds Cross Platform Localization Service and Major Stability Improvements

We are truly excited to announce that the ultimate cross-platform development toolset now sports even more features and stability updates. This new service pack update includes a new localizable business template, over 50+ item templates for Visual Studio, dynamic localization service, new template definitions for iOS, major stability updates for Android, support for application-wide single sign-on, and much more.

The Crosslight Project Wizard now includes an additional and noteworthy template, which is the localizable business template. The new localizable business template allows you to change the language of the application dynamically at runtime, thanks to the dynamic localization service. If automatic language is set, when the device’s language is set to the one supported by the application, then the language changes automatically. However, you can also force an application to use a specific language of your choice, regardless of the language setting used by the device. The following screenshots show the improved Crosslight Project Wizard and the running app respectively.

New Crosslight Project Wizard

banner-developer-crosslight2-update-eng-jap-narrow copy

We have also shipped more than 50 templates for Visual Studio, ranging for variety of projects, this includes, Android, iOS, Windows Phone, and shared Core project. The templates itself is clear and concise, with instructions inside each template on how to use it. Your development process will be significantly accelerated since you can now quickly add common Crosslight items to your project. Say goodbye to the tedious, error-prone copy and paste.

2 copy

In addition, Crosslight for Android platform has received major stability improvements, including the support of Xamarin.Android.Support.v4 library, revamped overall lifecycle, elegant rotation handling to ensure that view state is restored without performance degradation, improved tab caching, and reliability of the Android services, such as camera service, location service, social services, and more.

So far, we’ve only touched the surface of what’s revamped in this SP1 release. For a complete list of the updates, make sure you check out the Crosslight 2.3 release notes in our Developer Center page.

All the installers on our site have also been updated to reflect the new bits. Of course, this update is free of charge for customers with existing subscription for Mobile Studio or Premier Studio. Click here to sign in and access your downloads. If you haven’t tried Crosslight today, request a trial now and see how Crosslight transform the way you build cross-platform apps entirely.

Last but not last, we hope you enjoy Crosslight as much as we love building it! Stay tuned for our upcoming video tutorials and hands-on guide to apply these exciting features in your apps!

Cheers,
Nicholas Lie

Understanding Design Patterns for Cross Platform Mobile Development

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

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

Unified View Abstraction Pattern

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

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

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

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

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

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

Building Inventory Tracker Apps with Crosslight

The Inventory Tracker sample shipped with Intersoft Mobile Studio is a great reference sample that simulates the real-world condition of how a basic, yet still providing a great user experience app should be. The Inventory Tracker is designed for workers that in a warehouse who want to track the items they have in store. The sample provides intuitive CRUD operation that extends beyond common applications with CRUD functionality. Some details are meticulously considered and thoughtfully designed to provide the user with a great form input experience, when usually form inputs have an impression of being a boring chore.

This blog post aims to elaborate the details that made this reference sample app different from other app with form inputs in the market, while exposing the features of form builder built into Crosslight framework. By just defining one form metadata, you can rest assured that the forms you create in one platform will easily work in another and provide a great and consistent user experience.

Supports Multiple Platforms

Supports Multiple Platforms

The Inventory Tracker sample runs on a shared application logic, and runs great on iOS, Android, WIndows Phone and WinRT, while conforming to each platform UI guidelines. The sample does not enforce the same design throughout different platforms, this is because different platforms have different design guidelines and if you try to imitate one platform’s experience with another, this would greatly crimp the user experience.

Automatic Rotation Handling

Automatic Rotation Handling

The Inventory Tracker responds fluidly to orientation changes, while keeping the bindings intact. Take Android for example, by standard measures, you would have to eventually store the values entered by the user back and forth yourself every time the Activity is recreated after rotation. Handling this scenario will definitely take a lot of your precious development time. Crosslight has taken care of this from the back-end, so you can rest assure that your data integrity is maintained even after countless orientation changes and the bindings will remain intact.

Master-Detail Navigation

Master-Detail Navigation

The user experience when using a tablet must differ, as you have more screen estate to utilize. In a tablet, you would probably want to split the screen into two parts, a smaller left portion for the items list and the rest of the screen for the detail view. The Inventory Tracker executes this scenario beautifully by adapting itself to tablet devices, using a single codebase. Try to deploy the sample on a tablet device or emulator and see for yourself. More importantly, Crosslight ships with this template by default, so you can easily create such experience with greater ease.

Powerful Data Bindings

Powerful Data Bindings

By default, when you are either in add new item screen or editing an item screen, the bindings are set two-way by default. This allows hassle-free editing of items, and the changes made truly reflects the underlying model of the item. The add item command and the save item command are also bound to the button using the robust data binding feature introduced by the form builder of the Crosslight framework.

Versatile Visibility Bindings

When adding new items using the form metadata, you can hide a specific section using the visibility binding attribute. The item form metadata has a specific SoldSection that can be hidden during addition of new item, since it would be counter-intuitive if you add a new item then immediately mark that item as sold.

In the editing item screen, when the IsSold switch is turned on, the Sold Date property immediately responds by making the sold date editor to visible, on the other hand, when the IsSold switch is turned off, the sold date editor is hidden from the view. This is possible because of the solid MVVM binding framework introduced in Crosslight.

public class SoldSection
{
	[Editor(EditorType.Switch)]
	[Display(Caption = "Is Sold")]
	public static bool IsSold;

	[Display(Caption = "Sold Date")]
	[Editor(EditorType.Date)]
	[VisibilityBinding(Path = "IsSold")]
	[Binding(StringFormat = "{0:d}")]
	public static DateTime SoldDate;
}

Batch Operations

Batch Operations

You can execute batch operations on multiple items at once, for example, deleting multiple items at once, or marking them as sold. When marked as sold, the UI immediately responds by giving the label a strikethrough effect to provide a solid user experience. Batch operations allows for greater time saving when executing redundant operations for a batch of items. Apps developed using Crosslight will save a lot of time, not only for you, but also for the users of your app.

Data Presentation Variations

Data Presentations Variations

We have shipped two different variations for the iPad version. The first variation of Inventory Tracker sample presents the list of items in a master-detail fashion, whereas the other one showcases the items in a grid-view like structure. These two samples follows the Apple HIG (Human Interface Guidelines) for iPad, therefore giving users a better experience when using the app. Editing screen is also shown differently, one in a detail view, whereas the other one in a popover controller.

Efficient Memory Management

The list view introduced in Inventory Tracker sample highlights one of the most important feature that a listing app should have: efficient memory management. This feature is efficiently achieved through smart cell reuse, all done in background. The table cell gets reused when it is out of the view, so you don’t have to worry of having a large amount of footprint when your item list gets too large. All you have to do is provide the items source in the view model and let Crosslight do the rest. Did I forgot to mention that you can freely customize the item template yourself?

Built-in Search

Built-in Search

If you have hundreds and thousands of items in the list, how can you filter items accordingly? Well, the Inventory Tracker for Android and iOS platforms are shipped with a powerful built-in search feature that allows you to filter items in a fast, efficient manner. On iOS, items are filtered along as you type, so you can quickly choose an item when it comes to view. On Android, the items will be shown at the exact same time after you have hit the search button on your keyboard.

Powerful Image Picker Editor

Powerful Image Picker Editor

Inventory Tracker ships with a powerful image picker editor that allows you to take pictures from the device camera, with added support for cropping and scaling, native to the platform level. More importantly, this is all done just by defining the form metadata using the form builder. You can also add your own custom logic after the you have retrieved the image from the camera by defining commands from the view model.

The Form Metadata definition:

[ImagePicker(ImageResultMode = ImageResultMode.Both, ActivateCommand = "ActivateImagePickerCommand", PickerResultCommand = "FinishImagePickerCommand")] public static byte[] ThumbnailImage;

You can intercept the commands in the view model:

  private void ExecuteActivateImagePicker(object parameter)
        {
            ImagePickerActivateParameter activateParameter = parameter as ImagePickerActivateParameter;
            if (activateParameter != null)
            {
                activateParameter.CustomCommands = new Dictionary();
                activateParameter.CustomCommands.Add("View Larger", this.ViewLargeImageCommand);
            }
        }

        private void ExecuteFinishImagePickerCommand(object parameter)
        {
            ImagePickerResultParameter resultParameter = parameter as ImagePickerResultParameter;

            if (resultParameter != null && resultParameter.Result != null)
                this.Item.LargeImage = resultParameter.Result.ImageData;
        }

Intelligent Layout Awareness

Intelligent Layout Awareness

Apps built on the WinRT platform introduces many visual states that many apps might forget to cover: landscape, filled, snapped and portrait. In the WinRT version of the Inventory Tracker sample, we have covered this scenario in depth, while introducing the wrapped LayoutAwarePage that smartly responds to the various screen states introduced in WinRT platform.

<VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemGridView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="96,137,10,56"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemGridView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

Tactical Use of Presenters with Data Validation Support

Tactical Use of Presenters with Data Validation Support

The Inventory Tracker sample offers data validation support with targeted use of presenters. For example, when you try to add an item and you have not entered a product name, a message presenter will be shown, notifying the error. Also, a toast presenter will be shown after you have finished editing. This subtle, yet important toast message informs the user that changes have been made and saved successfully. Giving users the right feedback at the right time is one of the key fundamentals of creating a rich experience for the users of your app. More importantly, you can be invoke the toast presenter from the view model, making sure that all your apps behave in the same, consistent manner.

this.ToastPresenter.Show("Changes saved.");

Wrap-Up

Now you have just seen the features exposed in the inventory tracker sample. This is great news for you because you can easily obtain the same user experience in your app by utilizing the powerful form builder feature in Crosslight. The form builder feature allows you to build forms in minutes, just by specifying partial class for the model which acts as the metadata and giving the corresponding attributes. You can try all of this exciting features by grabbing a copy of Intersoft Mobile Studio from this link: http://www.intersoftpt.com/RequestTrial. Learn more about Crosslight at: http://www.intersoftpt.com/Crosslight/.

Cheers,

Nicholas Lie


					

Intersoft Mobile Studio – Cross-Platform Development Reimagined

We are pleased to announce the release of our next-gen toolset for cross-platform mobile development: Intersoft Mobile Studio. Shipped with powerful features with small footprint, Intersoft Mobile Studio marks the next industry-standard for cross-platform development. Built with the proven MVVM design pattern on its core, Mobile Studio will definitely change the way you develop cross-platform mobile apps. Designed with the future in mind, meaning that you can easily support new platforms easily as Crosslight is easily extensible to support even hundreds of platforms; you can rest assured knowing that the apps built on top of Crosslight will be future-proof. Remember, you are not developing cross-platform apps that works on in a ported environment; you will create cross-platform native apps that will give your audience a rich and pleasant experience when using your apps.

MobileBanner2013R1

Crosslight ships with a wealth of resources to help you quickly jump start with cross-platform mobile development. In this blog post, I will provide a quick overview of the available resources and where to start your first mobile development journey. If you haven’t installed Crosslight yet, head to Request Trial page and download the free trial.

Four Powerful Templates

Once you have installed Intersoft Mobile Studio, open up VS 2012 and create a new project under Visual C# Templates / Intersoft Solutions / Mobile.

Creating New Project in VS 2012

Click OK, and you will be presented with the Crosslight Project Wizard.

Intersoft Crosslight Project Wizard

Designed with robustness and flexibility, Intersoft Mobile Studio provides you with four powerful templates that is immediately available for your perusal.

Blank Template

The Blank template is great to help you jump-start development with Crosslight with minimal configuration. It is designed as such for you to quickly grasp the concept of development and design pattern when developing apps using Crosslight.

Blank Template

Navigation Template

Looking for designing a great-looking app with navigation features? The Navigation template is here to help you. The Navigation template provides you with navigation templates that can be adjusted using either split navigation or list navigation, depending on your choice.

navigation

Master-Detail Template

This is a truly time-saving template that allows you create master-detail apps easily and quickly. The template deals with the split master-detail view for tablets and is equipped with grouping feature, so you don’t have to scratch your head for a long time on how to build a pleasant master-detail app.

Master-Detail Template

Tabbed Template

Crosslight supports multi-screen apps in the form of “tabs”, also known as pivot and panorama pages on Windows Phone. Just with a click of a button, you are given apps with tabbed templates that works the consistently that conforms to each platform’s UI guidelines. Did I also mention it is MVVM-enabled as well?

Tabbed Template

Crosslight Solution Structure

project-structure

After you have finished choosing one of the templates, you will get the following solution structure. Just set as one of the projects as your startup project, and watch the magic happens.

Comprehensive Documentation

If you ever get stuck when developing apps with Crosslight, Intersoft Mobile Studio ships with 300 pages covering the best practices, walkthroughs and concepts for building highly scalable enterprise mobile apps. The Crosslight documentation covers a wide range of in-depth topics such as fundamentals of Crosslight, understanding MVVM, defining consistent navigation interface, utilizing the built-in presenters for basic user interactions, working with data, building rich data-entry form, and much more. It also covers platform specific topics such as how to define different layouts for iPhone and iPad, using Fragments in Android, understanding navigation patterns in Windows Phone, handling layout changes in WinRT, and much more.

Robust Samples

To help you get started, Intersoft Mobile Studio ships with four projects that comprises of hundreds of samples across all supported platforms to help you better understand how to develop apps using Crosslight framework.

MVVM Samples

MVVM Samples

The MVVM Samples is a great place to start as it covers many MVVM features offered in Crosslight, such as demonstrating the basics of MVVM and binding capabilities, for example, binding mode, update source trigger mode, and converter. It also includes several reference samples – such as loan calculator and currency converter – to help you understand how the binding features work together.

Data Samples

Data Samples

This project includes a collection of samples showcasing the data-aware features such as presenting as a simple list, grouped list and searchable list. It also shows how to deal with data management in common business scenarios such as data editing, update and delete, as well as batch updating. In addition, it also demonstrates a number of built-in list styles available in each platform as well as showing the customization of list item template.

Services Samples

Services Samples

This project includes a collection of samples showcasing various prebuilt services available in Crosslight such as navigation services, presenter services, platform services and mobile services. All services are programmable in the shared application layer which allows you to streamline the user interaction logic as well as enable maximum code sharing. Mobile services demonstrate a vast array of services commonly available to mobile platform such as telephony services, location services, camera services, social services, map services and much more.

Inventory Tracker

Inventory Tracker

Thoughtfully designed and well-defined user interfaces, the Inventory Tracker is a a reference sample that works consistently across platforms and conforms to the de facto UI specifications for each platform. The Inventory Tracker provides a lot of meticulous features that offers a pleasant user experience. Features of the Inventory Tracker will covered in depth on the upcoming post.

What’s Next?

This is just the beginning. With iOS 7 just around the corner, we will be going to fully support iOS 7 within a week after it has been released to the public. In the upcoming milestone, we will enhance Crosslight with powerful and robust data access framework with sync support, saving you the hassle of writing hundreds lines of codes just for data syncing purposes. Also, we will shift our sprint tasks to a more fast-paced, dynamic progression; giving you regular updates that will tremendously enhance your development experience with Crosslight.

Cheers,
Nicholas Lie

Cross Platform Mobile Development with Crosslight – Part 1

As the Crosslight development is maturing and we’re entering the last few sprints of our R1 milestone, I’m pleased to share more details about Crosslight and also providing insights and answers to many questions that have landed to my inbox since the introduction. In my previous blog post, I’ve shared about our 2013 roadmap and the new exciting direction that we’re heading to – particularly in the mobile development space.

We’re very excited with several new product lineups that we’ve got in the labs so far, and I’m sure you can feel the same excitement as well. We’re going to have new stuff in all the three existing platforms (ASP.NET, Silverlight and WPF), plus a range of new mobile platforms. Sneak the previews of the upcoming ASP.NET lineups here and here.

In this first part of my blog series on Crosslight, I’ll be strongly focused on the high level overview of the product – mainly discussing the architectural overview, what it does, and how it works. Alright, enough appetizer, let’s move forward to the main course.

Native Mobile Development Goes Cross Platform

Cross platform mobile development has inevitably becomes one of the hottest subject in the programming world today. Our recent survey supports that fact very well with over 83% respondents stating they’re planning to build mobile apps targeting two or more mobile platforms in the near future. The main question here is, what tools are available today and whether the tools are ready to accomodate the fast-pacing needs – and more importantly, which is the right tool to get the job done?

Before we started the Crosslight project, there were already a number of tools for cross platform mobile development in the market such as PhoneGaps and Titanium. These tools definitely did a great job for HTML and Javascript savvy. But how about developers with particularly Silverlight/WPF skillset? While we all felt left out, it’s going to change very soon. Read on.

A Deeper Look at Crosslight

The main objective of Crosslight is to bring MVVM design pattern – a pattern that most Silverlight & WPF developers are familiar with – to the iOS and Android world. Integrated to Xamarin technologies, Crosslight opens up a whole new level of possibilities in the way you build mobile apps. Instead of writing code for each platform in their own language with completely different set of API, Crosslight lets you write application logic once with a common API which can be shared to multiple projects targeting different platforms.

This is made possible thanks to the Crosslight Foundation that provides powerful data binding implementation, high-performance messaging and commanding framework, and thoughtfully engineered application services. On the other end, Crosslight will be available on each different platform to provide the service implementation specific to the platform. Called Crosslight UI Platform, it also includes numerous pre-built user interface components and controllers that are essential to create great mobile business apps with consistent user experiences.

See the following illustration to get deeper insights on Crosslight architecture. It also shows how different technologies are stacked together in a high level perspective.

Crosslight Architecture

As seen in the above architecture diagram, Crosslight builds on the mobile development platforms provided by Xamarin and Microsoft to introduce a host of innovative view components that span across all of the 4 major mobile platforms including iOS, Android, Windows Phone, and Windows App Store.

Future new platforms can be easily supported without major changes to existing code – thanks to the Crosslight Foundation that is built upon portable technology. This obviously gives many benefits as you can avoid getting locked to certain technologies that apply only to a specific platform.

Code Reusability Accelerated to A New Height

With each mobile platform designed by different vendor – iOS designed by Apple, Android designed by Google, and Windows Phone designed by Microsoft – each platform exposes completely different API and design pattern. This makes application logic sharing one of the biggest challenges in cross-platform mobile development. To get a grasp on the API and design pattern differences of each platform, take a look at the simple Hello World implementation below.

Hello World in Xamarin.iOS:

public class MyViewController : UIViewController
{
    public override void ViewDidLoad()
    {
        base.ViewDidLoad();

        ...

        button.SetTitle("Click me", UIControlState.Normal);

        button.TouchUpInside += (object sender, EventArgs e) =>
            {
                UIAlertView alertView = new UIAlertView();
                alertView.Title = "My MobileApp";
                alertView.Message = "Hello world from my mobile app";
                alertView.AddButton("OK");
                alertView.Show();
            };
    }
}

Hello World in Xamarin.Android:

[Activity(Label = "AndroidApplication1", MainLauncher = true, Icon = "@drawable/icon")]
public class Activity1 : Activity
{
    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);

        ...

        Button button = FindViewById<button>(Resource.Id.MyButton);

        button.Click += delegate
            {
                AlertDialog.Builder dlgAlert = new AlertDialog.Builder(this);

                dlgAlert.SetMessage("Hello world from mobile app");
                dlgAlert.SetTitle("My MobileApp");
                dlgAlert.SetPositiveButton("OK", (o, e) => { });
                dlgAlert.SetCancelable(true);
                dlgAlert.Create().Show();
            };
    }
}

Hello World in Windows Phone:

public partial class MainPage : PhoneApplicationPage
{
    ...

    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        this.MyButton.Click += (object s, RoutedEventArgs e2) =>
            {
                MessageBox.Show("Hello world from mobile app");
            };
    }
}

As seen in the above examples, none of the application logic code are shareable which is natural due to the API differences of each platform.

In the examples above, notice that the iOS and Android code was written in C# instead of Obj-C or Java – thanks to the Xamarin platforms that solve the language barriers in cross-platform mobile development. Xamarin provides developers the ability to share (on average) 75% of their C# code between iOS, Android, and Windows, and can reach as high as 90%. Crosslight builds on this by adding a cross-platform MVVM framework, allowing developers to consistently reach nearly 96% code reuse.

The following code samples show how to use Crosslight to build your iOS, Android, and Windows UI, reusing the same ViewModel across each platform:

Crosslight iOS App:

[ImportBinding(typeof(HelloWorldBindingProvider))]
public class MyViewController : UIViewController<HelloWorldViewModel>
{
}

Crosslight Android App:

[Activity(Label = "AndroidApplication1", MainLauncher = true, Icon = "@drawable/icon")]
[ImportBinding(typeof(HelloWorldBindingProvider))]
public class Activity1 : Activity<HelloWorldViewModel>
{
}

Crosslight Windows Phone App:

[ImportBinding(typeof(HelloWorldBindingProvider))]
[ViewModelType(typeof(HelloWorldViewModel))]
public partial class MainPage : PhoneApplicationPage
{
}

It’s awesomely clean, agree? That’s made possible as the UI logic is moved from the platform-specific views to the core MVVM project. Now the UI logic code looks like the following.

public class HelloWorldViewModel : ViewModelBase
{
    public HelloWorldViewModel()
    {
        this.HelloCommand = new DelegateCommand(this.ExecuteHelloCommand);
    }

    public DelegateCommand HelloCommand { get; set; }

    private void ExecuteHelloCommand(object parameter)
    {
        this.MessagePresenter.Show("Hello world from Crosslight mobile app", "My App");
    }
}

If you’ve built Silverlight or WPF apps with Intersoft ClientUI – which I highly presumed you have – then you should recognize the above code at the first look. It leverages the design pattern similar to ClientUI such as delegate command and view presenter. Later on, you’ll find more APIs that you’re already accustomed to – which allow you to get started quickly with very minimal learning curves.

As always, our goal is to simplify developer’s life and make the jobs done with the right tool. Crosslight was designed to do just that. With app UI logic now sharable, it boosted the overall code reusability to nearly 96%, leaving the small percentage on the app-specific layers such as views and controllers.

Code Reusability

The above illustration visualizes the typical code reusability in cross-platform mobile development and shows how Crosslight supercharge it to a whole new, never-before-possible level.

True Native Mobile Apps

In the past few weeks, I received numerous emails asking if Crosslight uses HTML as its main presentation layer but wrapped as native app. That’s what the other solutions such as PhoneGaps are doing. In contrast, Crosslight is a cross-platform solution that completely uses native platform API. This doesn’t only give you the best user interface that conforms to the platform guidelines, it also delivers great performance and extremely smooth UX that cannot be simulated with HTML. See the illustration below to get a proper understanding on the platform-specific user experiences enabled in Crosslight.

Crosslight embraces the best of both worlds: maximum code reusability and amazing user experiences.

Obviously, it’ll be always the best option to build apps in native user experiences as you can leverage many of the pre-built platform API, including the high-performance UI virtualization, multi-touch gestures, navigation, animations and much more. The only question is whether it’s possible to do so with the skills you already accustomed to – well, now it is.

Wrapping Up

At this point, I hope you’ve got it clear that Crosslight targets pure native platforms. No HTML or Javascript is required. You use C# to write code and layer your apps in 3-tier architecture as you may have done in Silverlight or WPF applications. Because Xamarin.iOS and Xamarin.Android apps are 100% native, the final output are real native binaries that conform to the platform byte code and processor instructions. They are not virtualized, cross-compiled, or interpreted – in fact they feature the same level of performance and resources management as in the apps produced by the original platform’s compiler.

In this blog post, I’ve only scratched the surface of the Crosslight architecture. As an official Xamarin Premier Partner, we are working closely with Xamarin in our vision to create the most comprehensive sets of cross-platform frameworks and reusable view components that help developers build cross-platform mobile apps in dramatically less time with less effort. As the results, you will be able to rapidly create amazing mobile business apps with native user experiences while maximizing code sharing.

In the next blog series, I will share more details such as more code-level tutorials and basic API usage, UI & UX design best practices and how they conform to each platform guidelines, as well as many great features like universal data management, streamlined navigation and various mobile services. Anyway, I hope this post gives you a comprehensive overview of Crosslight and how we leveraged different pieces of latest technologies to deliver the most elegant solution for cross-platform native mobile development.

Sign Up for Beta

Last but not least, we’re opening a private beta for selected candidates who are willing to contribute significant feedback and help us testing the product features in details. If you believe that you’re the right candidate we’re looking for, please click here to sign up for a beta. Thanks for reading and stay tuned for the next posts!

All the best,
Jimmy