[TUT] DateClass

[the binary]

Hey Folks,

heut will ich mich an meinem ersten Tutorial versuchen, und Euch mal was zum besten geben.

Ziel dieses Tutorials wird es sein, eine Klasse zu erstellen, die es ermöglicht, per include schnell und einfach die aktuellen Datums und Zeitinformationen in einem Textfeld darzustellen.

Stellen wir zu Anfang erst einmal einige Überlegungen an, was wir benötigen werden...

1. Eine Klasse
2. Ein Textfeld, in dem wir unsere Informationen ausgeben werden.
3. Eine function, die dafür sorgt, dass unsere Infos im Sekundeninterval angezeigt werden.
4. einige Hilfsfunktionen

Soweit so gut, fangen wir also an...
Dazu erstellen wir uns einen NameSpace, in dem wir unsere Klasse ablegen.

if( _global.de == undefined) _global.de = new Object();
if( _global.de.egliman == undefined) _global.de.egliman = new Object(); 

Als nächstes benötigen wir unsere Klasse, die das Ziel-Textfeld als Parameter erwartet
und die init-Methode aufruft.

o = _global.de.egliman.DateClass = function(  poTarget) {
    this.init.apply( this, arguments[0]);
} 

Erstellen eines Hilfs-Objectes, damit wir nicht immer den kompletten Klassennamen ausschreiben müssen

o = o.prototype; 

In der init function überprüfen wir mit Hilfe der Methode isValidTarget(), ob ein gültiges Textfeld
als Parameter übergeben wurde.
Ist dass der Fall, wird true zurückgebeben, und eine Referenz auf unser Textfeld
in der Variable ref_date_txt gespeichert.
Falls nicht, ist die Rückgabe der Methode 'false', und die Variable ref_date_txt wird auf -1 gesetzt.

Als nächstes wird mit der Methode 'hasTarget()' überprüft, ob eine gültige Referenz erzeugt wurde.
Wenn ja, wird die Ausgabe gestartet, im anderen Fall eine Fehlermeldung ausgegeben.
Das könnte man sicherlich vereinfachen, ich lasse es aber der Übersicht halber einfach so

o.init = function( poTarget) {
    this.ref_date_txt = this.isValidTarget( poTarget) ? poTarget : -1;
    
    if(! this.hasTarget()) {
        trace('de.egliman.DateClass.init() : missing textField param')
        return;
    }
    
    trace('de.egliman.DateClass.init() : textfield passed as param ->' + this.ref_date_txt);
    this.startOutput();
} 

Schauen wir uns als nächstes die beiden Methoden 'isValidTarget()' und 'hasTarget() an.
Sie gibt (wie oben erwähnt) true zurück, wenn unser Parameter ein Textfeld ist.

o.isValidTarget = function( poTarget) {
    return ( poTarget instanceof TextField);
} 

Hier erfolgt ein simpler check, ob unsere ReferenzVariable ungleich -1 ist,
was gleichbedeutend mit der erfolgreichen Speicherung der Referenz ist.

o.hasTarget = function() {
    return this.ref_date_txt != -1;
} 

Ist dieser Schritt erledigt, wir befinden uns geistig immer noch in der initFunction,
beginnt die Ausgabe unserer DatumsInformationen.

o.init = function( poTarget) {
    this.startOutput();
} 

Soweit alles im grünen Bereicht ? Gut, dann gleich weiter zu unserer 'startOutput()'-Methode
Hier starten wir sozusagen unsere Ausgabe, indem wir uns eine schicke Variable definieren,
in der unser Interval abgelegt wird. Den benötigen wir ja, um auf dem zeitlich laufenden zu bleiben.

Als Function, die ausgeführt werden soll, geben wir die Methode 'updateDateText()' an,
gefolgt vom Wert für die Zeit, in unserem Beispiel 1000 millisekunden und dem Object selbst als Referenz.

o.startOutput = function () {
    trace('de.egliman.DateClass.startOutput() : start displaying date informations');
    this.id = setInterval( this.updateDateText, 1000, this);
} 

Nun kommen wir zum eigentlichen Herzstück unserer Klasse, der Methode 'updateDateText()'
Hier ermitteln wir unsere Informationen, die dargestellt werden sollen, mit Hilfe des Date-Objects,
speichern diese in lokalen Variablen und übergeben dann unseren formatierten String an
unsere Ausgaberoutine 'setDateText()'.

