If this tutorial is helpful to you, you can donate some money to the tutorial author via Paypal.

After we added the events, it is time to add a first ViewHelper. Our locations currently has only a name. This is absolutely not enough for a search on GoogleMaps. So the first thing we have to do is extending the model and the add function for the locations.

Extending the location model

To have a complete address in our location model, we add the properties address, zip and city to our model. After doing this we have to generate the getter and setter methods.
Layh.Events/Domain/Model/Location.php 

/**
 * @var string
 */
protected $address;
 
/**
 * @var string
 */
protected $zip;
 
/**
 * @var string
 */
protected $city;
 
/**
 * @param string $address
 */
public function setAddress($address) {
    $this->address = $address;
}
 
/**
 * @return string
 */
public function getAddress() {
    return $this->address;
}
 
/**
 * @param string
 */
public function setCity($city) {
    $this->city = $city;
}
 
/**
 * @return string
 */
public function getCity() {
    return $this->city;
}
 
/**
 * @param string $zip
 */
public function setZip($zip) {
    $this->zip = $zip;
}
 
/**
 * @return string
 */
public function getZip() {
    return $this->zip;
}

Extending the form to add locations

After we finished extending the model we have to extend the form, so that we can add the new informations.
Layh.Events/Resources/Private/Templates/Location/AddLocation.html 

<f:form action="save" controller="Location" package="Events" name="location" object="{location}">
    <label>Title:</label><f:form.textbox property="name" /><br />
    <label>Adress:</label><f:form.textarea rows="2" cols="30" property="address" /><br />
    <label>Zip:</label><f:form.textbox property="zip" /><br />
    <label>City:</label><f:form.textbox property="city" /><br />
    <f:form.submit value="Speichern" />
</f:form>

Detail view for locations

After we added the required fields to our form, we should be able to save the new data. Until now we don't display this data anywhere so we create a detail view for the locations and we also have to add the new action to our controller.

Additional we add a link to the detail view to our list of locations.
Layh.Events/Classes/Controller/LocationController 

/**
 * show detail view for a location
 *
 * @param \Layh\Events\Domain\Model\Location $location
 */
public function showAction(\Layh\Events\Domain\Model\Location $location) {
    $this->view->assign('location', $location);
}

Layh.Events/Resources/Private/Templates/Location/ListLocation.html  

<f:layout name="Index.html" />
 
<f:section name="content">
    <h1>FLOW3 Location List</h1>
 
    <ul>
        <f:for each="{locations}" as="loc">
            <li>
                <f:link.action action="show" controller="Location" arguments="{location: loc}">
                    {loc.name}
                </f:link.action>
            </li>
        </f:for>
    </ul>
 
</f:section>

Layh.Events/Resources/Private/Templates/Location/ShowLocation.html 

<f:layout name="Index.html" />
 
<f:section name="content">
    <h1>FLOW3 Show Location</h1>
 
    <div id="content">
        {location.name}<br />
        {location.address}<br />
        {location.zip} {location.city}<br />
    </div>
 
</f:section>

The ViewHelper

After we finished this we should start implementing the ViewHelper. We want to generate a HTML-Tag, so we extend the AbstractTagBasedViewHelper for our own ViewHelper.

For a better explanation I highlighted some lines of the source code below.

Line 22: Here we define the tagName. This is the HTML-Tag we want to use in our ViewHelper

Line 25,26: The initializeArguments function is required to register some arguments we want to use. We don't have to register the arguments like address or zip here, we only have to register the arguments that are used directly in the tag. For example I registered the argument target, so that we can set the target to open the link in a new window for example.

Line 42: We add the link we want to have in the tag.

Line 43: The content inside the tag, the link name in this case can be set in the template by wrapping the new ViewHelper around the link name. In this case the link name in the template is a children of our ViewHelper and we can render this part by calling the function renderChildren.

Line 45: We have all information that we require for our link. Here we tell the ViewHelper to render the tag and return the rendered result.
Layh.Events/Classes/ViewHelpers/GoogleMapsViewHelper.php 

<?php
namespace Layh\Events\ViewHelpers;
 
use TYPO3\FLOW3\Annotations as FLOW3;
 
/**
* GoogleMapsViewHelper
*
* = Examples =
*
* <ev:googleMaps target="_blank" address="xy" zip="xy" city="xy">LinkName</ev:googleMaps>
*
* @FLOW3\Scope("prototype")
*/
class GoogleMapsViewHelper extends \TYPO3\Fluid\Core\ViewHelper\AbstractTagBasedViewHelper {
 
    /**
     * @var string
     */
    protected $tagName = 'a';
 
    public function initializeArguments() {
        $this->registerUniversalTagAttributes();
        $this->registerTagAttribute('target', 'string', 'Specifies where to open the linked document');
    }
 
    /**
     * ViewHelper that generates a search for google maps
     *
     * @param string $address
     * @param string $zip
     * @param string $city
     * @return string
     */
    public function render($address, $zip, $city) {
 
        $searchstring = $address . ',' . $zip . ' ' .$city;
        $googleMapsLink = 'http://maps.google.de/?q='.$searchstring;
 
        $this->tag->addAttribute('href', $googleMapsLink);
        $this->tag->setContent($this->renderChildren());
 
        return $this->tag->render();
    }
 
}

Using the ViewHelper

Now it is time to check if our ViewHelper works and we use the ViewHelper in our showLocation template now.

First thing we have to do is to tell Fluid where it has to look for the new ViewHelper. We add the definition of the namespace in the very first line of our template. We define the namespace, in this case it is called ev, and tell Fluid where the ViewHelpers are located.

In line 12-14 we use the ViewHelper. We call the ViewHelper with the following syntax: namespace:classname. In this case the namespace is ev and the class name is GoogleMapsViewHelper. The ViewHelper-part of the class name gets stripped so we call our ViewHelper with ev:googleMaps.

Then we add the arguments our ViewHelper requires. The first on is the target that we have registered, because it is added directly to the tag. Than we have the address, the zip and the city that we have defined in our model earlier.

The link text, between the opening and closing tags, is the part that is returned by Fluid with the function $this->renderChildren().

If we call the page now, we should have a link that is pointing to Google Maps and that has our address as parameter.
Layh.Events/Resources/Private/Templates/Location/ShowLocation.html 

{namespace ev=Layh\Events\ViewHelpers}
 
<f:layout name="Index.html" />
 
<f:section name="content">
    <h1>FLOW3 Show Location</h1>
 
    <div id="content">
        {location.name}<br />
        {location.address}<br />
        {location.zip} {location.city}<br />
        <ev:googleMaps target="_blank" address="{location.address}" zip="{location.zip}" city="{location.city}">
            Link to Google Maps
        </ev:googleMaps>
    </div>
 
</f:section>

 

 


Was this tutorial helpful? So, you can donate some money to the tutorial author via Paypal.