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

Understanding MVVM Pattern in Crosslight

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

Building Simple Tip Calculator using Crosslight

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

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

Cheers,
Nicholas Lie

The best cross-platform mobile toolset refined to its core.

Two weeks ago, we released our SP1 milestone for Mobile Studio, bringing many new yet useful features such as the versatile navigation drawer for iOS and Android platforms. Today we have just released a more refined version of the the world’s most robust toolset for cross-platform development, with features that may not be plainly seen with the naked eye. In this post, we will cover many meticulous details such as elegant rotation handling for use with the Android navigation drawer and nested fragment navigation, updated navigation drawer samples, and also a delicate handling of the IsTransitioning state with the new left-edge swipe gesture and controller transition support introduced in iOS 7.

Rotation, Elegantly Handled.

Developers coming from the Android world will be familiar with the pain and frustration that we all share when designing apps for the Android platform, especially when fragments are used. When the Android device is rotated, the FragmentActivity as well as the Fragments are destroyed, which will then need to be recreated. Handled incorrectly, will result to incorrect app behavior that may confuse user and breaks overall user experience, not forgetting to mention how apps will crash more often.

Crosslight for Android has been updated to address this issue, and developers will appreciate how all the intricate details have been taken care of. Now you will only need to focus on the ViewModel as well as the look and feel of their app, instead of having to handle the delicate rotation lifecycle. The ViewModels are now automatically persisted across rotation lifecycle, making sure that the screen view state and user’s editing session are correctly persisted when the FragmentActivity is recreated. Tested and proven on all form factors and orientation, this great time-saving feature will definitely shave weeks off your time table.

Nested Fragment Navigation in Navigation Drawer.

Previously, we have introduced the stunning and elegantly designed navigation drawer for Crosslight. Now, it has been updated to support nested fragment navigation as well as keeping the navigation stack intact when the user has navigated and the device is rotated, allowing greater user experience and flexibility of your app when using the navigation drawer.

We have also introduced a new RightButtonDrawerId property for DrawerSettings in Android, allowing you to toggle the right navigation drawer using the action bar, if you wish to. The feature can be easily enabled by supplying the RightButtonDrawerId with the ID of menu item you wish to use as the toggle in the ActionBar. We also have updated our Facebook-style and Worthy-style navigation drawer samples to reflect the changes.

Left-edge Swipe Gesture and Controller Transition Support for iOS 7.

Since the introduction of iOS 7, Apple has introduced a new “hidden” gesture that most users might not be aware, which is the left-edge swipe gesture.  iOS 7 has introduced a new state where the view is transitioning, which is now handled correctly. Changes to the view model will now take place when the view has completely transitioned, which means, changes will not be processed if the user swipes halfway through and returns to the editing page. The view is now also smoothly transitioned with fading animation during transition. This subtle yet important feature reflects our commitment to pay attention the smallest details that can give impact to user experience.

This update marks as the last and most stable version of Crosslight until the next major version is available. Sign in to your account to download the new December 2013 update today.

In the next major release, Crosslight will ship the world’s first cross-platform data access framework with EntityContainer with tracking changes, async CRUD operation, async batch update, and much more . Supporting latest Microsoft technologies such as WebApi 2 and EntityFramework 6, Crosslight data service will provide advanced TT code generation as well as streamlined serialization and deserialization which were recently released, as well as support for transmission using OData. Stay tuned for more!

Got questions? Feel free to leave a comment or start a discussion at our forums.

Cheers,
Nicholas Lie

We are very excited to announce the release of our latest and greatest toolset for .NET development, which have reached SP1 milestone. Our ASP.NET controls are now updated with full Internet Explorer 11 and Visual Studio 2013 support, running on both designer and runtime environment. Project templates for Crosslight are now updated with latest PCL support, as well as Crosslight-enabled navigation drawer controls are now fully supported in both Android and iOS platforms. The Mobile Studio Installer for Mac is also updated to really get you jump quickly on the mobile development train. Read on.

Full Internet Explorer 11 and Visual Studio 2013 Support

Users running Microsoft’s latest internet browser can now rest assured knowing that our controls consisted in WebUI Studio for ASP.NET lineups, such as WebCombo, WebDesktop, WebEssentials, WebGrid, WebInput, WebScheduler, WebTextEditor and WebTreeView are now updated with full Internet Explorer 11 support, as well as support for designer and runtime support in Visual Studio 2013.

Full PCL Support for Visual Studio 2013 and Xamarin Studio on Mac

Since Xamarin announced full PCL support, we have also updated our time-saving templates to fully comply with the latest PCL standard, ensuring smooth operations on all supported IDEs across Windows and Mac: Visual Studio 2012, Visual Studio 2013, Xamarin Studio for Windows and Xamarin Studio for Mac. You can rest assured knowing that your projects will flawlessly support PCL on .NET Framework 4.0 upwards.

Crosslight running on Visual Studio 2012.

Crosslight running on Visual Studio 2013.

Crosslight running on Xamarin Studio for Windows.

Crosslight running on Xamarin Studio for Mac.

