Wednesday, September 19, 2012

Getting SignalR and PhoneGap Working Under Windows Phone Emulator

I am learning both PhoneGap and SignalR and figured out tonight how to enable both polling and message sending under PhoneGap, at least within the Windows Phone emulator. I have not tried on my Android phone yet. That will wait until I deploy the server hub.


Server Side Code

using SignalR.Hubs;

namespace Vocab.SignalR.SignalR.Sample
{
    public class Chat : Hub
    {
        public void Send(string message)
        {
            // Call the addMessage method on all clients
            Clients.addMessage(message);
        }
    }
}

Yes. That is all. That means when any JavaScript client calls the Send method, the server will dispatch the message to all connected clients by calling their "addMessage" JavaScript method. Clients is declared as dynamic to allow this to work.

HTML & JavaScript Code Under PhoneGap and Windows Phone Emulator

Pay attention most to the blue italicized lines. That's what I had to do in order for the Windows Phone emulator and/or PhoneGap to work properly. At one point before both of those lines, I had it able to get new messages when sent by the server, but it would not send messages to the server. Now it all works! See the section underneath for a standard HTML client that I run within a web browser on the desktop, which has nothing to do with PhoneGap or mobile jQuery whatsoever. But, both the phone app and the page are able to send and receive messages from and to each other now.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Chat</title>
    <link rel="stylesheet" href="jquery.mobile-1.0.1.css" />
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.0.1.js"></script>
    <script type="text/javascript" src="http://jgough/SignalR/Scripts/jquery.signalR-0.5.3.js"></script>
    <script type="text/javascript" src="http://jgough/SignalR/signalr/hubs"></script>
    <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
    <style type="text/css">
        .ui-title
        {
            font-weight: bold;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $.connection.hub.url = "http://jgough/SignalR/signalr";

            // Grab the hub by name, the same name as specified on the server
            var chat = $.connection.chat;

            chat.addMessage = function (message) {
                $('#chatMessages').append('<li>' + message + '</li>');
            };

            $.connection.hub.start({ jsonp: true });

            $("#sendChatMessage").click(function () {
                var message = $("#chatMessage").val();
                console.log("Message: " + message);
                chat.send(message);
            });
        });
    </script>
</head>
<body>
    <div id="home" data-role="page">
        <div data-role="header">
            <h1>
                Chat!</h1>
        </div>
        <div data-role="content">
            <h2>
                Chat your heart out...</h2>
            <div>
                <textarea id="chatMessage"></textarea>
                <br />
                <a id="sendChatMessage" data-role="button">Send Chat Message</a>
            </div>
            <ul id="chatMessages">
            </ul>
        </div>
        <div data-role="footer" data-position="fixed">
            Thank you for chatting
        </div>
    </div>
</body>
</html>

Regular HTML / JavaSript Page for Desktop Browsers

You may notice that not all the variable names or page elements have the same names. This is fine. The only important part is that the chat instance have an "addMessage" function, and that when the #broadcat button is clicked it calls client.send, as both of these correspond to what we saw above in the server hub code.

<html>
<head>
    <script src="../Scripts/jquery-1.8.1.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.signalR-0.5.3.js" type="text/javascript"></script>
    <script src="../signalr/hubs" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // Proxy created on the fly
            var chat = $.connection.chat;

            // Declare a function on the chat hub so the server can invoke it
            chat.addMessage = function (message) {
                $('#messages').append('<li>' + message + '</li>');
            };

            $("#broadcast").click(function () {
                // Call the chat method on the server
                chat.send($('#msg').val());
            });

            // Start the connection
            $.connection.hub.start();
        });
    </script>
</head>
<body>
    <input type="text" id="msg" />
    <input type="button" id="broadcast" value="broadcast" />
    <ul id="messages">
    </ul>
</body>
</html>







Sunday, September 16, 2012

The Fragile Managerfesto Patterns: Bad Boss Behaviors

This is a video in draft form of what I want to become a launching pad for demonstrating many "Bad Boss Behaviors" and the remedies for them that agile practices bring.

So far in this one we have:
  1. Barge In Boss: Manager, unaware of what an employee is working on, interrupts him.
    1. Agile Remedy: Visible Workspace and Tools
  2. Belittler Boss: Denigrates the employee's desire to improve the customer experience
    1. Agile Remedy: clear values and an outward, customer focus
  3. Pinheaded Policy Pushing Boss: Imposes strict, top-down, and very draconian policy requirements on the employee.
    1. Agile Remedy: living standards and openness to modern and changing realities
  4. I'm Louder = More Power Boss: the boss, when his thinking is challenged, responds by speaking louder, emphasizing he has more power than the employee.
    1. Agile Remedy: a flatter structure, managers who are not bosses, but service-oriented leaders and hands-on
  5. Priorities Ping Pong Boss: this boss exercises his control by shifting employees from one priority project to another at will, often leaving a trail of unfinished work behind.
    1. Agile Remedy: singluar focus until completion on tasks and projects, not rapid reassignment based on a "fighting fires" approach.
  6. Everything's Easy and Instant Boss: this boss assures you that your new assignment is simple, will not take long, and must be done instantly, no matter what. These bosses continually assign a fixed, non-negotiable amount of work to someone and require that it be completed by a fixed, non-negotiable, and arbitrary deadline. In software development, this is a typical "waterfall" or "big bang all at once" approach.
 This list is a simple draft too. But, I really like having short-hand names for these bad behavior patterns, so it would also be nice to have short-hand names for the good behaviors.

We're going to record the results of what happens with an Everything's Easy and Instant Boss does push his a arbitrary deadline onto a much smaller scale: that of reading a couple of paragraphs. It's kind of an obvious failure case, isn't it? But, if a human being cannot predict with any accuracy how long a couple of paragraphs will take to read aloud, then why do they keep getting away with telling customers that a project can be "complete with high quality and correctness" by an arbitrary deadline?

Things that make you go Hmmmmmm.