Lehrlings Blog

28. Oktober 2011 in Coden von Leo

In den letzten Tagen habe ich mich sehr mit JavaScript befasst, wodurch ich auch mit dem Hash in einer URL in berührung kam.
Das gelernte sowie verschiedene Code Schnippsel möchte ich euch hier nun vorstellen:

Zuerst mal ganz grundlegend, wie komme ich an den Hash?
Um an den Hash zu kommen habe ich folgende Zeile Code genutzt:

var hash = location.href.substr(location.href.indexOf("#")).substring(1);

Da ich in meinem Beispiel jetzt eine Nummer erwartet habe (eine ID um genau zu sein), habe ich den Hash zuvor noch getestet ob es auch wirklich eine Zahl ist, bevor ich ihn weiterverarbeite.
Dies habe ich mit folgender Funktion gemacht:

isNumeric: function(n){
   return !isNaN(parseFloat(n)) && isFinite(n);
}

// Testen
if(isNumeric(hash)){
   // ...
}

Nun, damit wir das ganze noch dynamischer machen können, also um gleich zu sehen ob sich der Hash geändert hat und wir weitere Ereignisse abspielen können, benutzen wir “hashchange”.

Dies sieht so aus:

$(window).bind('hashchange', function (e){
   // on hash change, do this
});

Dies funktioniert jedoch nur in neuen Browsern, Browser wie IE7 oder kleiner würden damit nicht zurecht kommen. Jedoch kann dies mithilfe eines zusätzlichen JS Files geändert werden, damit auch diese unterstützt werden. Finden könnt ihr dies unter folgendem Link: Klick.

30. Juni 2011 in TYPO3 von Leo

Lange war ich auf der Suche nach einer einfachen Möglichkeit in einem Fluid Select eine default Option anzufügen, sprich eine Option wie “Produkt auswählen” oder ähnlich. Schlussendlich war die beste lösung einen ViewHelper für das Select zu erstellen.
Dabei bin ich erstmals auf folgenden Artikel gestossen: Fluid: Select in Formularen mit weiteren Optionen. Leider führte dies zu einer Fehlermeldung, und ausserdem waren in meinem Fall noch ein paar Anpassungen nötig.

Hier nun eine kurze Anleitung:
Als erstes erstellen wir einen neuen ViewHelper mit dem Namen SelectViewHelper.php unter typo3conf/ext/meineExt/Classes/ViewHelpers/. In diesen fügen wir nun folgenden Code ein:

class Tx_MeineExt_ViewHelpers_SelectViewHelper extends Tx_Fluid_ViewHelpers_Form_SelectViewHelper {

    public function initializeArguments() {
        parent::initializeArguments();
        $this->registerArgument('additionalOptions', 'array', 'Associative array with values to prepend', FALSE);
    }

    protected function getOptions() {
        $options = parent::getOptions();
        $additionalOptions = array();
        foreach ($this->arguments['additionalOptions'] as $key => $value) {
            $additionalOptions[$key] = $value;
        }
        $return = $additionalOptions + $options;
        return $return;
    }

}

Hierbei noch den Namen der Klasse abändern und “meineExt” durch den eigenen Extension namen ersetzen.

Nun bearbeiten wir unser Fluid Template wo das Custom Select hin soll. Dort fügen wir zuoberst folgende Zeile ein:

{namespace meineExt=Tx_meineExt_ViewHelpers}

Der namespace kann eigentlich beliebig heissen, wie man es halt gerne hätte.

Und fügen dann an einer beliebigen Stelle darunter unser Select ein:

<meineExt:select additionalOptions="{- : '-- Produkt wählen --'}" sortByOptionLabel="name" name="products" property="products" options="{allProducts}" optionValueField="uid" optionLabelField="name" />

Der Parameter additionalOptions ist also für unseres Zusätzliche Feld, dort kann ein beliebiger Wert angegeben werden.

Wichtig: In meinem Fall wurde in der getOptions Methode in unserer ViewHelper Klasse keine array_merge verwendet, wie im Original Code, da die Array-Keys noch gebraucht wurden.

5. August 2010 in TYPO3 von Leo

Das automatisierte Testen von Code wird immer wie beliebter. Deshalb habe ich diese Woche bei 4eyes die Aufgabe erhalten, mir das ganze mal anzusehen und gleich Tests in TYPO3 zu schreiben um eine Extension zu testen.

Anders als mit Selenium, wird hier jedoch direkt der (PHP) Code getestet, also bevor schon die fertigen Resultate da sind, testet man was zwischen Start und ende passiert. So kann man mit PHPUnit z.B. testen ob eine bestimmte Funktion im Code ein bestimmtes Resultat zurück liefert.

