CodeBlog.ch » JavaScript http://www.codeblog.ch Coding and more - Concrete5, Flex, JavaScript Mon, 05 Dec 2011 16:10:29 +0000 de hourly 1 http://wordpress.org/?v=3.2.1 Schriften im Internet – Cufón http://www.codeblog.ch/de/2009/04/schriften-im-internet-cufon/ http://www.codeblog.ch/de/2009/04/schriften-im-internet-cufon/#comments Wed, 01 Apr 2009 08:43:55 +0000 Remo Laubacher http://www.codeblog.ch/?p=264 Schriften im Internet

Schriften unter Internetseiten ist seit langem ein beliebtes Thema. Grafiker wollen logischerweise völlige Freiheiten, der Programmierer eine solide Lösung die keine Probleme verursacht. Oft interessiert es den Leser nicht in welcher Schrift etwas dargestellt wird, solange der Inhalt lesbar ist. Bei kleinen Seiten mit wenig Inhalt spielen Schriften jedoch schnell eine grössere Rolle.

Wie kann man sowas umsetzen:

font

Eigene Schriften im Internet

Mit EOT, sIFR und anderen Ansätzen gibt es schon länger Lösungen. Unschöne Darstellungen wenn die Seite noch nicht gelanden ist, fehlende Unterstützung von Seiten der Browser haben jedoch die meisten Lösungen eher unbrauchbar gemacht.

Mit Cufón gibt’s jedoch eine neue Lösung die sehr vielversprechend aussieht!

  • Keine Plugins erforderlich
  • Unterstützung von zahlreichen Browsern
  • Einfach einzusetzen
  • Schnell

Die Schriften werden im JavaScript Format abgespeichert. Damit man allerdings ein JavaScript File verwenden kann, muss es zuerst erstellt werden. Dazu kann ein simples Webinterface verwendet werden:

http://cufon.shoqolate.com/generate/

Im Hintergrund werden einige Aktionen ausgeführt. Die Linux Applikation FontForge wird verwendet um eine SVG Schrift zu erstellen. Aus der SVG Datei werden VML Pfade generiert und daraus wird ein JSON String erstellt. Klingt umständlich, ist es auch, aber glücklicherweise müssen wir uns um fast nichts kümmern!

Wir wählen als unsere Schrift aus und erhalten eine JavaScript Datei als Download wenn wir das Formular abschicken.

JavaScript Schrift einbinden

Wir benötigen als erstes das Cufon Script. Komprimiert oder auch unkomprimiert.

Als Ausgangslage haben wir eine simple HTML Datei:

1
2
3
4
5
6
7
8
9
10
11

<html>
<head>
</head>
<body>
<h1>Etiam vel odio</h1>
Proin tristique elit eget nisl. Donec dictum mauris a sem. Pellentesque at arcu. Mauris cursus erat at magna adipiscing commodo. Integer ornare. Sed sollicitudin, est imperdiet hendrerit bibendum, erat turpis venenatis mauris, non ullamcorper quam arcu sit amet lacus. Nullam ut eros. Vivamus luctus urna rhoncus sem. Duis vel nibh.
<h2>Praesent lobortis</h2>
Mauris ornare tincidunt arcu. Mauris pretium. Vestibulum ac metus in erat condimentum accumsan. Aenean dignissim consectetur risus. Maecenas purus. Duis eget mauris. Duis venenatis. Fusce tortor nunc, adipiscing id, gravida vel, ullamcorper ac, metus. Pellentesque suscipit. Suspendisse mollis augue eu mauris. Nulla facilisi. 
 
</body>
</html>

Wir wollen nun, dass H1 und H2 in unserer neu erstellten JavaScript Schrift dargestellt werden. Dazu kopieren wir die beiden JavaScripts in dasselbe Verzeichnis und ergänzen unsere HTML Datei so, dass wir folgendes Ergebnis erhalten:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
<head>
	<script src="cufon-yui.js" type="text/javascript"></script>
	<script src="Remo_Laubacher_400.font.js" type="text/javascript"></script>
	<script type="text/javascript">
		Cufon.replace('h1')('h2');
	</script>
