Roel van Lisdonk on October 20th, 2014

 

Here’s a plunkr demonstrating, binding a kendo mobile switch

http://plnkr.co/edit/KlJ4JW?p=preview

image

 
 

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="spike">
<head>
    <!–
        This page can be used as a base for spiking with jQuery, AngularJS and Kendo.
        All scripts and styles are loaded from a CDN or inline.
    –>
    <title>Spike page</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!– Use highest support for modern standards . –>
    <!– Library styles –>
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.silver.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.silver.mobile.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.silver.min.css" rel="stylesheet" />

    <!– Library scripts –>
    <script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.1008/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

    <!– App styles –>
    <style>
        /*
            A small custom reset stylesheet is used, to fix style differences between browsers.
        */
        html, body {
            height: 100%; /* App layout uses a 100% height layout. */
        }

        body, div, p, ul, li {
            border: 0; /* Remove unwanted space. */
            -webkit-box-sizing: border-box; /* Place the border and padding inside the box. */
            -moz-box-sizing: border-box; /* Place the border and padding inside the box. */
            -ms-box-sizing: border-box; /* Place the border and padding inside the box. */
            -o-box-sizing: border-box; /* Place the border and padding inside the box. */
            box-sizing: border-box; /* Place the border and padding inside the box. */
            margin: 0; /* Remove unwanted space. */
            outline: 0; /* Remove unwanted space. */
            padding: 0; /* Remove unwanted space. */
        }

        body {
            padding: 20px; /* Create space between browser border and content. */
            min-width: 320px; /* App will not work beneath width: 320px. */
        }

        .km-switch {
            margin-top: 20px;
        }

        .km-switch, .km-checkbox, .km-switch-label-on, .km-switch-label-off {
            cursor: pointer;
        }
    </style>

    <!– App scripts –>
    <script>

        (function () {
            "use strict";

            // This is the starting point (main) for the angular app.
            var app = angular.module("spike", ["kendo.directives"]);
        }());

        (function () {
            "use strict";

            var app = angular.module("spike");

            var controller = function ($scope, service) {
                $scope.message = "The switch should show YES:";
                $scope.isChecked = true;
            };

            app.controller("MainController", ["$scope", controller]);
        }());
    </script>
</head>
<body>
    <div ng-controller="MainController">
        <div>{{ message }}</div>
        <div><input kendo-mobile-switch type="checkbox" k-on-label="’Yes’" k-off-label="’No’" k-ng-model="isChecked" value="{{ isChecked }}" /></div>
    </div>
</body>
</html>

 
 
 

Tags: ,

Roel van Lisdonk on October 17th, 2014

AngularJS Batarang is a Google Chrome plugin, that helps you identify problems in AngularJS apps.

 

For example in my last app, a Kendo UI chart was not showing correctly, so I opened the Google Chrome developer tools and switched to the AngularJS tab.

 

After selecting the correct scope, I could immediately see, I had made a mistake in my code.

image

Nice!

 

image

Tags:

Roel van Lisdonk on October 17th, 2014

Microsoft Visual Studio 2013 Update 4 RC can be downloaded at: http://www.microsoft.com/en-us/download/confirmation.aspx?id=44545

 

It contains many new features for an update: http://blogs.msdn.com/b/webdev/archive/2014/10/16/announcing-new-web-features-in-visual-studio-2013-update-4-rc.aspx

 

The thing I like the most:

 

Support for custom elements, polymer-elements and attributes

We no longer validate unknown attributers for custom elements as there will be many custom made tags in different frameworks. So there will no longer be squiggles under the unknown elements.

clip_image005[5]

Tags:

 

If you want to speed up your SPA development process, it would be nice if you could reload all browser currently showing your SPA, when you press CTRL-S in Visual Studio 2013. The build-in Browserlink provides this feature for ASP .NET WebForms en ASP .NET MVC, but you could also use BrowserSync, which will work with any editor.

 

BrowserSync

 

1. Download node.js http://nodejs.org/download/

2. Install node.js (next – next – finish)

3. Open a command prompt (with administrator privileges) and enter:

4. npm install -g browser-sync

5. Change directory to the location of your Visual Studio solution file:

    – CD “C:\Projects\MyProject”

5. Start your web application in Visual Studio by pressing F5

    – Look at the browser address bar to get the URL to connect BrowserSync to, in my case localhost:50367

