TYPO3 and xajax quick guide

November 20th, 2007

Ajax is definetly the thing to go with the web as it enhance the user experience as well as allowing more logic to be on the server side (okey, your pages javascript usualy tend to get slightly more bloated as well..).

Anyway. It’s not ajax in general today, but the good looking PHP/ajax combination found with the xajax project. Xajax allows you to have PHP functions that you mapp/register as javascript calls. There is an extension for TYPO3 called – xajax! You guessed it! There are two tutorial/example extensions as well that describes how it works. But for my memory I’m writing a short guide here as well with my own words. Maybe it helps someone else.

Using ajax in your backend module:

  • Do the obvious. Install the xajax extension from TER (ie TYPO3 Extension Repository).
  • Launch your favourite editor and open your module file like – /typo3conf/ext/myext/mod1/index.php
  • Include the ajax class
  1. // DEFAULT initialization of a module [BEGIN]unset($MCONF);require_once(‘conf.php’);require_once($BACK_PATH.’init.php’);
  2. require_once($BACK_PATH.‘template.php’);
  3. // include XAJAX class library
  4. require (t3lib_extMgm::extPath(‘xajax’) . ‘class.tx_xajax.php’);
  5. $LANG->includeLLFile(‘EXT:myext/mod1/locallang.xml’);
  • Somewhere in your init() method register your PHP function
  1. $this->xajax->registerFunction(array(‘xajaxTest’, &$this, ‘xajaxTest’));
  • In your printContent() method add this to ensure that xajax does whatever it wants (ie handle requests..) first
  1. $this->xajax->processRequests();
  • Then create your nifty PHP function where you want to do magic, and add a responce object like this:
  1. function xajaxTest() {
  2. $c = "ohlas!";// Instantiate the tx_xajax_response object
  3. $objResponse = new tx_xajax_response();
  4. $objResponse->addAssign("mydiv","innerHTML", $c);//return the XML response generated by the tx_xajax_response object
  5. return $objResponse->getXML();
  6. }
  • Now finally add a call to your function. This is probably done in moduleContent() or referenced functions
  1. <a href="#" onClick="xajax_xajaxTest();">xajax magic</a>

Note that we got an extra xajax_ added to the beginning of our function which is added automatically.

That’s it folks!

Got to use the command line thingies in linux more often

October 24th, 2007

