Installing MoSync for Android (and other mobile platforms)
Android Tutorial Contest
This is my submission for Article #2: Setting Up Your Android Development Environment. Its main claim to distinction is that it describes how to install MoSync, a development environment which isn't very well known, but has the advantage of supporting a wide range of mobile platforms, not just Android.
Introduction
OK, you’ve finally decided to start developing for Android. After all, it’s ridiculous for a programmer to have a tablet, a phone, a camera and a watch without programming them, right?
But… you don’t like Java, and the instructions for the NDK seem too complicated. And whatever you write, your husband will want the same thing on his iPad. And your father will want it on his Blackberry. And your brother on Windows Mobile.
Enter MoSync. The MoSync Software Development Kit is a complete development environment for all those platforms, and more. You write your program in C/C++ (or Javascript), and MoSync will compile it for the platforms you choose. By using the APIs provided, your application will work on all those devices, without any changes.
Best of all, it’s free and released as Open Source.
For full details of the MoSync SDK, look no further: http://www.mosync.com/sdk/.
Do I need a license?
If you’re using MoSync just for fun, no.
If you want to sell your apps, but release the source code under the GPL, then again, no.
If you want to sell your apps and keep your source code to yourself, then you need a commercial license. But even that doesn’t need to cost you anything. MoSync offers a free commercial license. The only thing that you pay for, if you want it, is support.
Full details of MoSync licensing are available here: http://www.mosync.com/mosync-dual-licence-model.
Getting Started
Download MoSync
Head for the MoSync SDK web site at http://www.mosync.com/download and click on the download button of your choice (Windows or Mac). It’s a bit big (over 200MB) so you’ll probably want to get some coffee while you’re waiting.
If you’re looking for something to read, you’ll find links to installation guides, user guides, tutorials, reference manuals and sample applications, all on the same page. You might also want to take a look at another MoSync product: MoSync Reload. This is intended for multi-platform HTML5 and JavaScript development, which is a different subject.
Install MoSync
No surprises here. Just double-click on the installer you downloaded. Depending on your OS, you may have to allow it to make changes to your system. A little window will show progress:
<v:shapetype coordsize="21600,21600" filled="f" id="_x0000_t75" o:preferrelative="t" o:spt="75" path="m@4@5l@4@11@9@11@9@5xe" stroked="f"> <v:stroke joinstyle="miter"> <v:f eqn="if lineDrawn pixelLineWidth 0"> <v:f eqn="sum @0 1 0"> <v:f eqn="sum 0 0 @1"> <v:f eqn="prod @2 1 2"> <v:f eqn="prod @3 21600 pixelWidth"> <v:f eqn="prod @3 21600 pixelHeight"> <v:f eqn="sum @0 0 1"> <v:f eqn="prod @6 1 2"> <v:f eqn="prod @7 21600 pixelWidth"> <v:f eqn="sum @8 21600 0"> <v:f eqn="prod @7 21600 pixelHeight"> <v:f eqn="sum @10 21600 0"> <v:path gradientshapeok="t" o:connecttype="rect" o:extrusionok="f"> <o:lock aspectratio="t" v:ext="edit"> <v:shape id="Image_x0020_1" o:spid="_x0000_i1039" style="width: 192.75pt; height: 55.5pt; visibility: visible; mso-wrap-style: square;" type="#_x0000_t75"> <v:imagedata src="file:///C:\Users\Kevin\AppData\Local\Temp\msohtmlclip1\01\clip_image001.png">
Once it’s been unpacked, the MoSync Setup will run:
<v:shape id="Image_x0020_17" o:spid="_x0000_i1038" style="width: 146.25pt; height: 75.75pt; visibility: visible; mso-wrap-style: square;" type="#_x0000_t75"> <v:imagedata src="file:///C:\Users\Kevin\AppData\Local\Temp\msohtmlclip1\01\clip_image002.png">
There’s the usual license agreement to accept:
<v:shape id="Image_x0020_4" o:spid="_x0000_i1037" style="width: 377.25pt; height: 291.75pt; visibility: visible; mso-wrap-style: square;" type="#_x0000_t75"> <v:imagedata src="file:///C:\Users\Kevin\AppData\Local\Temp\msohtmlclip1\01\clip_image003.png">
then the choice of components:
<v:shape id="Image_x0020_6" o:spid="_x0000_i1036" style="width: 377.25pt; height: 291.75pt; visibility: visible; mso-wrap-style: square;" type="#_x0000_t75"> <v:imagedata src="file:///C:\Users\Kevin\AppData\Local\Temp\msohtmlclip1\01\clip_image004.png">
Not a great deal of choice, in fact, which makes things easy. Obviously, you need MoSync and its prerequisites, so you can’t deselect them. You just decide what shortcuts you want created. The whole package will take up about 441 MB on your hard disk.
On the next screen, choose your destination folder. It probably makes life easier if you put it in a folder without any spaces in the path.
<v:shape id="Image_x0020_7" o:spid="_x0000_i1035" style="width: 377.25pt; height: 291.75pt; visibility: visible; mso-wrap-style: square;" type="#_x0000_t75"> <v:imagedata src="file:///C:\Users\Kevin\AppData\Local\Temp\msohtmlclip1\01\clip_image005.png">
Click on Install, and off you go:
<v:shape id="Image_x0020_9" o:spid="_x0000_i1034" style="width: 377.25pt; height: 291.75pt; visibility: visible; mso-wrap-style: square;" type="#_x0000_t75"> <v:imagedata src="file:///C:\Users\Kevin\AppData\Local\Temp\msohtmlclip1\01\clip_image006.png">
You’ll see a few command windows on the way as MoSync installs its files and the runtimes that it needs. Then after a few minutes, it’ll all be over:
<v:shape id="Image_x0020_10" o:spid="_x0000_i1033" style="width: 377.25pt; height: 291.75pt; visibility: visible; mso-wrap-style: square;" type="#_x0000_t75"> <v:imagedata src="file:///C:\Users\Kevin\AppData\Local\Temp\msohtmlclip1\01\clip_image007.png">
just click on Close; the installation is complete and the new shortcuts are available in your start menu:
<v:shape id="Image_x0020_25" o:spid="_x0000_i1032" style="width: 170.25pt; height: 69pt; visibility: visible; mso-wrap-style: square;" type="#_x0000_t75"> <v:imagedata src="file:///C:\Users\Kevin\AppData\Local\Temp\msohtmlclip1\01\clip_image008.png">
Uninstall MoSync is obvious, and to be honest, I haven’t looked at BMFont Generator. The other two entries are more interesting.
Online User Guides will open MoSync’s documentation page at http://www.mosync.com/docs/index.html:
<v:shape id="Image_x0020_18" o:spid="_x0000_i1031" style="width: 470.25pt; height: 264.75pt; visibility: visible; mso-wrap-style: square;" type="#_x0000_t75"> <v:imagedata src="file:///C:\Users\Kevin\AppData\Local\Temp\msohtmlclip1\01\clip_image009.png">
From here, you’ve got access to the detailed documentation for all the APIs, as well as sample applications and tutorials. The documentation is very clear and very well written.
(Optional) Download, install and configure the Android SDK
The MoSync installation already includes its own emulator as well as compilers for the different platforms, so this step is optional. However, if you want to use the official Android emulator, you’ll want to download and install the Android SDK. As there are already plenty of articles about that, I won’t go into details here.
Run MoSync
MoSync IDE is what this has all been for. Click on this shortcut, and the MoSync IDE will start:
<v:shape id="Image_x0020_21" o:spid="_x0000_i1030" style="width: 435pt; height: 238.5pt; visibility: visible; mso-wrap-style: square;" type="#_x0000_t75"> <v:imagedata src="file:///C:\Users\Kevin\AppData\Local\Temp\msohtmlclip1\01\clip_image010.png">
It’ll ask where you want to store your projects. This is the default, but you may want to move it to your own documents folder.
<v:shape id="Image_x0020_22" o:spid="_x0000_i1029" style="width: 465pt; height: 210.75pt; visibility: visible; mso-wrap-style: square;" type="#_x0000_t75"> <v:imagedata src="file:///C:\Users\Kevin\AppData\Local\Temp\msohtmlclip1\01\clip_image011.png">
If you haven’t already done so, you’ll be asked to register with MoSync, so that you can keep up to date with developments. Don't worry; you won't be bombarded with spam. You may be asked a few more questions regarding the configuration, and then the welcome screen will appear:
<v:shape id="Image_x0020_23" o:spid="_x0000_i1028" style="width: 470.25pt; height: 350.25pt; visibility: visible; mso-wrap-style: square;" type="#_x0000_t75"> <v:imagedata src="file:///C:\Users\Kevin\AppData\Local\Temp\msohtmlclip1\01\clip_image012.png">
From here, you can go to the documentation, import the examples, or start programming. The IDE is based on Eclipse, so it’s not hard to find your way around.
To help you get started, it’s well worth clicking on Import C++ Examples. This will run an import wizard to load about 50 samples supplied with the installation:
<v:shape id="Image_x0020_26" o:spid="_x0000_i1027" style="width: 396.75pt; height: 172.5pt; visibility: visible; mso-wrap-style: square;" type="#_x0000_t75"> <v:imagedata src="file:///C:\Users\Kevin\AppData\Local\Temp\msohtmlclip1\01\clip_image013.png">
The samples include the famous “Hello World” (but that’s for another article):
<v:shape id="Image_x0020_27" o:spid="_x0000_i1026" style="width: 470.25pt; height: 264.75pt; visibility: visible; mso-wrap-style: square;" type="#_x0000_t75"> <v:imagedata src="file:///C:\Users\Kevin\AppData\Local\Temp\msohtmlclip1\01\clip_image014.png">
Configure MoSync for Android
If you’ve installed the Android SDK, you’ll need to tell MoSync where to find it. Click on Windows and then Preferences to open the dialog. Navigate through MoSync Tool / Android / Android SDK and fill in the location of the Android SDK:
<v:shape id="Image_x0020_29" o:spid="_x0000_i1025" style="width: 470.25pt; height: 329.25pt; visibility: visible; mso-wrap-style: square;" type="#_x0000_t75"> <v:imagedata src="file:///C:\Users\Kevin\AppData\Local\Temp\msohtmlclip1\01\clip_image015.png">
Conclusion
If you’ve made it this far, you now have MoSync installed and configured on your computer, and you’re ready to go. The sample applications will help you get started, and the documentation is complete and well-written.
My next article will show how you can use MoSync to develop a simple application and try it out in the emulator and on your Android device. Have fun!
