Microsoft Touch Develop auf der #dwx14

Die TOP TECHNOLOGIES hat eine lange Historie, was das Thema Touch Develop betrifft. Bereits 2012 haben wir darüber berichtet, nachdem es kurz zuvor noch ein spaßiges April-Video von Microsoft gab, in dem das Thema verulkt wurde.

Seit dem hat sich viel getan. Touch Develop gibt es mittlerweile in der Version 3.2 auf dem Windows Phone und die Verfügbarkeit hat sich seit dem Sprung auf 3.x spürbar erhöht: Egal ob Windows Phone, Windows, Mac, iPhone, Android, Tablets jeder Art: Touch Develop kann überall verwendet werden – einen aktuellen Internet Browser vorausgesetzt.

Mittlerweile zieht es nicht mehr nur Spiele-Entwickler auf diese Plattform, sondern auch Entwickler von Tools und kleineren Business Apps. Auf der diesjährigen #dwx14 wird TOP TECHNOLOGIES zudem zeigen, wie einfach es ist, mittels Touch Develop auf dem Windows Phone Software zu entwickeln, mit der sich via Bluetooth sogar externe Geräte ansprechen lassen. Und mit “externe Geräte” meinen wir Roboter!

Touch Develop vereint gleich mehrere Eigenschaften unter einer Haube, die es zu einer ernstzunehmenden Möglichkeit haben heranreifen lassen, Software zu entwickeln: Plattformunabhängigkeit, die Möglichkeit Sensoren auszulesen und der kontextabhängige Editor, mit dem sich selbst auf kleinen Touch-Displays sehr schnell Ergebnisse erzielen lassen.

Diese Session bietet einen Einstieg mit Touch Develop  in die Zukunft der mobilen Softwareentwicklung.

How to turn virtually ANY website you like into a real Windows Phone app in only minutes

Despite the rest of the content on this blog, this article is written in english for the simple reason of reaching more people, because this topic is widely unknown and just needs to be shared. So read carefully because I am going to show you a way of turning virtually any website you like into a real Windows Phone app in no time.

Any website?

Technically speaken: Yes. Any website. However, a lot of websites have static content. Those sites aren’t really interesting enough to invest time turning them in to a real Windows Phone app. Even if it’s only minutes we are talking about. So what types of websites are we interested in then? Websites that regularily add content of course. Websites that run blogs, news sites or company sites that continuously post new articles about interesting topics or products.

So what’s the trick?

No trick. You only have to know about two things:

  1. There is App Studio. A web application made available by Microsoft that allows you to create Windows Phone AND Windows 8 apps in (almost) no time (more on that later).
  2. App Studio is able to work with static as well as dynamic content. The latter is realized by configuring syndication feeds as data source.

While most people already know about syndication feeds (aka RSS feeds) and realized that most blogs offer those feed URLs to extend their reach, think about this: Even websites that do NOT offer RSS feeds most often add content in a constantly recurring way. So why not simply generate a feed on our own… and have that feed set as data source for our Windows Phone app?

So there’s a trick after all.

If this can be called a trick, then yes, there actually is. Let’s have a look at an example. The town, I am living in has a small yet popular cinema. It is called Beluga (yes, just like the whale). Of course the Beluga has a website that also shows their current program. The program of the current week is published here. I always wanted to have a simple (real) Windows Phone app that only shows this program. What follows is a Step by Step explanation about what I did to realize this app in less than 30 minutes.

Preview

 

Step 1 – The Syndication Feed

At first, I thought about creating a WCF service that parses the website, generates a syndication feed and host it on Windows Azure. This is generally a great idea. However, Windows Azure is not a free service and while an early prototype of the WCF service actually worked pretty well, I thought again. I couldn’t be the only one who needed a feed for a website that doesn’t offer one itself. And wouldn’t it be neat creating some sort of wizard that allows to define dynamic rules so that a feed can be created in no time for any website? Well… actually others did think about this as well and one of the best services I could find that does exactly this, is feed43.com (pronounced feed for free).

So I registered on feed43.com, entered http://www.beluga-kino.de/index.php?show=week as source page address and had a look at its html code. It took me a little while to find out how the rule engine at feed43.com works. This is what I came up with:

Extraction rules > Global Search Pattern:

<h3>{%}<div id='icons'>

 

This pattern reduces the area of the site to look for recurring items to all content between the <h3> tag and the <div> tag that follows right after the weeks’ program.

Extraction rules > Item (repeatable) Search Pattern:

<div class='plakat'>{*}<img src='{%}'{*}<h2>{*}href='{%}'{*}'>{%}</a></h2>{%}<table

 