o.updateDateText = function( poRef) {
    this = poRef;
    
    var dateObj = new Date();
    //
    var day = this.zeroFill( dateObj.getDate());
    var month = this.zeroFill( dateObj.getMonth());
    var year = dateObj.getFullYear();
 
    var hour = this.zeroFill( dateObj.getHours());
    var minu = this.zeroFill( dateObj.getMinutes());
    var sec = this.zeroFill( dateObj.getSeconds());
    //
    var sTimeStamp =  ' '+ day +'/'+ month +'/'+ year +' - '+ hour +':'+ minu +':'+ sec;
    //
    this.setDateText( sTimeStamp);
} 

Allerdings werden die Angaben einstellig zurückgeben, was bei Zahlen, die kleiner als 10 sind,
nicht recht hübsch wirken will.

Also ? Genau, eine Methode gebastelt, die uns unsere Zahlen mit einer führenden Null bestückt.
Als Parameter wird unsere Zahl übergeben, die wir überprüfen wollen.

Da eine eine Zahl + 0 bekanntlich die Zahl selbst ergibt, müssen wir unsere zu füllende Zahl vor der Rückgabe
noch in einen String umwandeln.

o.zeroFill = function ( piDigit) {
    var iFilled = ( piDigit <= 9) ? '0'+ piDigit.toString() : piDigit;
    //
    return iFilled;
} 

Nachdem wir nun unsere Informationen über Datum und Zeit gesammelt und
unseren Ausgabestring formatiert haben, bleibt uns eigentlich nur noch eine übrig,
dass setzen des Textes in unserem Textfeld.

Dazu benutzen wir die Methode 'setDateText()'

o.setDateText = function( psDateText) {
    this.ref_date_txt.text = psDateText;
} 

und zu guter letzt, löschen wir unser Hilfs-Object.

delete o; 

Um die ganze Geschichte nun auch zum laufen zu bringen,
erstellen wir per

#include "de.egliman.DateClass"
 
dateController = new _global.de.egliman.DateClass( targetTextfield); 

eine neue Instanz unserer DateClass und übergeben unser ZielTextfeld.
Das war schon alles.

Ich hoffe, mein erstes Tutorial findet etwas Anklang und wird dem einen oder
anderen mal nützlich sein, etwas Arbeit abnehmen bzw. Zeit sparen.

Euch noch einen schönen Abend und Vielen Dank für Eure Aufmerksamkeit.

Gruss


download de.egliman.DateClass.as

[the binary]

auf ein bisschen mehr resonanz hätte ich schon gehofft...

gibts verbesserungsvorschläge fürs nächste mal ?


gruss

[killerkarnickel]

Hallo the binary,

super Tutorial, danke !

Zwei Sachen sind für mich allerdings leider etwas zu hoch, vielleicht magst Du die ja ein bißchen näher erklären:

1) Wozu ist der Namespace gut ?
Kann man nicht genauso gut :
DateClass = function( poTarget) .....
schreiben und dann mit blabla=new DateClass (textfeld) ein neues Objekt erstellen ?

2) Die Zeile :
this.init.apply( this, arguments[0]);
ist mir auch nicht ganz klar.
Wo ist der Unterschied zu :
this.init(poTarget); ?


Viele Grüße
das killerkarnickel

[the binary]

ja, man könnte es auch so machen.
der simulierte namespace in flash sorgt lediglich dafür,
dass konflikte mit dem namen der klasse vermieden werden.

soll heissen, jede klasse bekommt ihren eigenen 'raum',
in dem sie existieren kann und sich klassen mit gleichem namen nicht gegenseitg
überschreiben können.

das apply benutze ich eigentlich der übersicht halber, ausserdem erspart auch dass ein wenig schreibarbeit, wenn man viele parameter hat, die mann sonst alle 'per hand' übergeben müsste.

so wird einfach ein parameter array übergeben..


gruss

[killerkarnickel]

Vielen Dank für die Erklärung, hat Licht ins Dunkel gebracht (und ich hab wieder was gelernt :-) ) .

killerkarnickel