In my recent blog post I wrote about the technical aspects of using the Nancy framework, in this post I’d like explain the “what did I want to achieve” a bit more. Maybe it inspires other people to think about possible self-hosting scenarios that combine desktop and web software.
The Desktop Software
One of my hobbies involves writing software for the local basketball club, the Telekom Baskets Bonn. Except the actual score board (which is a commercial product), virtually anything shown on the back projection screens in the arena is displayed by software I wrote. For me that’s the ultimate hobby: coding, designing, creating videos/graphics – all connected to my favorite sport, basketball.
To get an idea, this is what things look like in the arena before the doors open on a game day:
My older software RemoteCanvas (see this old blog post from 2006) is used for showing videos, graphics and PowerPoint slides, my newer project LiveTexter uses WPF to dynamically generate views like these:
LiveTexter runs in a two-display configuration on a laptop. The projection screens are hooked up (via some video hardware) to the VGA port, the laptop screen shows the control console:
The Web Client
Over time, the number of views, especially for live stats, grew large enough that a TV-style “halftime report” (without video, though) became feasible. The idea was to let the hosts of the internet radio show “Baskets FanRadio” analyze the first half on the court in front of a camera while picking the views they needed themselves on a mobile device.
Marius Volkmann (left) and Marc Hartenstein (right) at the home game on Saturday; Marius is holding an iPad with the browser running the web client. Photo used with permission by Jörn Wolter, www.wolterfoto.de)
The software was supposed to be as simple as possible for the first version, so the “remote control” is simply a bunch of preview pictures on a (long) web page. Tapping a picture makes the corresponding view appear on the screens in the arena. This is what it looks like on the iPad:
The right part of the web page is left blank for safe scrolling using the right thumb, which turned out to be very important for holding the device safely with one hand. This is the perfect example of context when using software on mobile devices – when writing and testing the software at home, I simply forgot about the fact that the people using the software had to carry a microphone in one of their hands. Next season we either need headsets or a lectern…
The results at the Baskets home game on Saturday were encouraging, so I’m looking forward to write a second, more dynamic version over the summer.
I recently had the requirement to control a desktop application from a mobile device. The application, written using Windows Presentation Foundation (WPF) uses the secondary monitor of a system in full-screen mode, generating views that are shown on projection screens in a sports arena. More on the background story in a later blog post. [Update: the post is now online]
When I write “control” I mean that I wanted to be able to
- see a preview of the 10-30 possible views; the views are rather static, so a static preview with a manual refresh is sufficient.
- tap a preview picture and make the application show the corresponding view on the projection screens
The “mobile device” should not be limited to a specific platform, so the least complicated solution that came to my mind was to let the desktop app host “something” that would let me open a web page in a mobile browser. The web page could show the preview pictures, tapping one of the pictures would use some JavaScript to call a specific URL (without navigating away from the web page).
So the requirements were:
- http://hostname:port/ returns the HTML for the web page
- http://hostname:port/images/filename.jpg returns a picture used by the web page
- Calling http://hostname:port/commands/show/provider/view tells the desktop application to show a specific view generated by a specific provider.
If you search the web for e.g. “wpf web server self-hosting”, you’ll sooner or later come across various recommendations, with the name Nancy popping up here and there. The Nancy framework advertises itself as follows (quote):
Nancy is a lightweight, low-ceremony, framework for building HTTP based services on .Net and Mono. The goal of the framework is to stay out of the way as much as possible and provide a super-duper-happy-path to all interactions.
In this blog post I’ll give some tips for using Nancy in the scenario I’ve outlined above, but please don’t expect ready-to-use code.
How to get Started
The Nancy website is at http://nancyfx.org/. Don’t be put off by the black background, just take a look at the small code snippet for a hint on the overall experience.
The NuGet packages you’ll need are Nancy itself (of course) and Nancy.Hosting.Self.
The next stop is the documentation; after reading the Introduction I headed straight to Self Hosting Nancy – this was looking promising enough in terms of simplicity to keep me going.
Do not ignore the section HttpListenerException, i.e. don’t stop reading at “may be thrown”, understand it as “will be thrown”. The netsh command line in the documentation is for a specific user, in my scenario I wanted anybody (in the heavily restricted network) to be able to access. In this case you’ll need the following command line (replace port with the actual port number):
netsh http add urlacl url=http://+:port/ sddl=D:(A;;GX;;;WD)
How you’ll proceed from here depends on your personal style. Combining the code snippets from the Introduction and Self Hosting pages will give you a first feeling of success with “Hello World” appearing in your browser.
General Remarks on (Learning) Nancy
The Nancy framework is simple to use, but that doesn’t mean you get around learning the basics. Two recommendations:
- If you share my feeling that the Nancy documentation has the tendency to dive into the specifics a bit too fast (which later may be great, usually framework docs are too shallow), read the article “Understanding Nancy – Sinatra for .Net”. I found it very helpful because it explains the core terms in a very concise way.
- Not a groundbreaking insight, but true nevertheless: If you learn a new framework, set breakpoints everywhere to learn the life cycle. It is especially important to know what gets instantiated when and how often.
Some Remarks on Self-Hosting in an Existing Application
- I had trouble getting the Razor view engine to work, searching the web I had the feeling that I’m not alone. I didn’t dig much deeper as the “Super Simple View Engine” does everything I needed.
- When you self-host in a desktop application and want an incoming call of a URL to have an effect on the GUI, keep in mind that the GUI can only be updated from the UI thread. In the case of WPF, you’ll have to use on the Dispatcher.BeginInvoke pattern, e.g.
Application.Current.Dispatcher.BeginInvoke((Action) (()=>
{
// Update UI
}));
- My application uses the Managed Extensibility Framework (MEF) and I needed a specific application service (IRemoteAccess) inside a Nancy module. The “Nancy-way” to pass something to a Nancy module (that is instantiated for each request) is to use dependency injection (DI) via a constructor parameter. Nancy uses an IoC container called TinyIoC for DI and bridging the world of MEF and TinyIoC isn’t complicated. If you use Nancy, you’ll sooner or later have a “bootstrapper” class that is used for tweaking things in Nancy – that’s where you can e.g. put stuff you’ll need later into the TinyIoC container:
public class RemoteAccessBootstrapper : DefaultNancyBootstrapper
{
public static CompositionContainer MefContainer { get; set; }
protected override void ApplicationStartup(TinyIoCContainer container,
Nancy.Bootstrapper.IPipelines pipelines)
{
// …
container.Register(MefContainer.GetExportedValue<IRemoteAccess>());
}
// ...
}
The Web Client
The project was a spontaneous idea with a very tight deadline, so the “client” is a single static web page. Tapping on one of the preview pictures is supposed to access a specific URL without navigating away from the page. In the spirit of “the simplest thing that could possible work” I used the following bit of JavaScript code I found on StackOverflow:
function show(provider, view) {
var i = document.createElement("img");
i.src = "commands/show/" + provider + "/" + view;
}
Over the summer the client will be rewritten completely as a single page application, inspired by the article “AngularJs, NancyFx, TypeScript, and BootStrap Oh My!”. The goal is to include more sophisticated features in the client and have learn new technology along the way.
Final Verdict
In the short time I had available I didn’t do thorough research what could be the best solution to my problem, but what I can say is that Nancy did its job well enough I can recommend it – at least for this specific scenario.
Nancy kept the promise of simplicity, but at the same time I always had the feeling whenever I needed “more”, there was a way for me to customize / tweak it without jumping through hoops.
Nice one!
Die dotnet Cologne, organisiert von Bonn-to-Code.Net und der .net user group Köln ist, schaltet am 21.3.2013 um 12:00 die Anmeldung frei.
Das Anlegen oder Aktualisieren von Accounts (von früheren Konferenzen oder Kölner User-Treffen) ist bereits jetzt möglich und auch sehr zu empfehlen. Denn erfahrungsgemäß sind die Tickets mit Frühbucherrabatt (für die ersten 200 Plätze) heiß begehrt, da zählt jede Sekunde.
Die mit 350 Teilnehmern mittlerweile größte deutsche .NET Community-Konferenz findet zum fünften Mal statt, Veranstaltungsort ist das Komed im Mediapark Köln.
Wir – das sind Melanie Eibl, Stefan Lange, Albert Weinert und ich – freuen uns sehr, ein volles Programm mit Rundum-Sorglos-Paket bieten zu können.
30 Sessions auf 6 Tracks, ein kleines Frühstück, Mittagessen, Kuchen am Nachmittag, Kaffee und Softdrinks den ganzen Tag über, freies WLAN - und das wieder zu absolut fairen Preisen:
Für Privatpersonen
- 25€ im Super-Early-Bird
- 40€ im Early-Bird
- 55€ regulär
(Preise inkl. MwSt., Zahlung per Vorkasse, Rechnung nach Zahlungseingang, ausgestellt auf die Privatadresse, ohne Nennung eines Firmennamens)
Für Firmen/Firmenangehörige auf Rechnung
Für die Firmenanmeldung gilt:
- Die Bezahlung geschieht auf Rechnung (die automatisch nach der Anmeldung verschickt wird)
- Die Anmeldung kann auch eine Kontaktperson vornehmen, die selbst nicht an der Konferenz teilnimmt
- Mehrere Teilnehmer können auf einmal angemeldet werden
- Last but not least: Der Firmenname erscheint auf den Teilnehmerausweisen, eine gute Gelegenheit “Flagge zu zeigen”
Termin merken und weitersagen: 21.3.2013 um 12:00
Alle Informationen zur Konferenz gibt es auf www.dotnet-cologne.de.
Am 3. Mai 2013 findet im Mediapark Köln die dotnet Cologne 2013 statt. Damit die mittlerweile fünfte Ausgabe dieser Community-Konferenz wieder ein solcher Erfolg wie in den Vorjahren wird, suchen wir (Stefan Lange, Melanie Eibl, Albert Weinert und ich) Sprecher mit interessanten Vorträgen zu Technologien aus dem Microsoft-Umfeld.
Dabei wünschen wir uns sowohl Einführungsvorträge in neue Themen als auch die eine oder andere “Level 400 Hardcore-Session” für Spezialisten. Für beides sind passende Räume im Komed vorhanden, das auch in diesem Jahr wieder Veranstaltungsort sein wird.
Alle Infos zum Call for Papers gibt es hier.
Über die dotnet Cologne
Die dotnet Cologne, die 2009 zum ersten Mal stattfand, hat sich im Laufe der Jahre mit mittlerweile 350 Teilnehmern zur größten .NET Community-Konferenz in Deutschland entwickelt. Veranstaltet von den .NET User Groups Bonn-to-Code.Net und .net user group Köln, versteht sich die dotnet Cologne als Konferenz von Entwicklern für Entwickler.
Just a quick note to myself (and others that may stumble across this blog entry via a web search): If a WPF application is running slow inside the debugger of Visual Studio 2010, but perfectly fine without a debugger (e.g. by hitting Ctrl-F5), then the reason may be Intellitrace.
In my case switching off Intellitrace (only available in the Ultimate Edition of Visual Studio 2010) helped gitting rid of the sluggish behavior of a DataGrid. In the “Tools” menu select “Options”, on the Options dialog click “Intellitrace” and then uncheck “Enable Intellitrace”.
Note that I do not have access to Visual Studio 2012 at the time of this writing, thus I cannot make a statement about its debugging behavior.
The Morning Brew is a great news source for developers for many years now. In a recent post it mentioned an extension for Visual Studio 2010 and 2012 called IntelliCommand that implements something that I had wanted for quite some time: A dynamic help for hotkeys.
IntelliCommand shows a popup
- when you press and hold Ctrl, Shift or Alt (or combinations thereof) for a configurable amount of time, or
- after you press the first key combination of a chord shortcut key (e.g. Ctrl-E) and wait for an (independently configurable) amount of time.
In the following screenshot I pressed and released Ctrl-E, and after a short delay the popup appeared:
The extension is available in the Visual Studio Gallery, so finding, downloading and installing it via the Extension Manager is extremely simple:
The default delays (2000 / 1600 milliseconds) are a bit long for my liking, but this can be changed in Tools – Options:
So far things are working great on my machine. Some known issues do seem to exist, though (e.g. that the extension doesn’t work on non-EN versions of Visual Studio). See the author’s comments in the announcement blog post and in the Visual Studio Gallery for more information.
In an ideal world, all data you need from the web would be available via well-designed services. In the real world you sometimes have to scrape the data off a web page. Ugly, dirty – but if you really want that data, you have no choice.
Just don’t write (yet another) HTML parser.
I stumbled across the Html Agility Pack (HAP) a long time ago, but just now had the need for a robust way to read HTML.
A quote from the website:
This is an agile HTML parser that builds a read/write DOM and supports plain XPATH or XSLT (you actually don't HAVE to understand XPATH nor XSLT to use it, don't worry...). It is a .NET code library that allows you to parse "out of the web" HTML files. The parser is very tolerant with "real world" malformed HTML. The object model is very similar to what proposes System.Xml, but for HTML documents (or streams).
Using the HAP was a simple matter of getting the Nuget package, taking a look at the example and dusting off some of my XPath knowledge from years ago.
The documentation on the Codeplex site is non-existing, but if you’ve queried a DOM or used XPath or XSLT before you shouldn’t have problems finding your way around using Intellisense (ReSharper tip: Press Ctrl+Shift+F1 on class members for reading the full doc comments).
[Update 2012-09-18: Die Veranstaltung wurde zwischenzeitlich in “Developer Open Space umbenannt”; die Anmeldung ist jetzt freigeschaltet]
Der .NET Open Space in Leipzig, der 2012 zum 5. Mal stattfindet, ist um einen Workshop-Tag erweitert worden. Am Freitag den 19.10.2012, also vor dem eigentlichen Open Space am 20./21.10, werden bekannte Namen aus der Community zu jeweils einem Thema einen ganzen Tag gestalten.
Es freut mich sehr dass die Veranstalter mich gebeten haben, den UI/UX Workshop beizusteuern, den ich im Juni auf der Spartakiade-Konferenz in Berlin gehalten habe.
Hier der offizielle Ankündigungstext zu meinem Workshop:
Keinen dedizierten GUI-Designer im Team, wenig Budget um über Oberflächen nachzudenken – da ist es umso wichtiger, dass auch Software-Entwickler in der Lage sind, solide gestaltete GUIs zu entwerfen.
Dieser (selbst für absolute GUI-Laien geeignete) Workshop vermittelt die Grundlagen um den entscheidenden Schritt von einer schlechten zu einer zumindest brauchbaren Benutzeroberfläche zu machen. Vom Crash-Kurs in visuellem Design über die Klärung der Frage, was User Experience eigentlich ist und welche Rolle Emotionen dabei spielen, bis hin zu einer analytischen Betrachtung von Darstellung und Interaktion. Und das Ganze natürlich stets mit Blick auf die praktische Verwendung.
Die Vortragsteile wechseln sich ab mit Übungen in kleinen Gruppen, in denen die Teilnehmer das Erlernte praktisch einsetzen und in Diskussionen weiter vertiefen. Der gesamte Workshop ist "code free" und unabhängig von konkreten UI-Technologien, stattdessen werden ganz klassisch Stift und Papier eingesetzt. Dabei wird mancher erstaunt sein, wie effektiv diese "analoge" Art des Arbeitens sein kann – und auch, dass selbst ohne große Zeichenkünste Skizzen vorzeigbar aussehen können.
Der Workshop in Berlin war für mich der erste seiner Art (ich bin beruflich nicht als Trainer tätig) und daher sehr spannend. Das Feedback war äußerst positiv, gleichzeitig freue ich mich schon darauf, bei der Neuauflage in Leipzig die gewonnenen Erfahrungen einfließen zu lassen. Ich kann auf jeden Fall einen interessanten Tag versprechen, bei dem der Spaß nicht zu kurz kommt.
Details zur Anmeldung gibt es demnächst auf der Website des .NET Open Space unter netopenspace.de/2012.
Anmeldung unter http://devopenspace.de/2012/Anmeldung.ashx
Eine Übersicht über alle meine kommenden und zurückliegenden Termine bietet übrigens die Website ux4devs.de.
Vom 2. bis 6. Juli war ich mit den Themen User Interfaces / User Experience für Entwickler und User Interface Patterns bei .NET User Groups in Dresden, Leipzig, Braunschweig, Osnabrück und Hamburg zu Gast.
(.NET User Group Hamburg)
Das Vortragsmaterial sowie Information zu kommenden Terminen gibt es auf meiner Website ux4devs.de.
Das Feedback der Veranstalter und Teilnehmer vor Ort war äußerst positiv, was eine schöne Bestätigung für den Aufwand darstellt, der in die Vorbereitung geflossen ist.
Ich möchte mich an dieser Stelle bedanken:
- Bei den Teilnehmern, die mit ihren Fragen spannende Diskussionen in Gang setzten und so keinen der Abende zu langweiliger Routine verkommen ließen. So haben sich die von mir für die Woche genommenen Urlaubstage, die ich als Investition in meine persönliche Weiterbildung sehe, im Nachhinein sogar noch stärker gelohnt als gedacht.
- Bei den Veranstaltern vor Ort für die Einladung zum Essen nach dem Vortrag bzw. in der Pause.
- Und nicht zuletzt bei der INETA Deutschland, die durch die Übernahme von Hotel- und Reisekosten diese Tour erst möglich gemacht haben.
Es wird dieses Jahr noch einige Termine geben (Infos dazu wie gesagt auf ux4devs.de), und für nächstes Jahr werde ich mir definitiv wieder ein interessantes UI/UX-Thema einfallen lassen!
Ich bin ja das ganze Jahr über immer wieder mal bei .NET User Groups mit dem Thema “User Interfaces / User Experience für Entwickler” zu Gast, aber in der ersten Juliwoche kommt es geballt – da bin ich von Montag bis Freitag jeden Abend in einer anderen Stadt:
- 2. Juli Dresden
- 3. Juli Leipzig
- 4. Juli Braunschweig
- 5. Juli Osnabrück
- 6. Juli Hamburg
Genauere Infos gibt es auf meiner neuen Website ux4devs.de, auf der ich ab sofort alles Wissenswertes zu meinen Vorträgen und Workshops sammle.
Wer sich als Entwickler bei User Interfaces nicht nur für die Technik interessiert (um die es in den Vorträgen kaum gehen wird), sondern auch mal in die Bereiche visuelle Gestaltung und User Experience hineinschnuppern möchte, sollte auf jeden Fall vorbeischauen.
Die Veranstaltungen sind kostenlos, was nicht zuletzt durch die freundliche Unterstützung der INETA Deutschland möglich wurde.
Für mich persönlich wird es eine tolle Tour, auf der ich viele alte Bekannte treffen und sicherlich einige neue Kontakte kennenlernen werde.
More Posts
Next page »