TYPO3: Problem mit Kontext-Menu nach Update auf 4.5

19. Januar 2012 in TYPO3 von Leo

Kürzlich habe ich mal wieder eine Reihe an TYPO3 Updates für unsere Kunden verrichtet. Die Updates, welche normalerweise (bis vereinzelt auf ein paar Server probleme) sehr gut klappen, machte mir dieses mal ein Update von TYPO3 4.3 auf 4.5 zu schaffen. Da die TYPO3 Installation auf welcher das Problem auftauchte nicht von uns stammt, sondern erst später von uns übernommen wurde, war das ganze natürlich etwas unorganisierter und chaotischer.

Das Problem was ich beim genannten Update hatte, hängte mit dem neuen Kontext-Menu, welches in TYPO3 4.5 neu vorgestellt wurde zusammen. Kurz gesagt, es funktionierte nicht. Anstatt das die Page-Icons angezeigt wurden, welche man in den Seitenbaum ziehen kann um eine neue Seite zu erstellen, wurde nur ein rotes Kreuz (welches für “fatal error” steht) angezeigt.

Nach langer Google recherche und mithilfe von Arbeitskollegen hatten wir leider noch keine Lösung in Sicht. Jedoch wurde das Problem nicht aufgegeben, wodurch ich später einen Glückstreffer landete und die Lösung des Problems fand. Das Problem lag an folgender Zeile in der localconf.php (welche nicht von uns stammte):


$TYPO3_CONF_VARS['BE']['defaultUserTSconfig']="";

Nachdem ich die Zeile gelöscht habe, hat sich das Problem gelöst.

Extbase: Extension Settings aus TypoScript laden

10. Januar 2012 in Coden, PHP, TYPO3 von Leo

Vor kurzem habe ich mit intensiv mit Extbase befasst, da ich auch gerade eine Extbase Erweiterung für einen Kunden erstellen musste. Da ich vorher “normal” TYPO3 Extension programmiert habe, habe ich natürlich bereits TypoScript über die Extension geladen, jedoch wird das ganze in Extbase etwas anders gemacht.

Folgender Code-Schnippsel wird genutzt:


$group = $this->settings['group']

Das TypoScript hierzu würde folgendermassen aussehen:


plugin.tx_meineExtension {
 settings {
  group {
   1 {
    label = Gruppe 1
   }
  }
 }
}

Zu beachten ist hierbei eigentlich nur, dass mit $this->settings auf “settings” (siehe oben) in den Einstellungen unserer Extension zugegriffen wird.

PhoneGap und jQuery Mobile

in Android, Coden, Javascript, Tutorials von Leo

In der Schule haben wir im JavaScript Modul den Auftrag erhalten, eine Android App mithilfe von PhoneGap zu programmieren. Ein weiterer Teilpunkt des Auftragspunkt gab es, wenn man das ganze mithilfe von jQuery Mobile umsetzt. Da ich jQuery schon kenne, dachte ich wieso nicht, und setzte mich mit jQuery Mobile auseinander.

Nun eine kleine Anleitung:

  1. Als erstes muss natürlich PhoneGap korrekt installiert werden. Die beste Anleitung findet ihr hier, auf der offiziellen PhoenGap Website.
  2. Das ganze geht von unserem index.html File aus. Dieses wird beim Start der App über PhoneGap aufgerufen. In der Anleitung oben wurde dieses File erstellt, es befindet sich im Verzeichnis /assets/www.
  3. Nun benötigen wir jQuery Mobile, sprich das JS, CSS und die Bilder für die Designs. Dies alles kann hierheruntergeladen werden. Weiter unten auf der Download-Seite findet ihr den Link zu einem Zip (“If you want to host the files yourself you can download a zip of all the files:”), dieses sollte heruntergeladen werden. Es gibt noch weitere möglichkeiten, so kann jQuery auch aus dem Web geladen werden, dann wäre es jedoch nicht lokal auf dem Handy und würde Traffic verursachen, bzw. bei keiner Datenverbindung gar nicht geladen werden. JQuery Mobile lokal zu haben ist also der sicherste weg.
  4. Haben wir jQuery Mobile heruntergeladen entpacken wir es und legen es auch ins www/ Verzeichnis wie unsere index.html-Datei. Das ganze wird nun in den Header inkludiert:
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    

    Dies alles kommt natürlich in den Header (<head>) und die Link müssen auch noch angepasst werden (jenachdem wo ihr eure Files hingelegt habt).

  5. Nun wo alles eingebunden ist, können wir mit einer ersten Seite beginnen. Damit das ganze so aussieht wie es aussehen sollte, wird eine spezielle Seiten Anatomie von jQuery Mobile verlangt. Mehr dazu findet ihr hier.
    Wir fügen für eine erste Seite also folgenden Code zwischen die Body-Tags unseres index.html-Files:

    <pre><div data-role="page" id="idDerSeite">
    	<div data-role="header">...</div>
    	<div data-role="content">...</div>
    	<div data-role="footer">...</div>
    </div></pre>
    
  6. Der HTML-Code oben stellt jetzt eine Seite dar. Um mehrere Seiten zu erstellen, kopiert man den obigen Code einfach mehrmals in den Body-Tag der Seite und ändert die ID der Seite. Jeweils die oberste Seite wird als Standardseite genutzt, sprich, als erstes aufgerufen. Um die Seiten zu verlinken kann einfach ein normaler HTML-Link gemacht werden mit dem href=”#idDerSeite”.