The absolutely best advantage of using a Linux/*nix based OS is the shell applications and functions. I’m quite far from good at utilising it. I guess it mostly depends on that you need to use it often to remember all the flags and things. Still usefull and quick when you know your way around. Take for instance this simple line of command:

find . -cmin -20 -ls

This list all files in the current folder that are modified within the last 20 minutes. Nifty and quite basic. Your number one resource to getting to know the commands is the man command (man like in manual)

man find

And you know how you do it..

ignore localization of images for text w/image in TYPO3

October 3rd, 2007

A short one. TYPO3 is amazing when (amongst other things) it comes to localization of website contents. The documentation is quite good to around the subject, which is quite rare when it comes to TYPO3 otherwise. However, today I had totaly forgotten how to, or even if it was possible to, only localize the text part for text w/image elements. After some reading I found this great typoscript key

  1. config.sys_language_softMergeIfNotBlank = tt_content:image, tt_content:header

What this actually does when put in you TS template (together with the rest of the localization settings) is saying that TYPO3 should softly and nicely merge the image and header fields of a content element if it’s not translated into the other translated materials.

Go TYPO3 I say :)

Modded vc_javascriptslideshow

June 15th, 2007

I’ve modified the TYPO3 extension vc_javascriptslideshow from ground up. The vc_javascriptslideshow is a javascript/css based slideshow that flips images and I needed to be able to control it fully from TS. That ended up in adding a few extras as well.

The extension now includes

  • added full support for TS configuration
  • added support for multiple slideshows on one page
  • Added settings for border and background for the slideshow (stylesheet settings on a surrounding div)
  • Changed the file rezise to use IMG_RESOURCE instead of custom exec of IM and now use width/height attributes there. This makes it also possible to define w/h as ie 200m or 200c for cropping or relative resize (see the static ts template).
  • added support to (in TS only so far) define a path from where all images should be taken.

TypoScript example setup, included via TV element:

  1.  
  2. lib.topBanner < plugin.tx_vcjavascriptslideshow_pi1
  3.  
  4. lib.topBanner {
  5.   //specify path from where to fetch images
  6.   imagesPath = fileadmin/bilder/banners/
  7.   //..or a use a specified list of images
  8.   //  imagesList = Vinter.jpg,Solnedgang.jpg
  9.   altText = informationsruta
  10.     imageWidth = 500
  11.   imageHeight = 70c
  12.   //override imagesList to fetch all images
  13.   getAllFromPath = 1
  14.   //number of millisecond for each transition
  15.   msTransitionDelay = 140
  16.   //background color for slider space
  17.   #backgroundColor = #ccc
  18.   //a possible border if you like
  19.   borderSize = 0
  20. }
  21.  

The extension probably contains some bugs, but works for my purpose. I will try to add some documentation soon.
I have e-mail the original author hoping that he will include it in the official release. Otherwise I’ll probably add a new ext.. (*hrhr*).

Download the modified ext. (unpack, upload and update ext in EM).

Running chatzilla on it’s own

June 4th, 2007

I’m using irc quite often and most of the time I use the ChatZilla client for that. Normally chatzilla is an extension to Firefox (-ish browsers), but it can be quite annoying to have it tied up to your browser. Quitting the browser quits your irc-session.. Now I found the cure for it – XULRunner. It seems to work like a charm and it’s easy to setup.

I did these steps in cmd shell (yes in Windows XP) after downloading XULRunner and solo ChatZilla zip packages:

  1. C:\Program>cd xulrunner
  2. C:\Program\xulrunner>xulrunner.exe –register-global
  3. C:\Program\xulrunner>xulrunner –install-app c:\download\chatzilla-0.9.78.1-xr.zip
  4. C:\Program\xulrunner>xulrunner –install-app c:\download\chatzilla-0.9.78.1-xr.zip "c:\Program\Mozilla Firefox" chatzilla

By this it ends up in it’s own folder in the Firefox structure.

finding an old cup of java..

June 2nd, 2007

Actually, I didn’t find an old cup of coffee (even if that can happen once in a while) but while talking to some friends of mine today I got this stupid desire to do some java game development. As if I would have time to do that. Well, despite lack of time I’ve come to realise that I’m also lacking knowledge of java in general and game construction in specific. What an adventure.

The first thing I usually do when I’m about to start of with a new project based on technologies or ideas that’s normally of topic for me, I turn to my friend google. This time the search term was ‘java game development’ *puhe*. I found two rather interesting urls in the result – Robocode (http://robocode.sourceforge.net/?Open&ca=daw-prod-robocode) and and Light Weigh Java Game Library (www.lwjgl.com). Check ‘em out. I’m seriously thinking of getting into the lwjgl library, but honestly – how far do I really think my game dev plans will go? :S nahh. clasic double buffer repaint will do for me. :D The other link – Robocode – sound really nerdy and fun. Hopefully there will be time to play with that as well.

Ok. So what’s my big plans? The great game plot? Well first, or rather simultaneously, I will together with two other friends start to build a network camel racing game… and secondly I will try to revitalize an old game idea called TWISEM. I let you know the meaning of that acronym later.. ;)

So, stay tuned. Maybe an applet game or similar may popup here within a year or so..

Hm, yeah. I think I would make it with flash today and not java but it just ain’t as cool…

GMENU/GIFBUILDER broke my swedish characters

March 8th, 2007

We’ve been working on a site for a customer for some time now based on TYPO3. As the the respect to typographical issues where important we decided to go forth using GMENU and GIFBUILDER for menus and headings. I really like the concept of GIFBUILDER and working with it. Sadly we got problems with non ascii characters like our swedish åäö and such. They where replaced by ugly boxes.

Character Ö is replaced by a box..

So, why on earth did this happend I questioned my self.. and people on #typo3 @ irc.freenode.org.

I ended up with these suggestions/requirements:

  1. Make sure you use utf-8 all the way. Gifbuilder (probably GD/freetype really)
  2. Check that the font you use is unicode
  3. Check configuration for mbstring (or iconv) that gifbuilder uses

I did all this. Utf-8 was a requirement for the project as the site will be on both chinese, swedish and english. The font seemed to be in Unicode as well (as far as I could tell). And mbstring was working like a charm..

It’s importent to mention that the development server was a windows server.

Anyway. I copied the site to my local windows computer and tested it. The same buggy result. The I copied it to my own webserver running on debian linux and there it worked! Why? Donno.. However. I went back to my local computer and replaced the font with arial. I got nifty åäö all the sudden. This at least allowed me to assume that it had something to do with the font file (a .otf file btw). The only solution I could think of now would be to convert the font hopfully to utf-8. I got merely no experience with typographical things so this was a blank area for me, but after som googleing I stumbled upon fontforge (http://fontforge.sf.net). It’s actually a *NIX application but I installed Cygwin (along with xfce4), and the cygwin port of fontforge. Wow what an app! A really crappy gui, but wow! :)

fontforge with cygwin

So, I went on and converted my .otf font forcing it to Full unicode, replaced it in my exsisting font on the site. It worked like a charm!

My final configuration on every aspect turned out like this:

localconf.php:

  1.  
  2. // UTF-8 support
  3. $TYPO3_CONF_VARS[‘GFX’][‘gdlib_2′] = ’1′;
  4. $TYPO3_CONF_VARS[‘BE’][‘forceCharset’] = ‘utf-8′
  5. // For GIFBUILDER support
  6. // Set it to ‘iconv’ or ‘mbstring’
  7. $TYPO3_CONF_VARS[‘SYS’][‘t3lib_cs_convMethod’] = ‘mbstring’;
  8. // For ‘iconv’ support you need PHP 5!
  9. $TYPO3_CONF_VARS[‘SYS’][‘t3lib_cs_utils’] = ‘mbstring’;
  10. // For Asian languages
  11. $TYPO3_CONF_VARS[‘SYS’][‘multiplyDBfieldSize’] = 3;
  12. //force db communication to utf8
  13. $TYPO3_CONF_VARS[‘SYS’][‘setDBinit’] = ‘SET NAMES utf8;’;
  14.  

Typoscript

  1.  
  2.  
  3. ## GIFBUILDER HEADING RENDER SETUP ########
  4. ##
  5. ##### Header 1
  6. cHeader1 = IMAGE
  7. cHeader1 {
  8.     alttext.cObject = TEXT
  9.     alttext.cObject.field = header
  10.     wrap = <div class="h1gfx">|</div>
  11.     file = GIFBUILDER
  12.     file {
  13.         format = gif
  14.         reduceColors = 15
  15.         transparentColor = #ffffff
  16.         XY = [10.w]+2,[10.h]+8
  17.         backColor = #ffffff
  18.         10 = TEXT
  19.         10 {
  20.     text.field = header
  21.     fontSize = 14
  22.     offset = 0,20
  23.     fontColor = #333333
  24.     fontFile = fileadmin/fonts/NewsGothicStd_utffull.ttf
  25.     antiAlias = 1
  26.     value.case = upper
  27.         }
  28.     }
  29. }
  30.  

Database was set to full utf-8 charset in all tables from the beginning.

See http://wiki.typo3.org/index.php/UFT-8_support about utf-8 support for TYPO3.

Delphi for PHP, a promising PHP RAD

March 1st, 2007

I just recently found out about Delphi for PHP – a PHP RAD environment. Actually the first real PHP RAD environment I’ve seen. Delphi was (and still is I guess) a fast and easy to use RAD for MS Windows solutions based on the the Pascal language. I more or less started my programming path with Delphi so there are special feelings still there for it :)

Delphi for PHP can be found at http://www.codegear.com/products/delphiforphp. Take a sneak peak at the demos. I really like the table grid and database connection.

I think that a RAD like Delphi for PHP is a great thing for the PHP language though not required. But developing complex, custom tailored solutions for your clients by hand is time consuming and demanding even if you use frameworks like cakePHP or symfony (which both are really great btw). Using some kind of IDE like eclipse (with php plugin), PSPad or JEdit is a requirement for any development.

What I fear is that I might loose to much control over the source code and it’s parts. To much happening automaticaly. A bit like using Microsofts development tools ;) . I’m also a bit worried when using proprietary libraries like the vcls as I can’t enhance or redefine them in the same way as with open source ones. The good thing here on the other hand is that these libraries are object oriented and therefore easily extendible. Thinking of it, it would also be interesting to know a bit more about layout support and application flow controls.

Well I’m hoping to fetch a trial of it before I mumble to much about pros and cons. ;)

So please codegear. Release a trial version so we can give it a spinn. I’m definitely considering to start use it. If it can increase productivity and efficiency, while still leaving me with full control over my sources it’s worth a lot. I’m ready to let go of total control and “notepad mentality” in benefit of that. Maybe I might actually be able to start earn some money on the projects then.

About

February 28th, 2007

Well. I’m David. See http://www.merea.se/ (swedish) if your curious on what I do for a living.

Change layout of filelinks lists in typo3

February 19th, 2007

I recently had to change the title of my files in filelinks with typo3. As I’ve become customed with the thought of having mostly either a full or partial solution to every problem with Typo3, I headed off to google and looked for ways to modify the filelinks.

This got me to css_filelinks. A nice way to modify most appearance aspects of filelinks. I think it’s actually a good example of how T3 can be modified by behaviour and function.
Anyway, with that one you can change the FE (FrontEnd) display to your likening with a template/marker styled way. Instead of displaying ###TITLE### (filename) I choosed to use the description field that you can add in the filelinks setting.

  1.  
  2. tt_content.uploads.20.layout.file >
  3. tt_content.uploads.20.layout.file.cObject=COA
  4. tt_content.uploads.20.layout.file.cObject{
  5.   wrap=<div class="filelinkslist">&#124;</div>
  6.   10 = TEXT
  7.   10.wrap=<span>&#124;</span>
  8.   10.value=###ICON###<a href="###URL###">###DESCRIPTION###</a>
  9.   20 <.10
  10.   20.value=###FILESIZE###
  11. }
  12.  

Configuration reference: http://typo3.org/documentation/document-library/extension-manuals/css_filelinks/0.2.11/view/1/3/