Try Now
More in this section

Forums / Developing with Sitefinity / Using Sitefinity Mobile App Builder with an Android Emulator

Using Sitefinity Mobile App Builder with an Android Emulator

2 posts, 0 answered
  1. Kristian
    Kristian avatar
    214 posts
    03 Jun 2010
    03 Jun 2013
    Link to this post
    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.


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


    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.


    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 =

    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>
            <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 rel="stylesheet" type="text/css" href="css/index.css" />-->
            <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" />
        <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 data-role="view" id="tabstrip-home" data-model="sitefinityMobileApplication.viewModel" class="login-scrn">
                    <h1 id="moduleName" data-bind="html: moduleName" class="app-name"></h1>
                    <h2 class="sf-name">Sitefinity</h2>
                <ul class="km-listview km-list km-listinset">
                        <label for="username" style="display: inline-block;">Username</label>
                        <input type="text" id="username" data-bind="value: userData.username"  />
                        <label for="password" style="display: inline-block;">Password</label>
                        <input type="password" id="password" data-bind="value: userData.password"  />
                <div class="btn-wrp">
                    <button class="km-button" id="btnLogIn" data-bind="events: {click: logIn}">Log In</button>
            <script type="text/javascript" src="cordova-2.7.0.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            <script type="text/javascript">
            <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="kendo/js/kendo.all.min.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>

    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.

    • Sitefinity 6.0+
    • IIS
    • Eclipse
    • Android SDK
    • Apache Ant
    • JDK 6
    • PhoneGap
    • Intel x86 based AVD
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    24 Oct 2016
    06 Jun 2013
    Link to this post
    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.

    Boyan Barnev
    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
2 posts, 0 answered