</head>
<body>
<h1>Etiam vel odio</h1>
Proin tristique elit eget nisl. Donec dictum mauris a sem. Pellentesque at arcu. Mauris cursus erat at magna adipiscing commodo. Integer ornare. Sed sollicitudin, est imperdiet hendrerit bibendum, erat turpis venenatis mauris, non ullamcorper quam arcu sit amet lacus. Nullam ut eros. Vivamus luctus urna rhoncus sem. Duis vel nibh.
<h2>Praesent lobortis</h2>
Mauris ornare tincidunt arcu. Mauris pretium. Vestibulum ac metus in erat condimentum accumsan. Aenean dignissim consectetur risus. Maecenas purus. Duis eget mauris. Duis venenatis. Fusce tortor nunc, adipiscing id, gravida vel, ullamcorper ac, metus. Pellentesque suscipit. Suspendisse mollis augue eu mauris. Nulla facilisi. 
 
<script type="text/javascript">Cufon.now();</script>
</body>
</html>

Im Kopf die beiden JavaScripts einbinden, mit Cufon.replace die HTML Tags ersetzen und am Ende, vor dem Tag Cufon.now() aufrufen um ein Darstellungsprobleme von Internet-Explorer zu beheben – fertig!

Sämtliche Files zum Download. Viel Spass!

]]> http://www.codeblog.ch/de/2009/04/schriften-im-internet-cufon/feed/ 2 WYSIWYG Editor mit Flex http://www.codeblog.ch/de/2008/10/wysiwyg-editor-mit-flex/ http://www.codeblog.ch/de/2008/10/wysiwyg-editor-mit-flex/#comments Fri, 24 Oct 2008 08:04:09 +0000 Remo Laubacher http://www.codeblog.ch/?p=72 Adobe liefert Flex mit einem RichTextEditor aus. Dieser lässt sich sehr einfach einbinden und passt vom Layout her auch wunderbar zu den restlichen Flex Controls. 

Dieser Editor hat aber leider eine ziemlich begrenzte Funktionalität. Bereits beim Einfügen eines Bildes scheitern wir! Dazu kommt, dass der generierte Code nicht HTML konform ist, ein direktes verwenden in einer HTML Ausgabe ist deswegen zum Beispiel nicht möglich.

Alternative Lösungsmöglichkeit

Die einzige flash-basierte Lösung die ich finden konnte, ist diese hier: http://flashtexteditor.com/flexdemo/full Sieht auf den ersten Blick nett aus, eingefügte Bilder verhalten sich aber nicht wie gewohnt und fliessen mit dem Text mit und zudem ist dieses Control inzwischen nur noch kommerziell verfügbar. 

Wer sich mit HTML und JavaScript beschäftigt hat, wird sicherlich den einen oder anderen WYSIWYG HTML Editor gefunden haben. Um nur ein paar zu nennen:

Wäre es nicht schön, wir könnten diese Editoren in Flex verwenden? Können wir!

Flex mit Adobe AIR vs. Flex im Browser

Es gibt einen Unterschied in der Art wie wir unsere Flex Anwendung starten bzw. ausführen lassen.

Es besteht die Möglichkeit mittels NPRuntime den Browser einzubinden, der das Flash aufgerufen hat. Details dazu findet man zum Beispiel bei Adobe: http://livedocs.adobe.com/flex/gumbo/langref/flash/external/ExternalInterface.html

Auf derselben Seite findet man auch den Hinweis, dass diese Funktionalität mit Adobe AIR nicht funktioniert.

Note: Adobe AIR currently does not support the ExternalInterface class.

In diesem Artikel wird nur eine mögliche Lösung beim Einsatz von Adobe AIR präsentiert. Der Lösungsweg über ExternalInterface dürfte aber ähnlich verlaufen.

http://osflash.org/projects/wrapper

HTML Code einbinden

Bei einem AIR Projekt, haben wir ein zusätzliches Control zu Verfügung: mx:HTML. Dieses lässt sich wie jedes andere Control in Flex mit MXML verwenden.

1

<mx:HTML id="html" location="http://www.codeblog.ch"/>

Wir können damit auch lokale HTML Files einbinden. Wir installieren als erstes die aktuelle TinyMCE Version. http://tinymce.moxiecode.com/download.php

Wir kopieren anschliessend sämtliche Files in unser Flex Projekt und erhalten diese Struktur:

editor.html ist nicht Teil von TinyMCE und TinyMCE.mxml ist unser Flex Control – mehr dazu später.

