locked
[UWP] [HTML] Windows App Studio Package -- Into Which VS2015 Folder Should External HTML / JavaScript (JS) be Inserted? RRS feed

  • Question

  • Note: I'd ultimately like to develop an app that is extremely backwards compatible!

    I used Windows App Studio (WAS) to develop the layout and design of a phone app that I plan to run through phoneGap engine to ultimately deploy not only on Windows but also on Android and Apple. Because code involves JSON and JavaScript, I also created my "main" file (purpose for the app) using VS2015 & Dreamweaver -- I could not create inside of WAS otherwise I would have. Generated a WAS package, loaded it into VS2015, and pasted my "main" HTML w/JavaScript code into the WAS package under ASSETS > DATA folder. It kind of works, but the JavaScript / JSON do not function the way I expect. Wondering if I need to separate out the JS from HTML. If so, how? where? exactly would I put the code in the very organized WAS package?

    Because I noticed that the dummy holder file I created via WAS does not show the traditional <HTML><HEAD><BODY>.... tags, I am uncertain how to handle JavaScript code and the <script></script>tag ... also <div> tags.

    Hope my question makes sense.

    Thank you for any direction/advise offered.


    Newbie enough to get myself into trouble. :0) Eyes are crossed and growth is pain ... but working on it.

    Thursday, January 12, 2017 7:28 AM

