[Tech - Software Blog]
If you haven't done the first JavaScript Metro app, you could see Microsoft's official starting line:
Building your first Windows Metro style app with JavaScript.
But upon looking at it, it actually jumps in and tries to do some pretty wizzy stuff you don't need to know about at the start. I like the universal method of just walking up to Visual Studio File New the "nothing" project and hitting "Debug" and see what happens.
Start up the Visual Studio Developer's Preview (on the system I have I had to search for "devenv.exe" and put a shortcut up on the taskbar)
File - New Project -
Other Languages - JavaScript - Blank Application
Name: Hello
[OK]
It puts you into "default.html", it's like the default.html homepage on a ASP.NET website.
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hellotitle>
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js">script>
<script src="//Microsoft.WinJS.0.6/js/wwaapp.js">script>
<script src="//Microsoft.WinJS.0.6/js/ui.js">script>
<script src="//Microsoft.WinJS.0.6/js/binding.js">script>
<script src="//Microsoft.WinJS.0.6/js/res.js">script>
<script src="//Microsoft.WinJS.0.6/js/animations.js">script>
<script src="//Microsoft.WinJS.0.6/js/controls.js">script>
<script src="//Microsoft.WinJS.0.6/js/uicollections.js">script>
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js">script>
head>
<body>
<p>Content goes herep>
body>
html>
What is different is all of the WinJS references for WinJS Metro javascript and css goodies. The css is placed in the /css directory, /js is for javascript and //Microsoft... looks like a "system" library to me. All this library stuff is up in the header.
//Microsoft.WinJS.0.6/js/ looks like a standard js library
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js">script>
The body is what looks like the usual html:
<body>
<p>Content goes herep>
body>
Hit Menu - Debug - Start Debugging
To see what is going on, you can hit alt-tab to see the screen or you can hit the windows key, and see the tile that's up for "Hello"
and the screen just has a black screen saying "content goes here" in the upper left corner. Whoopee.
The official start up app actually tries to do some pretty advanced stuff. A much better next-to-trivial app is the one here:
http://msdn.microsoft.com/en-us/library/windows/apps/br211386.aspx
Hello Windows Metro style apps
Building Metro style apps for Windows is easy, because you use the skills you already have and can reuse the code assets you've already developed. The Windows Runtime provides a library of APIs you can use to build engaging, connected, tailored experiences. When the Windows Runtime doesn't have the functionality you need, you can draw from a subset of Microsoft .NET and Microsoft Win32 APIs that support Metro style app development. For more info about the Windows Runtime, see Windows Runtime Reference.
In this code example, you see references to Windows Library for JavaScript, as well as references to a default style sheet. These references are provided for you when you use one of the pre-defined Metro style apps templates. Compiling and running this app generates a button, labeled "Click me!". Adding code to the default.js file to handle the
When the button is clicked, "Hello Windows Metro style apps with JavaScript!" appears. You can extend this app using any of the APIs in the Windows Runtime, the Windows Library for JavaScript, or by using HTML5 or CSS3 to enhance the presentation.
Adding to the Nothing App
Instead of typing all that, just add this button to the body of default.html
Debug it and you'll get
Content goes here
[Click me!]
on your form.
To add code, in a Winform or Webform, you'd double click on the button to get to the event.
To add it here, click on the default.js tab and you'll see this:
(function () {
"use strict";
var app = WinJS.Application;
app.onactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
WinJS.UI.processAll();
}
}
app.start();
})();
Add this code after the first function:
document.addEventListener("click", function(){ myText.innerText="Hello Windows Metro style apps with JavaScript!"; });
There's quite a lot of stuff in this line. The way to read this line is
document.addEventListener
WinJS Method on document to add an eventListener
You can look up the WinJS.Application.addEventListener reference: http://msdn.microsoft.com/en-us/library/windows/apps/br229799(v=VS.85).aspx
Syntax: WinJS.Application.addEventListener(type, listener, capture);
type Type: string The type (name) of the event.
listener Type: functionThe function that handles the event.
capture Type: Boolean true to initiate capture, otherwise false.
("click",
is the name of the event to pay attention to, in this case clicking on the "click me" button
function(){});
is the function to execute when the event happens
{blah blah blah }
that is the goofy "anonymous function" code you can just jam in between curly braces if you don't want to create a whole fancy standalone function
myText.innerText="Hello Windows Metro style apps with JavaScript!";
standard javscript to set the document text to the clever message.
It's not quite as straightforward as the old Visual Basic methodology: double click on the object, find the click event, and say Object.text = "clever message", but it's the same general idea and if you're already used to dealing with something as nasty as Javascript, it should be no big deal. There's always C# and XAML for VB fans.
After all that, default.js should look like this
(function () {
"use strict";
var app = WinJS.Application;
app.onactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
WinJS.UI.processAll();
}
}
document.addEventListener("click", function () {
myText.innerText = "Hello Windows Metro style apps with JavaScript!";
});
app.start();
})()
Debug, click on the button and you'll see:
Content goes here
[Click me!] "Hello Windows Metro style apps with JavaScript!";
If you haven't done the first JavaScript Metro app, you could see Microsoft's official starting line:
Building your first Windows Metro style app with JavaScript.
But upon looking at it, it actually jumps in and tries to do some pretty wizzy stuff you don't need to know about at the start. I like the universal method of just walking up to Visual Studio File New the "nothing" project and hitting "Debug" and see what happens.
Start up the Visual Studio Developer's Preview (on the system I have I had to search for "devenv.exe" and put a shortcut up on the taskbar)
File - New Project -
Other Languages - JavaScript - Blank Application
Name: Hello
[OK]
It puts you into "default.html", it's like the default.html homepage on a ASP.NET website.
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hellotitle>
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js">script>
<script src="//Microsoft.WinJS.0.6/js/wwaapp.js">script>
<script src="//Microsoft.WinJS.0.6/js/ui.js">script>
<script src="//Microsoft.WinJS.0.6/js/binding.js">script>
<script src="//Microsoft.WinJS.0.6/js/res.js">script>
<script src="//Microsoft.WinJS.0.6/js/animations.js">script>
<script src="//Microsoft.WinJS.0.6/js/controls.js">script>
<script src="//Microsoft.WinJS.0.6/js/uicollections.js">script>
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js">script>
head>
<body>
<p>Content goes herep>
body>
html>
What is different is all of the WinJS references for WinJS Metro javascript and css goodies. The css is placed in the /css directory, /js is for javascript and //Microsoft... looks like a "system" library to me. All this library stuff is up in the header.
//Microsoft.WinJS.0.6/js/ looks like a standard js library
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js">script>
The body is what looks like the usual html:
<body>
<p>Content goes herep>
body>
Hit Menu - Debug - Start Debugging
To see what is going on, you can hit alt-tab to see the screen or you can hit the windows key, and see the tile that's up for "Hello"
and the screen just has a black screen saying "content goes here" in the upper left corner. Whoopee.
The official start up app actually tries to do some pretty advanced stuff. A much better next-to-trivial app is the one here:
http://msdn.microsoft.com/en-us/library/windows/apps/br211386.aspx
Hello Windows Metro style apps
Building Metro style apps for Windows is easy, because you use the skills you already have and can reuse the code assets you've already developed. The Windows Runtime provides a library of APIs you can use to build engaging, connected, tailored experiences. When the Windows Runtime doesn't have the functionality you need, you can draw from a subset of Microsoft .NET and Microsoft Win32 APIs that support Metro style app development. For more info about the Windows Runtime, see Windows Runtime Reference.
Hello world with JavaScript
To build a Metro style app using JavaScript, you use HTML5 and CSS3 for presentation and JavaScript for app logic. Here's an example of a very basic Metro style app using JavaScript.MyFirstMetroApp
onClick event is simple.document.addEventListener("click", function(){
myText.innerText="Hello Windows Metro style apps with JavaScript!";
});
Adding to the Nothing App
Instead of typing all that, just add this button to the body of default.html
<body>
<p>Content goes here
<button onclick="click">Click me!
<p id="myText">
Debug it and you'll get
Content goes here
[Click me!]
on your form.
To add code, in a Winform or Webform, you'd double click on the button to get to the event.
To add it here, click on the default.js tab and you'll see this:
(function () {
"use strict";
var app = WinJS.Application;
app.onactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
WinJS.UI.processAll();
}
}
app.start();
})();
Add this code after the first function:
document.addEventListener("click", function(){ myText.innerText="Hello Windows Metro style apps with JavaScript!"; });
There's quite a lot of stuff in this line. The way to read this line is
document.addEventListener
WinJS Method on document to add an eventListener
You can look up the WinJS.Application.addEventListener reference: http://msdn.microsoft.com/en-us/library/windows/apps/br229799(v=VS.85).aspx
Syntax: WinJS.Application.addEventListener(type, listener, capture);
type Type: string The type (name) of the event.
listener Type: functionThe function that handles the event.
capture Type: Boolean true to initiate capture, otherwise false.
("click",
is the name of the event to pay attention to, in this case clicking on the "click me" button
function(){});
is the function to execute when the event happens
{blah blah blah }
that is the goofy "anonymous function" code you can just jam in between curly braces if you don't want to create a whole fancy standalone function
myText.innerText="Hello Windows Metro style apps with JavaScript!";
standard javscript to set the document text to the clever message.
It's not quite as straightforward as the old Visual Basic methodology: double click on the object, find the click event, and say Object.text = "clever message", but it's the same general idea and if you're already used to dealing with something as nasty as Javascript, it should be no big deal. There's always C# and XAML for VB fans.
After all that, default.js should look like this
(function () {
"use strict";
var app = WinJS.Application;
app.onactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
WinJS.UI.processAll();
}
}
document.addEventListener("click", function () {
myText.innerText = "Hello Windows Metro style apps with JavaScript!";
});
app.start();
})()
Debug, click on the button and you'll see:
Content goes here
[Click me!] "Hello Windows Metro style apps with JavaScript!";
No comments:
Post a Comment