jQuery: Mit Hash in URL arbeiten

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.

Safari: RSS Feed zeigt nur ein Element

19. September 2011 in Allgemein von Leo

Falls Safari im RSS Feed nur 1 Element Darstellt, liegt dies höchstwahrscheinlich daran, dass die anderen Elemente als Duplikate wahrgenommen werden. Dies geschieht z.B. wenn der Titel bei allen gleich verlinkt ist.
Um dies zu Lösen nutzt man am besten das Element. Im Element gibt man einen Link an, welcher aber keinen Einfluss sonst hat, ausser das er mitteilt das es sich hier um ein einmaliges Element handelt.
So könnte man z.B. dies so Lösen:

<guid>http://www.mywebsite.xy/news/#newsid_123</guid>

TYPO3 MailForm Validierungs-Probleme wegen Komma

in TYPO3 von Leo

Vor kurzem bin ich wieder über das Problem gestolpert. Hat man in der standard TYPO3 MailForm Kommas in den Labels angegeben, z.b. “Name, Vorname”, so funktioniert die ganze MailForm nicht mehr da die Validierung scheitert.
Grund dafür ist das JavaScript, welches durch das Komma ins stolpern kommt.

Die einzige mir bekannte Lösung ist entweder auf eine andere Extension umzusteigen, oder einfach keine Kommas zu nutzen.

Hier findet ihr auch noch kurz etwas dazu: Klick

phpMyAdmin auf Debian Server installieren

5. September 2011 in Software, Tutorials von Leo

Hier eine kurze und simple Anleitung um phpMyAdmin auf dem eigenen Debian Server zu installieren. Vorausgesetzt ist das mySQL bereits installiert ist.

1. Verbinden mit dem Server (SSH)
2. apt-get install phpmyadmin ausführen. Nun wird alles installiert. Falls etwas gefragt wird einfach OK / Ja auswählen.
3. Nun folgende 2 Befehle nacheinander ausführen:

cp /etc/phpmyadmin/apache.conf /etc/apache2/sites-available/phpmyadmin

danach noch

a2ensite phpmyadmin

4. Server neu starten: /etc/init.d/apache2 restart

Nun ist phpmyadmin über den Browser erreichbar (/phpmyadmin)

TYPO3: Eigene Extension lokalisieren

16. August 2011 in TYPO3 von Leo

Um die eigene Extension Mehrsprachig zu machen und trotzdem so flexibel wie möglich zu halten, nutzt man die locallang. Früher handelte es sich hier um ein simples PHP-File mit einem Array, heute ist es ein XML-File mit einer besseren struktur und Übersicht, wo es auch keine Zeichensatz Probleme gibt.

Um für die eigene Extension eine locallang nutzen zu können, gehen wir folgendermassen vor:

Als erstes legen wir die locallang.xml an. Meist direkt im Extension Verzeichnis zu finden, sprich typo3conf/ext/meineExtension/locallang.xml. Falls wir jedoch mehrere pi’s in unserer Extension haben, können wir in jedem pi eine eigene locallang Anlegen welche dann jeweils genutzt wird.

