.
Anmeldung | Registrieren | Hilfe

.NET-Blogs Archiv Oktober 2014

Microsoft auf der W-JAX 2014: Gewinnspiel, Infos, Session - eine Zusammenfassung

30.10.2014 10:27:31 | Kay Giza

Vom 4. bis 6. November 2014 findet in München die W-JAX 2014 statt (die Konferenz für Java- & Enterprise-Technologien). Wir von Microsoft sind ebenfalls vor Ort, mit einem Stand, Microsoft-Experten, einem großen Gewinnspiel und zahlreichen Informationen, Gutscheinen und vielem mehr. In diesem Blogpost finden Sie eine Zusammenfassung... [... mehr auf Giza-Blog.de]

This post is powered by www.Giza-Blog.de | Giza-Blog.de: RSS Feed
© Copyright 2006-2016 Kay Giza. All rights reserved. Legal

T-14: Microsoft Technical Summit in Berlin (Konferenz: 11.-13.11.14)

28.10.2014 10:05:59 | Kay Giza

In zwei Wochen findet vom 11. bis 13. November 2014 in Berlin die wichtigste deutschsprachige Konferenz für Entwickler und IT-Professionals von Microsoft statt: Microsoft Technical Summit 2014: Pure Technology Ich werde auch vor Ort sein und mich über Ihren Besuch am Microsoft Stand sehr freuen. Was gibt es zwei Wochen vor dem Technical Summit zu berichten? Hier eine kurze Zusammenfassung von... [... mehr in diesem Blog-Eintrag auf Giza-Blog.de]

This post is powered by www.Giza-Blog.de | Giza-Blog.de: RSS Feed
© Copyright 2006-2016 Kay Giza. All rights reserved. Legal

Überblick: Multiplattformentwicklung mit Microsoft

28.10.2014 09:00:20 | Hendrik Loesch

Schon vor einigen Monaten habe ich auf dem Saxonia Forum, einer Veranstaltung bei der mein Arbeitgeber die Saxonia Systems AG ihren Kunden Trends und Technologien vorstellt, einen Vortrag darüber gehalten wie mit Microsoft Technologien plattformübergreifend entwickelt werden kann. Auch wenn der Vortrag selbst bei Youtube schon einige Wochen verfügbar ist, habe ich bisher nicht darauf […]

Drop-Zone per AngularJS-Direktive definieren

21.10.2014 15:07:00 | Jürgen Gutsch

Das ziel ist eine Drop-Zone per AngularJS-Direktive zu definieren, in das Dateien für den Datei-Upload, oder was auch immer gedroppt werden können. Es muss also möglich sein, ein Callback zu übergeben, welches ausgeführt werden soll, wenn der Drop-Vorgang abgeschlossen wird. Der Callback soll dabei eine Methode des aktuellen AngularJS-Controllers sein:

ng-dropzone="handleDrop()"

Wir benötigen hierfür eine neue JavaScript Datei mit folgendem Inhalt:
(Dieser Code setzt voraus, dass, dass ein AngularJS Module mit dem Namen “myNgApp” existiert, andernfalls muss einfach der Name angepasst werden.)

(function () {
    'use strict';

    angular
        .module('myNgApp')
        .directive('ngDropzone', dropTarget);

    dropTarget.$inject = ['$window', '$parse'];

    function dropTarget($window, $parse) {

        var directive = {
            link: link,
            restrict: 'A'
        };
        return directive;

        function link(scope, element, attrs) {
           
            element.on('drop', function () {
                if (event.preventDefault) {
                    event.preventDefault();
                }
                $parse(attrs.ngDropzone)(scope);
            });
            element.on('dragover', function () {
                if (event.preventDefault) {
                    event.preventDefault();
                }
            });
            element.on('dragenter', function () {
                if (event.preventDefault) {
                    event.preventDefault();
                }
            });
            element.on('dragleave', function () {
                if (event.preventDefault) {
                    event.preventDefault();
                }
            });
            element.on('dragend', function () {
                if (event.preventDefault) {
                    event.preventDefault();
                }
            });
        }
    }
})();

Mit element.on() kann ich beliebige Events auf das Event registrieren. In diesem Fall sind es alle Events die eine DropZone abfangen sollte. Wichtig ist nur das erste Event, alle anderen können allerdings genutzt werden, um ein visuelles Feedback zu geben, wenn man mit der Maus ein Element über diese Zone draged, die Zone mit Drag-Zustand verlässt, oder das dragen beendet, indem die CSS-Klassen der DragZone geändert werden. (Ich verzichte hier auf die Beispiele für den visuellen Effekt)

Hinweis für Visual Studio Nutzer:
Das Visual Studio Add-In “SideWaffle” ist übrigens eine enorme Hilfe beim erstellen von Modulen, Controller, Services, etc. für AngularJS, da es unter anderem vorgefertigte Datei-Templates für AngularJS liefert.

Diese Direktive kann ich nun auf alle HTML-Elemente anwenden die als Drop-Zone genutzt werden können. Am besten ein DIV-Element dass so formatiert ist, dass es für den USer eindeutig als Dro-Zone erkannt wird. Das Element darf auch Unterelemente beinhalten.

Folgende Zeile Code im ersten Event parst den Wert unseres Attributes und führt ihn im aktuellen Scope aus. Auf die Art wird unsere Callback-Methode im AngularJS-Controller gefunden.

$parse(attrs.ngDropzone)(scope);

Die Callback-Methode kann beliebig viele Parameter haben die über unser Attribut gesetzt werden können. In diesem Beispiel werden keine Argumente übergeben und die Methode ruft intern eine Methode uploadDocuments in einem AngularJS-Service auf und übergibt sowohl die Datei-Liste aus dem event objekt, als auch einen CallBack der im Erfolgsfall ausgeführt wird.

$scope.handleDrop = function () {
    $upload.uploadDocuments(event.dataTransfer.files, function () {
        reloadDocuments();
        alert('success');
    });
};