6. To start watching all files in all subfolders, at the command prompt enter:

    browser-sync start –proxy "localhost:50367" –files "**.*"

 

This will start a new instance of the default browser on an other port, showing your site connected to BrowserSync

In my case the new url was: http://localhost:3000/

Now when you edit a file in Visual Studio en press CTRL-S the browser at http://localhost:3000 will be refreshed.

 

BrowserLink

BrowserLink is provided in the box with Microsoft Visual Studio 2013, but OOB it will not work with SPA applications created with only html, JavaScript and CSS files.

To get BrowserLink working with those kind of web applications add the following to the web.config:

<system.webServer>
    <handlers>
            <add name="Browser Link for HTML" path="*.html" verb="*"
           type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
           resourceType="File" preCondition="integratedMode" />
    </handlers>
  </system.webServer>

The good thing about BrowserLink that it is in the box and you don’t have to specify all subfolders you want to watch.

The downside is that you still have to use CTRL-S and CTRL-ALT-ENTER. This can be an upside if you want to edit multiple files en then refresh the connected browsers.

For now I will stick with BrowserLink, because it’s in the box.

 

Note: when using the “empty” asp .net template, I could not get BrowserLink to work, but when I used the web api template all was just fine.

Tags:

Roel van Lisdonk on October 1st, 2014

Are you using that old operating system called Windows 8.1?

That’s so september 2014, meet Windows 10:

 

 

windows10

 

Using keyboard selection and then CTRL-C and CTRL-V to copy and paste text is a feature that should have been in Windows 3.11 Smile.

 

image

Tags:

Roel van Lisdonk on September 8th, 2014

Kudos to Chris Love:

 

 

 

http://www.love2dev.com/#!article/Chrome-and-Pointer-Events-Its-Not-Over-but-We-Need-Your-Help

 

 

What Can You Do?

I got wind the Blink team, that is the team that created Google’s Chrome browser, is watching the Chromium bug tracker issue #162757. This is the issue/bug report filed to have pointer events added to Chrome. They are trying to gauge how popular the API is with developers. The metric is how many times the issue is starred.

 

Chromium Pointer Events Bug Issue 162757

 

So please take a moment and tap the star in the top-left corner of the page and register your vote in support of pointer events in Chrome. Then tell some friends to do the same. Maybe the Blink team will take notice and use the code that was checked into the WebKit source almost 2 years ago and give developers an easy to use input modality abstraction API. In the end developers will have a much easier time dealing with new input modalities and end users can have better user experiences.

Tags:

Roel van Lisdonk on September 5th, 2014

If you want to reliable bring the main window of an external process to the foreground in C#, use the “simulate alt key” technique found at: http://stackoverflow.com/questions/10740346/setforegroundwindow-only-working-while-visual-studio-is-open

Just start Notepad, then run the following test in Visual Studio.

It should bring Notepad as a maximized window in the foreground.

namespace Research.EndToEndTests
{
    using Microsoft.VisualStudio.TestTools.UnitTesting;
    using System;
    using System.Diagnostics;
    using System.Runtime.InteropServices;

    [TestClass]
    public class ResearchTester
    {
        
        [TestMethod]
        public void Test()
        {
            Reliable_set_window_to_forground();
            Assert.IsTrue(true);
        }

        public void Reliable_set_window_to_forground()
        {
            Process[] processes = Process.GetProcesses();
            foreach (Process proc in processes)
            {
                if (ProcessIsNotepad(proc))
                {
                    ActivateWindow(proc.MainWindowHandle);
                }
            }
        }

        public bool ProcessIsNotepad(Process proc) 
        {
            return proc.MainWindowTitle.EndsWith("Notepad", StringComparison.InvariantCultureIgnoreCase);
        }
        
        private const int ALT = 0xA4;
        private const int EXTENDEDKEY = 0x1;
        private const int KEYUP = 0x2;
        private const int SHOW_MAXIMIZED = 3;

        [DllImport("user32.dll")]
        private static extern IntPtr GetForegroundWindow();
        [DllImport("user32.dll")]
        private static extern void keybd_event(byte bVk, byte bScan, uint dwFlags, int dwExtraInfo);
        [DllImport("user32.dll")]
        private static extern bool SetForegroundWindow(IntPtr hWnd);
        [DllImport("user32.dll")]
        private static extern bool ShowWindow(IntPtr hWnd, int nCmdShow);
        
