App bundle

WARNING

This article is outdated and may contain information that are not in use anymore

Introduction

What is the AppBundle?

The AppBundle provides a handful of useful functions and workflows, helping you to handle the input and output of any model. The AppBundle does not depend on a concrete model. It handles a model in a very abstract manner.

In a normal web application, we expect to have something like an MVC architecture. We would define our model, controller and our view. If we do it the Symfony way, we also define a form type and add the routing for our controller. The AppBundle provides controller functionality and views, leaving only model/form definition and routing.

The big magic is all in the route. Enhavo (and Sylius) use the routes default section for configuration parameters, allowing you to configure the controllers behaviour and views without having to write them yourself.

This bundle provides you with standard ways of handling your models in a CRUD fashion, allowing you to easily implement your custom models in a CRUD fashion and with a consistent look and feel. And if you have any requirements which the bundle does not provide, we still have a good API to easily add these yourself.

Read more

• Data handling in enhavo

Installation

$ composer require enhavo/app-bundle

Add packages

Add following package.json to your project root directory.

{
  "scripts": {
    "routes:dump": "bin/console fos:js-routing:dump --format=json --target=public/js/fos_js_routes.json"
  },
  "dependencies": {
    "@enhavo/app": "^0.8.0",
  }
}

Add webpack config

Add following webpack.config.js to your project root directory.

const EnhavoEncore = require('@enhavo/core/EnhavoEncore');
const AppPackage = require('@enhavo/app/Encore/AppPackage');
const AppThemePackage = require('@enhavo/app/Encore/AppThemePackage');
const FormPackage = require('@enhavo/form/Encore/FormPackage');

EnhavoEncore.add(
  'enhavo',
  [new AppPackage(), new FormPackage()],
  Encore => {},
  config => {}
);

EnhavoEncore.add(
  'theme',
  [new AppThemePackage()],
  Encore => {
    Encore.addEntry('base', './assets/theme/base.js');
  },
  config => {}
);

module.exports = EnhavoEncore.export();

Update your config/packages/webpack_encore.yaml

webpack_encore:
    output_path: '%kernel.project_dir%/public/build/enhavo'
    builds:
        enhavo: '%kernel.project_dir%/public/build/enhavo'
        theme: '%kernel.project_dir%/public/build/theme'

Update your config/packages/assets.yaml

framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/theme/manifest.json'

This is optional, but it helps to test your mails using within other packages. Just update your config/packages/dev/swiftmailer.yaml

swiftmailer:
    delivery_addresses: ['%env(resolve:MAILER_DELIVERY_ADDRESS)%']

Add typescript config

Add following tsconfig.json to your project root directory.

{
  "compilerOptions": {
    "lib": [ "es2015", "dom" ],
    "module": "amd",
    "target": "es5",
    "allowJs": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "experimentalDecorators": true
  },
  "include": [
    "./assets/**/*"
  ]
}

Start application

Open your application under the /admin url.

Menu

The main menu in the admin backend is configurable via the parameter enhavo_admin.menu in the configuration file app/config/enhavo.yml. The logout button will be added automatically.

enhavo_admin:
    menu:
        user:
            type: base
            label: label.user
            route: enhavo_user_user_index
            role: ROLE_ESPERANTO_USER_USER_INDEX
        group:
            type: base
            label: label.group
            route: enhavo_user_group_index
            role: ROLE_ESPERANTO_USER_GROUP_INDEX
        my_resource:
            type: base
            label: My Resource
            route: acme_my_resource_index
            role: ROLE_MY_RESOURCE_INDEX

Hook

There is an event called enhavo_app.menu that you can hook into to modify the menu before it will be rendered.

Note that by default there already is a listener hooked to this event, which is responsible for the logout button, permissions and styles. If you want to make sure that your listener is called after this, you need your priority to be below 0.

namespace Acme\FooBundle\EventListener;

use Enhavo\Bundle\AppBundle\Menu\MenuEvent;

class MenuEventListener
{
    public function onMenu(MenuEvent $event)
    {
        $menu = $event->getMenu();
        foreach($menu->getChildren() as $child) {
            $menu->setAttribute('class', 'menu');
        }
    }
}

acme_foo.menu_event_listener:
    class: Acme\FooBundle\EventListener\MenuEventListener
    tags:
      - { name: kernel.event_listener, event: enhavo_app.menu, method: onMenu, priority: -1 }

Routing

$ composer require enhavo/app-bundle

Add packages

Add following package.json to your project root directory.

{
  "scripts": {
    "routes:dump": "bin/console fos:js-routing:dump --format=json --target=public/js/fos_js_routes.json"
  },
  "dependencies": {
    "@enhavo/app": "^0.8.0",
  }
}

Add webpack config

Add following webpack.config.js to your project root directory.

const EnhavoEncore = require('@enhavo/core/EnhavoEncore');
const AppPackage = require('@enhavo/app/Encore/AppPackage');
const AppThemePackage = require('@enhavo/app/Encore/AppThemePackage');
const FormPackage = require('@enhavo/form/Encore/FormPackage');

EnhavoEncore.add(
  'enhavo',
  [new AppPackage(), new FormPackage()],
  Encore => {},
  config => {}
);

EnhavoEncore.add(
  'theme',
  [new AppThemePackage()],
  Encore => {
    Encore.addEntry('base', './assets/theme/base.js');
  },
  config => {}
);

module.exports = EnhavoEncore.export();

Update your config/packages/webpack_encore.yaml

webpack_encore:
    output_path: '%kernel.project_dir%/public/build/enhavo'
    builds:
        enhavo: '%kernel.project_dir%/public/build/enhavo'
        theme: '%kernel.project_dir%/public/build/theme'

Update your config/packages/assets.yaml

framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/theme/manifest.json'

This is optional, but it helps to test your mails using within other packages. Just update your config/packages/dev/swiftmailer.yaml

swiftmailer:
    delivery_addresses: ['%env(resolve:MAILER_DELIVERY_ADDRESS)%']

Add typescript config

Add following tsconfig.json to your project root directory.

{
  "compilerOptions": {
    "lib": [ "es2015", "dom" ],
    "module": "amd",
    "target": "es5",
    "allowJs": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "experimentalDecorators": true
  },
  "include": [
    "./assets/**/*"
  ]
}

Start application

Open your application under the /admin url.

Route configuration

Read more about the route configurations here

Template

tbc.