Click here to Skip to main content
Click here to Skip to main content
Go to top

Build a Mobile App in just 4 Minutes (Part 2)

, 27 Jul 2010
Today, we will demonstrate how easy it is to design and build a mobile form including a detail view object in a step-by-step tutorial.

Editorial Note

This article is in the Product Showcase section for our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

In the article posted on Code Project last month, we proved that a simple mobile app can be built in less than 4 minutes. This rapid development was enabled by Resco MobileApp Studio—a mobile app developer tool allowing developers quickly designing and building mobile forms. It is a Microsoft Visual Studio add-on, so all its tools are integrated in and accessed directly from Visual Studio.

Today, we will demonstrate how easy it is to design and build a mobile form including a detail view object in a step-by-step tutorial.

We will use Resco MobileApp Studio embedded in Microsoft Visual Studio, Resco designers and wizards. Any bets how long it may take? Let’s find out...
First, download and install a trial version of Resco MobileApp Studio from here: http://www.resco.net/developer/mobileappstudio/download_mas.aspx.

I create a new project in Visual Studio and name it CustomerApp.

Resco MobileApp Studio

Then, I right-click on the Project and add a new item from the context menu. I choose Class and name it Customer.

Resco MobileApp Studio

Now I write a code that creates a class. This class contains data for our example purposes especially the basic customer info such as name, date etc. When I am done, I save the file.

Resco MobileApp Studio

Adding MobileAppDetail File to the Project

I right click on the project again and add a new item. I choose MobileApp Studio from the Categories, add MobileAppDetail and rename it to CustomerDetail.

After the new file was added to the project, the new wizard is opened. I select one of the graphic themes and go on.

Resco MobileApp Studio

I select an empty view and finish the wizard.

What you see here is Resco MobileApp environment embedded in Visual Studio. This designer allows you to design detail forms in an easy way. Our detail form doesn’t contain any items for now, we’ll add them later.

Resco MobileApp Studio

Now I build this project.

Data Binding

To add the items to our detail form and bind them to the data I use the Bindings wizard, which is also part of Resco MobileApp Studio. I click on the button „Manage“ in the „Data“ window to open the Bindings wizard. To use a class for binding, I select the „CLR Class“.

Resco MobileApp Studio

I select my solution (CustomerApp) and click on „Next“.

Resco MobileApp Studio

Then I expand the CustomerApp and select the Customer, which is the class I created in the beginning, and click Finish button. (You could use the same procedure to bind the form to your existing business logic.)

Resco MobileApp Studio

Note there are 4 new rows in the Data menu on the left.

Resco MobileApp Studio

I add a new text box to the detail form by clicking on the Add TextBox button, which is located in the Objects window.

In the „Data“ menu I click on the „Assign“ button in the first „Name“ row. Now the TextBox is bound to the class. Then I add a new DateTime item and assign it to the „Since“ row. Same for new Numeric item, which is assigned to the „Rating“ row and new Checkbox item assigned to the „Reliable“ row.

Resco MobileApp Studio

If I need further customization of created items or the entire form, such as ItemHeight, back color or font, etc. I can do this by my mouse directly in the designer or in the properties windows by clicking on the „Show Local Properties“ button.

Finally I add a new Caption item to the Detail form and set Label to „Customer“. I drag & drop the item on the top of the form. And I can save and build the project.

I right click on the Form1 generated by Visual Studio and select ViewDesigner. I have already built the project, so I can see the newly created View in the toolbox. I just drag & drop it to the form.

Resco MobileApp Studio

I also add a new button on the form. This button will be used only for break point. When I hit the button1, Visual Studio automatically generates an on-click event. I will keep it empty for now.

Resco MobileApp Studio

Now I create an instance for the Customer class and I set this object as a data source for the detail view. I add a break point to the button1 click function.

Resco MobileApp Studio

Save and run in the emulator.

I change the values on the form.

Resco MobileApp Studio

To view the changes made in the customer object I hit the button1. Visual Studio breaks into the button1 on-click event. I drag Customer object to the watch 1 window and view its properties. The values are exactly as I set them in the detail view in the emulator.

Resco MobileApp Studio

Now you can customize this form for your needs using the Resco MobileApp Studio’s designer, Visual Studio and C# programming language. That is it! Simple, fast and effective—a formula for successful mobile development.

And the total time? Watch this tutorial on YouTube and find out yourself: http://www.youtube.com/watch?v=Mtxemhefiao

About Resco MobileApp Studio

Resco MobileApp Studio is a Microsoft Visual Studio 2008 add-on—a rapid mobile app developer tool allowing developers quickly designing and building mobile line-of-business applications.

Find more information on Resco MobileApp Studio here: http://www.resco.net/developer/mobileappstudio/overview.aspx

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Resco Developer Tools
Marketing Resco
Slovakia Slovakia
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 27 Jul 2010
Article Copyright 2010 by Resco Developer Tools
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid