jQuery: HTML Inhalt einfärben

Geschrieben von everflux am Dezember 30th, 2009

Es kam die Frage auf, wie man bei einer Web Anwendung, bei der die Ausgabe vorgegeben ist, die Präsentation anpassen kann. Ohne eben die Web Anwendung ändern zu müssen.
Wenn man auf die Ausgabe gewissen Einfluss hat (z.B. über Templates), so kann man mit JavaScript und jQuery sehr einfach Anpassungen vornehmen – sogar aufgrund des HTML Inhalts. (In diesem Fall ging es um die optische Anpassung von Tabellen Zeilen, wenn es sich um premium Kunden handelt.) Weiterlesen »

Chromium Browser: Schneller Entwickeln!

Geschrieben von everflux am August 1st, 2009

Welche IDE man bevorzugt, darüber kann man sicherlich vortrefflich streiten. Genauso übrigens auch über Webbrowser. Doch eins ist klar: Bei der Entwicklung zählt jede gesparte Sekunde. Gerade in Webanwendungen wird man nicht um manuelles Testen und Ausprobieren herumkommen. Ich habe gemerkt, dass man mit dem Firefox (Firebug, Webdeveloper Toolbar, etc. pp) wunderbar Debugging betreiben kann. Das Tooling ist in meinen Augen ungeschlagen. Weiterlesen »

Canoo Webtest: NullPointerException durch JavaScript

Geschrieben von everflux am Mai 15th, 2009

Canoo Webtest bietet seit einiger Zeit auch (begrenzte) Unterstützung für JavaScript. Das ist gerade zum Testen von Web 2.0 Anwendungen interessant, kann jedoch auch zu sehr merkwürdigen Fehlern führen.

In meinem Fall quittierte Webtest die Arbeit mit der hilfreichen Meldung
com.gargoylesoftware.htmlunit.ScriptException: Wrapped java.lang.NullPointerException
Weiterlesen »

Canoo Webtest: GUI monitor deaktivieren

Geschrieben von everflux am Mai 14th, 2009

Canoo Webtest ist ein auf ant und Groovy basierendes Framework zum automatisierten Testen von Webanwendungen. Anders als beispielsweise bei Selenium wird HTMLUnit als „Browser“ verwendet.

Die Dokumentation von Webtest läßt jedoch trotz der zeitlichen Reife des Projektes an einigen Stellen zu wünschen übrig. Hier kann ein Blick in „webtest.xml“ sowie in „resources/build/WebTestReport.reference.xml“ im Installationsverzeichnis von Webtest etwas inspirieren. Weiterlesen »

Java/JavaFX -> iPhone + IpodTouch?

Geschrieben von everflux am März 5th, 2009

Sun hat mit JavaFX ein großes Vorhaben gestartet: JavaFX soll Java in einem Bereich populär machen, in dem Java ursprünglich brillierte: Rich Internet applications (RIA). Damals waren es die Java Applets, die für Lauftext, interaktive Menüs und ganze Lernprogramme eingesetzt wurde.

JavaFX soll eine neue Generation von Internet Anwendungen einläuten, Desigern wie Entwicklern neue Möglichkeiten an die Hand geben. Und mit JavaFX mobile soll die Philosophie „write once, run everywhere“ für mobile Anwendungen wahr(er) werden. JavaFX Mobile wird auf Blackberrys, Android und anderen Mobilgeräten laufen, solange zumindest JavaME vorhanden ist. (Die JavaFX Mobile runtime wird ggf. nachinstalliert) Auch wenn Nokia noch nicht offiziell im Boot ist, könnte ich mir eine entsprechende Ankündigung zur JavaOne gut vorstellen.

Doch was ist mit Java und dem iPhone von Apple? Auch der Apple ipod touch, der eine ähnliche Plattform wie das iPhone darstellt besitzt derzeit weder Flash noch Java Support. (Wenn man von einem Jailbreak Gerät absieht.) Weiterlesen »

Google Admanager Debugging

Geschrieben von everflux am Dezember 11th, 2008

Gerade wenn es um die Integration von gehosteten Applikationen von Drittanbietern geht, wird Debugging oft eine Tortur. Google bietet mit dem Admanager genau so eine Applikation als Dienstleistung: Einen Adserver.

Google wäre aber nicht Google, wenn es hier nich auch ein paar schlaue Kniffe gäbe – der Admanager bekommt stets die URL der Seite, auf der Werbung eingebunden wird übermittelt. Damit lassen sich dann auch Parameter übergeben. Der Google Admanager Code lauscht hier auf „google_debug“ als Parameter und öffnet dann Debug Informationen in einem Popup.

Hier sind dann einige hilfreiche Dinge zu sehen:

  • Für welche AdSlots wurden Daten angefragt?
  • Für welche AdSlots liegen Werbemittel vor – und welche?
  • Wie lange wurde der Seitenaufbau durch das Nachladen von Werbemitteln aufgehalten?
  • Wie lange wurde der Seitenaufbau durch die Darstellung der Werbemittel verzögert?

admanager-debugging

Sehr schön ist anhand der Timeline auch nachzuvollziehen zu welchem Zeitpunkt welche Ereignisse stattgefunden haben. Ein Paradebeispiel für erleichtertes Debugging bei JavaScript/Ajax Anwendungen.

JavaScript Error mit Google Admanager und adblock vermeiden

Geschrieben von everflux am Dezember 11th, 2008

Der Google Admanager ( http://www.google.com/admanager/ ) ist ein kostenloses Google Produkt, um Werbebuchungen zu verwalten.

Der Google Admanger arbeitet dabei mit JavaScript um Werbemittel in die Webseite zu integrieren – z.B. auch Google Adsene. Viele Surfer benutzen inzwischen einen Werbeblocker, wie z.B. den Firefox Adblock plus – hier kommt es nun zu JavaScript Fehlermeldungen, die man vielleicht als Webmaster vermeiden möchte. Weiterlesen »

Internet Explorer (IE) 6 und das Bilder Caching

Geschrieben von everflux am Dezember 9th, 2008

Der IE 6 ist sicherlich schon betagt, was aber noch lange nicht bedeutet, dass er nicht noch reichlich Verwendung finden würde. Besonders wenn für eine Kundensoftware Internet Explorer 6 zwingend unterstützt werden muss, kann man sich auf viele Überraschungen gefaßt machen.

Eine davon ist der Umgang mit CSS (background) Bildern und dem Cache des Internet Explorer. Normalerweise sollte ein Webbrowser Elemente (wie z.B. Grafiken) nur einmal laden, und dann im internen Cache bereithalten, um ggf. wiederverwendet zu werden. Da häufig Elemente auf Webseiten – besonders Hintergrundgrafiken und Style Elemente – wiederkehrend sind, kann man damit Bandbreite und natürlich auch Zeit sparen. Weiterlesen »

Browser Speed – was ist drann an Chrome, V8 und Co?

Geschrieben von everflux am Dezember 6th, 2008

Nichts hilft weniger als synthetische Benchmarks, wenn es darum geht, Produkte zu vergleichen. Das fängt bei Akkulaufzeit von Handys an, und hört noch lange nicht beim Spritverbrauch von Autos auf.

In der letzten Zeit sind Browser-Benchmarks total angesagt, vor allem JavaScript Benchmarks die mehr oder minder zeigen sollen, wer den längeren schnelleren Browser hat. Doch wie aussagekräftig ist das nun wirklich? Bei der Entwicklung einer browser basierten Anwendung, die stark auf Ajax (JQuery, DWR) zurückgreift, während auf dem Server eine JEE Anwendung mit Drools werkelt.

Hier hatte ich nun die Chance, ein paar „echte“ Daten zu sammeln – und mir Gedanken zu machen. Weiterlesen »

Fileupload für Bilder mit jQuery – dank Ajax mit Vorschaufunktion

Geschrieben von everflux am November 28th, 2008

Gerade wenn es um sogenannten user generated content geht, ist es immer schön, wenn man eine Vorschaufunktion anbieten kann. Ein Knopf „Vorschau“ ist ziemlich 1990 – es lebe das Web 2.0 mit Ajax, jQuery und vielen Hacks.

Ich hatte bereits darüber gebloggt wie man mittels jQuery und etwas Tricksen einen „Ajax Fileupload“ realisert. Noch schöner ist es natürlich, wenn der User sofort Feedback bekommt, wie sein ausgewähltes Bild wohl aussehen würde. Dazu lädt man das Bild schon direkt nachdem der User eine Datei ausgewählt hat, und zeigt diese an. An Browser-Caches muss man vielleicht noch denken, aber auch hier kann JavaScript bzw. jQuery helfen.

Das Vorgehen:

  1. Man hängt einen Listener an die Change Methode des Input Felds
  2. Wie in meinem letzten Beitrag beschrieben wird der Upload über ein Iframe realisiert
  3. Nun biegt man noch die Bild URL um und zeigt somit das Resultat an

Hier der Quellcode: (das Formular heißt „logoUploadForm“, das input Feld für das Image File „logo“.
Ajax Fileupload handling – und Bild URL umbiegen nach dem Upload.

//handle file upload with hidden iframe
jQuery("#logoUploadForm").submit( function(data)
{
var submittingForm = jQuery( this );
var frameName = ("upload"+(new Date()).getTime());
var uploadFrame = jQuery("<iframe name=\""+frameName+"\" />");
uploadFrame.css("display", "none");
uploadFrame.load(function(data){
//submit is complete here
setTimeout(function(){
//update image
var imageDiv = jQuery("#print_logoImage");
var logoUrl = imageDiv.attr("src").split("?")[0];
imageDiv.attr("src", logoUrl+"?"+ (new Date()).getTime());
//remove hidden upload frame
uploadFrame.remove();},1000);
});
jQuery("body:first").append(uploadFrame);
//setup complete
submittingForm.attr("target", frameName);
});

Hier noch der Code zum „sofort upload“:

jQuery("input[name=logo]").change(function (){
jQuery("#logoUploadForm").submit();
});

Das wars – ausprobieren!


http://everflux.de/
Copyright © 2007, 2008 everflux. Alle Rechte vorbehalten. All rights reserved.