Die Eigenschaft dataTransfer im event Objekt ist Teil der HTML5 Drag & Drop API und enthält in unserem Fall Dateien die per Drag & Drop auf die DropZone gezogen wurden.

Die Methode im Upload-Service tut dann die eigentliche Arbeit. Da auch mehrere Dokumente in die Drop-Zone geschoben werden können, müssen wir die File-Collection in einer Schleife durchgehen und verarbeiten. In folgendem werden zusätzlich die Dateieigenschaften file.name, file.size und file.type ausgelesen und an den Server gesendet:

this.uploadDocuments = function (files, callback) {

    if (files.length > 0) {
        for (var i = 0; i < files.length; i++) {

            var file = files[i];

            var data = new FormData();
            data.append('file', file);
            data.append('fileName', file.name);
            data.append('fileSize', file.size);
            data.append('fileType', file.type);

            $http
                .post('/api/Document/', data, {
                    transformRequest: angular.identity,
                    headers: { 'Content-Type': undefined }
                })
                .success(function () {
                    alert('TODO: handle success');
                    callback();
                })
                .error(function () {
                    alert('TODO: handle error');
                });
        }
    }
};

Auf die Stolperfalle beim Upload von Dokumenten habe ich in meinem letzten Beitrag schon hingewiesen. Die Lösung ist im obigen Beispiel bereits implementiert.

Seid Ihr dabei? – Tech Summit 2014

21.10.2014 12:12:22 | Christian Binder

Ich werde mit Neno Loje eine Session zu “Planning and Managing the modern Application LifeCycle” auf dem Tech Summit 2014 halten. Ich plane auch den TFS Support für das Scaled Agile Framework (SAFe) kurz anzusprechen, auch wenn es nicht im Abstract erwähnt ist.  Zudem bin ich beide Konferenztage vor Ort. Wer Lust auf einen kurzen Austausch vor hat einfach melden, hab noch etwas Luft Smile

Developer Openspace 2014

20.10.2014 22:45:37 | Hendrik Loesch

Einmal im Jahr zieht es eine Vielzahl von Softwareentwicklern nach Leipzig zum Developer Openspace. Wie jedes Jahr seit 2011, war auch ich wieder mit dabei und bin mit einem Kopf voller Ideen, sowie neuer Sichtweisen nachhause gefahren. Die Besonderheit des Openspaces ist dabei, dass die Agenda zu Beginn der eigentlichen Veranstaltung auf Basis der Wünsche […]

Ein Wochenende beim Developer Open Space

20.10.2014 10:10:00 | Martin Hey

An diesem Wochenende war ich beim Developer Open Space in Leipzig, der nun schon einige Male dort stattgefunden hat. Leider konnte ich auch dieses Jahr aus Zeitgründen nicht an den wirklich interessanten Workshops am Freitag teilnehmen, aber Samstag und Sonntag war ich vor Ort. 

Das Konzept ist recht einfach: Versammle eine Menge Entwickler und gib ihnen den Freiraum, selbst Themen zu bestimmen über die sie reden wollen. Was initial mal als .NET Open Space gestartet ist, hat sich in den letzten Jahren von der Technologie entfernt. Und so kommt es, dass inzwischen auch Entwickler mit dabei sind, die in anderen Technologien zu Hause sind, wie Java, Ruby, JavaScript und so weiter.

Welche Themen waren für mich interessant? Nun ja, dadurch, dass ich mich auch beruflich mit IoT beschäftige, fand ich die Wearables und Smarthome-Sessions sehr spannend. Als Freelancer/Geschäftsführer auch sehr interessant war die anschließende Session bei der es darum ging, gescheiterte Projekte zu analysieren und die Meinungen anderer zu hören, wie sie und auch ihre Auftraggeber damit umgehen. Leider war die Event Storming Session parallel, so dass ich bei dieser nicht dabei sein konnte. Weil auch wir oftmals vor Technologieentscheidungen stehen, besuchte ich anschließend die Session zum Thema NoSql vs. RDBMS in der diskutiert wurde, wann man welche Technologie sinnvollerweise einsetzt. Die für mich letzte Session des Tages hielt ich mit einigen Usergroup-Leads gemeinsam, in der wir zeigten, wie wir die Seite der .NET Usergroup Dresden aufgebaut haben (Jekyll auf Github). Es folgten noch zwei weitere Slots, aber die Zeit habe ich eher für entspannte Gespräche auf dem Hof genutzt. Der Abend endete dann in entspannter Atmosphäre und durchaus auch lustigen Gesprächen im Pub.

Der Sonntag lief recht ähnlich ab: interessante Sessions, spannende Gespräche in den Pausen oder nebenher. 


Es war für mich wieder ein Erlebnis, mit den ganzen Leuten quer aus dem DACH-Raum fachsimpeln und Gedanken austauschen zu können. Und auch wenn ich eher Technologie oder Management-Sessions besucht habe, so gab es auch dieses Jahr wieder Sessions zu Softskill und Psychologie - es ist also für jeden etwas dabei. Und mit 200 Anmeldungen zählt dieser Event nun schon zu den größeren Konferenzen.

Microsoft hat MSN aufpoliert

15.10.2014 08:34:47 | Mathias Gronau

