survos/fw-bundle

Bundle with utilities for creating a Symfony-based mobile app with framework7

1.0 2025-03-08 18:32 UTC

Requires

• php: ^8.3
• knplabs/knp-menu-bundle: ^3.2
• survos/core-bundle: ^1.5
• symfony/config: ^6.4 || ^7.1
• symfony/dependency-injection: ^6.4 || ^7.1
• symfony/event-dispatcher: ^6.4 || ^7.1
• symfony/http-kernel: ^6.4 || ^7.1
• symfony/options-resolver: ^7.2
• symfony/ux-twig-component: ^2.22
• twig/twig: ^3.4

Requires (Dev)

• phpstan/phpstan: ^2.0
• symfony/browser-kit: ^6.4 || ^7.1
• symfony/framework-bundle: ^6.4 || ^7.1
• symfony/phpunit-bridge: ^6.4 || ^7.1
• symfony/security-bundle: ^6.4 || ^7.1
• symfony/twig-bundle: ^6.4 || ^7.1
• symfony/var-dumper: ^6.4 || ^7.1

MIT

• symfony-ux

README

A collection of tools to help create Symfony-based mobile apps.

• framework7
• pwa-bundle
• Dexie

Work in Progress. See survos-sites/fw-bundle-demo to see this in action.

Notes

These need to be cleaned up, but they're useful to me during development.

Twig

The application can be run as an SPA. The initial page must extend the base page

{% extends "@SurvosFw/base.html.twig" %}

create app_controller and extend it from

If using the OnsenUI documentation, replace

onclick="loadPage('whatever')"

with

  {{ stimulus_action(_app_sc, 'loadPage', 'click', {
      route: 'whatever'
  }) }}

_app_sc should be set to 'app', someday this may change (hotwired/stimulus#641)

Tabs and Pages

Two fundamental concepts: the tabs at the bottom of the screen, and everything else.

All pages, though, are pre-loaded as twig templates in OnsenController.

To create the tabs, the following, where id is the name of the tab template

#[AsEventListener(event: KnpMenuEvent::MOBILE_TAB_MENU)]
public function tabMenu(KnpMenuEvent $event): void
{
    $menu = $event->getMenu();
        $this->add($menu, id: 'projects', label: 'projects', icon: 'fa-list');
        $this->add($menu, id: 'tours', label: 'tours', icon: 'fa-list', badge: 'x');
        $this->add($menu, id: 'share', label: 'share', icon: 'fa-qrcode');

Events

Old way: When a tab is clicked, a 'prechange' event is dispatched, with event.tabItem as the tab that's about to become active. We intercept

Dynamic Data

To load dynamic data into a page, you must first put the data into dixie. The basic way is to set up "stores" and define the indexable fields, eg..

survos_js_twig:
  debug: true
  db: omar-db
  version: 7
  stores:
    -
      name: items
      schema: "++id,code,title,projectCode"
      url: /api/items
    -
      name: projects
      schema: "code"
      url: /api/projects

Requirement

bin/console importmap:require stimulus-attributes bin/console importmap:require fos-routing composer req friendsofsymfony/jsrouting-bundle