scriptaculous bietet sowohl einen inplaceeditor als auch einen autocompleter an. leider sind diese beiden jedoch separat.

falls jemand beide braucht - wie zb ich (von der firma aus) - müssen diese jedoch kombiniert werden. das ist aber kein problem.

meine variante
zwar könnten die änderungen auch direkt im quellcode von scriptaculous stattfinden, doch das ist imho eher die unschöne/unsaubere art. da man in javascript alles überschreiben kann, bietet sich diese (= meine) variante sehr gut an.

insgesamt sind 3 methoden davon betroffen, in denen kleine erweiterungen vorgenommen werden müssen.

go for it
der inplaceeditor weist den inputfeldern keine id zu. diese werden aber gebraucht, um vom autocompleter angesprochen werden zu können.

natürlich sollte der autocompleter nur solange wie nötig existieren, daher wird er nach der erstellung des inputfeldes erzeugt ...

... und nach dem editieren wieder gelöscht.

erklärung
insgesamt sind 4 selbstdefinierte variablen aktiv, die alle über die optionen des inplaceeditors mitübergeben werden können (zur konfigurierung des autocompleters).

• acOn: boolean - zum ein- und ausschalten des autocompleters
• acDiv: string - der div-container für die liste des autocompleters
• acPath: string - pfad zur datei, die die autocompleter-ergebnisse zurückliefert
• acParam: string - zusätzliche parameter, die zur obigen datei mitübergeben werden

beispiel
code (html)

code (javascript)

zum abstellen des (meiner meinung nach) nervigen gelben highlight effekts fügt man diese zeilen hinzu:

falls es jemand geholfen hat, wäre ich über ein kommentar froh ;)

mfg mailo

ps: es wurde die version 1.8.1 von scriptaculous verwendet!

was macht man wenn der abgabetermin der diplomarbeitsrohfassung immer näher rückt und noch viel zu tun ist?

genau! - man setzt sich hin und programmiert minesweeper in javascript! :D

vorhaben

• minesweeper in javascript programmieren
• mit purem javascript (ohne irgendwelche libraries oder frameworks)

dauer

• gui und basis logik => 3h
• logik für die 0-felder* => 1,5h

anleitung

• aufspüren der 10 minen auf dem 9x9 feld
• ein feld gibt preis wie viel minen direkt im umfeld liegen
• marker setzen bzw löschen mit strg+klick

ergebnis
minesweeper (html, 4 KB)

enjoy and have fun!

mfg mailo

* wenn auf ein 0-feld geklickt wird, sollen alle benachbarten 0-felder aufgedeckt werden

diesmal ein blogeintrag mit (vor)programmierten wortwitz.

immer/meistens/oft wird man dazu aufgefordert etwas richtig zu machen.
dazu habe ich ein kleines skript bzw einen einzeiler vorbereitet ;)

anforderungen

• "es" (= s)
• richtig (= true) machen

vorkehrungen

• die variable s definieren (wertzuweisung egal)
• beispiel: var s;

ergebnis

• die variable s wird true (= richtig)
• zwar doppelt so lang wie s=true; aber nicht so offensichtlich :)

der "mach es richtig"-einzeiler (in javascript)

falls es jemand nicht verstanden hat - macht nichts, kein weltuntergang ;)

mfg mailo

ps: für die, die "es falsch" machen wollen

da ich mich im diplomarbeitsschreibstress befinde, hier nur ein kurzer blogeintrag.

google's interne und externe entwickler und designer haben einige beispiele programmiert, was so alles mit javascript möglich ist.

beispiele zum selbstausprobiern und inklusive video: chromeexperiments
ich habe zwar erst einige angesehen, aber mein favourite ist bislang der browser ball.

was haltet ihr davon?

mfg mailo

ich freue mich schon auf den 14. februar 2009 - dieser tag ist ein toller tag!

wer glaubt, dass meine euphorie diesem tag gilt, weil (zufällig) "valentinstag" ist, der hat sich geschnitten - ich bin informatiker ;)

am 14. februar 2009 um 00:31:30 (MEZ=UTC+1) lautet der unix-timestamp:

