Archiv für den Monat April 2012

JavaScript–Alle gebundenen Events auf einer Seite anzeigen


Ich habe mich in letzter Zeit doch einmal etwas näher mit JavaScript und jQuery beschäftigt, vor allem durch das frei verfügbare Tutorial für jQuery unter tuts+premium wurde ich animiert mich doch etwas näher mit der Materie auseinander zu setzten.

Dabei finde ich es jedes mal aufs neue schwierig herauszufinden, welche Events auf einer Seite an welches Element gebunden sind, vor allem wenn es sich um eine WordPress Seite mit vielen Plugins handelt. Dabei bin ich auf ein Cooles online Tool gestoßen welches einem auf jeder beliebigen Seite anzeigt wo welche JavaScript (jQuery) Events gebunden sind. Dabei handelt es sich um das Onlinetool Visual Events, hier muss man sich einfach den vom Autor der Seite angegeben Link als Bookmark einrichten.

Wenn man sich dann auf einer Seite befindet auf der man gerne wissen möchte welche Events gebunden wurden, einfach auf den Link klicken der gespeichert wurde und schon wird ein Overlay auf die aktuelle Seite gelegt und man kann sich die Events anschauen.

image

bzw. bin immer daran interessiert, wenn jemand ein noch cooleres oder ebenbürtiges Addon, Plugin oder sonstiges Programm kennt, dieses ruhig in die Kommentare zu schreiben.

Advertisements

NuGet und eigene Pakete erstellen


Wie ich bereits hier angekündigt habe, werde ich hier kurz erläutern wie man ein eigenes NuGet Packet erstellt. Ich hatte nämlich das Problem, das ich eine JavaScript-Datei in mehreren Projekten nutzen wollte und die Datei wird weiterhin aktualisiert und die Verteilung in den unterschiedlichen Projekten sollte so einfach wie möglich gestaltet werden.

Es gibt unterschiedliche Möglichkeiten Packages zu erstellen, ich werde hier die Erstellung mit Hilfe des NuGet Package Explorer erklären. Es ist auch möglich die Packages über einen eigenen Server oder ein Verzeichnis zu verteilen, ich werde hier nur auf die Möglichkeit der Verteilung direkt über NuGet erklären.

Als erstes muss man sich den NuGet Package Explorer installieren, dabei handelt es sich um eine ClickOnce Installation. Dann benötigen wir noch einen Account bei nuget.org für einen API Key um unser Package hochladen zu können.

Nach dem Sie den NuGet Package Explorer erfolgreich installiert haben, starten Sie diesen und erstellen ein neues Package. Wenn Sie bereits ein Package veröffentlich haben, können Sie dieses auch suchen, laden und bearbeiten.

image

Bei einem neuen Package müssen Sie die Metadaten anpassen und den passenden Content hinterlegen. Bei den Metadaten ist es wichtig, das Sie jedes mal wenn Sie eine aktuelle Version Ihrer Library online stellen auch die Versionsnummer anpassen. Den Rest der Metadaten füllen Sie so genau wie möglich aus.

Um Jetzt Dateien dem Projekt hinzuzufügen, wie z.B. eine JavaScript Datei, empfehle ich diese per Drag&Drop in den “Package contents” Bereich des NuGet Package Explorers zu ziehen, denn dann erkennt dieser bereits um welchen Dateityp es sich handelt und wenn dieser erkannt wird, dann wird bereits ein passenden “Installationsverzeichnis” vorgeschlagen, für *.dll z.B. lib Verzeichnis des Projektes. In meinem Fall schiebe ich eine JavaScript Datei in das Projekt, dann kommt der Folgende Screen

image

Hier einfach auf “Yes” klicken. und dann sieht der “Package contents” Bereich folgendermaßen aus

image

Jetzt würde die JavaScript Datei im Hauptverzeichnis unserer Webanwendung landen, wenn wir das Package so ausliefern würden. Wenn wir wollen das diese im “Scripts” Ordner landet, dann müssen wir hier die Verzeichnisstruktur anpassen und noch ein Verzeichnis erstellen, indem wir mit der Rechten Maustaste auf “content” klicken und “Add New Folder” auswählen.

