Desenvolvemento en PHP con Symfony

Esta guía se basa en Symfony 4.4

Instalación e Configuración

Requerimentos:

• apt install php-symfony
• apt install composer

Inicio da Aplicación

composer create-project symfony/website-skeleton:"^4.4" my_project_directory

composer create-project symfony/skeleton:"^4.4" my_project_directory

• annotations

composer require sensio/framework-extra-bundle composer require symfony/webpack-encore-bundle yarn install

After installing Encore, your app already has a few files, organized into an assets/ directory:

assets/app.js

assets/bootstrap.js

assets/controllers.json

assets/styles/app.css

assets/controllers/hello_controller.js

With Encore, think of your app.js file like a standalone JavaScript application: it will require all of the dependencies it needs (e.g. jQuery or React), including any CSS. Your app.js file is already doing this with a JavaScript import statement:

Construye el CSS y JS con webpack yarn watch || yarn dev || yarn build

Engadimos jquery yarn add jquery --dev

"Recompilamos" css y js yarn dev

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';

// start the Stimulus application
import './bootstrap';


import $ from 'jquery'

// import funcion_exportada from "./nombrefichero"

$(document).ready(function() {
        alert("Start !");
});

Stimulus & Symfony UX

Stimulus é un framework sinxelo para dotar de interactividade as páxinas. Baséase nos seguintes conceptos clave:

• Controllers

O "Controller" é o código Javascript encargado de levar a cabo a acción

• Actions

O "Action" é a acción a levar a cabo (unha funcionalidade do Controller)

• Targets

Un "Target" é un elemento HTML sobre o que pode actuar o "Controller"

• Values

Un "Value" é un dato que podemos ler, modificar ou observar mediante código no controller.

Todos estes obxectos se configurarán mediante atributos nas etiquetas HTML:

<div data-controller="clipboard">
  PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>
  <button data-action="click->clipboard#copy">Copy to Clipboard</button>
</div>

Neste exemplo, o Controller será "clipboard", que será unha clase que hereda de Controller. Esta clase implementará as funcinalidades que se requerirán como "Actions". As action indicarán mediante un nome o método do Controller a utilizar, separando mediante # do nome do controller. As 'Action' teñen o formato evento->controlador#método

Os "Target" se crean mediante o atributo data-controller-target="nome", e se recuperarán no Controller mediante this.nomeTarget. Os nomes de todos os targets deben estar nun array estático targets

Cando se inicializa o controlador, se executará o método intialize(), mentres que cada vez que o Controller se "conecta" co documento, se invocará o connect() do controller. Cando o Controller se desconecte da páxina se invocará ao método disconnect()

O aspecto mínimo dun Controller stimulus é o seguinte:

// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
}

Un controlador "completo" para o código anterior sería:

// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
   static targets = [ 'source' ]

   copy() {
       const info = this.sourceTarget.value;
       console.log("Copiando ao clipboard");
       console.log("Os datos son ${info}!");
   }
}

O controlasdor a executar se determina a partir do nome do ficheiro. Neste caso si o controller vai a corresponder ao HTML stimulus indicado anteriormente, debería chamarse clipboard_controller.js

assets/controllers

Method Invoked by Stimulus… initialize() Once, when the controller is first instantiated connect() Anytime the controller is connected to the DOM disconnect() Anytime the controller is disconnected from the DOM

<div {{ stimulus_controller('say-hello') }}>
    <input type="text" {{ stimulus_target('say-hello', 'name') }}>

    <button {{ stimulus_action('say-hello', 'greet') }}>
        Greet
    </button>

    <div {{ stimulus_target('say-hello', 'output') }}></div>
</div>

<div data-controller="slideshow">
  <button data-action="slideshow#previous"> ← </button>
  <button data-action="slideshow#next"> → </button>

  <div data-slideshow-target="slide">🐵</div>
  <div data-slideshow-target="slide">🙈</div>
  <div data-slideshow-target="slide">🙉</div>
  <div data-slideshow-target="slide">🙊</div>
</div>

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "slide" ]

  initialize() {
    this.index = 0
    this.showCurrentSlide()
  }

  next() {
    this.index++
    this.showCurrentSlide()
  }

  previous() {
    this.index--
    this.showCurrentSlide()
  }

  showCurrentSlide() {
    this.slideTargets.forEach((element, index) => {
      element.hidden = index != this.index
    })
  }
}



export default class extends Controller {
    static targets = ['name', 'output']

  connect() {
    console.log("Hello, Stimulus!", this.element)
  }

    greet() {
	this.outputTarget.textContent = `Hello ${this.nameTarget.value}!`
    }
}

Programando la aplicación

bin/console make:controller MainController