in php-code ausgedrückt:

bzw. anders herum:

auf wikipedia sind weitere besondere tage/werte aufgelistet.

was meint ihr dazu? - schon ein cooler tag, oder?

mfg mailo

UPDATE: countdown

einer der vielen vorteile bei der verwendung von prototype ist die recht einfache verwendung von ajax requests. so braucht man sich überhaupt nicht um kümmern, ob nun eine instanz vom XHMHttpRequest() (firefox, opera, safari) oder vom ActiveXObject("Msxml2.XMLHTTP") bzw ActiveXObject("Microsoft.XMLHTTP") (internet explodierer) erzeugt werden muss.

da sich nun ajax.request und ajax.updater recht ähnlich sehen, kann man durch die "macht der gewohnheit" auch etwas übersehen. ich habe es also geschafft, dass etwas doppelt geladen wird und wusste zuerst nicht warum, obwohl die lösung doch ganz einfach ist/war ;)

hier mal die beiden, die das gleiche ergebnis liefern (farblich gekennzeichnet):



wie zu sehen ist, erspart man sich durch den ajax.updater (= die spezielle form des ajax.requests) ein bisschen tipparbeit. vor allem zu empfehlen ist der updater, wenn die zu ladende datei ohne weitere verarbeitung gleich in einen container geladen werden soll, da dies automatisch geschieht.

aus gründen der interaktion ist es sinnvoll bei größeren ladezeiten den benutzer über den ladezustand zu informieren, dass es nicht den anschein hat, dass sich nichts tut. meist wird hier ein ladesymbol angezeigt (vgl sanduhr bei windows).

bei einem vorhanden ajax.request sieht dies möglicherweise so aus (vereinfacht dargestellt):


hier wird beim erzeugen des requests (onCreate) das ladesymbol in den container geladen und wenn die datei fertig geladen wurde (onComplete) durch den eigentlichen content ersetzt.

da aber bereits ein ajax.updater vorhanden war und ich einfach nur die onCreate und onComplete funktion kopiert habe (i love copy&paste although sometimes it's evil), kam es zum doppelten laden:


glücklicherweise kam ich bei genauerem hinsehen gleich auf die lösung.

mfg mailo

im zuge einer diplomarbeit liest man sich in das themengebiet (bei mir u.a. javascript, prototype, script.aculo.us) recht gut ein. javascript ist eine skriptsprache, die sehr vielfältig ist.


dadurch ist sie für beginner nicht schlecht, da der programmierstil ziemlich flexibel ist. doch aufgrund der vielfältigkeit kann sie auch zur verwirrung führen. bislang habe ich immer gedacht, dass ich sehr viel bezüglich der programmierung von javascript weiß, doch wieder einmal wird der spruch "man lernt nie aus!" bestätigt.

wer sich nun vom novicen zum professional in sachen javascript weiterentwickeln will, dem empfehle ich folgende literatur:

• » pro javascript techniques (john resig)
• » pro javascript design patterns (ross harmes, dustin diaz)
• » practical prototype and script.aculo.us (andrew dupont)

meiner meinung nach sind diese bücher sehr gut geschrieben (inkl. vieler code-beispiele) und ich habe sehr viel dazugelernt (besonders einige feinheiten, die beim erstellen eines frameworks essentiell sind).

mfg mailo

ps: für die hardcore-javascriptler die ecma-spezifikation ;)

NOTE: für alle die es noch nicht wissen: javascript == ecmascript

heute wäre fast das weltbild von einigen von uns (inklusive mir) zerbrochen ;)
beim bug fixing hat sich etwas interessantes herausgestellt:

(0=='string') ergibt true

viele (auch ich) dachten aber, dass das ergebnis dieses vergleichs false ist.

meine logik:
-> 0 wird als false behandelt
-> 'string' ist kein leerstring und daher true
-> daraus ergibt sich: (false==true) ist false

diese logik stimmt auch:

sonderfall: beim vergleich von einem string mit einem integer wird der string zuerst in einen integer umgewandelt und dann erst verglichen [string in a numeric context]:

somit ergibt sich:
und (false==false) ist true.

