Oct
12
2014

Universal Windows Apps with Angular

Starting with Visual Studio 2013 (with update 2), developers can create an app with a single solution to target multiple devices such as PCs, tablets, or phones.  This type of solution can generate universal Windows apps.  These can be written with C#, C++, or JavaScript. For video training on the topic, please check out the free course at the Microsoft Virtual Academy.

If written with JavaScript, web developers who use Angular will be happy to know you can continue to do so while making apps.

For a jumpstart on the development process, I have created a starter solution with a bare-bones shell that properly sets up Angular for use in the project.  The starter solution is named AngularVS (Angular for Visual Studio) and is available publicly at github.

A key factor for Angular to work properly in these types of apps is the use of the the ng-csp directive as seen below.  Not only will this enable Angular to work smoothly, if declared before other popular libraries|frameworks such as jQuery, it helps enable them safely too!

ngcsp

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Sep
26
2014

IsPrime Function in JavaScript

The following code sample illustrates how to use JavaScript to determine if a number provided is a prime number or not. In this example, the number is hardcoded in the JavaScript. You can edit this and experiment with other values at the isPrime at CodePen

var theNumber = 22;
var primeResult = isPrime(theNumber);
document.write("<hr />" + primeResult);

function isPrime(n) {

  var s = [2,3,5,7];
  var ld = [1,3,7,9]; 
  var divs = [];

  if (n==1) {return false;}
  if (s.indexOf(n) > -1) {return true;}
  
  if (ld.indexOf(n%10) > -1) {
     divs = getDivisibles(n);
     document.writeln(divs);
  } else {
    return false;
  }
  
  return (divs.length == 0);
  
}// isPrime

function getDivisibles(n) {
  var i = 2;
  var divs = [];
  while (i*i<=n) {
      if (n%i==0) {
        var upper = n/i;
        divs.push(i);
        if (upper>i) {divs.push(upper);}
      }
      i++;
  }// while
  divs.sort(function(x,y){return x-y;});
  return divs;
}// getDivisibles

See the Pen isPrime by J Michael Palermo IV (@palermo4) on CodePen.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Sep
26
2014

Demo jQuery Selectors

The demo below shows how to find a count of elements using different jQuery selectors. To modify the expressions yourself, feel free to make edits at the jQuery selectors demo at CodePen


$(document).ready(function () {
  // start the results of methods below with this:
  writeLine("Selectors<hr />");

  // count of all elements
  writeSelectorLength("*");

  // count of elements in body
  writeSelectorLength("body *");

  // count of all divs and p tags
  writeSelectorLength("div,p");

  // count of all p tags direct children of divs
  writeSelectorLength("div > p"); 

  // count of all li tags
  writeSelectorLength("li"); 
});

// helper method to write content at specific location in page
function writeLine(anyHtml) {    
    var output = $("#output");
    var currentOutputContent = output.html();
    output.html(currentOutputContent += anyHtml + "<br />");
}
// helper method to write results of getSelectorLength
function writeSelectorLength(anySelector) {
    writeLine(getSelectorLength(anySelector));
}
// helper methos wrapping results of query in a span
function getSelectorLength(anySelector) {
    return anySelector + 
        "<span class='smaller'> has </span>" + 
        $(anySelector).length + 
        " <span class='smaller'>matches</span>";
}

See the Pen MVA140826-jQuery by J Michael Palermo IV (@palermo4) on CodePen.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Aug
16
2013

Start Developing for Windows (8.1) Store Apps using HTML5

jumpstartstudioWhen Windows 8 was first introduced, a huge opportunity opened up for web developers.  How so?  Anyone with HTML, CSS, and JavaScript skills could now apply such skills to developing apps, not just sites.  This is due to Microsoft supporting the development of WinRT apps with either C++, .NET, and/or JavaScript.  How different is it from writing a web site vs. an app?  If you are a web developer and you want to find out, be sure to look at the DevRadio episodes on developing for Windows 8 in half the time (4 minute videos) or the comprehensive “jump start” training series on HTML5 for Windows 8.  Moving onward, it will be assumed you already have a degree of experience with developing apps for Windows 8 using HTML5, and you are interested in what’s new or changed.

With Windows 8.1, consumers will enjoy a richer, more interactive experience. Correspondingly, the  APIs have been updated, providing developers either new or easier ways of doing things. A listing of the API deltas can be found at the Windows Dev Center for Windows Store apps.  Our focus right now is not to do a tedious overview of everything new.  Rather, we will look at what you need to do to get ramped up with some highlighted features as quick as possible.

Developer Requirements