Der HTML Code

Wir könnten den ganzen HTML Code für den TinyMCE Aufruf in unserem Flex Code speichern, ich hab mich jedoch entschieden den Code in einer HTML Datei abzulegen. Der Code ist fast 1:1 aus dem TinyMCE Beispiel entnommen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 
<style type="text/css">
html, body {
	margin: 0px;
}
</style>
 
<!-- TinyMCE -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
	tinyMCE.init({
		mode : "textareas",
		theme : "simple"
	});
</script>
<!-- /TinyMCE -->
 
</head>
<body>
	<textarea id="elm" name="elm" rows="15" cols="80" style="width: 100%;"></textarea>
</body>
</html>

Ich habe versucht den Code in ein neues MXML Control zu packen. Gleich zu Beginn der vollständige Code – sind ja nur ein paar Zeilen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<?xml version="1.0" encoding="utf-8"?>
<mx:HTML xmlns:mx="http://www.adobe.com/2006/mxml" location="tinymce/editor.html" initialize="init()">
	<mx:Script>
	<![CDATA[
	private var htmlComplete:Boolean = false;
	private var localHtmlCode:String = null;
 
	public function init(): void
	{
		addEventListener(Event.COMPLETE, onHTMLLoadComplete);
	}
	public function set htmlCode (value:String):void
	{
		// in case the html file hasn't been loaded yet, delay the call..
		if (htmlComplete)
			setHtml(value);
		else
			localHtmlCode = value;
	}
	public function get htmlCode():String
	{
		this.htmlLoader.window.tinyMCE.triggerSave();
		return this.htmlLoader.window.elm1.value;
	}
	private function setHtml(value:String): void
	{
		this.htmlLoader.window.tinyMCE.get('elm').setContent(value);
		this.htmlLoader.window.document.getElementById('elm').value = value;
	}
	private function onHTMLLoadComplete(e:Event):void
	{
		htmlComplete = true;
 
		if (localHtmlCode != null)
			callLater(setHtml,[localHtmlCode]);
	}
	]]>
	</mx:Script>
</mx:HTML>

Als Basis für unser Control dient mx:HTML. Wir fügen lediglich die Eigenschaft htmlCode hinzu, um den Inhalt von TinyMCE zu ändern und auslesen.

Dazu müssen wir lediglich eine Methode mit dem Zusatz “get” ausstatten und eine mit “set”.

Nun hatte ich jedoch das Problem, dass TinyMCE noch nicht komplett geladen war, als ich versucht habe die Eigenschaft htmlCode zu verändern. Ich hab deswegen, eine noch nicht vollständig getestete, Lösung versucht umzusetzen – durch das abfangen des Events “COMPLETE”, wird uns mitgeteilt wann das HTML Control geladen ist, wurde die Eigenschaft htmlCode von vorher gesetzt (htmlComplete == false), so wird nachdem das Control geladen ist, der Code mittels callLater gesetzt. callLater sollte eigentlich schon selber erst ausgeführt werden, wenn das Control fertig geladen ist. In meinem Fall hat dies jedoch nicht gereicht. (bin für jeden Hinweis dankbar).

Alles speichern und schon haben wir im Flex Builder ein neues Control in der Rubrik “Custom” zur Verfügung. Per Drag’n'Drop einfügen, Projekt starten!

]]> http://www.codeblog.ch/de/2008/10/wysiwyg-editor-mit-flex/feed/ 4 Web Applikation mit Adobe AIR http://www.codeblog.ch/de/2008/09/web-applikation-mit-adobe-air/ http://www.codeblog.ch/de/2008/09/web-applikation-mit-adobe-air/#comments Mon, 15 Sep 2008 09:06:14 +0000 Remo Laubacher http://www.codeblog.ch/?p=44 Von Adobe gibt es seit einiger Zeit eine Technologie mit dem Namen AIR. Adobe AIR erlaubt es, Appliationen welche fürs Web entwickelt wurden, besser ins lokale Betriebssystem zu integrieren.

  • Man hat Zugriff auf eine Reihe von Funktionen welche Webapplikationen normalerweise nicht haben (Zwischenablage, Dateisystem usw.)
  • Die Applikation kann direkt aus dem Startmenü (bei Windows) geöffnet werden.