Ja, es gibt es noch, das gute alte MSN. Nach einer dreiwöchigen Preview-Phase hat Microsoft kürzlich sein neues MSN gestartet. Das Internet-Angebot basiert jetzt auf Cloud-Technologien und soll in den nächsten Wochen weltweit für Windows, Android und iOS ausgerollt werden. Ab sofort steht das Angebot, das im Rahmen der Preview-Phase noch um einzelne Themen erweitert wurde, unter www.msn.de allen Nutzern zur Verfügung. Mit dem Update auf Windows 8.1 präsentieren sich die ehemaligen Bing Apps jetzt unter den neuen Namen MSN Weather, MSN News, MSN Health&Fitness oder auch MSN Travel. Bing bleibt weiterhin als Suchmaschine erhalten. Mit dem neuen MSN und MSN Apps (vorher Bing Apps) verspricht Microsoft ein persönliches Nutzererlebnis, das ganz den Bedürfnissen der Konsumenten angepasst ist: Hier sollen Premium-Inhalte von national und international führenden Medienunternehmen wie Die Welt, Süddeutsche Zeitung oder der New York Times gebündelt bereitgestellt werden. Damit bietet das neue MSN eine große Vielfalt an Themen und qualitativ hochwertigen Informationen. „Wir sind sehr zufrieden mit der Resonanz auf die Preview von MSN – die Nutzer geben positives Feedback zum Design, den Inhalten und der Funktionalität“, sagt Dirk Kleine, Director Information & Content Experience Group DACH. „Zum Start können wir jetzt auch die Themen ‚Auto‘ und ‚Lifestyle‘ anbieten und sind damit in der Lage, alle relevanten Themenfelder für unsere Nutzer abzudecken. Und jeder kann die neue Erlebnis-Plattform nutzen, unabhängig von Ort und verwendetem Device.“ Das modernisierte MSN sieht Microsoft als einen weiteren wichtigen Baustein in der „Mobile first, Cloud first“-Ära von Microsoft, die für den mobilen Einsatz sowie Cloud Computing entwickelt wurde und für die Nutzer über alle Geräte erreichbar ist. Das neue MSN basiert nun vollständig auf Microsoft Azure – der komplette weltweite Launch von MSN ist so der größte Einsatz von Microsoft Azure bisher. Das Angebot von MSN ist so konzipiert, dass dem Nutzer nur die Inhalte, die ihn auch wirklich interessieren, angezeigt werden. Ist das Nutzerprofil einmal eingerichtet, werden Kunden unterwegs und auf jedem Gerät mit den gewünschten, personalisierten Informationen versorgt. MSN soll sich intuitiv bedienen sowie individuell gestalten lassen. Kategorien und Themen lassen sich neu ordnen und anpassen. Ergänzt um die Ressorts Auto und Lifestyle jetzt umfangreiche Inhalte aus elf unterschiedlichen KategorienNeben den Informationen aus den Ressorts Sport, News, Gesundheit & Fitness, Finanzen, Reisen, Kochen & Genuss, Wetter, Unterhaltung und Video wurden nach der Preview-Phase noch die Kategorien Auto und Lifestyle gestartet. Die Informationen reichen von Spielergebnissen von über 200 Sportligen weltweit, über 1,5 Millionen Weinkritiken bis hin zu über 300.000 Rezepten und vielem mehr. Die Redakteure von MSN sind in der Lage, aus über 1.200 Quellen Inhalte für individuelle Märkte und Zielgruppen zusammenzustellen. Nutzer profitieren von weltweit ausgewählten KooperationspartnernUm Kunden ein maßgeschneidertes Content-Angebot zur Verfügung zu stellen, arbeitet Microsoft weltweit mit angesehenen Kooperationspartnern und Medienunternehmen zusammen. Zu den Partnern in Deutschland zählen beispielsweise Die Welt, Frankfurter Allgemeine Zeitung, Süddeutsche Zeitung, Handelsblatt, Hubert Burda und kicker. Internationale Medienpartner sind die New York Times in den Vereinigten Staaten, Guardian und Telegraph in Großbritannien, Le Figaro und Le Monde in Frankreich. Einmal eingerichtet – immer und […]

Roadshow: Einstieg in die Hybrid App Entwicklung

13.10.2014 18:32:15 | Gregor Biswanger

Seit 2009 halte ich regelmäßig Entwickler-Roadshows. Auch dieses Jahr und Anfang 2015 möchte ich die Community in Deutschland, Österreich und in der Schweiz mit einer kostenfreien Roadshow zum Thema „Cross Plattform Entwicklung“ unterstützen.

Doch diesmal wird das keine gewöhnliche Roadshow, sondern eine Cross Community Roadshow. Damit ist gemeint, dass die Roadshow nicht nur wie bisher für Microsoft User Groups stattfindet, sondern ebenfalls für Google Developer Groups und JavaScript User Groups.

Beschreibung

Die Entwicklung von Apps ist nicht einfach und jede "Systemwelt" hat ihre eigenen Tools und Anforderungen. Ob mit Java und Eclipse für Android, mit Objective-C und Xcode für iOS, oder mit den Microsoft-Tools für die Windows-Welt. Bei diesem Vortrag lernen Sie die vielfältigen Möglichkeiten der App-Entwicklung für alle gängigen Plattformen mit nur einer Programmiersprache kennen: HTML5 und JavaScript. Sie steigen mit den Grundlagen des kostenlosen Intel XDK ein und werden dann mit den wichtigsten Frameworks und Vorgehensweisen vertraut gemacht. Mit diesen Infos steigen Sie rasch auf zum versierten Cross-Plattform Entwickler.

Termine

.NET User Group Ingolstadt

03.02.2014

Dotnet Cologne 2014

09.05.2014

.NET User Group Dortmund

06.08.2014

.NET User Group Regensburg

18.09.2014

BASTA! 2014

25.09.2014

.NET User Group Berlin Brandenburg

02.10.2014

Google Developer Group Bremen

15.10.2014

.NET User Group Hamburg

16.10.2014

DevFest Wien

18.10.2014

Advanced Developers Conference Mannheim

21.10.2014 – 22.10.2014

DevFest Karlsruhe

25.10.2014

.NET User Group Stuttgart

29.10.2014

DevFest Zürich

22.11.2014

.NET User Group Bonn

20.01.2015

*

*

*Weitere Termine folgen.

 

Für User Groups

Weitere User Groups die an diesem Vortrag Interesse haben, schreiben mir bitte eine E-Mail an: gregor.biswanger@cleversocial.de

Ich freue mich auf euer zahlreiches Erscheinen!

AngularJS, File Upload und “Multipart/Form-Data”

13.10.2014 14:38:00 | Jürgen Gutsch

Hin und wieder macht es Sinn, Dateien asynchron im Hintergrund auf den Server zu laden. Rein mit AngularJS ist das allerdings nicht ganz trivial und funktioniert vor allem nicht so wie erwartet.

