Archiv der Kategorie: Links

Kommerzielle Ui Framworks für Angular 1 / 2 (Telerik, DevExpress, …)


Es gibt zwar eine Menge kostenlose Ui Frameworks für AngularJs, diese beinhalten aber meist nur die Standardkomponenten und z.B. kein richtiges Data Grid. Da ich aber ein richtiges Data Grid benötigte, musste ich mich also nach kommerziellen Lösungen umsehen. Bei den kommerziellen Lösungen habe ich leider keines finden können welches Nativ in AngularJs 1.x geschrieben ist. Außer Ionic, aber dabei handelt es sich um ein pures Mobile Framework. Für die Standardwebanwendungen gibt nur Lösungen die im Kern auf jQuery setzen und dann nach außen hin einen Angular “Wrapper” / Schnittstelle anbieten, so dass man denkt man verwendet native Angular Komponenten. Dafür gibt es inzwischen bei allen Anbietern TypeScript Support, mit Hilfe von passenden Typings für das jeweilige Framework, ist IntelliSense dann auch kein Problem mehr.

Am Ende habe ich nur vier Anbieter finden können, die mir zugesagt haben, die zumindest laut Webseite eine Angular 1 Integration bieten. Dabei handelte es sich um

1. DevExpress mit DevExtreme

Wie schon anfangs erwähnt handelt es sich bei der Angular 1.x Umsetzung um einen Wrapper mit dem alle DevExtreme Controls auch für Angular bereitstehen. Bei DevExtreme handelt es sich um die günstigste Lösung, wenn man nur auf JavaScript Webkomponenten angewiesen ist. Die Dokumentation ist spitze und enthält live Beispiele die man direkt anpassen und ausprobieren kann. Außerdem gibt es einen Themebuilder in dem ich meine Bootstrap 3 Variablen einlesen kann und DevExtreme dann entsprechend meine gewohnten Styles verwendet für Bootstrap 3. Außerdem scheint es ein recht aktives Forum zu geben in dem DevExpress Mitarbeiter zu vielen Fragen die passenden Antworten liefern.

Da die Grundvoraussetzungen sehr gut waren, habe ich hier auch die Trial Version ausprobiert und meine erste simple Angular 1.x Anwendung mit einer DevExtreme Textbox die an das ngModel gebunden wurde, hat auch nicht länger wie 20 Minuten gedauert (sehr gute Dokumentation). Leider musste ich bereits hier feststellen, das die Implementierung nicht Angular Like umgesetzt wurde. Denn die Eingabe in das Textfeld wurde erst dann in meine lokale Angular Variable zurückgeschrieben wenn ich das Textfeld verlassen habe (also kein “natives” TwoWayModel Binding out of the box). Außerdem konnte ich für die Validierung nicht wie gewohnt über AngularJs gehen und die Form Variablen wie $valid … verwenden, sondern hier muss ein eigener Validator von DevExtreme verwendet werden, was das Zusammenspiel von eigenen Angular Komponenten und DevExtreme quasi “unmöglich” macht. Wenn man also ein Formular mit Validierung bauen möchte, verwendet man am Besten nur DevExtreme Komponenten.

Dann habe ich noch die Autocomplete Textbox ausprobiert und versucht eine Serverseitige Abfrage für die Autocomplete Elemente zu implementieren, was mir nach 4 Stunden nur zum Teil gelungen ist und ich mit der Implementierung nicht wirklich zufrieden war.

Für DevExtreme gibt es aktuell eine Angular 2 Implementierung im CTP Status – zum ausprobieren. Dabei handelt es sich aber ebenfalls um einen Wrapper der wieder auf jQuery zurückgreift. Hier hat man dann aber anscheinend wieder alle gewohnten DevExtreme Funktionen auch in Angular 2 Anwendungen zur Verfügung.

2. Infragistics mit Ignite UI