Adobe AIR unterstützt dabei HTML + Javascript, AJAX Appliationen. Natürlich wird aber auch die hauseigene Technologie Flash und damit auch Flex unterstützt.

Bevor wir beginnen, muss zuerst das (frei verfügbare) AIR SDK installiert werden. Dazu von dieser Seite das entsprechende ZIP herunterladen und installieren. http://www.adobe.com/products/air/tools/sdk/

HTML Applikation mit AIR starten

Neben dem bekannten HTML und JavaScript Code brauchen wir für Adobe AIR lediglich eine simple XML Datei.

Wir erstellen eine Datei mit dem Namen hellocodeblog-app.xml

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
    <id>hellocodeblog.html.hellocodeblog</id>
    <version>0.1</version>
    <filename>hellocodeblog</filename>
    <initialWindow>
        <content>hellocodeblog.html</content>
        <visible>true</visible>
        <width>400</width>
        <height>200</height>
    </initialWindow>
</application>

Als nächstes brauchen wir wie gewohnt ein bisschen HTML Code. Damit wir die AIR Funktionalität komplett nutzen können, binden wir die Datei AIRAliases.js ein. In diesem Beispiel werden wir sie allerdings nicht verwenden.

Die Datei hellocodeblog.html enthält diesen Code

<html>
<head>
    <title>Hello CodeBlog</title>
</head>
<body>
    <h1>Hello CodeBlog!</h1>
</body>
</html>

Applikation starten
Unsere Applikation starten wir nun indem wir der Datei adl.bat aus dem AIR SDK unsere XML Datei übergeben:

Applikation publizieren

Wir können unsere Applikation mit AIR gleich verpacken so dass wir ohne das SDK die Applikation starten können.

Applikationen müssen zertifiziert werden. Wenn man bereits ein Zertifikat hat, natürlich dieses verwenden. In unserem Fall erstellen wir uns aber ein eigenes. Dazu brauchen wir das Tool adt welches sich ebenfalls im bin Verzeichnis des AIR SDKs befindet.

adt -certificate -cn SelfSigned 1024-RSA codeBlog.pfx ein-password

Anschliessend rufen wir das Tool adt mit anderen Parametern auf um unsere Files in eine AIR Datei zu packen. Diese kann anschliessend mit einem Doppelklick installiert werden.

adt -package -storetype pkcs12 -keystore codeBlog.pfx HelloCodeBlog.air hellocodeblog-app.xml hellocodeblog.html

Anschliessend läuft unsere Applikation ohne das Konsolen Fenster und einem SDK Tool.

Weitere Informationen

Von Adobe gibt es ein gut strukturierter Büchlein in Englisch welches in Kapitel 4 die Möglichkeiten beschreibt die AIR bietet. http://onair.adobe.com/files/AIRforJSDevPocketGuide.pdf

Update 18. September 2008

Scheint so als gäbe es einige Einschränkungen bei der Integration ins Betriebssystem. Die trivial wirkende Anforderung einen Prozess zu starten erweist sich als deutlich komplexer als erwartet. Bisher scheint dies lediglich über einen zusätzlichen “Proxy” machbar zu sein. http://www.mikechambers.com/blog/2008/01/17/commandproxy-net-air-integration-proof-of-concept/

Warten wir mal ab und schauen was Adobe vielleicht nachliefert. Einfache Web Applikationen vom Desktop aus starten ist ja nett, aber wirklich konkurrenzfähig mit klassischen Applikationen ist das in dieser Form sicherlich nicht. Keine direkte Nutzung von lokalen (nativen) Bibliotheken usw…

Update 18. September 2008 – 2

Es scheint auch ohne Zusatzsoftware zu gehen, allerdings auch nicht wirklich elegant. Dieser Code:

var request = new air.URLRequest("file://c:/windows/notepad.exe");
air.navigateToURL(request);

scheint zu funktionieren, jedoch abhängig vom Standard Browser. URLRequest öffnet nämlich jeweils den Browser und abhängig vom Browser erhält man dann auch noch eine Warnung (als würde man einen Link im Internet anklicken). Hat man aber zum Beispiel Google’s Chrome installiert, so wird die Datei heruntergeladen, auch nicht wirklich optimal…

Update 8. Oktober 2008