Angenommen wir haben die Datei per JavaScript schon ermittelt (entweder aus einem Input-Element vom Type “file” oder per Drag&Drop) können wir die Eigenschaften auslesen und zusammen mit der Datei, in ein FormData Objekt packen:

var data = new FormData();
data.append('file', file);
data.append('fileName', file.name);
data.append('fileSize', file.size);
data.append('fileType', file.type);
               
$http
    .post('/api/DocumentApi/Upload/' + id, data)
    .success(function () {
        alert('success');
    })
    .error(function () {
        alert('error');
    });

Dieser Code läuft zwar fehlerfrei durch, allerdings kommt die Datei auf dem Server nicht an. Logisch der Content ist nicht als “Multipart/Form-Data” deklariert. Man sollte also meinen es müsse reichen den Content-Type entsprechend zu setzen:

$http
    .post('/api/DocumentApi/Upload/' + id, data, {
        headers: { 'Content-Type': ‘multipart/form-data’ }
    });

Leider gefehlt. Angular ignoriert diesen Content-Type komplett. Damit die Daten als “Multipart/Form-Data” versendet werden und die Datei auf dem Server ankommt, muss der Content-Type auf ‘undefined’ gesetzt werden. Ist das entsprechend gesetzt, versendet AngularJS die Daten als “Multipart/Form-Data”. (Nachzulesen auch hier bei Jenny Louthan)

Folgende Konfiguration funktioniert dagegen Problemlos:

$http
    .post('/api/DocumentApi/Upload/' + id, data, {
        transformRequest: angular.identity,
        headers: { 'Content-Type': undefined }
    });

Da muss man dann erst mal drauf kommen. ;)

How-To: Regionen und mehrere Dialoge in WPF darstellen

10.10.2014 16:10:40 | Hendrik Loesch

Eine Sache die bis heute in WPF fehlt, ist eine anständige MessageBox, weswegen man sich diese in aller Regel selbst programmieren muss oder auf die Implementierung der Windows Forms zurückgreift. Aber auch außerhalb der typischen Szenarien die mit den bekannten MessageBoxen abgedeckt werden, ist es immer wieder hilfreich mehrere UserControls innerhalb eines Windows oder in […]

TFS Support für das Scaled Agile Framework (SAFe)

09.10.2014 11:40:44 | Christian Binder

Das Scaled Agile Framework beschreibt Ansätze, um Agile Teams im Enterprise zu Skalieren. Hierbei werden mehrere Backlogs definiert, Release Trains und andere Mechanismen etabliert.

image

Folgender MSDN Artikel beschreibt, wie man die SAFe Konzepte in TFS adaptiert und konfiguriert.

Steps to enable SAFe in TFS

Eine TFS 2013 Prozess Vorlage mit den SAFe Artefakten steht auch zum Download bereit.

image

Ich bin sehr an Eurem Feedback zu dem Thema interessiert. Wie relevant das Thema für Euch ist und welche Hürden es in den Organisationen gibt, die diesen oder einen angepassten Ansatz unmöglich machen.

Chris

Facebook zeigt falschen Vorschau-Content an

08.10.2014 14:10:00 | Martin Hey

In der letzten Woche war mir aufgefallen, dass bei einer meiner Seiten der falsche Inhalt in der Vorschau angezeigt wurde. Das Problem hatte mehrere Ursachen.

1. IPv6
Das erste Problem ließ sich recht einfach lösen: Ich hatte in der Domain-Konfiguration noch einen AAAA-Record auf die IPv6  des Hosters gesetzt. Offenbar versucht Facebook einen Zugriff über IPv6 durchzuführen. Damit kam der Inhalt der Vorgabeseite des Hosters und damit auch ein hübsches rotes Verkehrszeichen als Bild, was mit meiner Webseite nun so überhaupt nichts zu tun hat.

2. Cache
Nun wurde es aber spannend. Die IP-Zuordnung war korrekt und trotzdem wurde noch der alte Inhalt angezeigt. Problem 2 ist, dass Facebook die Inhalte cacht. Das ist natürlich nur dann ein Problem, wenn man die Inhalte ändert. Glücklicherweise gibt es von Facebook ein Tool (das eigentlich einen anderen Zweck hat), aber hier sehr hilfreich ist - der Open Graph Object Debugger. Hier kann man die Url eingeben und sich ansehen, was Facebook daraus ausliest zum Erzeugen der Vorschau. Und man kann hier auch erzwingen, dass die Daten neu abgerufen werden.

3. Bilder
Letztes Problem bei mir waren Bilder. Auf vielen Webseiten ist es gerade üblich, im Header einen Slider mit Bildern zu haben. Diese Bilder findet auch der Crawler und möchte in der Vorschau eine Galerie anzeigen. Das ist aber nicht immer gewünscht. Nun kann man mit Meta-Informationen ein bestimmtes Bild erzwingen. Der entsprechende Metatag ist:

<meta property="og:image" content="http://komplette.url/zum/bild.jpg" />

Wichtig zu beachten: Das Bild muss mindestens 200 x 200 Pixel groß sein. Und: Größe und Seitenverhältnis definieren, ob das Vorschaubild links neben den anderen Metainformationen angezeigt wird (quadratisches Bild) oder ob sich das Bild über die komplette Breite des Posts zieht.

Bootstrap für AngularJS mit Angular UI

07.10.2014 15:07:00 | Jürgen Gutsch

Ein Konflikt zwischen AngularJS und einer Bootstrap basierten UI ist immer jQuery welches im Bootstrap integriert ist. das ist kein technischer Konflikt, sondern eher ein Logischer. Es gibt einfach keinen Grund für die Nutzung von jQuery, wenn AngularJS im Spiel ist.

Angular kann auch alles was jQuery kann, nur ist der Ansatz ein Anderer. jQuery nutzt die direkte DOM-Manipulation und AngularJS eher indirekt per Binding. jQuery ist in manchen Sachen bequemer und schneller, AngularJS ist dagegen strukturierter und modularer. Die beiden Frameworks direkt zu vergleichen macht keinen Sinn. Die beiden Frameworks in einem Projekt zu nutzen, macht ebenso wenig Sinn. Ja, es geht, aber man mischt zwei grundverschiedene Arbeitsweisen und Konzepte, das macht’s langfristig unübersichtlich.

