Desenvolvemento en PHP con Symfony: Diferenzas entre revisións

De Wiki do Ciclo ASIR do IES de Rodeira
Saltar á navegación Saltar á procura
Liña 64: Liña 64:


===Stimulus & Symfony UX===
===Stimulus & Symfony UX===

[https://stimulus.hotwired.dev/handbook/introduction Stimulus] é un framework sinxelo para dotar de interactividade as páxinas.



assets/controllers
assets/controllers

Revisión como estaba o 21 de outubro de 2022 ás 14:41

Esta guía se basa en Symfony 4.4[notas 1]

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.


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


Microservizos e APIs

Notas

  1. Esta guía utilizará Symfony 4.4 porque a versión soportada na actual Debian Stable bullseye.