Hier wird zwar auf der Webseite mit AngularJs geworben, aber es wird nur auf ein GitHub Repository verwiesen, was nur einen Bruchteil der Controls enthält die für das normale Ignite UI mit jQuery zur Verfügung stehen. Außerdem ist die Dokumentation mehr als nur fragwürdig, zumindest für die Angular Implementierung. Auch die angebotene Angular 2 Implementierung hat zumindest Abhängigkeiten auf jQuery und dies hört sich im ersten Moment nicht nach einer nativen Implementierung an.

Aufgrund der “schlechten” Grundvoraussetzungen habe ich hier auch keine Trial Version ausprobiert. Denn das Produkt kam schon aufgrund der schlechten Dokumentation und wenigen Controls für Angular nicht mehr in die nähere Auswahl.

3. Syncfunctions

Auch hier handelt es sich um eine recht große Anzahl an Controls die einem zur Verfügung stehen und für die es einen Angular 1.x und Angular 2 Wrapper gibt. Leider war auch hier die Dokumentation für die AngularJs Integration bzw. jQuery so schlecht, das es keine Live Beispiele gab, sondern nur Code Snippets mit passenden Screenshots dazu. Aufgrund der schlechten Dokumentation habe ich auch hier keine Testversion ausprobiert.

4. Telerik mit Kendo UI

Auch Telerik bietet für die Angular 1 Integration nur einen Wrapper an, dieser ist aber meiner Meinung nach wesentlich besser wie der von DevExtreme. Denn hier bin ich nicht komplett auf die Controls von Kendo UI angewiesen, sondern kann auch problemlos meine eigenen Controls verwenden wenn ich z.B. ein Formular mit Validierung erstellen möchte. Denn die Controls von Kendo UI integrieren sich “fast” nahtlos in die Angular Welt. Wichtig ist hier die passenden Dokumentationsschritte für AngularJS zu lesen, dann versteht man auch die normale Dokumentation etwas besser, wenn man hier teilweise nicht direkt etwas von AngularJs liest. Außerdem ist die Dokumentation sehr gut, es gibt Live Beispiele die man auch direkt bearbeiten kann und sieht was sich ändert. Auch Kendo UI stellt einen Themebuilder zur Verfügung, der zumindest einen rudimentären Support für Bootstrap bereitstellt. Leider wird bei den Icons noch auf das Sprite Image mit Icons von Bootstrap 2 gesetzt. Damit ist der Themebuilder leider nicht so gut wie der von DevExtreme, wenn es um die Bootstrap Integration geht.

Da aber auch hier die Grundvoraussetzungen gepasst haben, habe ich die Testversion ausprobiert und hatte bereits nach 20 Minuten meine erste AngularJs Anwendung mit einem DatePicker erstellt. Außerdem war es mir möglich innerhalb von 3 Stunden eine Autocomplete Textbox mit Serverseitiger Abfrage zu erstellen ohne größere Probleme, was mir in DevExtreme nicht gelungen ist.

Auch Kendo UI stellt eine Angular 2 Implementierung seiner Controls zur Verfügung, diese werden aber gerade komplett neu nativ in Angular 2 erstellt und daher gibt es auch erst eine Beta mit nur ein paar Controls. Es gibt aber eine gut einsehbare Timeline und Kommunikation in der gesagt wird wie der aktuelle Releaseplan aussieht.

5. Fazit

Prinzipiell blieben nur zwei Frameworks übrig zwischen denen ich mich entscheiden musste, denn nur bei DevExtreme und Kendo UI waren wirklich sehr gute Dokumentationen vorhanden. Denn die Dokumentation muss bei der puren Anzahl an Einstellungsmöglichkeiten, die für die einzelnen Controls zur Verfügung stehen einfach sehr gut ausfallen, sonst ist man nur auf den Support des Anbieters angewiesen. Da ich aber auch weiterhin eigene AngularJs Controls verwenden wollte, war mir eine möglichst native AngularJs Integration auch sehr wichtig und daher verwende ich aktuell Kendo UI.