Angular UI Bootstrap verheiratet nun Bootstrap mit AngularJS

Angular UI bietet mehr als nur Bootstrap mit AngularJS. Vor allem ist es eine Suite an Frameworks die speziell für AngularJS entwickelt worden sind. interessant ist vor allem auch Angular UI Grid oder UI Utils. Eine Übersicht aller Frameworks ist direkt auf der Website von Angular UI zu finden: http://angular-ui.github.io/

Bootstrap ist ja bekanntlich nicht nur ein CSS Frameworks, sondern bietet auch einige Erweiterungen per JavaScript an, die durch Angular UI Bootstrap nun als AngularJS-Services und Direktiven bereitgestellt werden.

Es ist so also – unter anderem – möglich in einem AngularJS Controller ein modalen Dialog zu öffnen, einen DatePicker oder einen TimePicker anzuzeigen.

Auch wenn im eine der eingebunden Libraries intern jQuery oder jqLite nutzen sollte, so hat man im eigenen Code nichts mehr damit zu tun. Das Programmierkonzept ist also durchgängig an AngularJS angepasst.

Im folgenden Beispiel habe ich einen einfachen Waiting-Dialog implementiert, der angezeigt werden soll, wenn die Anwendung etwas tut:

(function () {
    'use strict';

    angular
        .module('myNgApp')
        .service('$wait', service);

    service.$inject = ['$modal'];

    function service($modal) {
        var modalInstance;

        this.open = function () {
            modalInstance = $modal.open({
                templateUrl: 'waitingDialog.html',
                backdrop: 'static',
                keyboard: false,
                size: 'sm'
            });
        };

        this.close = function () {
            if (modalInstance) {
                modalInstance.close();
            }
        };
    }
})();

Hier wird der Service $modal injected über den das modale Fenster erzeugt und gesteuert werden kann.

Beim erzeugen des Dialoges hätte ich Möglichkeit einen AngularJS Controller mit zu geben, mit dem der Dialog arbeiten soll. Schaut am besten in die Dokumentation für die weiteren Optionen.

Die templateUrl ist ein Verweis auf ein eingebettetes AngularJS-Template welches ein Bootstrap-Dialog definiert:

<script type="text/ng-template" id="waitingDialog.html">
    <div class="modal-body">
        Please wait...
    </div>
</script>

In meinem AngularJS Controller nutze ich diesen Service indem ich ihn dort injecte

(function () {
    'use strict';

    angular
        .module('myNgApp')
        .controller('ProjectEditController', controller);

    controller.$inject = ['$scope', '$http', '$wait'];

    function controller($scope, $http, $wait) {
        var init = function () {

            $http.get('/api/Project/' + $scope.projectID)
                .success(function (data) {
                    $scope.project = data;
                    $wait.close();
                })
                .error(function (data) {
                    $wait.close();
                    //TODO: display error message
                });

        };

        $scope.save = function () {
            $wait.open();

            $http.put('/api/Project/' + $scope.projectID, $scope.project)
                .success(function () {
                    $wait.close();
                })
                .error(function () {
                    $wait.close();
                    //TODO: display error message
                });
        };

        init();
    }
})();

Aktuell setze ich Angular UI Bootstrap in einem großen Kundenprojekt, in einer SharePoint Provider Hosted App, ein. Dadurch sind wir recht schnell in der Lage sichtbare Ergebnisse präsentieren zu können.

Pretzel – Statisches .NET Blog à la Jekyll – Teil 5: Publizieren

03.10.2014 01:39:01 | Jürgen Gutsch

In diesem letzten Teil zeige ich wie das Pretzel-Blog publiziert wird.

Die Denkbar einfachste und sehr klassische Art, sein Blog zu publizieren ist der Upload per FTP auf eine beliebige Website. Allerdings ist der Workflow dafür, im Vergleich zu den angedachten Methoden zu komplex.

Da man sich mit Pretzel eh schon auf Kommandozeilen ebene befindet, kann man die Änderungen doch auch gleich per Git publizieren.

github.iu

Ohne viel Konfiguration kann das per github.io gemacht werden. Es muss einfach ein neues Repository für das Web angelegt werden. Wie man das macht, kann hier nachgelesen werden: https://pages.github.com/

Anschließend wird das Repository als remote für das Repository eingerichtet, dass wir für den ordner _site eingerichtet hatten (siehe Beitrag zum Setup)

Sobald nun die Änderungen im Ordner _site comittet und gepusht sind, sind diese auch sichtbar unter <username>.github.io, in meinem Fall unter juergengutsch.github.io.

Wer möchte kann einen CNAME Eintrag in seinem Nameserver machen und auf die öffentliche Domain seines github.io Webs verweisen und diesen Eintrag in einer CNAME-Datei bekannt machen. So lässt sich der Blog dann mit einer eigenen Domain ansprechen

Azure Website

Die Azure Website bietet gleich mehrere Varianten für ein Deployment an.

  • So kann man die Sourcen von Visual Studio Online (TFS),
  • von einem lokalen Repository holen (das entspricht in etwa dem Prinzip von github.io)
  • Von einem GitHub Repository
  • Vn DropBox
  • von Bitbucket (per Git und Mercurial)
  • Codeplex
  • oder einem anderen Repository

Die Variante per lokalen Repository möchte ich hier kurz zeigen.

Die Variante per lokalem Repository unterscheitet nicht nicht von github.io außer natürlich bei der Einrichtung des Repositories. Als erstes müssen wir einen Deployment von einem Source Code Kontrolle einrichten. Den Link dazu findet man im Azure Management Portal auf dem Dashboard der gewählten Azure Website:

sourcecodecontrol