In unsere so eben erstelle locallang.xml Datei kopieren wir nun folgenden XML-Code:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3locallang>
	<meta type="array">
		<type>module</type>
		<description>language Labels</description>
	</meta>
	<data type="array">
		<languageKey index="default" type="array">
			<label index="captchaErrorMessage">Captcha incorrect!</label>
		</languageKey>

		<languageKey index="de" type="array">
			<label index="captchaErrorMessage">Captcha nicht korrekt!</label>
		</languageKey>
	</data>
</T3locallang>

Hier haben wir 2 Sprachen. Die default Sprache (englisch) und “de” für Deutsch. Die Übersetzungen werden als Phrasen gemacht, welche jeweils in labels abgespeichert werden. Die labels erhalten einen namen (index=”") und werden im languageKey Array eingefügt. Oben anhand des Beispiels zu sehen.

In unserer PHP-Class der Extension (falls mehrere muss es in jeder gemacht werden), müssen noch folgende Variabeln angegeben werden, was falls ihr mit dem Extension Kickstarter arbeitet eigentlich erledigt sein sollte. Direkt in der Class gebt ihr folgendes an:

public $scriptRelPath = 'class.ux_tx_tipafriend.php'; // Path to this script relative to the extension dir.
public $extKey = 'x4etipafriendrecap'; // The extension key.

So kann TYPO3 die korrekte localconf holen. Wäre unsere Datei in einem pi Verzeichnis, wäre der $scriptRelPath demnach z.B. pi1/class.ux_tx_tipafriend.php.

Damit die Sprachen nun noch geladen werden, müssen in der Main-Funktion noch folgendes gemacht werden:
Zuerst muss die conf in $this->conf geschrieben werden:

$this->conf = $conf;

Danach (muss danach sein!) muss die locallang selbst noch geladen werden:

$this->pi_loadLL();

Fertig!

Um jetzt auf die Phrasen zuzugreifen, nutzen wir folgende Zeile:

$error = $this->pi_getLL('captchaErrorMessage');

Fluid: Select mit zusätzlicher Option

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.

TYPO3: Felder über PageTS entfernen

21. Juni 2011 in TYPO3 von Leo

Um für Kunden welche Backend-Zugriff für ihre TYPO3 Installation den Umgang mit TYPO3 möglichst einfach und Benutzerfreundlich zu gestalten, wird alles unnötige – was sie halt nicht benötigen – entfernt. So auch bei den Feldern. Verschiedene Plugins wie z.B. tt_news sind sehr Umfangreich und bieten Felder an die der Kunde nicht benötigt. Da es teilweise sehr viele Felder hat, könnte dies den Benutzer nur verwirren, als dass sie ihm was nutzen. Eine möglichkeit diese Felder zu entfernen, ist über die Zugriffsliste. Man bearbeitet eine Gruppe und kann dort bei den Rechten die Zugriffsliste einschränken, somit werden die ausgeschlossenen Felder ausgeblendet.
Was wenn jedoch einige Felder auf verschiedenen Seiten (oder z.B. SysFoldern mit Datensätzen für Plugins) benötigt werden und auf anderen wiederum nicht?

Eine simple Methode ist das auslagern des pageTS in eine oder mehrere Dateien. Diese Dateien können wir im pageTS einbinden.
Und so gehts:

Wir erstellen eine Datei im fileadmin Ordner, wo genau ist egal. Am besten nehmen wir die Endung .ts, auch wenn es sich eigentlich um eine Textdatei handelt, so wissen wir was es ist.
In dieser Datei können wir für jedes Feld das wir nicht haben wollen folgende Zeile einfügen:

TCEFORM.tt_news.author.disabled = 1

Somit wird das Autoren-Feld von tt_news nicht mehr angezeigt. Dies kann für alle Spalten in einer Tabelle gemacht werden, am besten öffnet man noch phpMyAdmin (oder ähnlich) und kopiert dort die Namen der Spalten.
Um ein Feld zu erlauben wird demnach einfach eine “0″ gesetzt.

Damit das ganze seine Wirkung zeigen kann, muss es noch im pageTS eingebunden werden:

<INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/ts/setup/tt_news-fields.ts">

Fertig! Um Felder je nach Ort zu erlauben / verbieten, erstellt man am besten 2 Dateien (für zum erlauben / verbieten) und bindet diese je nach dem ein wo halt die Felder erlaubt oder verboten werden sollen.

pageTS: Seiten TypoScript, zu finden beim bearbeiten einer Hauptseite unter dem Tab “Resources” (Ressourcen).