Mit der aktuellen Kendo UI Version, habe ich bisher das Grid und das Gantt Chart verwendet und hier merkt man teilweise schon sehr das hier eine jQuery Implementierung vorliegt und keine native AngularJs Implementierung. Trotzdem bin ich mit dem was das Grid bzw. das Gantt Chart kann sehr zufrieden und es gliedert sich soweit auch ganz gut in meine AngularJs Anwendung ein. Außerdem ist der Support bisher auch ganz gut, dieser antwortete in der Regel innerhalb von 2 Tagen, bisher auf jedes Problem was ich hatte und keinen passenden Forumseintrag finden konnte. Bei der Verwendung von “einfachen” Controls wie der Datepicker, denkt man schon “fast” das man eine reine AngularJs Implementierung vorliegen hat. Außerdem bin ich auf die nativen Angular 2 Implementierungen vom Kendo UI gespannt.

HINWEIS: Wer sich für ein kommerzielles UI Framework für AngularJs interessiert, dem würde ich meiner Meinung nach auf jeden fall empfehlen das er DevExtreme und Kendo UI einmal selbst ausprobiert und prüft womit man selbst am besten klar kommt.

Außerdem möchte ich darauf hinweisen, das ich beide Frameworks vorher noch nicht verwendet habe und mir durchaus auch ein Fehler bei der Verwendung von DevExtreme unterlaufen sein kann, warum ich z.B. die Autocomplete Textbox nicht mit meinen Ansprüchen zum Laufen bekommen habe oder das TwoWay Databinding nicht so funktionierte wie von mir erwartet.

Advertisements

AngularJS – wichtige Links und Toolsets


Wenn man sich in ein neues Framework einlesen / einarbeiten muss, ist es oft schwer einen guten Einstieg zu finden. Daher im Folgenden eine kleine Sammlung an interessanten Links zu AngularJS.

Meine Projekte setzen sich aktuell aus den folgenden Frameworks / Technologien zusammen:

  • ASP.NET MVC zum Bereitstellen der AJAX Daten klassisch mit Controllern und Models
  • AngularJS zum Anzeigen / Manipulieren der Daten
  • Bootstrap für das Layout

Für AngularJS selbst gibt es im Netz ein paar sehr gute auch kostenlose Video Tutorials, die für den Anfang bzw. auch für Fortgeschrittene immer wieder was neues zu bieten haben.

Zum einen von egghead.io – hier gibt es eine Menge kostenloser Videos von John Lindquist – meine Empfehlung die Sortierung auf “Sort by: Earliest” einstellen und dann einfach von vorn beginnen, desto weiter Ihr zu den aktuellen Einträgen vorstoßt, sind vermehrt kostenpflichtige Videos dabei, aber immer noch genug die nichts kosten. Hier gibt es inzwischen auch einen YouTube Channel mit allen Videos.

Die andere Videoquelle die ich sehr brauchbar fand ist ein YouTube Channel mit 51 AngularJS Videos die alle sehr informativ für Anfänger und Neueinsteiger sind und auch folgende “All you need to know about AngularJS” YouTube Videos sind sehr gut.

Außerdem bietet AngularJS selbst auch einen Youtube Channel an wo es auch noch einmal eine Menge zu sehen gibt. von kurzen Clips bis hin zu langen Sessions von einer Stunde oder mehr.

Wenn man aus dem ASP.NET MVC Bereich kommt, gibt es auch ein sehr gutes Einführungsvideo wie man eine ASP.NET MVC Anwendung in eine AngularJS Anwendung umschreibt.

Weitere AngularJS Links:

  1.  Große Linksammlung zu AngularJS Themen auf github
  2. Übersicht über viele AngularJS Variablen und Funktionen bei cheatography
  3. Eine Gute Übersicht für Code Guidelines mit AngularJS, wenn man schon etwas weiter vorangeschritten ist.
  4. Einführung in Services und Factories von AngularJS
  5. Einführung in Direktiven mit AngularJS
  6. Eine sehr gute Übersicht über Form Validierung mit AngularJS

Da ich außerdem sehr gerne mit Bootstrap arbeite gibt es auch für Bootstrap noch zwei sehr gute Implementierungen die das JavaScript von Bootstrap quasi “ersetzten” und alles im AngularJS Style mit Direktiven umsetzten und Sie bieten außerdem noch ein paar zusätzliche Controls an.

  1. Angular UI-Bootstrap
  2. Angular Strap