Wir wählen hier Local Git Repositiry und gehen rechts unten mit dem Pfeil weiter. Auf der folgenden Seite findet man nun die nötige Hilfe um das lokale Repository entsprechen einzurichten. Ist das passiert können die Änderungen – wie auch bei github.io – per git push auf das Repository hochgeladen werden. Im Management Portal kann nun im Bereich Deployments der Azure Website nachverfolgt werden, ob das Deployment fehlerfrei durchgelaufen ist:

azure

Die Deployments per GitHub oder Bitbucket sind zwar sehr einfach einzurichten, werden aber nicht auf Anhieb laufen. Der Grund ist das das Deployment per Kudu in diesem Fall eine .NET-Solution bauen möchte und keine Findet. Das Deployment wird also Abbrechen. Also entweder muss eine Solution mit einem leeren Projekt hinzugefügt werden, oder das Kudu-Script muss angepasst werden, so dass analog zum obigen Beispiel die Dateien lediglich in das Webverzeichnis kopiert werden.
Mehr zu Kudu kann hier gefunden werden.

Wer seine Azure Website mit einer eigenen Domain erreichen möchte, anstatt mit einer <subdomain>.azurewebsites.net muss mindestens auf eine kostenpflichte Shared-Instanz wechseln. Dann ist es relativ einfach möglich beliebige eigene Domains einzutragen.

Ich hoffe diese Serie hat einen kleinen Einblick in Pretzel geben können. Mir hat sie auf jeden Fall auch helfen können, in meiner Entscheidung, dieses Blog in näherer Zukunft nach Pretzel zu migrieren. Einen Umzug auf ein modernes und flexibles System war ja schon länger geplant.

Beispielcode zu meinem Open XML SDK Vortrag online

02.10.2014 14:35:11 | Andre Kraemer

Der Beispielcode zu meinem Vortrag über die serverseitige Generierung von Word Dokumenten mit dem Open XML SDK ist nun auf GitHub online und kann über folgenden Link herunter geladen werden: https://github.com/AndreKraemer/Basta-2014-OpenXML-Demo

openxml-demo

Das Projekt besteht aus einer kleinen Konsolenanwendung, die mehrere Aktionen durchführen kann. Unter anderem wird gezeigt wie Teilnahmezertifikate aus einer Vorlage über Textersetzung erstellt werden können, wie Tabellen fortgeführt werden und neue angelegt werden können.

Beispielcode zu meinem Open XML SDK Vortrag online

02.10.2014 14:21:00 | Andre Kraemer

Der Beispielcode zu meinem Vortrag über die serverseitige Generierung von Word Dokumenten mit dem Open XML SDK ist nun auf GitHub online und kann über folgenden Link herunter geladen werden: https://github.com/AndreKraemer/Basta-2014-OpenXML-Demo 

openxml-demo

Das Projekt besteht aus einer kleinen Konsolenanwendung, die mehrere Aktionen durchführen kann. Unter anderem wird gezeigt wie Teilnahmezertifikate aus einer Vorlage über Textersetzung erstellt werden können, wie Tabellen fortgeführt werden und neue angelegt werden können.

Beispielcode zu meinem Open XML SDK Vortrag online

02.10.2014 13:35:11 | Andre Kraemer

Der Beispielcode zu meinem Vortrag über die serverseitige Generierung von Word Dokumenten mit dem Open XML SDK ist nun auf GitHub online und kann über folgenden Link herunter geladen werden: https://github.com/AndreKraemer/Basta-2014-OpenXML-Demo   Das Projekt besteht aus einer kleinen Konsolenanwendung, die mehrere Aktionen durchführen kann. Unter anderem wird gezeigt wie Teilnahmezertifikate aus einer Vorlage über Textersetzung erstellt werden können, wie Tabe...

Vortragsfolien: Das Repository-Pattern und der O/R Mapper

02.10.2014 08:00:34 | Andre Kraemer

Die einen lieben es, die anderen hassen es: Das Repository-Pattern. Neben dem Singleton Muster gehört es wohl zu den meist diskutierten Design Pattern. Vor einigen Jahren war ich selbst auch ein großer Fan dieses Musters, allerdings hat sich dies geändert, nachdem ich die ersten größeren Anwendungen auf dieses Basis entwickelt habe.

Grund genug, diesem Thema einen Vortrag zu widmen. Auf der BASTA 2014 hatte ich die Freue vor ca. 100 Teilnehmern über dieses Thema zu sprechen. Die entsprechenden Folien habe ich nun auf Slideshare veröffentlicht und hier eingebettet.

Viel Spaß damit, und wie immer Freue ich mich über Kommentare!

Vortragsfolien: Das Repository-Pattern und der O/R Mapper

02.10.2014 08:00:34 | Andre Kraemer

Die einen lieben es, die anderen hassen es: Das Repository-Pattern. Neben dem Singleton Muster gehört es wohl zu den meist diskutierten Design Pattern. Vor einigen Jahren war ich selbst auch ein großer Fan dieses Musters, allerdings hat sich dies geändert, nachdem ich die ersten größeren Anwendungen auf dieses Basis entwickelt habe.

Grund genug, diesem Thema einen Vortrag zu widmen. Auf der BASTA 2014 hatte ich die Freue vor ca. 100 Teilnehmern über dieses Thema zu sprechen. Die entsprechenden Folien habe ich nun auf Slideshare veröffentlicht und hier eingebettet.

Viel Spaß damit, und wie immer Freue ich mich über Kommentare!

Vortragsfolien: Das Repository-Pattern und der O/R Mapper

02.10.2014 07:00:34 | Andre Kraemer

Die einen lieben es, die anderen hassen es: Das Repository-Pattern. Neben dem Singleton Muster gehört es wohl zu den meist diskutierten Design Pattern. Vor einigen Jahren war ich selbst auch ein großer Fan dieses Musters, allerdings hat sich dies geändert, nachdem ich die ersten größeren Anwendungen auf dieses Basis entwickelt habe. Grund genug, diesem Thema einen Vortrag zu widmen. Auf der BASTA 2014 hatte ich die Freue vor ca. 100 Teilnehmern über dieses Thema zu sprechen. Die entsprechenden ...