Unter Windows kann man diese Erweiterung nutzen: http://aperture.fluorinefx.com/. Damit kann man sehr einfach Prozesse starten, Screenshots erstellen und auf gewisse Outlook Daten zugreifen. Allerdings nur für Windows!

]]> http://www.codeblog.ch/de/2008/09/web-applikation-mit-adobe-air/feed/ 0 Link Klicks zählen http://www.codeblog.ch/de/2008/04/link-klicks-zahlen/ http://www.codeblog.ch/de/2008/04/link-klicks-zahlen/#comments Wed, 23 Apr 2008 08:36:38 +0000 Remo Laubacher http://www.codeblog.ch/?p=17 Dies ist eine ganz banale Aufgabe, aber mir ist eine Unschönheit aufgefallen bei vielen Scripts die ich gefunden haben, deswegen ein ganz kleiner Artikel zu diesem Thema.

Die Aufgabe ist relativ einfach – wir wollen die Anzahl Klicks auf einem Link zählen. Dazu gibt es viele Varianten und meistens sind die auch sinnvoller als meine..

Zahlreiche Scripts die ich gefunden haben, manipulieren die Adresse die aufgerufen wird:

<a href="http://localhost/linkcounter.php?link=http://www.link.com">

(Der Wert von link müsste noch entsprechend “angepasst” werden so dass alle Zeichen korrekt übergeben werden – php: urlencode, asp: Server.URLEncode usw.)

Nun hat dies zur Folge, dass in der Statuszeile eine unschöne Adresse steht. Wie löst man dies? Per JavaScript die Statuszeile anpassen – falsch! Früher hat die ganz gut funktioniert, inzwischen ist diese Funktion aber oft deaktiviert. http://de.selfhtml.org/javascript/objekte/window.htm#status

Wie es besser gemacht wird

Wir belassen den Wert in “href” so wie er ist. Jedoch erweitern wir den link um einen kleinen JavaScript aufruf

<a href="http://www.codeblog.ch" onmousedown="clickCounter(this)">super blog</a>

Dann noch ein kleines JavaScript in den Header einfügen:

<script type="text/javascript" language="JavaScript" >
function clickCounter(obj)
{
   obj.href = "http://localhost/linkcounter.php?link=" + escape(obj.href)
}
</script>

Dadurch wird die Zieladresse dynamisch bei jedem Klick verändert – google macht dies übrigens auch so, die Idee ist also alles andere als neu..

Vollständigkeitshalber hier noch ein simples PHP Script das die Links zählt. Für einen praktischen Einsatz aber wohl etwas zu einfach.

Ich habe als DB MySQL verwendet da dies einfach und schnell einzurichten ist. Tabelle “linkcounter” mit zwei Spalten erstellen (link,hits). Wichtig ist hier, dass “link” eindeutig ist (Primary Key).

CREATE TABLE linkcounter (link VARCHAR (255) NOT NULL, hits INT UNSIGNED, PRIMARY KEY(link))

Dann im PHP Script die Zugangsdaten anpassen und fertig!

<?php
// we must have an item "link" in the url
if (!array_key_exists('link',$_REQUEST)) exit;
 
// connect to database
$db = mysql_connect('server','user','password');
mysql_select_db('database',$db);
 
$link = mysql_real_escape_string($_REQUEST['link']);
 
// build query
$query = 'INSERT INTO linkcounter (link,hits) VALUES (\'%s\',1) ON DUPLICATE KEY UPDATE hits=hits+1;';
$query = sprintf($query,$link);
 
// execute query and close db connection
mysql_query($query,$db);
mysql_close($db);
 
// redirect
header('location: ' . $link);
?>

Zum Schluss sei noch ein kleiner Trick erwähnt. Das Insert Query hat eine kleine Erweiterung “ON DUPLICATE KEY”. Dies ist eine MySQL spezifische Anweisung die für diese Anwendung sehr nützlich ist. Dadurch müssen wir kein zweites Query absetzen für den Fall dass der Link bereits in der Datenbank steht. Es gibt schliesslich zwei Operationen: Neue Links einfügen (dies soll ja automatisch geschehen) und den Hit-Counter erhöhen.

Dank MySQL können wir dies mit einem Query tun!
http://dev.mysql.com/doc/refman/5.0/en/insert-on-duplicate.html

]]> http://www.codeblog.ch/de/2008/04/link-klicks-zahlen/feed/ 9