To get started, you will need to install Windows 8.1 (preview is available for download) and Visual Studio 2013 (preview is available for download).  You should also highly consider registering at the App Builder site for relevant resources.

Visual Studio 2013 Updates

Creating a new project with Visual Studio 2013 is much like it was with Visual Studio 2012.  Consider the following screen capture of the “New Project” dialogue box:

vs13_new_project

First point of interest is a new template type named “Hub App” which allows for a hierarchical system of navigation. The template uses a new Hub control, and you can learn more about it if you download the Hub control sample. Regardless of which template type used though, let’s examine some core changes. 

WinJS 2.0

The source page of HTML files now target Windows 8.1, as indicated by the references to WinJS 2.0 as seen here:

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

You will also see this visually in the solution explorer view.  When expanded, it is easy to see the resources being requested as seen here:

vs13_ref

Note that when you open a project created for Windows 8, Visual Studio 2013 will prompt you to determine if the project should now target Windows 8.1

Editor Enhancements

A pleasant enhancement to the JavaScript editor is the automatic completion of code blocks when typing the left side of the block.  For example, when typing a left brace { , the editor will pair it with a right brace } and auto-format along the way.  Other pairings include parenthesis, brackets, and quotation marks (single or double).

The editor will also highlight identifiers when selected.  For example, if a variable is declared with the name isAwesome, notice how the editor will highlight where else it is used:

vs13_id

Tiles

One more quick change to be aware of is found in the package.appxmanifest file.  When opening in Visual Studio 2013, you will find the Application UI tab where you can configure the images used for your apps tiles.  However, notice the new options as seen here:

vs13_logos

These new options introduce both a larger and smaller tile.  You should support these new tile sizes so that users of Windows 8.1 can easily organize their Start screen.  The example below shows the 70x70 in upper left, 150x150 in upper middle, 310x150 in the lower left, and the 310x310 on the right:

What Next?

So much could be next.  To some degree that will depend on the type of app you are developing.  The information covered so far is to enable a quick start to the development process.  By setting up the required environment and understanding a few of the changes in Visual Studio 2013, you can start coding as usual.  Look for deeper looks at specific features in the near future!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
15
2013

HTML5 Apps 70-480

Elevate! Electrify!

image

Jeremy Foster and I had no idea what kind of response resulted from presenting our free training course to prepare for the 70-480 exam.  For example, who knew that our shirts (purchased from the Microsoft Store the day prior) would become so popular, people contacting both of us wondering where they could buy one?

That said, the real story is in the successful outcomes of those who watched the videos and then subsequently passed the exam.  Even more impressive to me personally is that some already have apps submitted to the Windows Store!  (Do you have an app in the store? If not, consider 30,000 reasons why you should submit your app now!)

A Jump Start to the Jump Start

I want to give a Matthew Hughes in the United Kingdom recognition for his outstanding coverage of this course.  He took meticulous, detailed notes on every topic.  I have organized his blog posts below:

Part 0    Getting Started

Part 1    Semantic Markup, Forms, Media and SVG

Part 2    Cascading Style Sheets (CSS)

Part 3    Advanced Layouts and Animations

Part 4    JavaScript Core Capabilities

Part 5    Manipulating the DOM

Part 6    Advanced Topics

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Dec
4
2012

Microsoft DevRadio: Promises

To play video, hover above and press play button.

Abstract: win8genapp30
Michael Palermo and Jeremy Foster discuss the role of promises and demonstrate via codeSHOW.

Watch previous episodes here...
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Nov
19
2012

Microsoft DevRadio: Adding an App Bar

To play video, hover above and press play button.

Abstract: win8genapp30
In this episode, Michael Palermo shows how easy it is to add an application bar to your app!

Next Steps:
Step #1 – Download Windows 8 and Windows 8 SDK
Step #2 – Download Visual Studio Express for Windows 8
Step #3 – Start building your own Apps for Windows 8

Subscribe to our podcast via iTunes, Zune, or RSS

If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information:

Websites:

Developing for Windows 8 in 1/2 the time!

Watch previous episodes here...
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Oct
22
2012

Microsoft DevRadio: Using Event Handlers

To play video, hover above and press play button.

Abstract: win8genapp30
In today's episode, Michael Palermo shows how easy it is to attach event handlers in JavaScript. Watch this short demo to see the various techniques to do it!

Next Steps:
Step #1 – Download Windows 8 and Windows 8 SDK
Step #2 – Download Visual Studio Express for Windows 8
Step #3 – Start building your own Apps for Windows 8

Subscribe to our podcast via iTunes, Zune, or RSS

If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information:

Websites:

Developing for Windows 8 in 1/2 the time!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).

Resources

Archives

Team Blogs

Download OPML file OPML