        public static void ActivateWindow(IntPtr mainWindowHandle)
        {
            // Guard: check if window already has focus.
            if (mainWindowHandle == GetForegroundWindow()) return;

            // Show window maximized.
            ShowWindow(mainWindowHandle, SHOW_MAXIMIZED);
            
            // Simulate an "ALT" key press.
            keybd_event((byte)ALT, 0x45, EXTENDEDKEY | 0, 0);
                        
            // Simulate an "ALT" key release.
            keybd_event((byte)ALT, 0x45, EXTENDEDKEY | KEYUP, 0);

            // Show window in forground.
            SetForegroundWindow(mainWindowHandle);
        }
    }
}

Tags:

The roslyn compiler found in Visual Studio 14 enables us, to adjust C# code during runtime, by compiling the new C# code in-memory. Now we can edit the UI part (HTML, CSS, JavaScript) of a single page app, including the backend C# ASP .NET Web Api service dynamically in runtime.

 

On of the things, that disrupts my workflow, when creating a single page app with AngularJS, backed by a web api C# service in Visual Studio 2013, is the fact that, when I find a bug in my C# code while testing the UI, I have to stop the debugger, adjust the web api C# code, re-compile, re-run and then recreating state in the web app before I can resume testing the UI.

This pain will go away, when using Visual Studio 14

 

Download and install Visual Studio 14 CTP 3 from http://msdn.microsoft.com/en-US/subscriptions/downloads/

Open Visual Studio, choose File > New > Project …

 

image

 

image

 

Start the web application by pressing CTRL + F5 (so don’t start the debugger).

 

image

 

Click on the Contact page in the browser:

You will see the text “Your contact page”.

image

 

Now go to the Controllers\HomeController.cs

image

 

Adjust the the C# code: ViewBag.Message = "Your contact page.";

to

ViewBag.Message = "My contact page.";

 

image

 

Save the file and in the browser press F5, you might see a short delay, because the roslyn compiler is now dynamically compiling the code.

 

The C# code is changed without disrupting my workflow.

 

image

Tags: ,

Roel van Lisdonk on September 4th, 2014

All new C# 6 and beyond features and their status, can be found at:

https://roslyn.codeplex.com/wikipage?title=Language%20Feature%20Status&referringTitle=Home

This sight also contains the design meetings, so you are able to predict which direction the creators of C# are taking.

 

This new Microsoft Open Source thing, rocks!

Tags:

I was testing some JavaScript ajax code found at: http://youmightnotneedjquery.com/ and I was getting the error:

 

Uncaught ReferenceError: request is not defined from ReferenceError: request is not defined
   at Object.rli.app.self.makeXmlHttpRequest (
http://localhost:50258/Client/Features/Posts/request_is_not_defined.html:27:25)
   at Object.rli.app.self.onExecuteClick (http://localhost:50258/Client/Features/Posts/request_is_not_defined.html:55:22)
   at HTMLButtonElement.onclick(http://localhost:50258/Client/Features/Posts/request_is_not_defined.html:12:145) request_is_not_defined.html:63
Uncaught ReferenceError: request is not defined

 

image

 

Cause

This was caused by the line:

request = new XMLHttpRequest();

When you use ‘use strict’, variables need to be defined before use.

Solution

So adding var before request fixed the problem:

<!DOCTYPE html> <html> <head> <title>Vanilla JavaScript.</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> </head> <body> <div class="spa-page"> <button onclick="rli.app.onExecuteClick()">Execute</button> </div> <script type="text/javascript"> // Use a namespace to prevent pollution of the global namespace. var rli = rli || {}; // Define application root object. rli.app = (function () { 'use strict'; var self = {}; self.makeXmlHttpRequest = function () {

// When "var" is removed from this line, an error is thrown:
// Uncaught ReferenceError: request is not defined.
var request = new XMLHttpRequest();

request.open('GET', 'http://www.google.com', true); request.onload = function () { if (this.status >= 200 && this.status < 400) { // Success! var data = JSON.parse(this.response); console.log(data); } else { // We reached our target server, but it returned an error. console.log("Error status not between 200 and 400."); } }; request.onerror = function (e) { // There was a connection error of some sort. console.log(e); }; request.send(); }; self.onExecuteClick = function () { self.makeXmlHttpRequest(); }; self.start = function () { // Define global exception handler. window.onerror = function (message, file, line, col, error) { console.log(message, "from", error.stack); }; }; return self; })(); // Start the application. rli.app.start(); </script> </body> </html>

Tags: