Programmierung

Javascript debuggen mit console.log und Firebug

Posted on by marcus

Firebug ist ja bekannterweise eine äußerst hilfreiche Extension für den beliebten Browser Mozilla Firefox.
Wenn in Javascript-Werte zu debuggen sind, dann ist die Konsolen-Ansicht in Firebug sehr hilfreich, wie ich festgestellt habe. Anstelle des oft verwendeten Vorgehens, einen alert() einzubauen, kann man hier viel schöner mit console.log arbeiten.

Hier eine kurze Demo anhand des nachstehenden HTML-Codes:

<html>
<head>
<title>testpage</title>
</head>
<body>
<p>dies ist die Testseite</p>
<script language="javascript" type="text/javascript">
var i = 'ich bin der zu debuggende String';
console.log('i value is %d', i);
</script>
</body>
</html>

Mittels dieser Technik kann man gut Variablen-Werte unter Live-Bedingungen debuggen, ohne störende Alert-Fenster einzublenden. Im Firebug ist der jeweilige Wert dann direkt zu sehen:

console.log in Firebug

console.log in Firebug

Links:
Mozilla Firefox
Firebug Extension

Icons im Web ohne Grafiken mittels @font-face

Posted on by marcus

Mit CSS3 ergeben sich viele neue Möglichkeiten: wie wäre es zum Beispiel, anstatt Grafiken auf einer Website nur noch Schrift zu verwenden? Ich finde die Idee cool. Und prinzipiell geht das so: zuerst wird @font-face im CSS verwendet, mit der nachfolgenden Deklaration werden alle Browser bedient, die Schriftart muss in mehreren Formaten vorliegen:

@font-face {
font-family: 'IconFont';
src: url('iconfont.eot');
src: local('IconFont'),
url('iconfont.woff') format('woff'),
url('iconfont.otf') format('opentype'),
url('iconfont.svg#IconFont') format('svg'); }

Nun wird wir die festgelegte Schriftart für eine Klasse definiert:

<style type="text/css">
.staricon { font-family: 'IconPack'; }
</style>

Um nun ein bestimmtes Icon aus dem Schriftsatz zu referenzieren,  wird die grade definierte Klasse normal auf ein Element angewendet:

<div class="staricon">a</div>

Einsatz von case when then in SQL (MS SQL Server)

Posted on by marcus

Manchmal ist es notwendig, auch in einem SQL-Statement eine Fallunterscheidung durchzuführen.
Die generelle Syntax dafür sieht folgendermaßen aus:

SELECT ProductId,
ProductCat =
CASE ProductBehavorial
WHEN 'R' THEN 'Road'
WHEN 'M' THEN 'Mountain'
WHEN 'T' THEN 'Touring'
ELSE 'Not for sale'
END,
ProductName
FROM ProductItems
ORDER BY ProductId

Das kann auch schnell etwas verschachtelter aussehen, wenn Subselects und weitere Funktionen wie isNull() mit in das Statement kommen, hier noch ein weiteres Beispiel dazu mit Verwendung von Untescheidungen anhand von integer-Werten:

SELECT col1,col2,col3,
CASE
WHEN isnull((select value1 from table2 prti where col1 = value1),0) > 90 THEN 'sehr gut'
WHEN isnull((select value1 from table2 prti where col1 = value1),0) > 79 THEN 'gut'
WHEN isnull((select value1 from table2 prti where col1 = value1),0) > 69 THEN 'befriedigend'
WHEN isnull((select value1 from table2 prti where col1 = value1),0) > 59 THEN 'ausreichend'
WHEN isnull((select value1 from table2 prti where col1 = value1),0) > 49 THEN 'mangelhaft'
WHEN isnull((select value1 from table2 prti where col1 = value1),0) > 10 THEN 'ungenügend'
ELSE 'katastrophal'
END as myrating

Die CASE/WHEN Kombination kann auch in der ORDER BY-Klausel verwendet werden, das sieht dann so aus:

SELECT col1, col2
FROM HumanResources.Employee
ORDER BY
CASE col2 WHEN 1 THEN col1 END DESC,
CASE WHEN col2 = 0 THEN col1 END;

In einem UPDATE-Statement sieht die Verwendung so aus:

UPDATE table1
SET column1 =
( CASE
WHEN ((column1 - 10.00) < 0) THEN column1 + 15
ELSE (column1 + 20.00)
END
)
WHERE column2 = 0;

Coldfusion: Dubletten in einer Liste entfernen (CFML)

Posted on by marcus

Aus aktuellem Anlass, weil ich’s grad mal wieder benötigt habe: ein kleines Code-Snippet zum Eliminieren von Dubletten in Listen. Es kommt ja immer wieder vor, dass man eine Liste hat, die doppelte Werte enthält. Manchmal benötigt man aber zum Weiterverarbeiten eine Liste, in der keine doppelten Einträge mehr vorhanden sind.
Das geht einfach und fix mit einem Loop über ein Struct:

<cfset myListWithDoubles = "1,1,5,4,6,1,4,6,12,4,5" />
<!--- elimate double values via struct --->
<cfset myStruct = StructNew()>
<cfloop index="idx" list="#myListWithDoubles#">
<cfset myStruct[idx] = "">
</cfloop>
<!--- convert back to a list --->
<cfset myListWithoutDoubles = StructKeyList(myStruct)>

Flash und das Attribut wmode: Ansicht von swf auf Websites

Posted on by marcus

Wer kennt es nicht: man bindet ein swf auf einer Website ein, standardmäßig überlappt die Flash-Animation dann aber auch alle anderen Elemente auf der Site, Javascript-Navigationen und (D)HTML-Elemente beissen sich mit dem swf und werden überlagert.
Die Lösung ist das wmode-Attribut, das beim param- und beim embed-Tag angegeben werden muss.

<param name='wmode' value='opaque'>

Weitere Informationen dazu direkt bei Adobe: http://livedocs.adobe.com/flash/9.0_de/UsingFlash/help.html?content=WSd60f23110762d6b883b18f10cb1fe1af6-7ba7.html

Hier nachstehend ein kleines komplettes Beispiel:

<div style="padding-top: 10px; padding-bottom: 10px; padding-left: 8px;"> <object width="306" height="150" classid="clsid:27CDB6E-AE6D-11cf-96B8-1941085" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0">
<param name="movie" rel="nofollow" value="/flash/yourfile.swf"/>
<param name="quality" value="high"/>
<param name="wmode" value="opaque"/>
<param name="bgcolor" value="#bfbfbf"/> <embed width="306" height="150" wmode="opaque" src="/flash/yourfile.swf" rel="nofollow" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed> </object> </div>

So eingebunden sollte die Animation keine anderen Elemente mehr überlappen.

Verzeichnis auflisten mit cfdirectory und mehrfachen Datei-Filtern

Posted on by marcus

Aus aktuellem persönlichen Anlass hier ein Tipp zum Tag <cfdirectory>, das hat mich durchaus etwas Zeit gekostet: wenn man den Tag verwendet, will man oft auch einen Filter auf bestimmte Dateitypen setzen. Zum ersten Mal musste ich nun nicht nur nach einer Dateiendung, sondern nach mehreren Dateiendungen filtern. Die Lösung hierbei ist das Pipe-Symbol. Das nachstehende Beispiel zeigt die Funktionalität, klappt sowohl unter Railo als auch unter Adobe Coldfusion:

<cfset myPath = ExpandPath( './' ) />
<cfdirectory action="list" name="qFiles" directory="#myPath#" filter="*.txt|*.rtf">
<cfdump var="#qFiles#">

Das Beispiel extrahiert alle .txt- und .rtf-Dateien aus dem aktuellen Verzeichnis.

Reblog this post [with Zemanta]

richtig machen: XML-Objekt mit Coldfusion erzeugen

Posted on by marcus

Ich habe öfters den Eindruck, dass die XML-Funktionen und -Tags, die man in CFML verwenden kann, nicht wirklich das Gelbe vom Ei sind. Wahrscheinlich kann man da drüber streiten, auf jeden Fall wollte ich Euch meine Optimal-Lösung für die Erzeugung eines richtigen XML aus einer Query nicht vorenthalten. Das Beispiel funktioniert sowohl unter Railo als auch unter Adobe Coldfusion:

<cfsilent>
<cfquery name="getCustomers" datasource="#request.datasource#">
select * from customers
</cfquery>
<!--- save xmlstring --->
<cfsavecontent variable="xmlString">
<customerlist>
<cfoutput query="getCustomers">
<customer id="#pkcustomers#">
<firstname><![CDATA[#Trim(firstname)#]]></firstname>
<lastname><![CDATA[#Trim(lastname)#]]></lastname>
</customer>
</cfoutput>
</customerlist>
</cfsavecontent>
<!--- save xml object --->
<cfxml variable="resultXml">
<cfoutput>#xmlString#</cfoutput>
</cfxml>
</cfsilent>
<cfdump var="#resultXml#">

Das Beispiel eignet sich hervorragend, um als Snippet abgelegt zu werden, viel Spass damit

Merkwürdigkeiten, Fehler und Inkonsistenzen in Javascript

Posted on by marcus

Linktipp des Tages, unbedingt empfehlenswert: sehr interessante und aufschlussreiche Auflistung von Fehlern in Javascript gibt es bei http://wtfjs.com.
Hier finden sich so lustige Sachen wie dieses Rechen-Exempel:

"3" + 1 // '31'
"3" - 1 // 2
"222" - -"111" // "333"

Großartig, was passieren kann, wenn man Srings mit Zahlen verrechnet, oder?

Mein persönliches Highlight ist aber, dass true manchmal einen Wert haben kann:

(true + 1) === 2;​ ​// true
(true + true) === 2; // true
true === 2; // false
true === 1; // false

Noch mehr von solchen Kuriositäten gibt es bei http://wtfjs.com/, viel Spass bei der Lektüre

Datepicker für Formulare mit jQuery UI

Posted on by marcus

Immer wieder gestaltet man als Webworker Formulare für Websites, die Felder für Datumswahl beinhalten. Ich zeige in diesem Blogpost auf, wie man diese Aufgabe schnell und elegant mit Hilfe von jQuery UI löst.

Als erstes braucht man natürlich die jQuery-Javascript-Bibliothek in der Applikation (http://jquery.com/), für den produktiven Einsatz wird selbstverständlich die minimierte Version eingesetzt. Zusätzlich benötigt man den UI-Core, der bei Google Code unter http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.core.js erhältlich ist und zum guten Schluss das Datepicker-Plugin unter http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.datepicker.js.

Auf der HTML-Seite werden die JS-Files nun im Header eingebunden. Ausserdem bindet Ihr ein CSS ein, das Ihr Euch am besten direkt von http://blog.jqueryui.com/2010/02/jquery-ui-download-builderthemeroller-status/ holt:

<html>
<head>
<title>jquery ui form test</title>
<script type="text/javascript" src="/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="/js/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="/styles/ui_sunny.css" type="text/css" media="all" />
</head>

Im Body wird das Formular gecodet. Das Vor-Belegen der beiden Formularfelder mit dem aktuellen Datum (und dem aktuellen Datum plus 1 Tag), sowie das Handling für Formular anzeigen/Formular bearbeiten habe ich hier mit Coldfusion gelöst, kann man ja jeweils auch in der Lieblings-Sprache seiner Wahl umsetzen:

<body>
<cfset currentDateFrom = createODBCDate(now()) />
<cfset currentDateFrom = DateFormat(currentDateFrom,"dd-mm-yyyy") />
<cfset currentDateTo = createODBCDate(now()) + 1 />
<cfset currentDateTo = DateFormat(currentDateTo,"dd-mm-yyyy") />

<cfif cgi.REQUEST_METHOD eq "POST">
<cfdump var="#form#">
<cfelse>
<script type="text/javascript">
$(function() {
$("#datepickerFrom").datepicker({ dateFormat: 'dd-mm-yy' });
$("#datepickerTo").datepicker({ dateFormat: 'dd-mm-yy' });
});
</script>
<form name="DateForm" method="post" action="#cgi.script_name#">
<p>
<label for="datepickerFrom">Start-Datum:</label>
<input class="inputDate" id="datepickerFrom" name="datepickerFrom" style="width:100px" value="<cfoutput>#currentDateFrom#</cfoutput>" />
</p>
<p>
<label for="datepickerTo">Ende-Datum:</label>
<input class="inputDate" id="datepickerTo" name="datepickerTo" style="width:100px" value="<cfoutput>#currentDateTo#</cfoutput>" />
</p>
<p><input type="submit" value="Auswertung starten" /></p>
</form>
</cfif>
</body>
</html>
Hier ist der Aufruf des Datepickers an die Formular-Elemente mit den ID’s „datepickerFrom“ und „datepickerTo“ gebunden, als zusätzlicher Paramter wird das Datum in einem bestimmten Format festgelegt. Ein schöne Übersicht aller möglichen Attribute, Events und Methoden ist unter http://jqueryui.com/demos/datepicker/ zu finden. Unter dieser Adresse gibt es auch eine Demo von allen möglichen schicken UI-Themes.

Als Ergebnis erhalten wir also nun ein Formular mit 2 Datumswahl-Feldern, nach dem Abschicken wir nur ein Dump des Formular-Objekts angezeigt. Das sollte als Grundgerüst für den weiteren Ausbau genügen – viel Spass damit.

perfektes Paging von Ergebnissen mit der Pagination.cfc

Posted on by marcus

Abteilung super-praktisch: die Paging-Komponente von Nathan Strutz. Das seitenweise Durchblättern durch Ergebnisse einer Datenbank-Abfrage (oder eines Array, eines Struct), gehört zu den Aufgaben, die für Programmierer immer wiederkehren. Ich selbst habe solche Paging-Funktionalitäten in veschiedenen Ausführungen oft selber entwickelt, das Thema Code-Reuse hatte ich nicht weiter berücksichtigt. Continue reading →