While this might look complicate at first sight, it is actually pretty easy to understand (although I am confident there are more elegant ways of describing the items on specifically this site, but whatever… it works, so why complain?). Every % character defines a snippet to extract, so there will be four snippets made available as %1 to %4. The * mark areas to skip and make it easy to navigate through the content of the html code.

On this specific website, this rule extracts the following contents:

%1: Source of the image tag to the movies’ film poster

%2: Link to the movies’ details

%3: The movies’ title

%4: The movies’ short description

These templates can be used now to create the syndication feed. Feel free to have a look at the result here.

Step 2 – The Windows Phone app

Of course, I am already registered as a Windows Phone developer (are you?). In case you are not registered yet, this would be a good time to do so. For this article it is perfectly alright to only register on http://appstudio.windowsphone.com as I am using this service to create this little app anyway.

Logging into App Studio gives us a lot of options. I didn’t choose one of the production ready templates but rather started from scratch using an empty app. I created an application logo, provided an app title and created exactly one section called “Wochenprogramm” (weekly program). This section only has two pages: One for the overview about all movies for this week and another showing details. What’s great about AppStudio is the integrated preview of what people will see on their phone. This works in realtime. no kidding. Go ahead and click around the preview and actually try out the settings you make.

Here is the configuration I added for the two pages:

AppStudio_Content_Page_1

 

AppStudio_Content_Page_2

As Datasource, I entered the address for the syndication feed provided by feed43.com: http://www.feed43.com/beluga-kino.xml.

On the Themes tab, I choose to use a custom background image. Fortunately, App Studio offers to either upload an own image from your computer or even OneDrive, or to select an image from the App Studio resources (which I did).

On the Tiles tab, I uploaded some template images I created using Gimp.

On the Publish Info tab, I added some description text and then went straight to the Finish section pressing the respective button on the top right of the site.

Step 3 - Finishing

What makes App Studio really great is that you can get your app right on your phone in virtually no time. All you have to do is touch the Generate button, scan the generated QR code with your phone and simply agree to install the app on your phone.

If this is the first time you do this, you might have to install the Microsoft Corporate Certificate first so that side loading of apps generated with App Studio is possible. However, App Studio explains how to do this (Spoiler: By clicking a link on your phone provided with an email sent automatically. Yes, it is really that simple).

What makes App Studio even better, is that you can even download a publishing package for your app that you can use to publish it into the Windows Phone store. Keep in mind however, that there are some criterias that your app must meet to comply with the Windows Phone Store publishing rules. Also, if you want to publish your app into the store, you will have to register for a real Windows Phone developer account (which costs about 15 USD per year at the time of this writing).

What makes App Studio even more better, is that you can also download a source code package of your generated app. You can use Visual Studio 2013 (or even the express edition) to open the solution and start improving the app by writing real code (if you carefully followed this article and also had a look at the video linked at the top, you might have noticed a little modification I achieved by altering the generated source code of this sample app).

Conclusion

Although this article didn’t provide you with a lab tutorial that you can follow, you should get the idea: It is amazingly simple to create Windows Phone apps. And even if you like to create apps for your favourite websites, the tools are there.

One word of warning though: If you plan to create a Windows Phone or even a Windows 8 app that uses content from an external source, always keep in mind that you need the owners’ permission for any usage whatsoever.

Wie erstelle ich ein Video zu einer Windows Phone App

Vor kurzem hat Microsoft mit Windows Phone 8.1 ein Update für seine mobile Plattform (zunächst für Softwareentwickler) veröffentlicht, das den Namen Update eigentlich nicht verdient. Es wurde vielerorts davon berichtet, dass sich ein Windows Phone mit dem OS 8.1 praktisch wie ein ganz neues Gerät anfühle. Das kann ich bestätigen. Aber ohne viel auf die Liste neuer Features einzugehen (das haben andere bereits zur Genüge getan), möchte ich kurz ein Thema ansprechen, das bei vielen (Entwicklern) zu Kopfzerbrechen führt:

Wie zeichne ich den Windows Phone Bildschirm auf?

Nachdem ich zu einem der neuen Features ein kurzes Video gedreht habe, möchte ich ein paar Tipps geben, mit denen es jedem Entwickler leichter fallen wird, für z.B. Youtube ein passendes kleines Video zu den eigenen Apps zu erstellen.

Hier zunächst das Ergebnis:

Die App wurde für dieses Video einfach in einem Windows Phone Emulator gezeigt. Der Vorteil gegenüber z.B. der ProjectMyScreen App von Microsoft ist z.B. der, dass der Emulator u.a. keine privaten Daten zeigt und damit zu jeder Zeit für solche Zwecke genutzt werden kann. Ein Nachteil kann sein, dass man durch die Virtualisierung auch Performanceverluste zu verzeichnen hat. Die Aufzeichnung kann dabei beispielsweise mit der frei erhältlichen Software CamStudio erfolgen. Die Positionierung des Emulators und korrekte Einstellungen der Recordersoftware sind dabei das A und O.

Und so klappt das ganz einfach:

Als kleines Hilfsmittel habe ich mir ein Wallpaper für meinen Desktop erstellt. Die Größe entspricht meiner Bildschirmauflösung (1.600 x 900). Das Bild ist weiß. Die Zielauflösung des Videos (in meinem Fall: 1.280 x 768) habe ich als schwarzes Rechteck eingebettet und Markierungen ergänzt für die Position des Rechteckes:


 

Den gestarteten Emulator habe ich einfach auf diesem Rechteck so platziert, dass der Emulator selbst im Rechteck positioniert ist, dessen Steuerelemente aber außerhalb. Auf die Art entsteht links vom Emulator genug Freifläche für z.B. Texte oder ähnliches.

 

 

Der Trick ist nun, CamStudio korrekt zu konfigurieren. Unter Region gibt es den Menüpunkt Fixed Region. Hier lassen sich via Fixed Top-Left Corner die obere Linke Ecke festlegen (die wir ja aus dem Bild kennen) und mit Width und Height der Bereich definieren (1.280 x 768).

Um nun wie im Video den Mauszeiger als gelben Kreis hervorzuheben, ist es erforderlich, unter Options im Menüpunkt Cursor Options die Option Hightlight Cursor zu selektieren. Das Problem ist allerdings, dass das Highlighting nur bei sichtbarem Cursor angezeigt wird. Und wir wollen ja keinen Mauszeiger sehen. Ein Trick ist es daher mit z.B. Gimp ein 1x1 Pixel großes transparentes Bild zu erstellen und als Cursor From File in CamStudio zu laden.

Vorteilhaft ist es nun auch noch, das Starten und Stoppen der Aufzeichnung als Tastenkürzel zu konfigurieren. Allerdings zeigt CamStudio dann Bestätigungsfenster an, die ich in diesem Fall in der Postproduction herausgeschnitten habe. Hierzu eignet sich hervorragend die Software Video Deluxe von MAGIX.

Das war es auch schon. Ein paar Tricks hier und da und schon steht dem eigenen App-Video nichts mehr im Wege.

Hast Du weitere Tipps? Hast Du mit anderer Software bessere Erfahrungen gemacht? Einfach in die Comments schreiben!

Die #dwx14 - Vier Tage geballte Kompetenz

Auch dieses Jahr öffnet die Developer Week in Nürnberg ihre Pforten für interessierte Softwareentwickler aus den Bereichen .NET, Mobile- und Web-Development. Da mobile und Web-Entwicklung das .NET Framework natürlich nicht ausschließen, sind gewisse Überschneidungen nicht nur vorprogrammiert, sondern beabsichtigt. Denn diese Konferenz beschäftigt sich mit Themen und Lösungen. Positiv daran: Entgegen anderer Konferenzen, die häufig eine Tendenz zur Bildung von Produkt-/ Herstellerwerbeplattformen haben, trifft man hier auf die unterschiedlichsten Themen aus denen man sich sein individuelles Programm zusammenstellen kann. Der einzige Wehrmutstropfen dabei ist, dass manches Mal spannende Sessions parallel stattfinden (und wer hat schon einen Zeitumkehrer, um an mehreren Orten gleichzeitig sein zu können...).

Auch die TOP TECHNOLOGIES CONSULTING ist wieder dabei und dieses Mal breit mit verschiedensten Themen aufgestellt:

Mittwoch, 16.07.2014

Mit Touch Develop in die Zukunft der mobilen Software-Entwicklung

Es begann auf einem Windows Phone. Doch auch schon damals hatte Microsoft Research die Vision von einer kontext-basierten Entwicklungsumgebung, die überall läuft und Anwendungen generiert, die ebenfalls überall laufen. Das Ziel scheint erreicht. Oder?

Football, Poker, PM oder: Wir führen Scrum ein!

Ehrfurcht ergreift die meisten Entwickler-Teams, wenn es um die Frage danach geht, ob sie sich an Scrum orientieren sollten oder weiter klassisch „irgendwie“ Software entwickeln. Ist Scrum wirklich so streng, oder fördert es auch mit Spaß die Kreativität?

Unit Testing und Mocking mit Microsoft Fakes