anmerkung: wenn ein string in einen integer konvertiert wird, ist dieser immer 0 außer er beginnt mit einer zahl.

FYI
-> typenvergleich: [php.net] bzw [blueshoes.org]
-> casting: boolean | string | integer

mfg mailo

das ist KEIN tippfehler!

es ist eine kombination von geek und weekend. da ich dieses wochenende wieder recht geekig verbringe, habe ich mir gedacht, dass es passend ist. meine freunde wissen, dass ich ein computer freak und in dieser hinsicht entsprechend abgedreht bin ;)

woran erkennt man das an mir?
hier ist ein kleiner vereinfachter ausschnitt wie ich denke bzw programmiert bin (javascript-syntax):


dieser code kann natürlich noch kürzer gehalten werden, nur dann wird er schwer leserlich (aber so denke ich) :D

aber solange ich mich nicht als klasse darstelle/ausprogrammiere, ist alles noch okay - vielleicht verstehen mich die meisten nicht, da sie keine programmierer sind ;)

so - genug vom unsinn!
eigentlich wollte ich nur darauf hinaus, dass ich gestern (an einem freitag!) nach der arbeit irgendwie das bedürfnis verspürte five stones in javascript zu programmieren ;)

nach obigem schema war ich zu krank, um fort zu gehen und zu gesund, um im bett zu liegen. da auch die einträge coding, programming und computer stuff recht ähnlich sind, war die wahrscheinlichkeit größer, dass eines davon zutrifft.

nach ca 2,5 stunden hatte ich ein lauffähiges programm und konnte sowohl gegen mich als auch gegen den selbstprogrammierten bot spielen. natürlich war ich ihm intelligenzmäßig überlegen, da ja ICH IHN programmiert habe - und nicht umgekehrt ;)

er setzt eben nur zufällig seine steine, aber wenn man sich "anstrengt", kann man ihn auch gewinnen lassen. geplant ist, dass ich meinem bot eine höhere intelligenz verpasse.

weiters habe ich nun meinen clean-up durchgeführt und ein generelles layout zusammengebastelt, wo man im browser zwischen den voreingestellten farben mittels stylesheets wechseln kann.

mfg mailo

am freitag nachmittag fing es mit ein bisschen kopfweh an. doch wer hat schon zeit krank zu werden? - ich doch nicht! ;)

also sagte ich sowohl dem fußball spielen als auch dem "friday nightlife" ab und ging zeitig ins bett. am späten vormittag des samstags mehr oder weniger fit aufgestanden, wollte ich mich noch schonen und da es draußen kalt war, entschied ich mich für indoor activities.

doch was kann man in der wohnung schon treiben? als eingeschweißter informatiker und programmierer fiel ich wieder in mein altes verhaltensmuster und saß vor dem laptop.

ergebnis: thecoda/thecrypta

frage: wtf ist ein thecoda/thecrypta?

antwort: eine einfache webapplikation mit der verschiedenes kodiert/dekodiert und ver-/entschlüsselt werden kann.

daher auch die wortspielerei bei der namensgebung: "the coda" ("der kodierer" bzw "dekoder", was beide funktionen beinhaltet) und das gleiche schema bei "the crypta" ;)

eigentlich ist es eine einfache php-seite, die die nativen funktionen von php verwendet, ein bisschen mit javascript für mouseover/mouseout-events gepimpt und natürlich mit css gestylt ist.

die motivation war einmal eine solche applikation zu schreiben. weiters habe ich irgendwie ein faible für verschleierungen bzw verschiedene repräsentationsarten und wie diese genutzt werden können.

um nun das big picture der applikation zu sehen, habe ich eines angefertigt: [big picture]
btw: so groß ist es nicht, ursprünglich 1380 x 1380 pixel, nur hat es flickr auf 1024 x 1024 pixel skaliert - kA warum.

ein bisschen muss ich noch daran feilen (input validation, error handling), aber sonst finde ich es eigentlich recht gelungen (ja, mein innerer kritiker ist auch mal gut aufgelegt ;)

mfg mailo

ps: ich bin noch gesund und habe nicht vor diesen zustand zu ändern ;)