Angel \”Java\” Lopez on Blog

November 2, 2011

Metro Applications: Links, News And Resources (1)

Filed under: JavaScript, Links, Metro Applications, Windows 8 — ajlopez @ 8:09 am

These past weeks, I was programming Metro apps, using Javascript/HTML5. Some links I found useful:

Windows Library for JavaScript reference
http://msdn.microsoft.com/en-us/library/windows/apps/br211669(v=VS.85).aspx

Getting started with Windows Metro style app development
http://msdn.microsoft.com/en-us/library/windows/apps/br211386%28v=vs.85%29.aspx

Building your first Windows Metro style app using JavaScript
http://msdn.microsoft.com/en-us/library/windows/apps/br211385%28v=vs.85%29.aspx

Windows 8 Developer Preview Metro style app samples
http://code.msdn.microsoft.com/windowsapps/Windows-Developer-Preview-6b53adbb
Sample Pack with all the samples

Search app extension sample
http://code.msdn.microsoft.com/Search-app-extension-sample-6baa6270

Dynamic CSS Regions Sample
http://code.msdn.microsoft.com/Dynamic-Regions-Sample-f600c0c1

Navigation with Fragments sample
http://code.msdn.microsoft.com/Navigation-with-Fragments-5e4990f5

Dynamic CSS Region Templates sample
http://code.msdn.microsoft.com/Dynamic-Region-Templates-94bc9c95

DeclarativeBinding
http://code.msdn.microsoft.com/DeclarativeBinding-bfcb42a5

Navigation sample
http://code.msdn.microsoft.com/Navigation-sample-1c34abd1

ListView interaction model sample
http://code.msdn.microsoft.com/ListView-interaction-model-c6f9a124

Form Controls – Part 2
http://code.msdn.microsoft.com/Form-Controls-Part-2-6aaca655

Adaptive layout with CSS sample
http://code.msdn.microsoft.com/Adaptive-layout-with-sample-062e7fe2

Custom data sources example
http://code.msdn.microsoft.com/Custom-data-sources-example-8a58a0fc

WinJS.UI.ListViewItems objec
http://msdn.microsoft.com/en-us/library/windows/apps/A981E0DA-7044-4E16-90E4-BCD963171CCB

Form controls part 2: validation
http://code.msdn.microsoft.com/Form-controls-part-2-327288d9

Getting started with the ListView sample
http://code.msdn.microsoft.com/Getting-started-with-the-0e02c964

App Bar Sample
http://code.msdn.microsoft.com/App-Bar-Sample-026c7baf

Groove Drum Sequencer – HTML/JS and WinRT C++
http://code.msdn.microsoft.com/Groove-Drum-Sequencer-cc6028ec

Promise
http://code.msdn.microsoft.com/Promise-e1571015
Demonstrates the use of the WinJS Promise object. Promises are a simple way to do asynchronous programming in JavaScript. They allow developers to perform operations on a value (or a set of values) that may only be available in the future, handle possible errors, and provide progress notification.

Developing basic Metro style apps (JavaScript)
http://msdn.microsoft.com/en-us/library/windows/apps/br229565(v=vs.85).aspx

Ten Tips When Writing a Hybrid Language Metro style Application
http://channel9.msdn.com/events/BUILD/BUILD2011/PLAT-876T

8 traits of great Metro style apps
http://channel9.msdn.com/Events/BUILD/BUILD2011/BPS-1004

Building your first Windows Metro style app using C#, C++, or Visual Basic
http://msdn.microsoft.com/en-us/library/windows/apps/br211380

Tutorial: How to disable Metro UI on Windows 8
http://www.youtube.com/watch?v=TCdzUICwRfQ

How to Pick Your Platform: Silverlight, Metro, or HTML5
http://www.telerikwatch.com/2011/09/how-to-pick-your-platform-silverlight.html

A few facts about Microsoft’s new Windows Runtime
http://www.itwriting.com/blog/4866-a-few-facts-about-microsofts-new-windows-runtime.html

OK, so I think HTML/JS for Metro apps is a good idea
http://blog.markrendle.net/2011/09/15/ok-so-i-think-the-htmljs-for-metro-apps-is-a-good-idea/

Microsoft to developers: Metro is your future
http://www.zdnet.com/blog/microsoft/microsoft-to-developers-metro-is-your-future/10611

My Links
http://delicious.com/ajlopez/metro
http://delicious.com/ajlopez/windows8

Check the latest links! I’m adding new ones everyday.

Angel “Java” Lopez
http://www.ajlopez.com
http://twitter.com/ajlopez

October 28, 2011

Metro Applications (1) My First Blank Application

