1. Open the Synaptic package manager and install the sun-java6-jdk and the eclipse package (and of-course accept the depending packages).

2. Verify that you have a working java enviroment by running java --version in a terminal.

3. Download the lasted version of the Android SDK at android.com (http://developer.android.com/sdk/index.html).

4. Unpack the SDK file to your home directory (or somewhere else – its your choice)

5. Open the newly installed Eclipse IDE.

6. In Eclipse goto the Help menu and select the Install New Software

7. Click Add and create a site with this url: http://download.eclipse.org/releases/galileo/

8. Now search for wst and install the WST Server Adapters.

9. Add another site with this url: http://dl-ssl.google.com/android/eclipse/ and install the Android Development Tools.

10. Select the Window menu in Eclipse and open the preferences. Select the Android section and set the SDK location to the directory where the SDK in unpacked (in sted 4).

11. Open a terminal/command prompt, go to the tools directory inside the SDK (which we unpacked in step 4) and run the android program. Select the Settings menu and check the Force https .. field. Then go to the Available Packages and select which version(s) that you want to develop to. When done, close the program.

The IDE is now ready to go.

Further reading could be the Hello World tutorial over at android.com (http://developer.android.com/guide/tutorials/hello-world.html) that also lists how to setup an emulator for testing the applications. (something like android create avd --target 1 --name my_avd)

I hope this can help you get started.

Please post any comments you may have.

I have been working on a small project of mine and figured that the sortable widget could be a great feature. I then started to output the list and the element that should be draggable like this:

My HTML list

<ul id="sort1">
  <li>
    <div>box no 1</div>
  </li>
  <li>
    <div>box no 2</div>
  </li>
  <li>
    <div>box no 3</div>
  </li>
</ul>

My jQuery code to enable the sortable widget and for getting a serialized result when an element has been dragged around:

$(document).ready(function() {
    $("#sort1").sortable({
        opacity: 0.6,
        update: function(event, ui) {
            var info = $(this).sortable("serialize");
            $("#sort1output").html(info);
        }

    });
});

Example (try dragging a box up or down):

• box no 1
• box no 2
• box no 3

Serialized output (updated when a box is dragged):Output will be shown here

So. Nothing. No output what so ever.

I have spend several hour researching this problem, because the documentation on jqueryui.com lists that the serialize and toArray events should return output.

And then. Finaly. I stumpled upon a note regarding the id name of the element that gets dragged. I have seen no documentation about this and was quite puzzled. I digged some more into this id-hint and realized that the element that gets moved around, has to have a unique id tag ending with a number like this: “element_2″.

The working code will then be:

<ul id="sort2">
  <li id="element_1">
    <div>box no 1</div>
  </li>
  <li id="element_2">
    <div>box no 2</div>
  </li>
  <li id="element_3">
    <div>box no 3</div>
  </li>
</ul>

• box no 1
• box no 2
• box no 3

Serialized output (updated when a box is dragged):Output will be shown here

I hope this tip is helpfull.

Quicklinks:
The test setup
Get the selected value from the select / dropdown box
Set the selected value
Insert new options and values in the dropdown box
Removing an entry from the select box
Disable and enable options
The code

The test setup.

For the following examples I will use a dropdown / select box like this:

The HTML-code for the dropdown is where basic:

<select id="dropdown">
<option value="apples">10 Apples</option>
<option value="oranges">5 Oranges</option>
<option value="bananas">12 Bananes</option>
</select>

Get the selected value from the select / dropdown box.

When a value is selected, it could be nice to use the value for something and the first step to doing this, is to receive the value. This is actually very simple to do:
dropdown1:
10 Apples
5 Oranges
12 Bananes

button1: Fetch value from dropdown

Code:

    $("#button1").click( function() {
        alert("The selected value is: " + $("#dropdown1").val() );
    });

Here I have used the val()-function on the dropdown box the receive the value for the selected element and it will output the content of the “value”-parameter on the select-box.

If you would rather have the visible text (ie. 10 Apples or 5 Oranges) outputted, you will have to use the html()-function instead. It’s a bit more tricky, as you should only get the content of the selected value and not the entire select-box.
To do this, we have to do a combination like this:
button2: Fetch content from dropdown

Code:

    $("#button2").click( function() {
        var selectedvalue = $("#dropdown1").val();
        alert("The selected value is: " + $("#dropdown1 option[value="+selectedvalue+"]").html() );
    });

Another and more simple way of getting the text from the selected element could be:

    $('#dropdown1 :selected').text();

Set the selected value.

Setting the selected value is very easy. All you have to do, is use the val()-function:
dropdown2:
10 Apples
5 Oranges
12 Bananes

button3: Select ‘oranges’
button4: Select ‘bananas’

code:

    $("#button3").click( function() {
        $("#dropdown2").val("oranges");
    });
    $("#button4").click( function() {
        $("#dropdown2").val("bananas");
    });

Insert new options and values in the dropdown box.

If the content of the dropdown are depending on other fields, it is often necessary to change or insert new values to a dropdown box.
This can be done by appending new <option>-tags to the <select>-box:
dropdown3:
10 Apples
5 Oranges
12 Bananes

button5: Append a new field named ‘20 Grapes’
button6: Prepend a new field named ‘20 Melons’

Code:

    $("#button5").click( function() {
        // insert new option at the bottom of the dropdown box
        $("#dropdown3").append('<option selected=selected value="grapes">20 Grapes</option>');
    });
    $("#button6").click( function() {
        // insert new option at the top of the dropdown box
        $("#dropdown3").prepend('<option selected=selected value="melons">20 Melons</option>');
    });

Removing an entry from the select box.

Remove options is very easy. All you need is knowing which values to remove:
dropdown4:
10 Apples
5 Oranges
12 Bananes

button7: Remove the “10 Apples” option

Code:

    $("#button7").click( function() {
        $("#dropdown4 option[value='apples']").remove();
    });

Disable and enable options.

If some of the options in the dropdown is depending on other values, it is sometimes nice to enable and disable entries on the fly.
dropdown5:
10 Apples
5 Oranges
12 Bananes

button8: Disable the”5 Oranges” option
button9: Enable the “5 Oranges” option

Code:

    $("#button8").click( function() {
        $("#dropdown5 option[value='oranges']").attr("disabled", "disabled");
    });

    $("#button9").click( function() {
        $("#dropdown5 option[value='oranges']").removeAttr("disabled");
    });

The code.

The complete jQuery code with the above examples, can be downloaded here

The guide will be based on common Linux installations of both MySQL and PHP.

Step 1 – the database

Create a table in your MySQL database with 2 fields, username and password. This could be done by running the following code in your MySQL shell or from phpMyAdmin or another interface:

CREATE TABLE `login` (
`username` TEXT NOT NULL ,
`password` TEXT NOT NULL
)

The database table called login is now created with 2 field named username and password.

Step 2 – The HTML form

First we have to create the web formula to show the login function:

<form action="login.php" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Login">
</form>

This will output 3 field like this:

When submitting the form, either by hitting enter or by clicking the Login button, the formula will send the username and password to the login.php file.

Step 3 – Getting the information from the website.

The login information has now been sent to the login.php and we have to receive these value before checking them against the MySQL database.

Login.php:

  <?php
  ...
  // receiveing the login information
  $username = $_GET["username"];
  $password = $_GET["password"];
  ?>

Step 4 – Connecting to the database

Before checking the login data against the database, we have to open a new connection.

<?php
  ...
  //login information to the MySQL database
  $dbuser = "myUsername"; // change myUsername to your own username
  $dbpass = "myPassword"; //change myPassword to your own password
  $dbhost = "localhost"; // this should work in most cases. Otherwise contact your webhost
  $db = "myDatabase"; // change myDatabase to your the database assigned to your login

  // perform user authentication
  mysql_connect($server, $dbuser, $dbpass);
  // selecting database
  mysql_select_db($db;

  ...
?>

Step 5 – Comparing the username and password against the database

We have the login information from the formula and we have opened a connection to the database. Great. All we have to do, is the actually user validation.

<?php
  ..
  // check the content of our $username and $password variable against the login table
  $sql = "SELECT username FROM login WHERE username='$username' AND password='$password'";
  // perform the query
  $query = mysql_query($sql);
  // check if the request returned 1 or 0 rows from the database
  if (mysql_num_rows($query)) {
    // 1 or more rows matched our request, which means the username and password combo are valid
  } else {
    // 0 rows matched our request. Login is not valid then.
  }
  ..
?>

Step 6 – All done, final pointer

This is a very basic type of php login script. There are a lot of other things to have in mind when making database queries, that I have not convert in the above examples:

• Perhaps the login table should hold more information, like a user id for easier validation later on the the script.
• Double checking and validating user input to prevent SQL Injection. This could be done be PHP Magic Quotes or by manually applying addslashes() and stripslashs().
• ..

But then again. Very simple demonstration.

So. How do one find extra performance, without buying new expensive hardware. One way could to experiment with caching options. The eAccelerator software is highly recommend for TYPO3 setup, so I did some testing with this and there was quite a bit of performance hidden here.

The installation was quite simple on my setup. I followed the installlation guide which was more or less a set of commands. phpize, configure, make, make install and the copy the .ini file to the PHP ini directory. Reload apache/php and that’s it. All done.

If the website is running TYPO3 and there still are performance issues, then you should check that the configuration of the site and server, uses the internal caching mechanism found in TYPO3. If this is not disable (from an extension or something else) there will most likely be major performance boost waiting here. This is the typical bottle neck in TYPO3 and it should be considered carefully, as this optimized the performance of TYPO3.

An easy way of controlling this, is to setup the javascript and css files from the template configuration. There are some different ways of doing this and I will demonstrate two of them here.

The template configuration examples should be self-explainable, so I will not comment them futher:

Javascript option 1 – headerData:

page.headerData.230 = TEXT
page.headerData.230.value = <script type="text/javascript" src="/fileadmin/myjavascript.js"></script>

Javascript option 2 – includeJS:

page.includeJS {
  file1 = fileadmin/myjavascript.js
  file1.type = application/x-javascript
  file2 = fileadmin/myjavascript2.js
}

CSS option 1 – headerData

page.headerData.231 = TEXT
page.headerData.231.value = <link rel="stylesheet" type="text/css" href="/fileadmin/stylesheet.css" />

CSS option 2 – includeCSS

page.includeCSS {
  file1 = fileadmin/stylesheet.css
}

CSS option 3 – page.stylesheet

page.stylesheet = fileadmin/stylesheet.css

Hope this tip can be helpful. Please notice that the CSS option 3 only enables you to set 1 stylesheet, where the other examples support multiple files.

The problem with this kind of assignment is, that I did not know what to search for on Google. Hadn’t though of it, as being a point in a polygon shaped area. I tried searching with words like ‘coordinate inside area’, ‘longitude latititude in area” and things like that, without much luck. Then a guy on IRC suggested a search for “point in polygon” and wuhu. Bingo.

I then found this page: point in polygon, where the author has posted a PHP class that does all the hard work for you. Brilliant.

I have a database table in MySQL containing x and y coordinates for a number of different points. In another table a have coordinates for a number of polygon shapes and I then want to check which point are located inside which polygons.

This is actually pretty simple to do.

Lets say we have a point (2,2) and want to check if this is inside a polygon with these coordinates (1,1), (3,6), (4,0):

  //include the point in the polygon classs
  include_once("point_in_polygon.php");

  $point = "2 2";
  $polygon = array("1 1", "3 6", "4 0")

  $pointLocation = new pointLocation();
  print "Point in " . $pointLocation->pointInPolygon($point, $polygon) . " the polygon";

Run the code and it will print:

$ php polygon.php
Point is inside the polygon

So how does this work? All you have to do, is to “draw” a straight line from the point and all the way through the shape and then count have many lines you cross. If you cross an even or zero number of lines the point is outside the shape and if the number the uneven you are inside.

Got it? Well, there’s some quick drawings from Gimp to illustrate it:

The example from the above code:

Point is inside because of a uneven number of line crosses:

Point is outside because of a even or zero number of line crosses:

There you go. This is one way to check if a point is inside a polygon shaped area.

When displaying the images in the frontend, I would scale the images to a size specified in the plugin configuration. I was using the following code:

...
$imageConf['file'] = $row[image];
$imageConf['file.']['maxH'] = $this->conf[largeMaxH];
$imageConf['file.']['maxW'] = $this->conf[largeMaxW];
$thumbnailImage = $this->cObj->IMG_RESOURCE($imageConf);
...

The $row[image] would contain the image file to be displayed and the maxH and maxW is being set to the image sizes from the plugin configuration. When loading the page every image would be resized to the correct size, but when a single gallery reached about 100+ images this process started to perform very poorly. Actually is was slow – very slow.

What to do?!

Well, I figured out that I would try to make a function, where the image only would get resized once and then reused. I created an extra database field (a blob-field would be preferred) for storing the cached information.

Generating the images is still done with the above example, but now the filename for the resized image is being saved in the database. I choose a setup using a multidimensional array with keys representing the image height and width like this:

...
$imageConf['file'] = $row[image];
$imageConf['file.']['maxH'] = $this->conf[largeMaxH];
$imageConf['file.']['maxW'] = $this->conf[largeMaxW];
$thumbnailImage = $this->cObj->IMG_RESOURCE($imageConf);

$cached[$this->conf[thumbnailMaxW]][$this->conf[thumbnailMaxH]] = $thumbnailImage;
...

Until now there is no change in the performance as every image still is being resized on the fly. The last piece of the puzzle is to check whether or not there exists a cached image. To do this I am using two check:

$thumbnailImage = $cached[$this->conf[largeMaxW]][$this->conf[largeMaxH]];
if ($thumbnailImage == "" || ! file_exists($thumbnailImage)) {
  $imageConf['file'] = $row[image];
  $imageConf['file.']['maxH'] = $this->conf[largeMaxH];
  $imageConf['file.']['maxW'] = $this->conf[largeMaxW];
  $thumbnailImage = $this->cObj->IMG_RESOURCE($imageConf);

  $cached[$this->conf[thumbnailMaxW]][$this->conf[thumbnailMaxH]] = $thumbnailImage;

  $updateCache = 1;
}

First check is to see if the database contains information about a cached image and the second check is to see if the cache image still exists within the typo3temp directory. If one or both of these check fails, then a new cached image will be generated and the $updateCache is set to 1 indicating that the database should be updated later on in the script.

It’s a while since I made the actual code and I cannot remember the exact render times, but there was a massive performance boost in my extension.

The most common form element are input, checkbox, radio buttons, textarea and dropdown boxes and I will try to cover them all, even though the code might be the same or very much alike.

Input boxes

Fetching content is done with:

// fetching the value
$("#inputbox").val();

Try it:
Make a popup with the contents

Setting new content is done with:

// setting a new value
$("#inputbox").val("We have now changed the text");

Try it:
Change the content to “We have now changed the text”

Check boxes / Radio boxes

Both check boxes and radio boxes works the same way.

Checking all fields:

// loop through each checkfield
$("#elementID input:checkbox").each( function() {
  // set checked=checked
  $(this).attr("checked", "checked");
});

Try it:
Check all boxes

// loop through each checkfield
$("#elementID input:checkbox").each( function() {
  // if field is checked, then uncheck or the other way around
  this.checked ? $(this).attr("checked", "") : $(this).attr("checked", "checked");
});

Toggle boxes

Outputting the checked status for each field:

// temporary variable for output purposes
var status = "";
// loop through each fieldfield
$("#elementID input:checkbox").each( function() {
  // save field value and checkstate in variable
  status += $(this).val() + " is " + this.checked + ",  ";
});
// make a popup box with the result
alert(status);

Try it:
Output checkbox status

Textarea

Textarea sample text
Fetching content is done with:

// fetching the value
$("#textarea").html();

Try it:
Make a popup with the contents

Setting new content is done with:

// setting a new value
$("#textarea").html("We have now changed the text");

Try it:
Change the content to “We have now changed the text”

Dropdown boxes

Fetch the value if the dropdown box:

$("#selectbox").val()

Try it:
Output which option is selected

Selecting option 2 in the downdown box:

// loop through options
$("#selectbox option").each( function() {
  // if the value is equal to 'select2', then select it
  if ($(this).val() == "select2") {
    $(this).attr("selected", "selected");
  }
});

Try it:
Select option 2

Selecting option 3 in the downdown box:

// loop through options
$("#selectbox option").each( function() {
  // if the value is equal to 'select3', then select it
  if ($(this).val() == "select3") {
    $(this).attr("selected", "selected");
  }
});

Try it:
Select option 3

There you go. A small demonstration of how to access form elements. There above examples is just one way of doing it. There are other ways as well.

The two I will cover is:
1. Manually adding language page
2. Integrated TYPO3 language support

1. Manually adding language page

This I will only touch briefly, as the solution should be obvious when the layout is presented. It should be very easy. Just create a tree like this and manually do the linking:

That’s it.

2. Integrated TYPO3 language support

This is quite different compared to the first setup. We will be using the built-in language support in TYPO3, based on a tree structure like this:

First step is to create the languages and this is done by selecting list, clicking your site in the tree structure and then adding a website language:

Then create the number of languages needed for the site.

Second step is the template configuration. Before doing this, we have to check which id numbers the languages has been given. This is done by selecting list on your site (just as when we created the languages) and the hover your mouse above each language:

When this is done, then go to the template setup field and enter the following:

config.sys_language_overlay = hideNonTranslated
config.linkVars = L

[globalVar = GP:L=en]
  config.sys_language_uid=2
  config.language = en
[global]

[globalVar = GP:L=dk]
  config.sys_language_uid=1
  config.language = dk
[global]

What this does is:
config.sys_language_overlay = hideNonTranslated will hide a page or content element, if is does not have content for the specific site. Remove or outcomment this, if you want all elements displayed.
config.linkVars = L is the parameter used in the url for selecting language. Ie http://domain.tld/index.php?id=2?L=dk
[globalVar = GP:L=dk] a section like this, configures the language based on the parameter passed by the linkVars. Here it will trigger on L=dk
config.sys_language_uid=1 this will join the dk-parameter with the language id 1, which we found earlier.
config.language = dk this will set the page language for dk

Third and final step is to configure a page to use the new languages. This is done by selecting list, clicking the page and adding an Alternative Page Language


Then select which language you want to create a page for, type in the page title and save it.

We are now ready for translating the page. When editing an element on the newly configured page, there is now a new option in the top of the page. Select the new language and type in the translation.

That’s it. TYPO3 will now display the Danish content when visiting the page with the L=dk parameter in the url.