Pretzel – Statisches .NET Blog à la Jekyll – Teil 4: Bloggen

02.10.2014 01:03:00 | Jürgen Gutsch

Nachdem wir eine kurze Übersicht über den Umfang von Pretzel gesehen haben, erfahren haben wie wir das System aufsetzen und anpassen können, möchte ich in diesem Teil zeigen, wie man nun Blogbeiträge schreibt und publiziert. (Wobei ich das eigentliche Publizieren im fünften und letzten Teil ausführlich beschreiben möchte)

Zu Anfang möchte ich die Ordnerstruktur noch einmal in Erinnerung rufen:
PretzelCreate

Heute schauen wir uns das Verzeichnis _posts genauer an. Dieser Ordner enthält unsere Blog Posts in einer flachen Struktur, geordnet nach Datum:
PretzelPosts

Was auffällt ist – na klar – der Dateiname. Das vorangestellte Datum ist Relevant für die Struktur des Blog-Archivs. Der eigentliche Dateiname ist der, mit der der Artikel letztendlich aufgerufen wird. Schauen wir uns an, was passiert, wenn wir mit > pretzel bake das Web bauen:
PretzelBaked

Unter _sites erhalten wir das “gebackene” web mit der Archivstruktur des Blogs. Aus dem Datum im Dateinamen wird die Ordnerstruktur erstellt und in einem der Tagesordner sehen wir eine HTML-Datei als Ergebnis. Wer möchte kann sich diese in einem Editor ansehen und wird die Summe an Layout-Dataien und Blog-Post erkennen.

So wie die Datei hier angelegt wurde, kann sie auch im Browser aufgerufen werden:
PretzelPostsBrowser

Hier nochmal die komplette URL zum ersten Blogbeitrag:
http://localhost:8080/2014/09/18/myfirstpost.html

Ein weiteres Feature ist der Ordner _drafts der Initial nicht angelegt wird. Hier können Artikelentwürfe angelegt werden, die nicht in der Ausgabe berücksichtigt werden.

Wie schreibt man nun einen neuen Artikel?

Ich empfehle hier einen der unzähligen Markdown-Editoren die es für diverse Plattformen gibt. Ich nutze gerne das MarkdownPad für Windows oder MarkPad für WinRT.

Eingeleitet wird das Dokument mit einigen Metadaten, die das Layout steuern und ggf. einen Titel und eine Beschreibung, etc. liefern:

--- 
layout: post
title: "Umlaute im Windows Benutzernamen"
author: "Author"
comments: true
teaser: Ich hatte es im letzten Beitrag bereits kurz geschrieben, dass ich meinen Benutzernamen im Windows tatsächlich blöderweise “Jürgen” genannt habe. Im Grunde funktioniert alles, außer man möchte “Exotische” Tools nutzen, die nicht mit Umlauten zurecht kommen.
tags:
- Hallo
- Welt
---

Diese Metadaten können beliebig gesetzt werden und in den Templates (Layouts) genutzt werden. Auf diese Art habe ich einen Teaser als kurze Beschreibung zum Artikel hinzugefügt. Ebenso ließe sich ein Bild zu jedem Artikel einfügen.

Man beachte das Tags als Auflistung ebenfalls über die Metadaten gesetzt werden

Anschließend erfolgt der eigentliche Artikel:

Ich hatte es  [im letzten Beitrag]( /2014/09/17/mysecondpost.html )  bereits kurz geschrieben, dass ich meinen Benutzernamen im Windows tatsächlich blöderweise “Jürgen” genannt habe. Im Grunde funktioniert alles, außer man möchte “Exotische” Tools nutzen, die nicht mit Umlauten zurecht kommen.

Das Problem das entsteht ist ein weiteres Userverzeichnis:
![ ](/img/umlaute/explorer.png)

Wir haben hier hier ein Verzeichnis, dass wie “Jrgen” aussieht, aber nicht ist. Zwischen dem J und dem r versteckt sich ein Sonderzeichen, das der Windows Explorer versteckt. Sichtbar wird das erst in der Kommandozeile:
![ ](/img/umlaute/commander.png)

Wer mit Markdown vertraut ist, wird sich schnell zurecht finden und kann auf diese Art schnell und effizient Artikel publizieren.

Das schöne an diesem System, wie auch an Jekyll, ist vor allem das Offline-Authoring, das ich bisher auch in diesem Blog mit dem Windows Live Writer nutze. Nur dass ich mit Pretzel und Jekyll noch freier in der Auswahl des Editors bin.

Unfertige Artikel und Entwürfe werden im Ordner _drafts abgelegt und in den Ordner _posts verschoben, sobald sie fertig sind. Ich muss anschließend nur > pretzel bake aufrufen und das Web wird neu erstellt, das heißt alle Artikel werden neu aus den Markdown Dateien “gebacken”. möchte ich die Beiträge nun Publizieren reicht es die Änderungen im Verzeichnis _site per Git zu comitten und per > git push auf den Server zu schieben.

Nutze ich dabei github.io muss ich nichts weiter konfigurieren und meine Änderungen sind sofort nach dem push sichtbar. Möchte ich allerdings eine Azure Website nutzen muss ich das automatische Deployment per Git oder Mercurial aktivieren um ebenso einfach publizieren zu können.

Im nächsten und letzten Teil zeige ich, wie das Publizieren des Blogs im Detail funktioniert und wie eine Azure Webiste eingerichtet werden kann um die Publizierung per Git oder Mercurial zu ermöglichen.

Pretzel – Statisches .NET Blog à la Jekyll – Teil 3: Customizing

01.10.2014 03:06:00 | Jürgen Gutsch

In den letzten beiden Teilen habe ich eine kurze Übersicht über die Möglichkeiten von Pretzel gegeben und gezeigt wie das Setup funktionieren kann. In diesem Teil widme ich mich dem Customizing eines Pretzel Blogs.

Wie bereits erwähnt, wird standardmäßig die Liquid Engine für die Templates verwendet. Eine ausführliche Dokumentation ist am besten im Wiki von Liquid oder in der Dokumentation von Jekyll zu finden: http://jekyllrb.com/docs/templates/ Da sich Pretzel an Jekyll orientiert, ist letztere Dokumentation eher zu empfehlen.