Nach der „Produktifizierung“ von Moles hat das erste hauseigene Mocking-Framework von Microsoft den Sprung von MS Research in die Visual Studio Product Group geschafft und erleichtert Softwareentwicklern das Unit Testing seit Visual Studio 2012 Update 2 in den SKUs Premium und Ultimate. Ist es trotz dieser Einschränkung einen Blick wert?

Installer bauen leicht gemacht

Dass die Abkürzung von Windows Installer Xml für uns in Deutschland bei den meisten noch immer nicht zu einem Schmunzeln führt, liegt vor allem daran, dass dessen Bekanntheit noch zu wünschen übrig lässt. Wie leicht sich mit WiX Setups bauen lassen soll diese Session zeigen und ja, es darf auch geschmunzelt werden.

Die Developer Week findet statt vom 14. Bis 17. Juli 2014 im NCC Ost, Nürnberg. Sprechen Sie uns direkt an, falls Sie an vergünstigten Tickets interessiert sind!

 

Traue keiner Statistik... oder: VB.NET in den TOP 10 der meistgenutzten Programmiersprachen?

Das Bonmot "Traue keiner Statistik, die Du nicht selbst gefälscht hast!" wird häufig Winston Churchill zugesprochen. Von wem es in Wirklichkeit stammt, ist tatsächlich nicht bekannt, wohl aber ist die offensichtlich zynische Bedeutung allen klar. Ein Aktuelles Beispiel für Softwareentwickler findet sich in der Veröffentlichung des aktuellen TIOBE Index für Programmiersprachen (Stand: 02/2014).

Hier wird Visual Basic .NET erstmals in den TOP 10 geführt (zum Erstaunen aller). Die Sprache C hat Java auf Platz 1 abgelöst und unverändert liegt Objective-C auf dem dritten Platz. Spiegelt das die Realität wieder? Es wird also maßgeblich (sehr) nativ entwickelt, oder multi-plattform, gefolgt vom mobilen Markt bestimmt durch Apple. Doch der TIOBE-Index steht auch in der Kritik, zum einen kaum wissenschaftlich verstanden werden zu können und zum anderen - und das ist auch der Grund hierfür - bereits durch geringfügige Änderungen der Suchbegriffe zum Teil erhebliche Verschiebungen der Sprachen zu verursachen.

Das alles wäre kaum interessant, wenn es nicht mindestens einen anderen Index gäbe, der sich tatsächlich deutlich von den Werten des TIOBE-Index unterscheidet. Gibt es. Nennt sich RedMonk Programming Language Ranking. Hier finden sich auf den TOP 3 die Sprachen JavaScript, Java und PHP. Herzlichen Dank. Objective-C findet sich erst auf dem neunten Platz wieder, Visual Basis .NET wird nicht einmal in den TOP 20 erwähnt, dafür hat Haskell mit Platz 14 eine erwähnenswertere Position als im TIOBE-Index (Platz 45).

Und in wie fern bringen uns diese Erkenntnisse weiter?

Genau wie mit anderen Statistiken verhält es sich hier so: Wenn einem die Platzierung einer Programmiersprache im Verhältnis zu einer anderen aus welchen Gründen auch immer hilfreich ist, dann wählt man natürlich diejenige Auswertung aus, die am besten zu den eigenen Argumenten passt. In allen anderen Fällen reichen die Daten höchstens zu einem Schmunzeln, eine verwundert gehobene Augenbraue oder zum Piesacken eines Kollegen, der dachte, mit COBOL wäre seine Rente sicher. Moment... ist sie ja auch. Verdammt.

 

Man sieht den Baum vor lauter Zweigen nicht. Team Project Branches sichtbar machen.

Wer mit Projekten zu tun hat, die sich in der Quellcode-Verwaltung in immer mehr Branches verzweigen, kennt vermutlich das Problem: In mehreren Branches parallel zu arbeiten erschwert es mitunter, in der jeweils aktiven Visual Studio Instanz zu erkennen, welcher Branch darin gerade geöffnet ist.

Damit sind Probleme schon vorprogrammiert. Doch bevor dieses Dilemma dazu führt, dass Änderungen in den verkehrten Branches durchgeführt und sogar eingecheckt werden, gibt es in Form eines kleinen Addins Abhilfe. Zu finden in der Visual Studio Gallery sorgt das Addin "Rename VS Window Title" dafür, dass der zugrundeliegende Branch einfach in der Titelzeile vom Visual Studio eingeblendet werden kann. Das wirkt sich praktischerweise auch auf die Preview-Fenster der Taskleiste aus.

