Thursday, October 18, 2012

Using JavaScript in Windows 8 intrigues me.

Share photos on twitter with Twitpic

I saw Johnathan Hebert speak at the last AustinJS of 2012 on JavaScript within Windows 8's Metro interface.

Share photos on twitter with Twitpic

In Visual Studio Express 2012 one may create a new project of the type "JavaScript Template" for Metro development. The Windows Store template has a pages folder. One navigates to and from pages in a Metro app, but one never leaves a greater scope that surrounds the "pages." You never go "out of scope." When previewing, one may preview in the Simulator, at the Local Machine, or at a Remote Machine. In the simulator there is a weird tool panel at the right with tools that let you simulate, for instance, the touch or drag of a finger. Windows API objects called WinRT (RT for runtime) objects are accessible from JavaScript and they may be used to access all the stuff you might expect that you can do in the operating system. A page is an example of a context. Any one context will be either a web context or a local context. You must make the tough call of picking one. Only the local context has access to the WinRT goodies while only the web context has access to the ability to inject JavaScript through other script tags by referencing URLs out in the wild. When changing a page the contents of the div that starts out like this...

<div class="pagecontrol" ...

 
 

...gets appended with new information as does the head tag for the app. However, this information does not get replaced when you go to new pages. Leaving a page and coming back to it does not jog this stuff into loading a second time (it hangs out in DOM at length as you navigate) so a script that is triggered upon the loading of a page's contents is only going to fire off once. You can hack around this with the script injection stuff in web contexts. In local contexts the script tags are seen as unsafe and are blocked. (You can use tags to local scripts, and... yes... there is also an unsafe way to hack your way to the web-based scripts that may inject unsafe HTML if you're stubborn.) Pages load from ms_appx paths like so...

ms_appx///default.html

 
 

...with three slashes as shown above. Metro apps live at...

C:/Users/YOUR USERNAME HERE/AppData/Local/Packages/

 
 

...and, the Package.appxmanifest in your project may be inspected for a GUID that will correspond to a filename here. The package will contain folders for LocalState, RoamingState, and TempState. Many functions run asynchronously using a "pattern of promises" in which you call a method and pass in a callback to eventually occur. The callbacks are promise objects. Most of the WinRT methods which are asynchronous end in "Async" for clarity but writeText is an example of one of the exceptions...

local.writeText(fileName, text).done(SOME MORE CODE HERE);

 
 

...in the code above .done is a promise object.

Share photos on twitter with Twitpic

There are also promise objects for error and failure scenarios. .then may be used for chaining a sequence...

Share photos on twitter with Twitpic

...and one may set Visual Studio breakpoints inside of a .then sequence!

Share photos on twitter with Twitpic

I chatted up Lon Ingram (of Waterfall Mobile) at this event and he recommended Mocha.js in lieu of Jasmine and PhantomJS in lieu of Selenium! PhantomJS scripts can be run from a shell and can run jQuery inside of the pages of content they manhandle! Mocha will run inside of Node.js.

No comments:

Post a Comment