Filed under: HTML5, JavaScript, Metro Applications, Windows 8 — ajlopez @ 9:51 am

This week, I started to write a simple Metro Application for Windows 8, using HTML5/Javascript. It’s a customer project, and it’s a new world for me. I want to present in this post the minimal application.

Using a Windows 8 with Visual Studio 2011 Preview, you have these initial Javascript Metro application choices (you could write Metro applications with C++, C#, VB.NET, too):

If you don’t have VS 2011, you can download the generated solutions from my GitHub repo:

https://github.com/ajlopez/MetroApps

This is the solution of a Blank Application:

Notice the winjs folder, with js files. This is the new namespace we can use in Metro apps. Detailed info:

Windows Library for JavaScript reference

And there is a package manifest file: it’s describe the capabilities of the application (i.e: it can access Internet, it expose the search contract, etc…).

The default.html code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>BlankApp</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <!-- BlankApp references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
</head>
<body>
</body>
</html>

The ui-dark.css is used. This is the “black style” you usually see at Metro apps.

The section “WinJS references” refers the javascript files that makes the WinJS namespace. According to the WinJS documentation:

When you reference these JavaScript files in your app, you must add the references in the following order:

  • base.js
  • wwaapp.js (after base.js)
  • ui.js (after base.js)
  • binding.js (after ui.js)
  • res.js (after ui.js)
  • animations.js (after ui.js)
  • controls.js (after animations.js)
  • uicollections.js (after animations.js)

The /js/default.js is for your application/page: you can adapt it to put your own code, new namespaces definitions. You can add other javascript files, too.

Next steps: explore these Javascript files, dissecting implementation; research and use concepts like navigation, declarative binding, and more.

Keep tuned!

Angel “Java” Lopez

http://www.ajlopez.com

http://twitter.com/ajlopez

September 16, 2011

Windows 8 and WinRT: Links, News and Resources

Filed under: .NET, C Sharp, HTML5, JavaScript, Links, Windows 8, WinRT — ajlopez @ 9:38 am

This week Windows 8 was unveiled and introduced into society, at Build Conference. Some links I found interesting about Windows 8, Metro applications, WinRT and .NET programming.

http://en.wikipedia.org/wiki/Windows_8

WinRT demystified – Miguel de Icaza
http://tirania.org/blog/archive/2011/Sep-15.html

Building Windows 8 – Site Home – MSDN Blogs
http://blogs.msdn.com/b/b8/

Build Conference
http://www.buildwindows.com/

Some Thoughts on Windows 8
http://blogs.microsoft.co.il/blogs/sasha/archive/2011/09/14/some-thoughts-on-windows-8.aspx

Sessions at BUILD Day 2 and Windows 8
http://blogs.microsoft.co.il/blogs/sasha/archive/2011/09/15/sessions-at-build-day-2-and-windows-8.aspx

WinRT and .NET in Windows 8
http://blogs.microsoft.co.il/blogs/sasha/archive/2011/09/15/winrt-and-net-in-windows-8.aspx

Bye Bye Brain, first game on Windows 8
http://vimeo.com/29104421

The final days of Adobe Flash
http://www.bytheshaw.com/article/The+final+days+of+Adobe+Flash.html

Windows Developer Preview Metro style app samples
http://code.msdn.microsoft.com/Windows-Developer-Preview-6b53adbb
The Windows Developer Preview Samples Gallery contains a variety of code samples that exercise the various new programming models, platforms, features, and components available for the BUILD conference.

Using WinRT from .NET
http://ermau.com/using-winrt-from-net/

WinRT is Replacing Win32
http://www.winsupersite.com/blog/supersite-blog-39/windows8/winrt-replacing-win32-140605

Build 2011: What Is WinRT, and Is Silverlight Dead?
http://www.readwriteweb.com/hack/2011/09/build-2011-what-is-winrt-and-i.php
The Windows Runtime library (WinRT) is the principal provider of system services for applications in Windows 8 that will be designed to incorporate the new "Metro" style

Functional Fun: Windows Runtime – Dial in the right expectations before reading up
http://blog.functionalfun.net/2011/09/windows-runtime-dial-in-right.html

InfoQ: WinRT: An Object Orientated Replacement for Win32
http://www.infoq.com/news/2011/09/WinRT-API
User interfaces in C++ will be written primarily in XAML.
Overlapping Windows No Longer Exist <— I remember Windows 1.0 ;-)
Under WinRT all APIs are exposed as objects that C# and VB can consume directly.
The fourth major language for Windows 8 is JavaScript.
All Metro Applications Must be Digitally Signed.

Sinofsky outlines the Windows 8 vision | News | TechRadar UK
http://www.techradar.com/news/software/operating-systems/sinofsky-outlines-the-windows-8-vision-1027101?src=rss&attr=all