Nachdem ich die Funktionsweise dann auch verstanden habe und das Testen möglich war (nach ein paar Startschwierigkeiten), schrieb ich zuerst mal einen kleinen Hello World Test. Doch bevor wir zum Test kommen, zeige ich euch wie ihr alles richtig einrichtet.

Installation

Die Extension PHPUnit (extkey: phpunit) herunterladen und installieren. Hier findet ihr die Extension auf Typo3.org, klick.

Nach der Installation erstellt ihr in einer eurer Extensions einen Ordner namens “Tests”. Der Pfad wäre also:

typo3conf/ext/deineExtension/Tests

Nun erstellt ihr im gerade erstellten Ordner ein neues PHP File mit folgendem Namensschema:

tx-extKey_HelloWorld_testcase.php

Wichtig ist hierbei eigentlich nur das “_testcase” am ende, da dies PHPUnit sagt, dass es sich hier im ein Test File handelt (PHPUnit scannt alle ext Verzeichnise automatisch).

Nun füllen wir das PHP File mit dem standardmässig benötigten Code:

<?php
require_once 'PHPUnit/Framework.php';

class tx_extKey_HelloWorld_testcase extends tx_phpunit_testcase {

}

?>

12. April 2010 in Browser, Tutorials von Leo

Kürzlich musste ich für einen Event eines Kunden etwas Javascript schreiben, um ein paar div Elemente (HTML) mit einem MouseOver und MouseOut Effekt versehren, welche dem div Element z.B. eine neue Hintergrundfarbe geben.

Eigentlich kann das ganze in Browsern wie Firefox, Google Chrome und Safari (?) ganz simpel mit einem div:hover gemacht werden, jedoch würde dies im Internet Explorer (mal wieder) nicht funktionieren. Deshalb musste Javascript her, welches das ganze nun in allen Browsern ermöglicht.

Und so wird es gemacht:

1. Zuerst muss Prototype (aktuell 1.6) heruntergeladen und auf seinen Server hochgeladen werden. Ansonsten würde das Javascript nicht funktionieren.

2. Nun erstellt man eine neue Javascript Datei (.js) und ladet diese auch auf seinen Server. Im HTML File müssen die beiden Javascript Files nun noch eingebunden werden:

<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/dein-effekt.js" type="text/javascript"></script>

Der Pfad und Dateiname muss natürlich noch durch den eigenen ersetzt werden.

3. Zu erst erstellen wir ein HTML Gerüst aus div’s:

<div class="content">
  <div class="team">
     <div class="tools">Anmelden!</div>
  </div>
</div>

Hierbei handelt es sich nun um ein Turnier, bei dem man sich Anmelden kann. Der Link zur Anmeldung erscheint jedoch nur, wenn man mit der Maus über das div “team” fährt.

4. Im Javascript schreiben wir nun folgendes:

var act = 0;

Event.observe(window, 'load', function() { //wenn das Fenster geladen hat

	var team = $('content').select('div.team'); //Hier wir dem JS das div gezeigt

Gleich darunter:

		team.each(function(team){ //hierbei wird das div.team ausgewählt
				Event.observe(team, 'mouseover', function() { //mouseover div.team
						mouseOver(team);
				});
				Event.observe(team, 'mouseout', function() { //mouseout div.team
						mouseOut(team);
				});
	});
});

Danach kommt zuerst einmal die Funktion mouseOver:

function mouseOver(team){
	children = team.childElements(); //die Unterelemente werden gewählt
	tool = children[0]; // das nullte Unterelement (als das gleich darauf folgende
	tool.style.display='block'; //jetzt wird das div (div.tools) angezeigt
	team.addClassName('act');
	//tool.addClassName('act');
}

Und die Funktion mouseOut:

function mouseOut(team){
	children = team.childElements();
	tool = children[0];
	tool.style.display='none';
	team.removeClassName('act');
	tool.removeClassName('act');
}

Im CSS müssen nun noch die Class definiert werden. Die Class .act, für active (aktiv), welche sagt dass das Element aktiv ist, also die Maus gerade auf dem Element ist.
Das Javascript versteckt und zeigt lediglich ein div Element und gibt bzw. nimmt ihm eine neue CSS Class.

Das Javascript sollte wie folgt aussehen:

var act = 0;

Event.observe(window, 'load', function() {

	var team = $('content').select('div.team');

		team.each(function(team){
				Event.observe(team, 'mouseover', function() {
						mouseOver(team);
				});
				Event.observe(team, 'mouseout', function() {
						mouseOut(team);
				});
	});
});

function mouseOver(team){
	children = team.childElements();
	tool = children[0];
	tool.style.display='block';
	team.addClassName('act');
	//tool.addClassName('act');
}

function mouseOut(team){
	children = team.childElements();
	tool = children[0];
	tool.style.display='none';
	team.removeClassName('act');
	tool.removeClassName('act');
}