Schauen wir uns noch einmal an, wie das Arbeitsverzeichnis aufgebaut ist:
PretzelCreate

Die Verzeichnisse css und img sprechen für sich. Interessanter ist das Verzeichnis _layouts, welches ein Template für die Seitenstruktur, sowie eines für Blog-Posts enthält. Beide Templates sind als HTML-Datei angelegt, können aber Steuerinformationen in Form von Markdown-Code enthalten. So enthält die posts.html am Dateianfang eine Steuerinformation die auf die layout.html verweist:

---
layout: layout
---

Schaut man sich die Datei about.md an, so finden wir auch hier einen Verweis auf eine Datei aus dem Verzeichnis _layout, und zwar auf die posts.html

---
layout: post
title: About
comments: false
---

Die Kind-Elemente verweisen also immer auf eine übergeordnete Layout-Datei. Alle diese Meta-Informationen am Dateianfang einer Seite, wie z. B. einem Blog Post oder der about.md werden in den Templates mit page.title oder z. B. page.coments angesprochen und können so genutzt werden. Die layout.html gibt auf diese Art den Seitentitel aus:

<title>{{ page.title }}</title>

Ein Template muss einen Bereich ausweisen, in dem Inhalte und/oder Kind-Templates ausgegeben werden. Das passiert über folgendes Statement:

{{ content }}

Ausgaben von Werten erfolgt grundsätzlich über die doppelten geschweiften Klammern. Anweisungen und Schleifen mit einer geschweiften Klammer und einem Prozentzeichen. z. B.

<ul>
{% for tag in page.tags %}
    <li><a href="http://www.aspnetzone.de/tag/{{ tag }}">{{ tag }}</a></li>
{% endfor %}
</ul>

Auf die gleiche Art sind rss.xml, atom.xml und die sitemap.xml, allerdings ohne Verweis auf eine Layout-Datei. Diese Datei greifen direkt auf die Blog Posts Auflistung im Site-Objekt zu und geben die Links zu den Blog Posts aus:

{% for post in site.posts %}

Für weitere Eigenschaften im Site- oder im Page-Kontext, schaut ihr am besten ebenfalls in der Jekyll-Dokumentation nach

Zu beachten ist auch: In der rss.xml, atom.xml und der sitemap.xml muss die Domain für die URLs noch angepasst werden, da hier standardmäßig auf http://domain/ verwiesen wird.

Aus meiner Sicht ist die index.md nach dem Setup ebenfalls zu beachten. Diese Datei, die eigentliche eine Content-Datei sein könnte, enthält hier HTML-Code, der eine Übersicht über die aktuellen Posts erzeugt und ausgibt. Wir sehen hier ein Beispiel, wie sich in jeder Content-Datei auch direkt HTML einbetten lässt um die Seiten etwas zu erweitern.

Viel mehr gehe ich nicht auf die Möglichkeiten der Template Engine ein. Bitte entnehmt weiter Informationen den vorhandenen Templates oder den oben angegebenen Dokumentationen.

Wer will und kann, sollte das Layout entsprechend anpassen. hat man sich einmal in die Template-Engine eingearbeitet, ist es recht einfach die nötigen Anpassungen vorzunehmen.

Ist das aussehen des Blogs angepasst, können wir uns dem ersten Blog Post widmen. Wie das Prinzip von Pretzel funktioniert zeige ich im Vierten Teil dieser kurzen Serie

Beispiel

Ich möchte auf der Startseite nicht nur Den Titel und das Datum des Blogposts anzeigen, sondern auch einen kurzen Einleitungstext, damit die Besucher erfahren, was sich hinter eine möglicherweise reißerischen Überschrift verbirgt. Dafür kann ich einfach die Metainformationen eines Blog Posts ergänzen:

---
layout: post
title: My pritty cool titel for the next article
comments: true
teaser: This article containes super cool information about creating a blog with pretzel
image: /img/coolarticle/teaserImage.jpg 
tags:
- pretzel
- tutorials
---

Diese Informationen kann ich nun direkt, sowohl in der index.md, als auch in den Feeds nutzen. In diesem Fall möchte ich auf der Startseite den letzten Artikel etwas stärker anpreisen und ergänze um den teaser und das image:

<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
<p><img align="left" src="{{ post.image }}" alt="" />{{ post.teaser }}</p>
<div class="postdate">{{ post.date | date: "%e %B, %Y"  }}
    <ul>
    {% for tag in post.tags %}
        <li><a href="http://www.aspnetzone.de/tag/{{ tag }}">{{ tag }}</a></li>
    {% endfor %}
    </ul>
</div>

Kommentare

Im Standardtemplate ist Disqus als externe Kommentarfunktion eingebaut, die noch angepasst werden muss. Zum einen muss man einen Account dort besitzen und zum anderen Name des eigenen Kommentarbereichs (Disqus spricht von einem Forum) angegeben werden.

Das Pretzel ein statisches Blog ist, muss auf eine externe Kommentar-Plattform zurückgegriffen werden. Wer Disqus nicht verwenden möchte kann die entsprechenden JavaScripts entfernen und durch eine andere Plattform ersetzen.

Tags

Im Standardtemplate nach der Installation werden die im Post angegebenen Tags angezeigt, aber auch verlinkt, ohne dass es die entsprechende verlinkte Seite gibt. Es wird auf einen Unterordner tag verwiesen und dort wiederum auf einen Unterordner mit dem Namen des Tags. Das funktioniert leider so nicht nicht. Auf die schnelle kann die Verlinkung entfernt werden um den Benutzer nicht in die Irre zu führen. Langfristig könnte aber ein entsprechendes Template für die Tagübersicht angelegt werden.

Ich bin ursprünglich davon ausgegangen, dass Pretzel die Struktur anhand der angegebenen Tags automatisch erstellt. Das scheint leider nicht der Fall zu sein

Regeln | Impressum