All replies

  • Hello GeneralB,

    In UWP apps, you could think about using JavaScript Runtime Hosting.

    Please refer to JavaScript Runtime Sample for details. 

    Best Regards,

    Xavier Eoro


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, January 13, 2017 6:10 AM
  • Hello Xavier,

    Thank you for your response. I am still new to the world of app making, so have a bit of learning to do on this. Thank you for pointing me in the right direction. I will learn about JavaScript Runtime Hosting. 


    Newbie enough to get myself into trouble. :0) Eyes are crossed and growth is pain ... but working on it.

    Tuesday, January 17, 2017 2:37 PM
  • Still trying to resolve this. I have sooo many learning curves going on that my mind is exploding. To add Node.js, ugh ... if I don't have to, I really don't want to. I do not know it and would have to learn it while I am still wading around in the basic JavaScript / json nursery pool. I looked at the JavaScript Runtime Hosting link on GitHub that Xavier Eoro supplied. But, I REALLY am not sure what to do with that. I think all I have to do with my code is to take what was developed in Dreamweaver -- a simple HTML file that has the json and JavaScript ... and css ... all in one file (I know not recommended way to do, but it is working for my date triggered inspirational words when I load it in any browser) -- Just can't get it into the right Visual Studio file/folder from the Windows App Studio package. Mind you, my solution is likely exactly what Xavier has said, but I'm not sure what to do with the information.

    Newbie enough to get myself into trouble. :0) Eyes are crossed and growth is pain ... but working on it.


    • Edited by GeneralB Tuesday, January 31, 2017 9:17 AM correction
    Monday, January 23, 2017 7:53 PM
  • Hi,

    >>Wondering if I need to separate out the JS from HTML.

    It is recommended separating out the JS from HTML. Because as far as I know, it is not possible to debug the JS codes in a html file.

    In additions, some inline JS codes like below won't work, if you are deploying your app to windows:

    <script>
         function abc() {
           //do something
         }
    </script>
    <button onclick="abc()">Click Me</button>

    because UWP app will staticize every involved html page, following is the  recommended way:

    index.html:

    <button id="btnClick">Click Me</button>

    main.js:

    (function () {
        "use strict"
        document.getElementById("btnClick").onclick = function (evt)
        {
            //do something
        }
    })()

    >> If so, how? where? exactly would I put the code in the very organized WAS package?

    If I understand it correctly, I think what you need is a PhoneGap/Cordova App, you can follow Create your first App or leverage Tools for Apache Cordova to create a cordova app and copy all the html/js files from your WAS package to the generated Cordova App. You can put the js files any where you want, if only the reference path (see below) is correct.

    >>I am uncertain how to handle JavaScript code and the <script></script>tag ... also <div> tags. 

    If you want to reference a js file inside a html file, you will create a <script></script> tag like below:

    <!--src="path" here the path is 'js/main.js'-->
        <script src="js/main.js"></script>

    <div> tag represents a section of content of your page, for usage of Div please refer to https://msdn.microsoft.com/en-us/library/windows/apps/hh453133.aspx.

    Best Regards,

    Elvis Xia

     
    Tuesday, January 24, 2017 8:00 AM
  • Thank you, so much, Elvis. I will see to separating the data. I actually got it to work via Dreamweaver, but need to get it working in Visual Studios, I think???, because I used Windows App Studio to build most of the app. Somewhere along the line I must have deleted the package name file??? Not sure. I've done a couple of reinstalls of VS 2015 to try to save space -- install straight onto C drive (recommended folder) vs install on D drive (which I found only saves about 5gb). So I reinstalled again on C drive (and am using even more space). With all that, not sure what I've done with the package family name file. Will ask this question in a separate question though.

    I do ultimately plan to use the Adobe PhoneGap/Apache Cordova but thought I should do this via VS2015 because of how I am creating it (mostly via Windows App Studio). IDK, perhaps I am wrong. My first app and a big atypical project -- making a yearly devotional that cycles through json db & updates daily. I'll let you know how I fair with your suggestion.

    Thanks again, Elvis.


    Newbie enough to get myself into trouble. :0) Eyes are crossed and growth is pain ... but working on it.

    Wednesday, January 25, 2017 12:41 AM
  • Hi,

    >>I do ultimately plan to use the Adobe PhoneGap/Apache Cordova but thought I should do this via VS2015 because of how I am creating it (mostly via Windows App Studio)

    You can  directly create a cordova app with VS2015, that's what Tools for Apache Cordova is for. And you can follow the Beginner's Guide for Tools for Apache Cordova to create your first cordova app with Visual Studio 2015.

    Then you can copy the existing Html and JS files from WAS package into this project. And separating the JS codes.

    Best Regards,

    Elvis Xia

    Wednesday, January 25, 2017 7:05 AM
  • The thing is I am right there but not sure HOW to make the file trigger in VS2015. It works in browser & Dreamweaver, so it is not the code. I really don't want to tear this apart and piece back together. Taken me pretty long time to get to this point and as I've said, I'm not that experienced. I installed the two mandatory .js files (jQuery & moment) via Node.js. They show under "References" section of the Solution.  I think I just need to get the src to now point to the right path for VS2015 to recognize, but not sure ... The file works with everything in the SAME folder (HTML, JSON, & JavaScript files)--works in Dreamweaver & in ALL browsers. Just does not work in the VS2015 phone emulator. Hopefully, below screen shot will show what I'm trying to do. BTW: I do have the Android & iOS emulators as listed under tools. The phonegap.js script may need to be removed ... not sure. But my main concern is getting the app to simply do what the second image shows. It needs to be where the third image shows TODAY (I need to tweak somethings but main goal is to show the daily devotional -- not working in VS2015).  Hope this helps you to help me. Thank you.

    IMAGE 1

    IMAGE 2

    IMAGE 3


    Newbie enough to get myself into trouble. :0) Eyes are crossed and growth is pain ... but working on it.


    • Edited by GeneralB Tuesday, January 31, 2017 10:24 AM pix disappeared
    Tuesday, January 31, 2017 10:22 AM
  • Hi,

      Could you please post the error that you get? Or maybe share a basic demo that can reproduce the problem?

    Best Regards,

    Elvis Xia

    Friday, February 3, 2017 9:38 AM
  • I'll have to revisit this, Elvis. I think I am gaining enough knowledge to understand. Thanks again.

    Newbie enough to get myself into trouble. :0) Eyes are crossed and growth is pain ... but working on it.

    Friday, February 3, 2017 11:23 PM
  • Hi Elvis,

    Still trying to workout your suggested script in different places. Any insight would be much appreciated. Here is script in original format (Note already have self-invoking function() near bottom) ...

    <script>
           var json_dB =
    {
    "February 7"  :   {"quote"  :   "A man who is kind benefits himself, but a cruel man hurts himself." , "refTag"  :   "Proverbs 11:17"  ,
        "quote2"  :   "Do not say, “I will do to him as he has done to me; I will pay the man back for what he has done.”" , "refTag2"  :   "Proverbs 24:29"  },
    "February 8"  :   {"quote"  :   "If you really fulfill the royal law according to the Scripture, “You shall love your neighbor as yourself,” you are doing well. But if you show partiality, you are committing sin. . ." , "refTag"  :   "James 2:8-9"  },
    "February 9"  :   {"quote"  :   "Judge not, and you will not be judged; condemn not, and you will not be condemned; forgive, and you will be forgiven; give, and it will be given to you. Good measure, pressed down, shaken together, running over, will be put into your lap. For with the measure you use it will be measured back to you." , "refTag"  :   "Luke 6:37-38"  },
    "February 10"  :   {"quote"  :   "Why do you see the speck that is in your brother’s eye, but do not notice the log that is in your own eye?" , "refTag"  :   "Luke 6:39-42"  }
    };
    < /script>

    <div class="main">
        <div class="date">
            <h1 class="date">
                TODAY  
                <span id="CurrentDate">   </span>
            </h1>
            <h2 class="date"> <span id="CurrentTime">    </span></h2>
        </div>
        <div class="script">
            <p class="quote">   <span id="CurrentVerse">   </span></p>
            <p class="refT"><span id="CurrentVerseRefTag"></span></p>
            <p class="quote2"><span id="CurrentVerse2"> </span></p>
            <p class="refT2"><span id="CurrentVerseRefTag2"></span></p>
        </div>
    < /div>

    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    < script type="text/javascript" src="moment.min.js"></script>
    < script>
        console.log(json_dB);
        var theCurrentDate = moment().format('MMMM D');
            $("#CurrentDate").html(moment().format('MMMM D'));
            $("#CurrentVerse").html(json_dB[theCurrentDate]["quote"]);
            $("#CurrentVerseRefTag").html(json_dB[theCurrentDate]["refTag"]);
            $("#CurrentVerse2").html(json_dB[theCurrentDate]["quote2"]);
            $("#CurrentVerseRefTag2").html(json_dB[theCurrentDate]["refTag2"]);

            //Initialize Time
            $("#CurrentTime").html(moment().format('MMMM Do YYYY, h:mm:ss a'));
            // Checks every second the time. If the date has changed...update the quote
        var myTimingInterval = setInterval(function () {
            $("#CurrentTime").html(moment().format('h:mm:ss a'));
            if (theCurrentDate != moment().format('MMMM D')) {
                    $("#CurrentDate").html(moment().format('MMMM D'));

        theCurrentDate = moment().format('MMMM D');
            $("#CurrentVerse").html(json_dB[theCurrentDate]["quote"]);
            $("#CurrentVerseRefTag").html(json_dB[theCurrentDate]["refTag"]);
            $("#CurrentVerse2").html(json_dB[theCurrentDate]["quote2"]);
            $("#CurrentVerseRefTag2").html(json_dB[theCurrentDate]["refTag2"]);
        }
     }, 1000);

    console.log(json_dB);

    </script>


    Newbie enough to get myself into trouble. :0) Eyes are crossed and growth is pain ... but working on it.

    Tuesday, February 7, 2017 9:18 PM
  • Hi,

    If you followed Create your first Cordova app, the project structure should looks like below:

    To extract the js codes, you first need to modify your html to reference the "index.js":

    <body>
        <div class="main">
            <div class="date">
                <h1 class="date">
                    TODAY
                    <span id="CurrentDate">   </span>
                </h1>
                <h2 class="date"> <span id="CurrentTime">    </span></h2>
            </div>
            <div class="script">
                <p class="quote">   <span id="CurrentVerse">   </span></p>
                <p class="refT"><span id="CurrentVerseRefTag"></span></p>
                <p class="quote2"><span id="CurrentVerse2"> </span></p>
                <p class="refT2"><span id="CurrentVerseRefTag2"></span></p>
            </div>
        </div>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/moment.min.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <!--Reference your js codes file:-->
        <script type="text/javascript" src="scripts/index.js"></script>
    </body>


    And your index.js file:

    (function () {
        "use strict";
        var json_dB =
        {
        "February 7": {
            "quote": "A man who is kind benefits himself, but a cruel man hurts himself.", "refTag": "Proverbs 11:17",
            "quote2": "Do not say, “I will do to him as he has done to me; I will pay the man back for what he has done.”", "refTag2": "Proverbs 24:29"
        },
        "February 8": { "quote": "If you really fulfill the royal law according to the Scripture, “You shall love your neighbor as yourself,” you are doing well. But if you show partiality, you are committing sin. . .", "refTag": "James 2:8-9" },
        "February 9": { "quote": "Judge not, and you will not be judged; condemn not, and you will not be condemned; forgive, and you will be forgiven; give, and it will be given to you. Good measure, pressed down, shaken together, running over, will be put into your lap. For with the measure you use it will be measured back to you.", "refTag": "Luke 6:37-38" },
        "February 10": { "quote": "Why do you see the speck that is in your brother’s eye, but do not notice the log that is in your own eye?", "refTag": "Luke 6:39-42" }
        };
        
        console.log(json_dB);
        var theCurrentDate = moment().format('MMMM D');
        $("#CurrentDate").html(moment().format('MMMM D'));
        $("#CurrentVerse").html(json_dB[theCurrentDate]["quote"]);
        $("#CurrentVerseRefTag").html(json_dB[theCurrentDate]["refTag"]);
        $("#CurrentVerse2").html(json_dB[theCurrentDate]["quote2"]);
        $("#CurrentVerseRefTag2").html(json_dB[theCurrentDate]["refTag2"]);
        //Initialize Time
        $("#CurrentTime").html(moment().format('MMMM Do YYYY, h:mm:ss a'));
        // Checks every second the time. If the date has changed...update the quote
        var myTimingInterval = setInterval(function () {
            $("#CurrentTime").html(moment().format('h:mm:ss a'));
            if (theCurrentDate != moment().format('MMMM D')) {
                $("#CurrentDate").html(moment().format('MMMM D'));
                theCurrentDate = moment().format('MMMM D');
                $("#CurrentVerse").html(json_dB[theCurrentDate]["quote"]);
                $("#CurrentVerseRefTag").html(json_dB[theCurrentDate]["refTag"]);
                $("#CurrentVerse2").html(json_dB[theCurrentDate]["quote2"]);
                $("#CurrentVerseRefTag2").html(json_dB[theCurrentDate]["refTag2"]);
            }
        }, 1000);
        console.log(json_dB);
    
    } )();


    Best Regards,

    Elvis Xia

    Wednesday, February 8, 2017 9:37 AM
  • Hi Elvis,

    Thanks for sticking with me. I guess part of the problem is that I created the original at Windows App Studio (WAS), which did a lot of the heavy lifting, and a nice little app for basic. I then exported it via the generator tool to allow for editing in VS2015. Below is how the file structure generated. Meanwhile, I will poke around to see if I can find comparative files. No www folder or index.html though.

     


    Newbie enough to get myself into trouble. :0) Eyes are crossed and growth is pain ... but working on it.

    Thursday, February 9, 2017 12:36 AM
  • Hi,

    The project you created is a UWP C# based project, which is not a JS/Html based application. So You need to create a JS/Html based application first.

    You can follow the Beginner's Guide of Tools for Apache Cordova to create a basic cordova app, which is JS/Html based and will compile your Html and js file correctly.

    Best Regards,

    Elvis Xia

    Thursday, February 9, 2017 8:06 AM