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

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.

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:

You can intercept the commands in the view model:

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.

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.

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