Where It Was, Part One

In this tutorial, we are going to develop a simple mobile application from scratch using RadPHP.

An Idea Is Born

I am new in the city, I’ve just moved, and everything is new to me. I don’t know where things are, and most times I just follow my workmates to wherever they go for lunch. The other day I found a great place to order home-made food, but I was in a hurry so I just got the name. Now I can’t remember it, or where the place was.

So I decided I would need an application for my phone so I could just write down the name or something else about a place where I am, like “Nice Restaurant” or “Baby Stuff”, and my phone should be able to tell me later where I was when I wrote that down.

I want my phone to tell me Where It Was!

If you are going to tell me that there is already an application that does that, or that this is useless since I could just write down the name of the place and search for it later, please remember this is just an excuse to create a sample application step by step so you can follow the process closely

Create a Mobile Project

It’s time to open RadPHP and start a mobile project. Just go to Project > Add New Project… > RadPHP Projects, select Mobile Application, and click OK. We will then get the first file of our project opened in the Designer:

As you can see, the Designer for mobile applications includes the possibility to preview different devices and includes backgrounds for them. You can also customize available devices and include your own, just check out the documentation about it.

Now, before anything else, we should set a meaningful name for our project and our first file, unit1.php.e can do so from the Project Manager pane, located by default on the top-right corner of RadPHP. We should also change from the Object Inspector the Caption property of our MPage container to the name of our application:

Design a Basic Interface

Right now I only care about the main screen, it should be a simple application, as simple as possible, and I want to use it quickly, the less I have to tap the better.

What I will do is to add to the MPage all the things I expect the application interface to have at first. And that is a short list: a field to enter some text (just a line, for place name or short description), a button to save it, and a list of saved places.

When working with mobile applications, we should be careful when we choose components. My rule is: use a mobile component whenever you can, use other components whenever you have to. This way we both avoid incompatibility issues and leave the door open to use Mobile Theming later (can only be used with mobile components).

So, on the Tool Palette, expand the Mobile section and find out there are mobile versions of every component I need for this basic interface, so I will use them: MEdit instead of Edit, MButton instead of Button and MList instead of ListBox.

We drag and drop those components, resize them and place them so they look nice enough, and change MButton’s Caption property to “Remember”.

Run on a Web Browser

I confess I am a bit impatient, so whenever something new is done to an user interface, I like to try the result right away on a device. Same for the application logic.

To deploy our application to a device or emulator would take some time, but we can run mobile application developed with RadPHP on a web browser. Of course, some things might look slightly different from what they will look like on a device, and on the web browser we will not have access to mobile hardware features, so the application logic will not work. But it is the fastest way to check out our changes to the user interface.

To run on the web browser, you just need to go to Run > Run. RadPHP will load the current mobile page on your default web browser:

End of Part One

That’s all for now. We have seen how to create a mobile application project, how to add mobile controls to it, and how to run it on a web browser.

On the next post, we are going to see how to access mobile devices’ storage, and use it to keep a database of places and interact with it.

Share This | Email this page to a friend

Posted by achaves on February 7th, 2012 under Mobile, Tutorials |