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

Since I do some kind of workshop at the office currently how to get started with FLOW3, I thought it is a good idea to write done all the stuff and do a series of tutorials how to get started with FLOW3 based on the current trunk. Preconditions are a running Welcome Package. First part of the tutorial is how to kickstart a package and how to set up the file structure and the required files for a basic “Hello World” thing.

Create the file structure

Create the following file structure and files. Explanation to the files is coming below:

Start in folder Packages:

  • Applications
    • Events
      • Classes
        • Controller
          • EventController.php
        • Package.php
      • Configuration
        • Routes.yaml
      • Meta
        • Package.xml
      • Resources
        • Private
          • Layouts
            • Index.html
          • Templates
            • Event
              • Index.html
        • Public

EventController.php

Setting the namespace is the first thing you have to do in every class. This has to be done in every php file in your complete project. Next step, add a default action, in this case it is the indexAction.

Layh.Events/Classes/Controller/EventController.php

<?php
namespace Layh\Events\Controller;
 
/*
 * @FLOW3\Scope("singleton")
 */
class EventController extends \TYPO3\FLOW3\MVC\Controller\ActionController {
 
    /**
     * @return void
    */
    public function indexAction() {
    }
 
}

Package.php

This file is required by FLOW3. It has to be present in every package. Currently in this case it is empty, but as far as I know it can be used for bootstrap stuff.

Layh.Events/Classes/Package.php 

namespace Layh\Events;
 
use \TYPO3\FLOW3\Package\Package as BasePackage;
use TYPO3\FLOW3\Annotations as FLOW3;
 
/**
 * Package base class of the Layh.Events package.
 *
 * @FLOW3\Scope("singleton")
 */
class Package extends BasePackage {
 
}

Routes.yaml

Define a route for the package. In this case, the uriPattern is empty so every request should match. We also define a default controller/action in the Routes.yaml

Layh.Events/Configuration/Routes.yaml 

-
    name: 'Homepage'
    uriPattern: ''
    defaults:
      @package: Events
      @controller: Event
      @format: 'html'
      @action: 'index'

Package.xml

If you come from TYPO3, what I think is highly possible, this file is like ext_emconf.php, where you can that the package name and the version number.
 

Layh.Events/Meta/Package.xml 

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<package xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://typo3.org/ns/2008/flow3/package" version="1.0">
    <key>FLOW3_Events</key>
    <title>FLOW3 Events Package</title>
    <description>Demo application</description>
    <version>0.0.1</version>
</package>

Layouts/Index.html

Define your layout here. This file will be wrapped around each of you templates. Define your body-tag and head-tag here and tell FLOW3 to render the content inside.<f:base> is used to set the base URL.
 

Layh.Events/Resources/Private/Layouts/Index.html 

<!DOCTYPE HTML>
<html>
<head>
<title>FLOW3 - Tutorial</title>
 
<f:base/>
 
</head>
<body>
 
<section class="content">
    <f:render section="content"/>
</section>
 
</body>
</html>

Templates/Event/Index.html

The template for the default action. The naming of the path and file has to match the controller and the action. So the controller name is event, means that the folder has to be named "Event".The action name is index, so the template file has to be called "Index.html".If we add another action later, for example listAction, we have to create a file List.html for this action then.

Layh.Events/Resources/Private/Templates/Event/Index.html 

<f:layout name="Index.html" />
 
<f:section name="content">
  <!-- all content inside the section "content" will be displayed now -->
  Hello  event package
</f:section>

Final step

The package is finished now. There are to things left to do before we can start.1. Tell FLOW3 that there exists a package with the name Events and activate the package. (/path/to/webroot/Configuration/PackageStates.php)2. Tell FLOW3 where to find the package and for that we have to edit the Routes.yaml (/path/to/webroot/Configuration/Routes.yaml)

/path/to/webroot/Configuration/PackageStates.php 

// add the following to the existing array in PackageStates.php
 
'Events' => array ('state' => 'active'),

/path/to/webroot/Configurations/Routes.yaml 

-
    name: 'Events'
    uriPattern: '<EventsSubroutes>'
    defaults:
        @format: 'html'
    subRoutes:
      EventsSubroutes:
        package: Events

Step 1 - finished

If you call your URL now, you should see the content from the file Index.html in your Templates folder.


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