Bisher habe ich zwar nur AngularUI für Bootstrap verwendet, da diese Umsetzung direkt vom AngularJS Team kommt aber Angular Strap ist in seiner neuesten Version auch komplett mit AngularJS umgesetzt und benötigt kein jQuery mehr. Außerdem bietet Angular Strap mehr zusätzliche Controls an. Leider weiß ich nicht ob man beide Versionen gefahrenlos im gleichen Projekt benutzen kann. Wenn man in seinem Projekt jedoch AngularJS und Boostrap verwendet, sollte man auf jeden Fall eine der beiden Implementierungen verwenden und nicht die Original JavaScript Implementierung von Bootstrap.

Dann gibt es noch eine Sammlung aus nützlichen Direktiven – AngularUI nicht zu verwechseln mit “UI-Bootstrap” was aber ebenfalls mit in der Sammlung aus nützlichen Direktiven enthalten ist.

Das sind so meine wichtigsten Anlaufstellen und Erweiterungen die ich aktuell für die Entwicklung von Webseiten verwende. Wenn Ich was vergessen haben sollte oder Ihr noch weitere gute Links habt, dann postet diese einfach.

MVC Trace, Debugging, Routes und Requests im Browser auswerten mit glimpse


Beim Erstellen einer neuen MVC4 Webseite hatte ich, das Problem das der Aufbau der Seite “extrem” langsam war und ich hatte bereits ermittelt, das es an der DB nicht liegt. Daher habe ich nach einer Möglichkeit gesucht, den Seitenaufbau wie früher im Classic ASP.NET mit Trace anzeigen zu können. Dabei bin ich schnell auf das Tool glimpse gestoßen.

Bei glimpse handelt es sich um ein Plugin welches dem MVC Projekt z.B. per Nuget hinzugefügt werden kann. Die Installation per NuGet ist unkompliziert und geht schnell. In der web.config wird ein Eintrag hinzugefügt, mit dem sich glimplse schnell ein und ausschalten lässt. Hier einfach von defaultRuntimePolicy=“On“ auf defaultRuntimePolicy=“Off“ stellen um glimplse komplett zu deaktivieren.

<glimpse defaultRuntimePolicy="On" endpointBaseUri="~/Glimpse.axd">
 ....
</glimpse>

Ein sehr gutes und cooles Video mit den Entwicklern von glimpse findet Ihr hier, im Video wird gezeigt was man mit glimpse alles machen kann.

Wenn man glimpse eingerichtet und aktiviert hat in der web.config und man sein Projekt startet, kann man ganz einfach über die eigene Projekt URL “http://localhost:58901/Glimpse.axd” noch ein “Glimpse.axd” anhängen und die folgende Seite wird angezeigt.

image

Die beiden Links für “Turn Glimpse on” und “Turn Glimpse off” kann man sich am besten in seine Favoriten ziehen. Wenn man jetzt auf “Turn Glimpse on” klickt und auf seine Projektseite geht, siehst man rechts unten im Bildschirm ein kleines “Logo”

image

Klickt man auf das Logo erscheint die glimpse Übersicht und man kann auf alle wichtigen Debuginformationen zugreifen.

Man sieht z.B. welche Route verwendet wurde um die Seite zu laden, dabei sind die gelben Einträge immer die die verwendet/gefunden wurde.

image

Oder man Sieht wie lange es gedauert hat die Seite zu rendern und wo genau die Zeit “vergangen” ist.

image

Viele der Funktionen werden im oben verlinkten Video erläutert und gezeigt. Ich bin bzw. war sehr begeistert von glimpse, es kann einem wirklich gut helfen Fehler zu finden und Daten auszuwerten, von Ajax Aufrufen bis hin zu Remotenutzungen ist alles möglich (siehe Video).

Tools die ich beim Entwickeln von ASP.NET Webseiten verwende


Das Schreiben von .NET Programmen macht mir prinzipiell so viel spaß, da es Coole Tools gibt die einem das Leben einfacher machen. Dazu gehört für mich immer die aktuellste Version von Visual Studio mit den dazu passenden Plugins.

