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

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.

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

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.

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.

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.

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

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

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

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

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.

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.

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.

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.

Save and run in the emulator.

I change the values on the form.

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.

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