Best place to discuss Windows 8
http://blogs.msdn.com/b/b8/archive/2011/09/14/best-place-to-discuss-windows-8.aspx

Metro style browsing and plug-in free HTML5
http://blogs.msdn.com/b/b8/archive/2011/09/14/metro-style-browsing-and-plug-in-free-html5.aspx

Experiencing Windows 8 touch on Windows 7 hardware
http://blogs.msdn.com/b/b8/archive/2011/09/13/experiencing-windows-8-touch-on-windows-7-hardware.aspx

Welcome to Windows 8 – The Developer Preview
http://blogs.msdn.com/b/b8/archive/2011/09/13/welcome-to-windows-8-the-developer-preview.aspx

JAPF » Blog Archive » BUILD: WinRT, Silverlight, WPF, XAML
http://www.japf.fr/2011/09/build-winrt-silverlight-wpf-xaml/

Building real-time web apps with WebSockets using IIS, ASP.NET and WCF | BUILD2011 | Channel 9
http://channel9.msdn.com/Events/BUILD/BUILD2011/SAC-807T

A bad picture is worth a thousand long discussions. « Doug Seven
http://dougseven.com/2011/09/15/a-bad-picture-is-worth-a-thousand-long-discussions/

Internet Explorer 10 Metro will not support Flash, Silverlight – Tech Products & Geek News | Geek.com
http://www.geek.com/articles/news/internet-explorer-10-metro-will-not-support-flash-silverlight-20110915/

C#er : IMage: Windows 8: What you Need to Know
http://csharperimage.jeremylikness.com/2011/09/windows-8-what-you-need-to-know.html?m=1

"What’s New in the .NET Framework 4.5 Developer Preview" (and Yield is coming to VB.Net!) – Greg’s Cool [Insert Clever Name] of the Day
http://coolthingoftheday.blogspot.com/2011/09/new-in-net-framework-45-developer.html

Guide to Installing and Booting Windows 8 Developer Preview off a VHD (Virtual Hard Disk)
http://www.hanselman.com/blog/GuideToInstallingAndBootingWindows8DeveloperPreviewOffAVHDVirtualHardDisk.aspx

A few facts about Microsoft’s new Windows Runtime « Tim Anderson’s ITWriting
http://www.itwriting.com/blog/4866-a-few-facts-about-microsofts-new-windows-runtime.html

OK, so I think HTML/JS for Metro apps is a good idea « codeface
http://blog.markrendle.net/2011/09/15/ok-so-i-think-the-htmljs-for-metro-apps-is-a-good-idea/

I know what you’re thinking, and you’re wrong. « Doug Seven
http://dougseven.com/2011/09/14/i-know-what-youre-thinking-and-youre-wrong/
Metro, Silverlight, .NET

Microsoft to developers: Metro is your future | ZDNet
http://www.zdnet.com/blog/microsoft/microsoft-to-developers-metro-is-your-future/10611

Microsoft Unveils ‘Reimagined’ Windows 8 at Build Event — Visual Studio Magazine
http://visualstudiomagazine.com/articles/2011/09/13/build-preview-of-windows-8.aspx

Welcome to Windows 8 – The Developer Preview – Building Windows 8 – Site Home – MSDN Blogs
http://blogs.msdn.com/b/b8/archive/2011/09/13/welcome-to-windows-8-the-developer-preview.aspx

Delivering fast boot times in Windows 8 – Building Windows 8 – Site Home – MSDN Blogs
http://blogs.msdn.com/b/b8/archive/2011/09/08/delivering-fast-boot-times-in-windows-8.aspx

Windows 8 will feature Hyper-V guest OS machine virtualization | ExtremeTech
http://www.extremetech.com/computing/95339-windows-8-will-feature-hyper-v-guest-os-machine-virtualization?obref=obinsite

"A sort of PC": how Windows 8 will invade tablets (and why it might work)
http://arstechnica.com/microsoft/news/2011/08/a-sort-of-pc-how-windows-8-will-invade-tablets-and-why-it-might-work.ars

Improving our file management basics: copy, move, rename, and delete – Building Windows 8 – Site Home – MSDN Blogs
http://blogs.msdn.com/b/b8/archive/2011/08/23/improving-our-file-management-basics-copy-move-rename-and-delete.aspx

My Links
http://www.delicious.com/ajlopez/windows8
http://www.delicious.com/ajlopez/winrt
http://www.delicious.com/ajlopez/vs2011

Angel "OMGC++Again" Lopez

The Shocking Blue Green Theme. Create a free website or blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

Join 65 other followers