Mehr Informationen dazu und auch ein paar Screenshots finden sich in dem Blogartikel von Chris Binder.

Und es hat Pieeeeeeep gemacht... LEGO MINDSTORMS und das Windows Phone.

Vor einigen Wochen hatten wir die Gelegenheit, auf der BASTA! Herbst 2013 sehr coole Themen vorzustellen. Darunter waren NFC und Touch Develop. Während es sich bei ersterem um eine faszinierende Technologie handelt, die ganz neue Möglichkeiten für Entwickler von z.B. Windows 8 und Windows Phone eröffnet, ist letzteres eine mobile Touch-First Entwicklungsplattform, mit der sich u.a. direkt auf dem Windows Phone Software entwickeln lässt.

You spin me round...

Neu seit Touch Develop 3.1 ist die Unterstützung von Bluetooth auf dem Windows Phone 8, was unsere Neugier natürlich sofort geweckt hat. Microsoft Research hat zeitgleich mit der Veröffentlichung bereits angepasste Bibliotheken veröffentlicht, mit der sich die aus Logo bekannte und in Touch Develop wiederbelebte Turtle eines neuen Features erfreuen durfte: Und zwar der Steuerung eines Spheros. Der Sphero ist ein Roboter Ball, der beliebig gesteuert werden kann und darüberhinaus mit einer RGB Diode seine Umgebung in Truecolor erleuchtet. Wenige Tage später - zur BASTA! - konnten wir zur Begeisterung der Teilnehmer dieser Session zeigen, was für einen Spaß es macht, den kleinen Roboterball ("Könnte er fliegen, würden wir ihn Snatch nennen!") mit dem Windows Phone zu steuern. Der Hersteller liefert übrigens nur Software für Android und iPhone mit.

Noch neugieriger waren die Teilnehmer allerdings auf den "richtigen" Roboter, der uns auf der BASTA! begleiten durfte. Ein LEGO MINDSTORMS NXT 2.0 Geselle, der sehr still und ausnahmslos ruhig zuschaute, während der Ball seine Runden drehte. Schade. Denn die Vorbereitungszeit zur BASTA! war zu knapp, um für Touch Develop eine Unterstützung des NXT Brick zu entwerfen.

Nr. 5 lebt!

Wenige Tage danach konnten wir das Versprechen, dass das natürlich (grundsätzlich) funktioniere, einlösen und eine nahezu vollständige Bibliothek für Touch Develop veröffentlichen, mit der sich auf die Daten des Roboters zugreifen lässt, bereits auf dem Brick vorhandene Programme starten, Töne ausgeben, Audio-Dateien abspielen, Sensoren auslesen und Motoren steuern lassen. Damit ist der Grundstein gelegt, um es NXT Besitzern zu ermöglichen, ihren LEGO MINDSTORMS Roboter nicht nur vom Windows Phone aus zu steuern, sondern die Apps dafür direkt auf dem Windows Phone zu entwickeln.

Das ist in einer Art und Weise revolutionär, dass Microsoft Research basierend auf diesen Experimenten in Bälde ein eigenes MINDSTORMS Set anschaffen wird und wir bereits im Gespräch mit verschiedenen Microsoft Evangelisten sind, wie wir das Thema in der Zielgruppe (also euch!) streuen können. Geplant sind u.a. weitere Sessions auf Entwicklerkonferenzen und sicher auch die ein oder andere Veröffentlichung zu dem Thema.

Bis dahin gibt es einen kurzen Einblick auf Youtube:

LEGO MINDSTORMS NXT with Touch Develop on Windows Phone - Part 1

LEGO MINDSTORMS NXT with Touch Develop on Windows Phone - Part 2

 

Und vergesst nicht, euch die Bibliotheken und die Demo Scripte (nxt piano, nxt demo) anzuschauen!

 

 

Ausgeknockt mit Knockout MVC (jetzt auch mit VB.NET)

Knockout.js ist in aller Munde, oder? Und warum auch nicht? Es schafft elegante Abkürzungen, wo wir vorher noch erhebliche Umwege gehen mussten. Kurzum: Es hat sich mal jemand Gedanken gemacht und das Ergebnis hat uns alle aus den Latschen gehauen. Vielleicht auch daher der Name.

In diesem Artikel geht es aber nicht um Knockout.js - daher gehe ich auch nicht auf die Funktionsweise ein – sondern um Knockout MVC. Genauer: Darum, dass letzteres zwar beworben wird mit “Simple C#/VB.NET expressions defining logic of the client side behavior are automatically converted to JavaScript constructions”, gleichzeitig aber bereits bei der Installation in einem VB.NET basierten ASP.NET MVC Projekt scheitert – und woran das liegt.

