mardi 4 août 2015

Cordova PhoneGap upgrade to 5.1.1 from 2.2.0

I have Cordova application which is version 2.2.0. Now I want to upgrade, I have done upgrade part, after upgrading, application images are not display, it came blank screen. even splash screen also not came. Here is my code

Seem problem in my BaseScreen.js. I have given alert & check HomeScreen.js before execute basescreen part, the alert is working. but Basescreen also alert came,

HomeScreen.js

var HomeScreen = BaseScreen
    .extend({
        templateContent : "<ul id='homeBtnsList'>\
        alert("-----HI-Home in---");
                     <li id='playGame'><img src='interface/play-icon@2x.png'><div class='gloss'></div><span>" + language.HOME_PLAY_GAME + "</span></li>\
                     <li id='viewScore'><img src='interface/scoreboard-icon@2x.png'><div class='gloss'></div><span>" + language.HOME_VIEW_SCORE + "</span></li>\
                     <li id='viewRules'><img src='interface/instruction-icon@2x.png'><div class='gloss'></div><span>" + language.HOME_VIEW_RULES + "</span></li>\
                </ul>\
                <div class='copyright'>Copyright &copy; Pearson</div>\
                <div class='about'></div>\
                <div id='footer'>\
                    ",
        headerClass : "head homehead",
        screenClass : "",

        initialize : function() {
            _.bindAll(this, "handleRenderComplete", "handleItemClick", "initScroll", "closeAboutUs", "aboutUsAction");
            BaseScreen.prototype.initialize(this);
            this.bind(AppEvent.RENDER_COMPLETE, this.handleRenderComplete);
            _.extend(this, Backbone.Events);
        },

        render : function() {
            this.element = this.el;
            var divString = BaseScreen.prototype.render(this);
            return divString;
        },

        show : function() {
            this.setScreenReady();
        },

        handleRenderComplete : function() {
            $("#homeBtnsList li", this.obj).bind(AppEvent.CLICK, this.handleItemClick);
            $("div.about", this.obj).bind(AppEvent.CLICK, this.aboutUsAction);

            if(isIOS()) {
                ShareKitPlugin.prototype.logoutFromTwitter();
                ShareKitPlugin.prototype.logoutFromFacebook();
                _.delay(navigator.splashscreen.hide,1000);
            }

        },

        setScreenReady : function() {
            var obj = {
                screenId : this.model.toString()
            };
            this.trigger(AppEvent.SCREEN_READY, obj);
        },

        handleItemClick : function(e) {
            // alert(e.target.nodeName + " : " +
            // e.target.parentNode.nodeName);
            var tar = e.target;
            if (e.target.nodeName.toLowerCase() != "li") {
                tar = e.target.parentNode;
                // return;
            }
            // alert(tar.nodeName + " : " + tar.parentNode.nodeName);
            et = tar;

            e.preventDefault();

            var obj = {};

            id = $(et).attr('id') ? $(et).attr('id') : $(et).find('li')
                    .attr('id');

            switch (id) {
            case "playGame":
                obj.screenId = AppConst.GROUP_SCREEN;
                this.trigger(AppEvent.GOTO_SCREEN, obj);
                return;
            case "viewScore":
                obj.screenId = AppConst.SCORE_HOME_SCREEN;
                this.trigger(AppEvent.GOTO_SCREEN, obj);
                return;
            case "viewRules":
                obj.screenId = AppConst.INSTRUCTION_SCREEN;
                this.trigger(AppEvent.GOTO_SCREEN, obj);
                return;
            default:
                return;
            }
            ;

        },


    initScroll: function(obj){
        utils.log("SCROLL ACTIVE")
        this.iScroll = new iScroll($("#helpContent").get(0), {desktopCompatibility:true});
    },

    aboutUsAction: function(){

        var obj = {};
        obj.screenId = AppConst.ABOUTUS_SCREEN;
        this.trigger(AppEvent.GOTO_SCREEN, obj);

    },

    closeAboutUs: function(){

        $("#helpWrapper #helpContent").html("");
        $('#helpWrapper').hide();
        this.iScroll.destroy();

    },

    destroy : function() {
            utils.log("destroy ", this.model.get('myId'));
            //$("#homeBtnsList li", this.obj).unbind();
            $("div.about", this.obj).unbind();
            this.unbind();
            BaseScreen.prototype.destroy(this);
        }
    })

