Editorial Note

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.

Introduction

Creating native applications for every available platform on the market can be very expensive. Therefore, many developers or small businesses choose and maintain only one platform for which they develop their applications. However, there are more effective ways of cross-platform development and they are discussed in this article.

Let’s pretend that we need to program a mobile client for e-commerce shop with clothing for instance. Our priority is to run this application on numerous smartphones and tablets and coding it in a native way. In addition, we require to keep our client brand consistent for every platform. Later on, the application will be optimized for product/clothing download and saved locally to database in order to keep this application functional even in off-line mode. However, our intension is to save time and money on development, and prevent spending additional resources on maintenance and porting of client’s future development.

So let’s create a prototype of client for e-commerce application. In this case, the client will connect through Internet to the e-commerce shop, download a list of products and enable users its viewing.

Background

To overcome platform differences, we will use Moscrif SDK (available free for open source and non-commercial projects). It allows us to create native client app using web technologies (JavaScript and json) and run it on Android (1.6 and newer), Symbian (S^1 or newer), Samsung bada and Windows Mobile 5+ (iOS is coming soon).

Server Side

In this article, we will simulate real online store by simple ASP.NET files. The getProducts.aspx will return a list of 100 products (product name, price, out-of-stock status, etc.). The list will be simple JSON.

Client Side

Mobile Client will be programmed in (extended) JavaScript and Moscrif SDK will ensure compatibility with each mobile platform. Installation of Moscrif SDK is simple and requires .NET, or Mono and Gtk# environment. You can also watch the installation here. Practically, it means that JavaScript codes will be interpreted into virtual machine of any mobile device. Furthermore, Moscrif IDE will be responsible for creating installation package (apk, sisx, cab and zip). Included file eShop.zip is possible to load in IDE through menu Project->Import Project.

E-Commerce mobile client will not be using any classes from the Moscrif framework; consequently, client has to be created from scratch. Basic screen navigation is covered by two methods, which is the push method (for various screens / views); and the pop method (for switching from current screen view to previous view):

Applying the mobile client to different resolutions is done by vector graphics (SVG). Also, every other part of UI will be calculated based on resolution of the device. For instance, height of the lower bar will be pro-rated to 1/10 from a display height:

The product details are implemented by ProductView class. Currently, this class shows only a chosen product, product description, price, etc. For demonstration purposes, we will show icons of “add to cart”, product review, etc. Once we click on the arrow located in the right bottom of row, we will see a detailed description of our product.

You can also watch this video to see how the installation files are generated.

Conclusion

Mobile client is only a prototype of real application which can be further optimized or developed with additional features like “add to cart”, product review, etc. Please stay tuned for future articles where we will demonstrate how to save data locally using SQLite database.

License

This article, along with any associated source code and files, is licensed under The BSD License

hey
i am having problems to run this project. after importing client side, i can't import server side because it says server side zip is not valid. So the project can't run. Can you please elaborate, how to run this project without problems. when i wanted to run this project, this error shows (main.ms 6 Variable not found - Window). i couldn't figure it out.

You've get very short paragraphs. It would be a better if you write a little bit more.
Remove all the screen shots and code snippets and read what's left. What's left should stand on its own to discuss the topic at hand. Screen shots and snippets should enhance the discussion, not provide it.
Regards
Robert

thank you for reading our article and we appreciate your feedback. Could you please be more specific about questions that have arisen in your mind when you read it ? We strive to improve our articles to provide sufficient information about capabilities of our framework and therefore we would like to know your opinion.