image

Den Ordner mit dem Namen “Scripts” erstellen und dann die JavaScript Datei mittels Drag&Drop in den Ordner Scripts verschieben und schon wird die Datei wenn das Package installiert wird in das richtige Verzeichnis kopiert.

image

Wenn wir alle Metadaten eingetragen haben und alle Dateien hinzugefügt haben, dann können wir unser Package veröffentlichen unter “File->Publish”.

image

Hier müssen wir erst noch den Key von unserem nuget.org Account eintragen, welchen man in seinen Accounteinstellungen findet. Wenn dieser eingetragen ist, dann ist auch der “Publish” Button aktiviert.

image

Wenn das Package dann veröffentlicht wurde, kann man dies ganz einfach über den “Add Library Package Reference” im Visual Studio finden und installieren.

image

NuGet und Visual Studio 2010


Bis heute habe ich NuGet nur benutzt, da es in ASP.NET MVC automatisch mit installiert wird, aber was bringt mir das ganze und wozu ist es gut? Eine gute Einleitung zur Thematik bietet der Artikel im MSDN Magazin. Im Folgenden werde ich kurz erläutern wie man NuGet installiert und seine Pakete aktualisieren kann und welche Probleme auftreten wenn man mit dem TFS arbeitet.

Was bringt mir NuGet eigentlich für Vorteile

Kurz und knapp gesagt, man kann externe Bibliotheken und Scripte sehr einfach in seine eigenen Projekte einbinden und mit nur einem Klick lassen sich diese auf die aktuellste Version upgraden z.B. jQuery. Man umgeht damit das lästige Suchen und upgraden nach aktuellen Versionen. Denn der NutGet Package Manager übernimmt dies komplett, d.h. die alte Version wird entfernt, wenn Abhängigkeiten bestehen wird man darauf hingewiesen und die neuen Dateien inkl. der Verweise werden dem eigenen Projekt hinzugefügt. Dazu gehört z.B. auch das Anpassen der Web.config auf die neue Assembly Version.

Außerdem kann man sehr leicht eigene NuGet Pakete bereitstellen, was ich im Folgendem Eintrag kurz erklärt habe.

Installation von NuGet

Wenn es noch nicht installiert wurde, dann findet man es unter “Extras->Erweiterungs-Manager” im VS 2010, hier muss man im Onlinekatalog nach “NuGet” suchen und installieren.

Bei mir ist NuGet bereits installiert, was man an dem grünen Hacken erkennen kann.

image

Verwalten der Installierten Pakete mit dem Package Manager

Wenn wir NuGet installiert haben, finden wir die Verwaltung im VS zum einen unter “Extras->Library Package Manager->Add Library Package Reference…”.

image

oder im aktuellen Projekt im Kontextmenü über “Add Library Package Reference…”

image

Hier wird jeweils der folgende Dialog geöffnet

image

Im Menü für “Online” kann man den Online Katalog für alle zur Verfügung stehenden Packages durchsuchen und direkt installieren.

In der Abbildung sieht man alle aktuell installierten Packages für die ein Update bereit steht, wenn bereits die aktuellste Version installiert ist, wird dieses Packet hier nicht mehr angezeigt. Wenn Sie auf Update klicken, dann werden automatisch die alten Dateien aus dem Projekt entfernt und die aktuellsten Dateien dem Projekt hinzugefügt.

Wenn man den TFS nutzt, kommt es hier häufig zu dem folgenden Fehler “Der Remoteserver hat einen Fehler zurückgegeben: (401) Nicht autorisiert”, das einzige was mir hier immer geholfen hat, ist das Visual Studio neu zu starten.

image

Außerdem finden sie im Root Ihrer Anwendung im Projektmappen-Explorer eine “packages.config” in der man sieht welche Packages man installiert hat und um welche Version es sich hierbei handelt.

imageimage

Die Packages selbst werden auf *.sln Ebene im Dateisystem abgelegt und von hier aus in das Projekt entpackt.

image

image