This is my BaseScreen.js

    var BaseScreen = Backbone.View.extend
({
    templateStart:"<div id='<%=myId%>' class='screen <%=screenClass%>'>\
                        <!--header-->\
                        <div id='header' class='head <%=headerClass%>'>\
                            <!--LEFT BTN-->\
                            <div class='header-left-btn <%=leftBtnClass%>'>\
                                    <span><%=leftLabel%></span>\
                                </div>\
                            <!--TITLE-->\
                            <h1><%=title%></h1>\
                            <!--RIGHT BTN-->\
                            <div class='header-right-btn <%=rightBtnClass%>'>\
                            <%=rightLabel%>\
                                </div>\
                            </div>\
                        <div class='content'>",
    templateContent:"",
    templateClose:"</div></div>",
    element:null,

    render:function(extendedObject)
    {
        var curObj = extendedObject || this;
        //console.log('screen Element: ' + curObj.el.get(0).id)
        var baseScreenModel = {};

        if(curObj.model){
            baseScreenModel = curObj.model.toJSON();
        }

        var thatId = baseScreenModel.myId;
        var template = _.template(curObj.templateStart + curObj.templateContent + curObj.templateClose);
        var data = _.extend(baseScreenModel, {
            screenClass: curObj.screenClass,
            headerClass: curObj.headerClass
        });

        // curObj.element.append(template(baseScreenModel));
        curObj.element.append(template(baseScreenModel));

        // //console.log(template(baseScreenModel))
        // //console.log(" >>>> " + thatId)
        //var screen = curObj.element.find("#" + thatId);

        var screen = $("#" + thatId);
        ////console.log("appended node " + screen.length);

        if(screen.length <= 0){
            ////console.log("length is zero")
            //console.log("delay .....");
            _.delay(BaseScreen.prototype.render, 1000, curObj);
            return curObj.element;;
        }

        ////console.log("appended node == " + screen.html());

        var sClass = curObj.screenClass || "";
        var hClass = curObj.headerClass || "";

        //screen.find(".screen").addClass(sClass);
        //screen.find("#header").addClass(hClass);

        $(screen).addClass(sClass);
        $("#header", $(screen)).addClass(hClass);



        // screen.find("#leftElement").bind(AppEvent.CLICK, curObj.handleButtonClick);
        // screen.find("#rightElement").bind(AppEvent.CLICK, curObj.handleButtonClick);
        $("#leftElement", $(screen)).bind(AppEvent.CLICK, function(e){
            ////console.log("#leftElement ", e.target);
            that.trigger(AppEvent.HEADER_ITEM_CLICKED, AppConst.HEADER_LEFT_ELEMENT);
        });
        $("#rightElement", $(screen)).bind(AppEvent.CLICK, function(e){that.trigger(AppEvent.HEADER_ITEM_CLICKED, e.target.id);});
        curObj.trigger(AppEvent.RENDER_COMPLETE);
        return curObj.element;      
    },

    initialize:function(extendedObject)     //only called when extending BaseScreen
    {
        var curObj = extendedObject||this;
        //_.bindAll(curObj, "handleButtonClick");
        _.extend(curObj, Backbone.Events);
    },

    handleButtonClick:function(e)
    {
        this.trigger("buttonClick", e.target.id);
    },

    destroy:function(extendedObject) {
        var that = extendedObject||this;
        var thatId = that.model.get('myId');
        var screen = that.element.find("#" + thatId);
        screen.find("#leftElement").unbind();
        screen.find("#rightElement").unbind();      
        //debug.log("destroy base screen for " + thatId);
        screen.remove();
    },

    handleHeaderLeftClicked:function() {
        //console.log("left clicked", this);        
        if(DEVICE_TYPE == DEVICE_ANDROID || DEVICE_TYPE == DEVICE_ANDROID_TAB || DEVICE_TYPE == DEVICE_PC) {
            Functions.prototype.exit();
           }
    }

})

