1. #1
    Sencha User
    Join Date
    Aug 2014
    Posts
    7
    Vote Rating
    1
    jmflausino is on a distinguished road

      0  

    Default Basic Sencha Touch Project does not working on Android Emulator

    Basic Sencha Touch Project does not working on Android Emulator


    Hi,

    My name is Josemar, first of all, sorry for my english. I'm starting on sencha touch, and I have a problem. I made an basic sencha project example using this command: 'sencha app generate MyApp ..\myapp', till here it's okay, then I tried to run this example on android device emulator and it's here that I'm having problems. My app doesn't work, it just stays on loading screen (blue screen with three dots). When I run this on my browser there's no problem everything works, but on android emulator or on my cellphone, doesn't.

    Does someone know what can be wrong?

    I'm using sencha touch 2.3.1 and sencha cmd 4.0.4.84.

    app.js:

    Code:
    /*    This file is generated and updated by Sencha Cmd. You can edit this file as
        needed for your application, but these edits will have to be merged by
        Sencha Cmd when it performs code generation tasks such as generating new
        models, controllers or views and when running "sencha app upgrade".
    
    
        Ideally changes to this file would be limited and most work would be done
        in other places (such as Controllers). If Sencha Cmd cannot merge your
        changes and its generated code, it will produce a "merge conflict" that you
        will need to resolve manually.
    */
    
    
    Ext.application({
        name: 'MyApp',
    
    
        requires: [
            'Ext.MessageBox'
        ],
    
    
        views: [
            'Main'
        ],
    
    
        icon: {
            '57': 'resources/icons/Icon.png',
            '72': 'resources/icons/Icon~ipad.png',
            '114': 'resources/icons/Icon@2x.png',
            '144': 'resources/icons/Icon~ipad@2x.png'
        },
    
    
        isIconPrecomposed: true,
    
    
        startupImage: {
            '320x460': 'resources/startup/320x460.jpg',
            '640x920': 'resources/startup/640x920.png',
            '768x1004': 'resources/startup/768x1004.png',
            '748x1024': 'resources/startup/748x1024.png',
            '1536x2008': 'resources/startup/1536x2008.png',
            '1496x2048': 'resources/startup/1496x2048.png'
        },
    
    
        launch: function() {
            // Destroy the #appLoadingIndicator element
            Ext.fly('appLoadingIndicator').destroy();
    
    
            // Initialize the main view
            Ext.Viewport.add(Ext.create('MyApp.view.Main'));
        },
    
    
        onUpdated: function() {
            Ext.Msg.confirm(
                "Application Update",
                "This application has just successfully been updated to the latest version. Reload now?",
                function(buttonId) {
                    if (buttonId === 'yes') {
                        window.location.reload();
                    }
                }
            );
        }
    });
    Main.Js
    Code:
    Ext.define('MyApp.view.Main', {    extend: 'Ext.tab.Panel',
        xtype: 'main',
        requires: [
            'Ext.TitleBar',
            'Ext.Video'
        ],
        config: {
            tabBarPosition: 'bottom',
    
    
            items: [
                {
                    title: 'Welcome',
                    iconCls: 'home',
    
    
                    styleHtmlContent: true,
                    scrollable: true,
    
    
                    items: {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Welcome to Sencha Touch 2'
                    },
    
    
                    html: [
                        "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                        "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                        "and refresh to change what's rendered here."
                    ].join("")
                },
                {
                    title: 'Get Started',
                    iconCls: 'action',
    
    
                    items: [
                        {
                            docked: 'top',
                            xtype: 'titlebar',
                            title: 'Getting Started'
                        },
                        {
                            xtype: 'video',
                            url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
                            posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
                        }
                    ]
                }
            ]
        }
    });
    I'll get happy if someone could help me!

    Thank you!

    Josemar
    Last edited by jmflausino; 7 Aug 2014 at 1:09 PM. Reason: solved

  2. #2
    Sencha User
    Join Date
    Aug 2014
    Posts
    7
    Vote Rating
    1
    jmflausino is on a distinguished road

      1  

    Default


    Hi guys,


    I solved the problem, in my index.html, I removed this line:
    Code:
    <script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>


    and put these:


    Code:
     <link rel="stylesheet" type="text/css" href="resources/css/app.css"/>
        <script type="text/javascript" src="touch/sencha-touch-all-debug.js"></script>
        <script type="text/javascript" src="app.js"></script>

    Now it's working!


    So, I hope that it helps someone who has this kind of problem!


    Thanks again

  3. #3
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,936
    Vote Rating
    130
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      1  

    Default


    Though what you did works it is not solving the problem and you will not be able to build a production version of your application. How are you running the app on the emulator? In the browser or did you create a native build. Either way I would do some remote debugging with Chrome to see what was going on.
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  4. #4
    Sencha User
    Join Date
    Aug 2014
    Posts
    7
    Vote Rating
    1
    jmflausino is on a distinguished road

      0  

    Default


    Yeah, You are right! After I changed the index.html my app worked on emulator (like a native app) but I can't even install it on my cell phone. Does it mean that there is some problem with the folder's name, which contains the microloader.js? I mean there is a dot on '.sencha' , do you know something about that?

    thank you!

  5. #5
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,936
    Vote Rating
    130
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      1  

    Default


    Have you checked out the guides? .sencha is explained in the Using Sencha Cmd with Sencha Touch guide. FYI the files in this folder contain comments explaining how to use them.
    Though I don't think that's your problem. How are you running the app in the emulator? In the browser? Did you make any changes to the base application generated by sencha app generate?
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  6. #6
    Sencha User
    Join Date
    Aug 2014
    Posts
    7
    Vote Rating
    1
    jmflausino is on a distinguished road

      0  

    Default


    Actually I didn't read the whole guides, okay I did changes just on app.js and packager.json, see bellow:

    First: (app.js)

    Code:
    /*
        This file is generated and updated by Sencha Cmd. You can edit this file as
        needed for your application, but these edits will have to be merged by
        Sencha Cmd when it performs code generation tasks such as generating new
        models, controllers or views and when running "sencha app upgrade".
    
    
        Ideally changes to this file would be limited and most work would be done
        in other places (such as Controllers). If Sencha Cmd cannot merge your
        changes and its generated code, it will produce a "merge conflict" that you
        will need to resolve manually.
    */
    
    
    Ext.application({
        name: 'MyApp',
    
    
        requires: [
            'Ext.device.*', // I include this line and nothing else
            'Ext.MessageBox'
        ],
    
    
        views: [
            'Main'
        ],
    
    
        icon: {
            '57': 'resources/icons/Icon.png',
            '72': 'resources/icons/Icon~ipad.png',
            '114': 'resources/icons/Icon@2x.png',
            '144': 'resources/icons/Icon~ipad@2x.png'
        },
    
    
        isIconPrecomposed: true,
    
    
        startupImage: {
            '320x460': 'resources/startup/320x460.jpg',
            '640x920': 'resources/startup/640x920.png',
            '768x1004': 'resources/startup/768x1004.png',
            '748x1024': 'resources/startup/748x1024.png',
            '1536x2008': 'resources/startup/1536x2008.png',
            '1496x2048': 'resources/startup/1496x2048.png'
        },
    
    
        launch: function() {
            // Destroy the #appLoadingIndicator element
            Ext.fly('appLoadingIndicator').destroy();
    
    
            // Initialize the main view
            Ext.Viewport.add(Ext.create('MyApp.view.Main'));
        },
    
    
        onUpdated: function() {
            Ext.Msg.confirm(
                "Application Update",
                "This application has just successfully been updated to the latest version. Reload now?",
                function(buttonId) {
                    if (buttonId === 'yes') {
                        window.location.reload();
                    }
                }
            );
        }
    });
    Second (packager.json):

    I changed these lines:

    "applicationId":"com.flausino.MyApp"


    "platform":"AndroidEmulator",


    "sdkPath":"C:\\Android",


    "androidAPILevel":"19"

    Code:
    {
        /**
         * @cfg  applicationName
         * @required
         * This is the name of your application, which is displayed on the device when the app is installed. On IOS, this should match
         * the name of your application in the Apple Provisioning Portal.
         */
        "applicationName":"MyApp",
    
    
        /**
         * @cfg  applicationId
         * This is the name namespace for your application. On IOS, this should match the name of your application in the Apple Provisioning Portal.
         */
        "applicationId":"com.flausino.MyApp",  // I changed this line
    
    
        /**
         * @cfg  bundleSeedId
         * A ten character string which stands before aplication ID in Apple Provisioning Portal
         */
        "bundleSeedId":"KPXFEPZ6EF",
    
    
        /**
         * @cfg  versionString
         * @required
         * This is the version of your application.
         */
        "versionString":"1.0",
    
    
        /**
         * @cfg  versionCode
         * @required
         * This is the integer version code of your application, or you can refer to it as a build number. Used only for Android builds.
         */
        "versionCode":"1",
    
    
        /**
         * @cfg  icon
         * For iOS, please refer to their documentation about icon sizes:
         * https://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
         *
         * For Android, please refer to the Google Launcher icons guide:
         * http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html
         * iOS uses 57, 72, 114 and 144; Android uses 36, 48 and 72; if you package for Android you can ignore iOS icons and vice verca
         */
        "icon": {
            "36":"resources/icons/Icon_Android36.png",
            "48":"resources/icons/Icon_Android48.png",
            "57":"resources/icons/Icon.png",
            "72":"resources/icons/Icon~ipad.png",
            "114":"resources/icons/Icon@2x.png",
            "144":"resources/icons/Icon~ipad@2x.png"
        },
    
    
        /**
         * @cfg  inputPath
         * @required
         * This is location of your Sencha Touch 2 application, relative to this configuration file.
         */
        "inputPath":"./",
    
    
        /**
         * @cfg  outputPath
         * @required
         * This is where the built application file with be saved. Make sure that output path is not in your input path, you may get into endless recursive copying
         */
        "outputPath":"../build/",
    
    
        /**
         * @cfg  configuration
         * @required
         * This is configuration for your application. `Debug` should always be used unless you are submitting your app to an online
         * store - in which case `Release` should be specified.
         */
        "configuration":"Debug",
    
    
        /**
         * @cfg  platform
         * @required
         * This is the platform where you will be running your application. Available options are:
         *  - iOSSimulator
         *  - iOS
         *  - Android
         *  - AndroidEmulator
         */
        "platform":"AndroidEmulator", // I changed this line
    
    
        /**
         * @cfg  deviceType
         * @required
         * This is device type that your application will be running on.
         *
         * If you are developing for Android, this is not necessary.
         *
         * Available options are:
         *  - iPhone
         *  - iPad
         *  - Universal
         */
        "deviceType":"Universal",
    
    
        /**
         * @cfg  certificatePath
         * This is the location of your certificate.
         * This is required when you are developing for Android or you are developing on Windows.
         */
        "certificatePath":"/path/to/certificate.file",
    
    
        /**
         * @cfg  certificateAlias
         * This is the name of your certificate.
         *
         * IF you do not specify this on OSX, we will try and automatically find the certificate for you using the applicationId.
         *
         * This can be just a simple matcher. For example, if your certificate name is "iPhone Developer: Robert Dougan (ABCDEFGHIJ)", you
         * can just put "iPhone Developer".
         *
         * When using a certificatePath on Windows, you do not need to specify this.
         */
        "certificateAlias":"",
        /**
         * @cfg  certificatePassword
         * The password which was specified during certificate export
         */
        "certificatePassword":"",
        /**
         * @cfg  provisionProfile
         * The path to the provision profile (APP_NAME.mobileprovision) which you can create and then download from Apple's provisioning portal
         */
        "provisionProfile":"",
        /**
         * @cfg  notificationConfiguration
         * Notification configuration for push notifications, can be "debug", "release" or empty if you don't use push notifications in your project.
         */
        "notificationConfiguration":"",
        /**
         * @cfg  sdkPath
         * This is the path to the Android SDK, if you are developing an Android application.
         */
        "sdkPath":"C:\\Android", //I changed this line
    
    
        /**
         * @cfg  androidAPILevel
         * This is android API level, the version of Android SDK to use, you can read more about it here: http://developer.android.com/guide/appendix/api-levels.html.
         * Be sure to install corresponding platform API in android SDK manager (android_sdk/tools/android)
         */
        "androidAPILevel":"19", //I changed this line
    
    
            /**
         * @cfg {Array[String]} permissions
         * Array of permissions that is used by an application (Android only) 
         * Full list of permissions for Android application can be found here: http://developer.android.com/reference/android/Manifest.permission.html#ACCESS_CHECKIN_PROPERTIES
         */
        "permissions":[
                "INTERNET",
                "ACCESS_NETWORK_STATE",
                "CAMERA",
                "VIBRATE",
                "ACCESS_FINE_LOCATION",
                "ACCESS_COARSE_LOCATION",
                "CALL_PHONE"
            ],
    
    
        /**
         * @cfg {Array[String]} orientations
         * @required
         * This is orientations that this application can run.
         */
        "orientations": [
            "portrait",
            "landscapeLeft",
            "landscapeRight",
            "portraitUpsideDown"
        ]
    }
    So I run the MyApp first on browser on my localhost:

    Code:
    "http://localhost/MyApp"
    It's okay, it works!

    Then I started the Android AVD and next I opened the cmd and I did a build using:

    Code:
      sencha app build
    After that I ran the app using:

    Code:
      sencha app package run packager.json
    It's this way that I'm working... is there something wrong?

  7. #7
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,936
    Vote Rating
    130
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    Rather than
    Code:
    sencha app package run packager.json
    Try
    Code:
    sencha app build native
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  8. #8
    Sencha User
    Join Date
    Aug 2014
    Posts
    7
    Vote Rating
    1
    jmflausino is on a distinguished road

      0  

    Default


    I tried that, but it didn't work! On LogCat of eclipse IDE, I see this message:

    Code:
    Unable to open asset URL: file:///android_asset/.sencha/app/microloader/development.js
    does it mean something?

  9. #9
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,936
    Vote Rating
    130
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      1  

    Default


    Interesting the development microloader should not come into play with a native build. I was able to get a native build running on the emulator so this issue is not caused by a bug. Hard to tell what is going wrong with your project from the information provided.

    I would start all over with a new application and only edit the packager.json and run the following command to run it in the emulator.
    Code:
    sencha app build -r native
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  10. #10
    Sencha User
    Join Date
    Aug 2014
    Posts
    7
    Vote Rating
    1
    jmflausino is on a distinguished road

      0  

    Default


    fmoseley,

    I have no ways to say how much I'm grateful for your attention and patience. I deleted my first app, and I created it again, so I ran using
    Code:
    sencha app build -r native
    and it works perfectly. I'm a beginner yet but if someday there's something that you need, please count on me! Thank you again!

    see you!

Thread Participants: 1