New Navigation Drawer Samples

As navigation drawer becomes a standard design pattern for mobile apps, we realize it is necessary to create Crosslight-enabled navigation drawers that runs on two of the world’s most most popular platform: iOS and Android. Designed with intuitive navigation interface that conforms to each platform’s UI guidelines, the navigation drawer is guaranteed to give you greater control over your apps that allows more complex navigation features. Check out our previous post that outlines the Crosslight-enabled navigation drawer experience in detail.

Jump-start Your Development on Mac

Our Mobile Studio installer for Mac now supports streamlined Mobile Studio installation as well as automatic installation of Xamarin platforms. During the installation, Mobile Studio installer now intelligently detects whether Xamarin platforms are installed and completely removes the technical difficulties for you to jump-start native cross-platform mobile development using Crosslight.

If you’re still unsure, we have provided a video that outlines the process clearly and you’ll be wondering why do we even make the video in the first place.

Wrapping Up

As a leading .NET component provider in the industry, we always strive to keep up with the latest Microsoft technologies, providing you with versatile components to speed up your development time so that you can ship your apps faster to market. You can get these exciting features by downloading our latest installer from the account portal. Existing customers will automatically entitled for auto upgrade, whilst if you are interested, contact us at sales@intersoftpt.com or visit our site for complete licensing schemes.

See you on the next post,

Nicholas Lie

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.

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.

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.

And the Android counterpart below.

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.

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.

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

After you have successfully installed Mobile Studio by following the previous blog post, it’s highly recommended that you understand how Crosslight works as a framework, and how it can add significant values to your current application lifecycle management. The blog post will cover highlighted features of Crosslight in a high-level overview that reflects Crosslight values to the mobile world, especially when you’re coming from .NET. The video highlights the following:

• Cross Platform Mobile Development Challenges
• Crosslight Overview
• Crosslight Architecture Overview
• Crosslight Technology Overview
• Hello World in Crosslight
• MVVM Pattern Overview in Crosslight
• Crosslight Solution Overview
• Crosslight Enterprise Benefits
• Crosslight Form Builder
• Crosslight Mobile Services
• Crosslight extensible architecture
• Crosslight Project Wizard

This blog post has outlined how you can leverage Crosslight to your existing ALM, and how you can benefit from it. We truly believe that Crosslight will greatly improve your existing workforce. Cut development times, reduce costs, improve productivity and faster time-to-market.

You can find out more about Crosslight and Mobile Studio by visiting our site. Feel free to try out Crosslight for 30 days from the Request Trial page to see Crosslight for yourself. Got any questions about Crosslight? Visit the our forums or drop us a mail at technical@intersoftpt.com. Contact sales@intersfotpt.com for licensing schemes. Stay tuned for more blog posts and video tutorials on Crosslight.

Cheers,

Nicholas Lie

In the early September 2013, we proudly announced our comprehensive toolset for the mobile development world, the Mobile Studio. Using Mobile Studio, now you can rapidly build powerful mobile apps on the world’s top platforms – iOS, Android and Windows – with a single application codebase. Check out our site for more information on Mobile Studio. To help you get started with Mobile Studio, this blog post aims to guide you from start-to-finish on how to install Mobile Studio on both Mac and Windows, as well as preparing your machine for cross-platform development for both platforms.

Mobile Studio ships with the all-new powerful mobile development toolset that will change how you program native apps, using Microsoft’s and Xamarin’s technology. Introducing Crosslight, the world’s first robust, extensible mobile toolset that leverages the MVVM pattern that extends over world’s 4 most famous mobile platforms: iOS, Android, Windows Phone 8 and Windows 8. To get a general overview of what is Crosslight, how Crosslight add values to your business, and understand how Crosslight works, see our blog post: Getting Started with Crosslight. Also check out our site for more information on Crosslight.

Installing Mobile Studio

To help you install Mobile Studio on Mac and Windows, check out the following videos.

Windows

Mac

Preparing Your Development Environment

These videos will help you in configuring your machine for development using Crosslight.

Windows

Android

iOS

Windows Phone 8

Windows 8

Mac

Android

iOS

After you have successfully followed these videos, your machine should be ready for cross-platform development using Crosslight. Should you need any further assistance, feel free to contact us at technical@intersoftpt.com or you can visit our forums. If these videos helped you, don’t forget to like our videos and subscribe to our YouTube channel for more videos.

Cheers,

Nicholas Lie

To celebrate the upcoming Visual Studio 2013 sim-ship launch, I’m happy to announce our latest special offer promo for all MSDN subscribers around the world. This exclusive special offer gives you 20% off for new purchase of any Intersoft Studio subscriptions. On top of that, we will add another subscription to your account — free of charge.

Get it whilst its hot! Click
here to learn how to take advantage of this great offer. You can also contact me for more information about this offer.

Warm Regards,
Martin

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.

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.

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.

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.

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

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

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

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

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

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

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

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

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

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

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

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

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.

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.

Click OK, and you will be presented with the 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.

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.

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.

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?

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

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

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

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

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