index.html:

    <!DOCTYPE html>
<html manifest="appcache.manifest">
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes" >
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
        <title>My Application</title>

        <link href="css/global.css" media="all" rel="stylesheet" type="text/css">


        <script src="com/external/underscore.js" ></script>
        <script src="com/external/iscroll.js" ></script>

        <script src="com/external/zepto.js" ></script>
        <script src="com/external/ajax.js" ></script>
        <script src="com/external/touch.js" ></script>
        <script src="com/external/event.js" ></script>
        <script src="com/external/effects.js" ></script>
        <script src="com/external/detect.js" ></script>
        <script src="com/external/jsOAuth-1.3.1.js" ></script>
        <script src="com/external/json2.js" ></script>
        <script src="com/external/jsPatch.js" ></script>
        <script src="com/external/backbone.js" ></script>

        <script src="com/imfinity/comp/webkitdragdrop.js" ></script>
        <script src="com/imfinity/utils/jsExtended.js" ></script>
        <script src="com/imfinity/utils/stopwatch.js" ></script>

        <script src="com/imfinity/screen/BaseScreenVO.js" ></script>
        <script src="com/imfinity/screen/BaseScreen.js" ></script>


        <script src="com/sns/init.js"></script>

        <script src="com/sns/jsonParser.js" ></script>
        <script src="com/sns/utilities.js" ></script>
        <script src="com/sns/language.js" ></script>
        <script src="com/sns/AppConst.js" ></script>
        <script src="com/sns/services.js" ></script>
        <script src="com/sns/db.js" ></script>
        <script src="com/sns/AppEvent.js" ></script>
        <script src="com/sns/controller/main.js" ></script>

        <script src="com/sns/model/HomeScreenVO.js" ></script>
        <script src="com/sns/view/HomeScreen.js" ></script>

        <script src="com/sns/view/helpScreenView.js" ></script>
        <script src="com/sns/model/helpScreenVO.js" ></script>

        <script src="com/sns/view/aboutScreenView.js" ></script>
        <script src="com/sns/model/aboutScreenVO.js" ></script>

        <script src="com/sns/model/scoreHomeScreenVO.js" ></script>
        <script src="com/sns/view/scoreHomeScreenView.js" ></script>

        <script src="com/sns/model/hallOfFameScreenVO.js" ></script>
        <script src="com/sns/view/hallOfFameScreenView.js" ></script>

        <script src="com/sns/model/scoreboardScreenVO.js" ></script>
        <script src="com/sns/view/scoreboardScreenView.js" ></script>

        <script src="com/sns/model/instructionScreenVO.js" ></script>
        <script src="com/sns/view/instructionScreenView.js" ></script>

        <script src="com/sns/model/groupsScreenVO.js" ></script>
        <script src="com/sns/view/groupsScreenView.js" ></script>

        <script src="com/sns/model/topicsScreenVO.js" ></script>
        <script src="com/sns/view/topicsScreenView.js" ></script>

        <script src="com/sns/model/recentTopicsScreenVO.js" ></script>
        <script src="com/sns/view/recentTopicsScreenView.js" ></script>

        <script src="com/sns/view/questionScreenView.js" ></script>
        <script src="com/sns/model/questionScreenVO.js" ></script>

        <script src="com/sns/controller/questionPlayer.js" ></script>

        <script src="com/sns/view/resultsScreenView.js" ></script>
        <script src="com/sns/model/resultScreenVO.js" ></script>

        <script src="com/sns/view/activity/reorderingView.js" ></script>
        <script src="com/sns/view/activity/tapNplaceView.js" ></script>



        <!--script src="com/sns/sns-minified.js"></script-->


    </head>
    <body onload="onLoad()"  style="overflow: hidden;">
        <div class='insOverlay'>
            <div id='instructionsWrapper'><img/>
            </div>
        </div>
        <div id="overlay">
            <div id="preloader"></div>
            <div id="genericHUD" >
                <div id='HUDcontent'><img src='interface/load.png'>
                </div>
            </div>
        </div>
        <div id="toast" class="Overlay_toast" style="display: none;">
            <div class="toast_message"></div>
        </div>

        <div id='helpWrapper' class="overlay darkShade" style="display: none;">
            <div class="helpWindow">
                <span id='helpClose' class="close-pop-up"></span>
                <h1>Help</h1>
                <div id='helpContent' class="helpContent"></div>
            </div>
        </div>

        <div id="banner" class="overlay darkShade"></div>

        <div class="modalOverlay" style="display: none;">
            <div class="modalWindow">
                <span class="close-pop-up"></span>
                <h1 class="whiteHeading">Share</h1>
                <p id='email' class="share-btn share-with-friend">

                </p>
                <p id='twitter' class="share-btn share-on-twitter">

                </p>
                <p id='facebook' class="share-btn share-on-facebook">

                </p>
            </div>
        </div>

        <div class="editTextOverlay">
            <div class='editTextPopup'>
                <div class="editTextHeader">
                    <span id="leftBtn" class="editTextButton">Cancel</span>
                    <span id="rightBtn"  class="editTextButton"></span>
                </div>
                <textarea rows="4" autocomplete="off" spellcheck="false" style="outline: none;" maxlength="140"></textarea>
            </div>
        </div>

        <div class="normalOverlay" id="confirmBox">
            <div class='normalTextPopup'>
            <h2>Confirm</h2>
                <div id="confirmMsg">
                    message
                </div>
                <div>
                    <span id="leftBtn" class="normalTextButton"></span>
                    <span id="rightBtn"  class="normalTextButton"></span>
                </div>

            </div>
        </div>

        <div id="wrap" >
            <div id="screens" >
                <div id='questionPlayer' class='screen'></div>
            </div>

        </div>
    </body>