Dabei habe ich mein Visual Studio nicht mit Plugins “vollgekracht” sondern, hier reichen schon ein paar wenige Plugins aus um einem das Leben leichter zu machen.

0. Team Foundation Server Anbindung im VS

Selbst im privaten Bereich habe ich all meine Projekte/Testprojekte inzwischen in der Quellcodeverwaltung liegen, da man hier von überall zugreifen kann und sie nahtlos ins VS integriert ist. Ich verwende aktuell z.B. Codeplex um meine Projekte abzulegen, was kostenlos ist und wunderbar funktioniert. Die Projekte sind hier aber immer öffentlich zugänglich. Wenn man mehr auf die Privatsphäre wert legt gibt es noch die Möglichkeit auf den Team Foundation Service zurückzugreifen. Hier kann man Projekte mit bis zu 5 Personen kostenlos verwalten.

1. Resharper

Resharper ist für mich mit das wichtigste Tool, um Visual Studio zu einem wirklich guten Werkzeug aufzustocken. Wer einmal einen Monat damit gearbeitet hat und sich dann an ein Visual Studio setzt ohne Resharper, denkt man man ist wieder in der Steinzeit angekommen. Resharper stellt dabei viele nützliche Funktionen zur Verfügung, was z.B. das Refactoring und das Hinzufügen von Verweisen und das Schreiben von normalen Code angeht. Ist leider nicht ganz günstig, aber wie ich finde jeden Cent wert.

2. VS10x Code Map v2

VS10x ist ein Plugin, welches einem im Codefenster noch zusätzliche alle Properties, Funktionen und Region anzeigt, filtert oder farblich einfärbt. Vor allem sehr nützlich wenn Klassen mehr wie 500 Zeilen Code enthalten und man evtl. leicht den Überblick verlieren könnte wo man zuletzt gewesen ist. Dieses Tool ist auch nicht Kostenlos, aber wie ich finde schon um einiges günstiger wie Resharper zu haben und es lohnt sich.

image

3. Javascript Parser

Der Javascript Parser stellt quasi eine ähnliche Funktionalität wie VS10x Codemap zur Verfügung, nur für JavaScript Code in Javascript Dateien oder Scriptblöcken in cshtml Dateien und ist dazu noch kostenlos.

image

4. Web Essentials

Da ich sehr viel Privat und auch auf Arbeit mit Webprojekten zu tun habe, finde ich Web Essentials sehr nützlich als Plugin, was einem das Arbeiten mit Less Dateien und auch Javascript vereinfacht.

5. Firefox mit Firebug oder Chrome

Hierbei handelt es sich zwar nicht um ein Plugin für Visual Studio, aber für Webentwickler sind das nicht einfach nur Browser, sondern es sind Tools um z.B. Javascript zu debuggen, HTML Code und CSS anzupassen, die Requests auszulesen uvm. Die Browser lassen sich hier sehr gut “pimpen” und ich debugge meinen Javascript Code lieber direkt im Browser als im VS, da ich hier immer irgendwelche Probleme habe um auch den Javascript Code debuggen zu können.

 

Wenn jemand noch weitere Coole Tools im Angebot hat, dann einfach in den Kommentaren melden und ich werde mit das mal anschauen.

Jetzt mit Code Plugin für die neuen Beiträge


Da ich bisher immer zu faul war mich darum zu kümmern, das man den Code direkt aus der Seite kopieren kann. Habe ich jetzt ein geeignetes Plugin für den Windows Live Writer gefunden in dem ich den Code Formatiert einfügen kann.

Das ganze sieht dann zum Beispiel folgendermaßen aus:

    /// <summary>
    /// Interaktionslogik fuer MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            CallApplication callApplication = new CallApplication();
            this.DataContext = callApplication;
        }
    }

Ich benutzte jetzt das Plugin von: http://richhewlett.com/wlwsourcecodeplugin/

Welches man einfach im Pluginordner vom Live Writer ablegt und dann unter Einfügen im Live Writer findet.

