Using Sitefinity Mobile App Builder with an Android Emulator - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 03-Jun-2013 00:00

This will get you running with Sitefinity Box on an Android Virtual Device from the Eclipse IDE. I ran this with Android 4.2 (JellyBean). I will assume you can get android’s development environment and an AVD up and running on your own. I used the intel image for my emulator just because it is faster.

Project Setup

Create your Sitefinity project and setup your custom module to use for the Mobile App Builder. Create your mobile app and click on Download the app as ZIP file. We will get back to this file in a second.

IIS

Now setup your project to be hosted within IIS. (So you can browse to localhost without a port number). After that is setup and you can view your site by going to http://localhost we are going to have it listen on our machine’s ip address.

Open command prompt and replace ‘a.b.c.d’ with your own ip address (/ipconfig). I added my machine’s ip pluslocal host 127.0.0.1

netsh http add iplisten ipaddress=a.b.c.d

You can see the ipaddress that are being listened to by typing

netsh http sho iplisten

Restart IIS for the changes to take effect. You can now view your site by the ip address entered. It should now work in your emulator’s browser as well. And if your phone (iphone/android) is connected to your wifi you can use this ip address to access your locally running website with Sitefinity Box.

PhoneGap

Now we need to use PhoneGap to create our android project. Navigate to the android/bin folder in phongaps directory with command prompt and create your project using something like

create sitefinityemu com.sitefinityemu.SitefinityEmu SitefinityEmu

This will create our website structure to be used in our android project.

Eclipse

Open eclipse and select New project ‘Android Project from Existing Code’ and select the sitefinityemu folder we just created. To test out the project right click it and say run as android application. You should see a startup screen saying ‘Apache Cordova’ and text saying ‘Device is Ready’.

Now take the ZIP file we downloaded earlier and paste the contents into the projects assets/www folder, they should match up nicely. index.html the default logo icon will asked to be replaced which you can say ok.

Under the scripts folder we need to modify the websiteUrl in config.js from http://localhost to the ip address we set earlier e.g. websiteUrl = http://127.0.0.1

Now all we need to do is modify the index.html to get it running on our emulator. I commented out kendo.all.min.js because it caused the app to error out and change the link from cordova.js to cordova-2.7.0.js.

I combined the phonegaps index.html with the one from the mobile app builder; here is the end result:

<!DOCTYPE html>

<head>

<title>Sitefinity</title>

<meta charset="utf-8" />

<meta name="format-detection" content="telephone=no" />

<meta name="viewport" content=

"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"

/>

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<link href="kendo/styles/kendo.common.min.css" rel="stylesheet" />

<link href="kendo/styles/kendo.default.min.css" rel="stylesheet" />

<link href="styles/main.css" rel="stylesheet" />

</head>

<body id="mobileApp">

<!-- <div class="app">

<h1>Apache Cordova</h1>

<div id="deviceready" class="blink">

<p class="event listening">Connecting to Device</p>

<p class="event received">Device is Ready</p>

</div>

</div>-->

<div data-role="view" id="tabstrip-home" data-model="sitefinityMobileApplication.viewModel" class="login-scrn">

<hgroup>

<h1 id="moduleName" data-bind="html: moduleName" class="app-name"></h1>

<h2 class="sf-name">Sitefinity</h2>

</hgroup>

<ul class="km-listview km-list km-listinset">

<li>

<label for="username" style="display: inline-block;">Username</label>

<input type="text" id="username" data-bind="value: userData.username" />

</li>

<li>

<label for="password" style="display: inline-block;">Password</label>

<input type="password" id="password" data-bind="value: userData.password" />

</li>

</ul>

<div class="btn-wrp">

<button class="km-button" id="btnLogIn" data-bind="events: click: logIn">Log In</button>

</div>

<script type="text/javascript" src="cordova-2.7.0.js"></script>

<script type="text/javascript" src="js/index.js"></script>

<script type="text/javascript">

app.initialize();

</script>

<script src="kendo/js/jquery.min.js"></script>

<script src="kendo/js/jquery.cookie.js"></script>

<script src="kendo/js/kendo.mobile.min.js"></script>

<script src="scripts/jQueryMapPlugins/js/jquery.ui.map.js"></script>

<script src="scripts/jQueryMapPlugins/js/jquery.ui.map.extensions.js"></script>

<script src="scripts/config.js"></script>

<script src="scripts/address.js"></script>

<script src="scripts/everlive/reqwest.js"></script>

<script src="scripts/everlive/rsvp.js"></script>

<script src="scripts/everlive/underscore.js"></script>

<script src="scripts/repository.js"></script>

<script src="scripts/sitefinityAjax.js"></script>

<script src="scripts/mobileApp.js"></script>

</body>

</html>

You should now be able to test your mobile app using an android emulator. I’ve noticed some buttons don’t seem to work and some of the styling seems off. I think this may be because of editing out the one kendo file, but I couldn’t get it to work otherwise.

Tools

Sitefinity 6.0+
IIS
Eclipse
Android SDK
Apache Ant
JDK 6
PhoneGap

Optional

Intel x86 based AVD

Posted by Community Admin on 06-Jun-2013 00:00

Hi Kristian,

Thnak you very much for sharing your research with the community.
We really appreciate your input, and I believe the community members interested in Android development and using Eclipse would benefit from it greatly.

I have updated your Telerik points accordingly, as a token of appreciation.

Regards,
Boyan Barnev
Telerik

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

This thread is closed