</html>

cofig : res/xml/config.xml

    <?xml version='1.0' encoding='utf-8'?>
<cordova>
    <access origin="http://127.0.0.1*" />
    <access origin=".*" />
    <log level="DEBUG" />
    <preference name="useBrowserHistory" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="SplashScreen" value="splash" />
    <preference name="SplashScreenDelay" value="10000" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <plugins>
        <plugin name="App" value="org.apache.cordova.App" />
        <plugin name="Geolocation" value="org.apache.cordova.GeoBroker" />
        <plugin name="Device" value="org.apache.cordova.Device" />
        <plugin name="Accelerometer" value="org.apache.cordova.AccelListener" />
        <plugin name="Compass" value="org.apache.cordova.CompassListener" />
        <plugin name="Media" value="org.apache.cordova.AudioHandler" />
        <plugin name="Camera" value="org.apache.cordova.CameraLauncher" />
        <plugin name="Contacts" value="org.apache.cordova.ContactManager" />
        <plugin name="File" value="org.apache.cordova.FileUtils" />
        <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager" />
        <plugin name="Notification" value="org.apache.cordova.Notification" />
        <plugin name="Storage" value="org.apache.cordova.Storage" />
        <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer" />
        <plugin name="Capture" value="org.apache.cordova.Capture" />
        <plugin name="Battery" value="org.apache.cordova.BatteryListener" />
        <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen" />
        <plugin name="Echo" value="org.apache.cordova.Echo" />
        <plugin name="Globalization" value="org.apache.cordova.Globalization" />
        <plugin name="SQLitePlugin" value="com.phonegap.plugins.SQLitePlugin" />
        <plugin name="FlurryPlugin" value="com.phonegap.plugins.Flurry" />
        <plugin name="AndroidUtilsPlugin" value="com.phonegap.plugins.AndroidUtilsPlugin" />
        <plugin name="ChildBrowserPlugin" value="com.phonegap.plugins.ChildBrowserPlugin" />
    </plugins>
    <feature name="File">
        <param name="android-package" value="org.apache.cordova.file.FileUtils" />
        <param name="onload" value="true" />
    </feature>
</cordova>

Please let me know what is an issue. After upgrading only , I am facing this isssue, could you please guide me about this.

Aucun commentaire:

Enregistrer un commentaire