image

Hier öffnet sich ein Fenster in dem man einfach seinen Code einfügt der auf der Seite angezeigt werden soll und man stellt noch die Sprache ein um die es sich handelt. Schon wird der Code wie oben angezeigt auf dem WordPress Blog dargestellt.

image

Update:

Bei Problemen mit der Formatierung, das z.B. HTML Tags mit &uml; dargestellt werden, dann unter Start->Optionen->Plugin->SourceCode Highlighter auswählen und auf Optionen klicken und hier den Hacken bei „Disable HTML Encoding“ setzen.

Ein sehr nützliches Plugin für den Live Writer findet Ihr hier:

http://codeclimber.net.nz/archive/2010/07/10/How-to-edit-very-old-posts-with-Windows-Live-Writer.aspx

damit lassen sich auch ältere Beiträge mit dem Live Writer bearbeiten, in dem man einfach in der URL z.B.: „wlw://squadwuschel.wordpress.com/?postid=DeinePostId“ angibt und natürlich noch deine URL ersetzt und schon öffnet sich der Live Writer und Ihr könnt auch den ältesten Beitrag bearbeiten.

MVC Helper von Microsoft (Captcha)


Ich habe gestern eine sehr Interessante Seite direkt von MS gefunden, in der es eine Sehr gute Einführung in ASP.NET MVC gibt und wie sollte es anders sein findet man diese natürlich direkt auf ASP.NET:

http://www.asp.net/mvc/tutorials

nachdem ich mich noch einmal mit den Grundlagen auseinander gesetzt habe, war da auch noch ein Abschnitt über Razor und Helper Klassen:

http://www.asp.net/webmatrix/tutorials/asp-net-web-pages-api-reference

Leider sind diese bei einem ASP.NET MVC Projekt nicht standardmäßig eingebunden, so dass man erst einmal die Referenz auf die “Microsoft.Web.Helpers” hinzufügen muss über den “Library Package Manager”

image

hier muss dann auf der Konsole nur noch:

PM> Install-Package microsoft-web-helpers

eingegeben werden und schon wird die passende Dll dem Projekt hinzugefügt.

(Quelle: http://midnightprogrammer.net/post/Working-With-Microsoft-Web-Helpers-In-MVC-3-Razor-View.aspx)

Jetzt kann man auf die Helper von Microsoft zugreifen. Das kann z.B. folgendermaßen aussehen:

image

Der passende Code mit den Helper Aufrufen sieht dann so aus:

image

Auch das Einbinden eines Captchas ist sehr einfach, hier muss nur noch darauf geachtet werden das man sich vorher zwei Schlüssel (private und public) erstellen lässt unter:

https://www.google.com/recaptcha

Ich habe die beiden Schlüssel dann in der Web.Config bei mir eingebunden und Initialisiere diese dann in der Global.asax im Application_Start(), wenn man dies direkt hier macht, dann braucht man beim Erstellen und Abfragen nicht jedes mal den Schlüssel als Parameter mit übergeben.

image

Zum Rendern des Captchas muss nur noch auf der Webseite folgender Code angegeben werden mit “ReCaptcha.GetHtml()” wird das Catpcha erstellt.

image

Gerendertes Catpcha auf der Webseite:

image

und wenn man dann im Controller prüfen will ob die Eingabe auch korrekt war geht das genauso einfach mit, “ReCaptcha.Validate()”:

image

So einfach kann die Einbindung eines Captchas unter ASP.NET MVC sein.

Coole Seite für Extension Methoden


Habe die Tage eine Coole Seite entdeckt, auf der die unterschiedlichsten Extension Methoden aufgelistet sind.

http://www.extensionmethod.net

aufmerksam geworden bin ich auf die Seite als ich eine Extension Methode für Listen gesucht habe um diese nach einem Bestimmten Wert zu sortieren, der z.B. bei MVC in der URL übergeben werden kann und für alle Objekttypen gültig ist. Mit Hilfe einer generischen Extension und Reflections war das dann alles kein Problem mehr.

http://www.extensionmethod.net/Details.aspx?ID=124