Problem #1

Das Quickstart Tutorial erklärt, dass zunächst das Paket via NuGet installiert wird:

Install-Package kMVC

Hier das Ergebnis bei einem ASP.NET MVC Projekt, für das VB.NET gewählt wurde (leicht gekürzt):

PM> Install-Package kMVC

"kMVC 0.5.4" wurde erfolgreich installiert.

Ausnahme beim Aufrufen von "Item" mit 1 Argument(en):  "Falscher Parameter. (Ausnahme von HRESULT: 0x80070057 (E_INVALIDARG))"
In C:\…\packages\kMVC.0.5.4\tools\install.ps1:3 Zeichen:1
+ $item = $project.ProjectItems.Item("global.asax").ProjectItems.Item("global.asax ..…

PM>

Die mitunter spannende Information sieht man in der Exception nicht. Aus irgendwelchen Gründen ist der Text gekürzt – und ich war’s nicht.

Das Powershell Skript hat mind. zwei Fehler:

  1. Es wird versucht die Global.asax.cs zu bearbeiten
  2. Die Codezeile, die in der Global.asax den KnockoutModelBinder hinzufügen soll, wird mit einem Semikolon abgeschlossen

Lösung #1

Einfach folgende Zeile der Methode Application_Start in der Global.asax.vb hinzufügen:

ModelBinders.Binders.DefaultBinder = New PerpetuumSoft.Knockout.KnockoutModelBinder()

Problem #2

… ist eigentlich gar keins. Denn während das Tutorial die notwendigen Scripte manuell via Script-Tag hinzufügt, geht der bevorzugte Weg in ASP.NET MVC 4 über Bundles.

Lösung #2

Einfach der Methode RegisterBundles in BundleConfig.vb folgende Zeilen hinzufügen:

bundles.Add(New ScriptBundle("~/bundles/knockout").Include( 
"~/Scripts/knockout-{version}.js",
"~/Scripts/knockout.mapping-latest.js",
"~/Scripts/perpetuum.knockout.js"))

Und abschließend – sofern Knockout MVC global eingesetzt werden soll – in der _Layout.vbhtml View das Bundle im Header laden:

<head> 
< meta charset="utf-8" />
< meta name="viewport" content="width=device-width" />
<title>@ViewData("Title")</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/knockout")
< /head>

Problem #3

Und jetzt wird deutlich, was passiert, wenn man nur an C# denkt. Denn all die Vorarbeit bringt erst einmal gar nichts. Probieren wir es mit dem ClickCounter Beispiel von Knockout MVC.

Schritt 1

Folgender Code ist als ClickCounterModel.vb dem Verzeichnis Models hinzuzufügen:

Imports DelegateDecompiler 

Public Class ClickCounterModel

Public Property NumberofClicks As Integer

<Computed>
Public ReadOnly Property HasClickedTooManyTimes As Boolean
Get
Return Me.NumberofClicks > 3
End Get
End Property

Public Sub RegisterClick()
Me.NumberofClicks = Me.NumberofClicks + 1
End Sub

Public Sub ResetClicks()
Me.NumberofClicks = 0
End Sub
End Class

  

Schritt 2

Folgender Code ist als ClickCounterController.vb dem Verzeichnis Controllers hinzuzufügen:  

Imports PerpetuumSoft.Knockout 

Public Class ClickCounterController
Inherits KnockoutController

'
' GET: /ClickCounter

Function Index() As ActionResult
Return View(New ClickCounterModel())
End Function

Function RegisterClick(model As ClickCounterModel) As ActionResult
model.RegisterClick()
Return Json(model)
End Function

Function ResetClicks(model As ClickCounterModel) As ActionResult
model.ResetClicks()
Return Json(model)
End Function

End Class

Schritt 3

Folgender Code ist als Index.vbhtml dem neuen Verzeichnis Views\ClickCounter hinzuzufügen:

@Imports PerpetuumSoft.Knockout 
@ModelType KnockoutMvcDemoClickCounter.ClickCounterModel

@Code
ViewData("Title") = "Index"
Dim ko = Html.CreateKnockoutContext()
End Code

<h2>Index</h2>

<div>You've clicked @ko.Html.Span(Function(m) m.NumberofClicks) times</div>

@ko.Html.Button("Click me", "RegisterClick", "ClickCounter").Disable(Function(m) m.HasClickedTooManyTimes)

<div @ko.Bind.Visible(Function(m) m.HasClickedTooManyTimes)>
That's too many clicks! Please stop before you wear out your fingers.
@ko.Html.Button("Reset clicks", "ResetClicks", "ClickCounter")
< /div>

@ko.Apply(Model)

   

Und nun das Problem: Einfach mal die Anwendung ausführen. Die Zeile @ko.Apply(Model) löst eine NotImplementedException aus:

System.NotSupportedException wurde nicht von Benutzercode behandelt.
  HResult=-2146233067
  Message=Die angegebene Methode wird nicht unterstützt.
  Source=PerpetuumSoft.Knockout
  StackTrace:
       bei PerpetuumSoft.Knockout.KnockoutExpressionConverter.VisitMethodCall(MethodCallExpression m)
       …

Lösung #3

Sofern man mit VB.NET arbeitet, verhält sich eine Condition in der Methode VisitMethodCall in Knockout MVC anders als in C#:

if (typeof(Expression).IsAssignableFrom(m.Method.ReturnType)) 
return VisitMemberAccess(m.Object, m.Method.Name);

In VB.NET resultiert die Condition immer in einem False und damit löst die letzte Zeile der Methode eine NotImplementedException aus:

throw new NotSupportedException();

Um dieses Problem zu lösen mag folgendes zunächst einmal nicht der korrekte Weg sein, aber erst einmal nur zum Beweis reicht es, die Condition auszukommentieren und Knockout MVC neu zu kompilieren.

Damit werden Firstname und Lastname zwar gefüllt, der Computed Parameter Fullname aber rührt sich nicht. Und ein Blick auf den generierten JavaScript Code offenbart, warum das so ist.

Problem #4

<script type="text/javascript"> 
var viewModelJs = {"Firstname":"Christian","Lastname":"Jacob","Fullname":"Christian Jacob"};
var viewModel = ko.mapping.fromJS(viewModelJs);
viewModel.Fullname = ko.computed(function() { try { return ((this.get_Firstname() + ' ') + this.get_Lastname())} catch(e) { return null; } ;}, viewModel);
ko.applyBindings(viewModel);
</script>

Gesehen?

Beim Generieren des Scripts wurde via Reflection das Model analysiert und dabei die Getter der Properties mit dem Präfix get_ aufgelöst. Spannend daran: Auch hier verhalten sich C# und VB.NET anders, denn während der kompilierte IL Code in beiden Sprachen Property-Getter und –Setter tatsächlich mit get_ und set_ präfixt, liefert die Reflection bei C# Code zur Laufzeit kein Präfix zurück. Und da der ansonsten generierte JavaScript Code ebenfalls nicht mit Präfixen arbeitet, ist das auch korrekt. Nur bei VB.NET kommt es zu dem oben beschriebenen Phänomen und damit kann die Funktion ko.computed die Properties nicht mehr auflösen.

Lösung #4

Auch diese Lösung ist mit Vorsicht zu genießen und erhebt weder Anspruch auf Vollständigkeit oder überhaupt Richtigkeit. Sie ist eher als Proof of Theory zu verstehen.

In der Klasse KnockoutJsModelBuilder muss die Methode AddComputedToModel derart angepasst werden, dass die Rückgabe von DecompileExpressionVisitor.Decompile etwaiges Auftreten von get_ Präfixen unterdrückt.

Beispiel:

sb.Append(ExpressionToString(modelType, DecompileExpressionVisitor.Decompile(Expression.Property(Expression.Constant(model), property))).Replace("get_", ""));

Fazit

Nach diesen beiden Anpassungen funktioniert das Beispiel. Dass Knockout MVC eine sehr schöne Ergänzung zu Knockout.js ist, um es nativen .NET Entwicklern zu erleichtern, auch in den Genuss der Entwicklung reaktiver Webanwendungen zu kommen (ohne beim Gedanken an Datenbindung oder dynamische UIs graue Haare zu bekommen) ist keine Neuigkeit.

Sofern sich die Entwickler von Knockout MVC diese Analyse zu Herzen nehmen, beschränkt sich die Verwendungsmöglichkeit demnächst aber vielleicht nicht mehr nur auf C#-Entwickler.

BASTA! Herbst 2013 - Wir sind dabei!

In gerade mal sechs Wochen ist es wieder so weit: Die BASTA! Hauptkonferenz im Herbst öffnet ihre Pforten. In der Woche vom 23.09. bis zum 27.09. gibt es wieder zahlreiche Workshops, Sessions und Keynotes. Auch wird es nicht an Abendveranstaltungen mangeln, die dem einen oder anderen sicher etwas Fitness abverlangen werden, ansonsten aber zu interessanten Diskussionen anregen und natürlich der Vernetzung dienen sollen.

Über 130 Sessions laden dazu ein, Wissen aufzubauen, den Trends zu lauschen oder einfach nur die Neugier zu befriedigen. Denn dieses Jahr steht alles im Zeichen der drei Hauptschwerpunkte:

  • .NET als Entwicklungsplattform für erfolgreiche Business- und Consumer-Anwendungen
  • Windows 8 als neue Plattform, die von Phone und Tablet, über PC und Server, ein System bildet
  • Das Web, dessen offene Architektur über Browser alle Technologieplattformen verbindet.

Wer in diesem Sinne die Gelegenheit verpasst hat, auf der #dwx13 mehr zum Thema NFC und Microsofts Vorstellung von Tap & Send zu erfahren, wird hier die Chance haben, das nachzuholen. Die TOP TECHNOLOGIES CONSULTING GmbH wird mit folgenden Themen an der Veranstaltung teilnehmen:

Teilen kann so einfach sein - Tap+Send mit NFC!

Seit Windows/Phone 8 bietet Microsoft die Möglichkeit Daten, wie z.B. Kontaktinformationen oder Bilder, zwischen verschiedenen Endgeräten durch bloße Berührung auszutauschen. Diese Session zeigt anhand einer Windows 8 und Windows Phone 8 Beispielanwendung, welche Voraussetzungen hierfür nötig sind und wie dieses Szenario implementiert werden kann. Für eine schnellere Entwicklung der Apps natürlich mittels Code-Sharing über die Portable Class Library.

Touch Develop - Entwicklung direkt auf dem Windows Phone

2010 schickte Microsoft mit "Visual Studio On the Go" Entwickler noch in den April. Kurze Zeit später präsentierte Microsoft Research Touch Develop für Windows Phone, Entwicklung für das Phone auf dem Phone. Jetzt auch für den Marketplace, Windows 8 Store und im Web inklusive Intellibuttons. Diese Session zeigt den Einsatz von Touch Develop von der Idee bis zum Store (and beyond).

 

 

Phänomenal! Visual Studio 2013 ALM Virtual Machine und die ersten Hands On Labs!

Brian Keller, Principal Technical Evangelist bei Microsoft, hat vor wenigen Tagen die Verfügbarkeit der neuen virtuellen Maschine bekanntgegeben, die mit einem vorinstallierten Visual Studio 2013 daherkommt. Das Image enthält eine vollständige ALM (Application LifeCycle Management) Infrastruktur und setzt sich zusammen aus

  • Windows Server 2012 Standard (Eval)
  • Visual Studio 2013 Ultimate (Preview)
  • Team Foundation Server 2013 (Preview)
  • Office Professional Plus 2013 (Word, PowerPoint, Excel, Outlook)
  • Visio Professional 2013
  • InRelease Server und Deployers!

Darüber hinaus wurden Beispielnutzer eingerichtet, mit denen die Hands On Labs durchgegangen werden können. Die Links zu den entsprechenden Downloads finden sich im Blogartikel von Brian.

Bereits jetzt gibt es drei Labs, die einem neue ALM Szenarien näher bringen sollen:

  1. Getting started with Git using Team Foundation Server 2013
  2. Getting started with InRelease for Visual Studio 2013
  3. New Collaboration Experience for Development Teams using Team Foundation Server 2013

Während in den letzten Monaten besonders die Git Unterstützung durch Visual Studio hervorgehoben wurde, ist mit Sicherheit besonders das Lab run um InRelease als außergewöhnlich zu bezeichnen. Microsoft hatte kürzlich erst (zur TechEd) die Übernahme der Software aus dem Hause InCycle angekündigt und wird das Release Management Werkzeug nun in die Palette der eigenen ALM Werkzeuge aufnehmen.

Übrigens:

Als Microsoft ALM Partner stehen wir natürlich zur Verfügung, wenn Interessierte Unterstützung bei der Evaluation vom Team Foundation Server benötigen oder ein Migrationsprojekt auf die aktuellste Version planen. Sprechen Sie uns an!

Über die Autoren

Christian Jacob ist Leiter des Geschäftsbereiches Softwarearchitektur und -entwicklung und zieht als Trainer im Kontext der .NET Entwicklung sowie ALM-Themen Projekte auf links.

Marcus Jacob fokussiert sich auf die Entwicklung von Office-Addins sowie Windows Phone Apps und gilt bei uns als der Bezwinger von Windows Installer Xml.

Martin Kratsch engagiert sich für das Thema Projektmanagement mit dem Team Foundation Server und bringt mit seinen Java- und iOS-Kenntnissen Farbe in unser ansonsten von .NET geprägtes Team.

Aktuelle Kommentare

Comment RSS