Simple question about WinJS references in default.html / Grid App template

Question

If there's an article or resource that explains these sorts of "under the hood" issues, please help me find them.  Much appreciated!

(1) Create a new project using JavaScript | Windows Store | Grid App template

(2) Open default.html

(3) Review lines 7 through 10:

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

I see where these are ultimately referenced in the references . . . 

I'm just wondering what / how that location is understood by the compiler (?) to turn:  //Microsoft.WinJS.1.0/ into the folder structure we see in the Solution Explorer screen shot?  Where are these files ultimately saved?  With each new project you distribute?  In a central location somewhere in Windows 8?  Any insight into the underpinnings of WinJS would be greatly appreciated.

Answer 1

Upon further examination, the "mapping" between the URI:

//Microsoft.WinJS.1.0/

And the "Windows Library for JavaScript 1.0" has something to do with the manifest inside of the .appx file for the WinJS API.  Inside the AppxManifest.xml, I see this:

<?xml version="1.0" encoding="utf-8"?>
<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">
	<!--IDENTITY-->
	<Identity Name="Microsoft.WinJS.1.0" ProcessorArchitecture="neutral" Publisher="CN=Microsoft Corporation, O=Microsoft Corporation, L=Redmond, S=Washington, C=US" Version="1.0.8514.0"/>

. . . so I'm guessing that Identity Name="Microsoft.WinJS.1.0" is what is showing up in the "SDK Identity" property in the XML of the manifest.  

I realize this is such a minute thing, but I'm trying to really understand how all the pieces are connected / wired up here.  Any additional insights would be helpful.

Answer 2

This documentation should help:

http://msdn.microsoft.com/en-us/library/hh768146.aspx

Answer 3

Thank you Chuck, that got me pointed in a new direction of thinking . . . I found this:

http://stackoverflow.com/questions/10624401/reuse-javascript-code-across-multiple-metro-style-apps

Which talks about sharing javascript (and other) files as part of an SDK / appx ... Notice the selected answer says:

--------------------------------------------------------------------

"3. Add a reference to the class library from the top-level Metro app

4. Use a script tag with the ms-appx protocol to reference the file, i.e.

script src="ms-appx:///MyWinMdProj/path/to/file.js" >

Note the three slashes; "MyWinMdProj" is a folder relative the Metro app's package (i.e. ms-appx:///) as opposed to being its own top-level package.

Note that any file included in this manner will be exposed on the filesystem under C:\Program Files\WindowsApps - but all of your html, js, css, etc. files from the top-level app project already are anyway, so you're not any worse off in that regard than if you copied and pasted the code in between two (or more) different apps."

--------------------------------------------------------------------

Awesome, so that helps me understand the "ms-appx:///" now ... SO, what does two-slashes // mean?  I guess that's what I'm aiming for here.  Thank you for your response!

Answer 4

I can't find the doc for it, but I believe // is used for "official" Microsoft published SDKs, and /// is for 3rd party SDKs, or content in your project.

Answer 5

THANK YOU.  That's what I needed to know.  If you do come up with that doc, please append.  Again, much appreciated!

Answer 6

Couple of related pages:

http://msdn.microsoft.com/en-us/library/windows/apps/hh781215.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/hh781229.aspx