11 Componente basato su classe

Pubblicato il di

creiamo un nuovo componente da CLI secondo la documentazione laravel

php artisan make:component Alert

viene creata una classe nel file app/View/Components/alert.php che contiene la funzione render() che lancia la nuova vista ubicata in resources/views/components/alert.blade.php

public function render() {
 return view('components.alert');
}

potremmo anche restituire dell’html anzichè la vista, ma ragioniamo sul file separato, vediamo la view alert.blade.php dove andiamo ad applicare al <div> le classi bootstrap alert, una delle quali dinamicamente e facciamo uscire un messaggio 

<div class="alert alert-{{$info}}">
  {{$message}}
</div>

includere il componente

adesso andiamo ad includere il componente nella nostra pagina (per esempio la home), per includerlo, dobbiamo utilizzare questa sintassi:

<x-alert/>

Quindi un tag HTML <x- /> dopo x- seguirà il nome che abbiamo dato alla classe componente. adesso riceveremo un messaggio di errore che la variabile $info non è definita, per far ciò passiamo il parametro $info come attributo HTML

<x-alert :info="faghy"/>

In questo modo otterremo un errore di costante faghy non è conosciuto, per istruire laravel che si tratta di una stringa dobbiamo avvolgerla anche con i singoli apici

<x-alert :info="'faghy'"/>

adesso abbiamo usato l’attributo info che sarà mappato al corrispondente $info della view alert.blade.php, ma prima dobbiamo dichiararlo insieme anche a $message come proprietà nella classe Alert.php

class Alert extends Component
{
 public $info;
 public $message;

Per finire dobbiamo passare al costruttore le variabili

public function __construct($info='', $message='')
{
 $this->info = $info;
 $this->message = $message;
}

Dobbiamo tipizzare i parametri oppure assegnare dei valori di default

public function __construct($info='faghy', $message='ciao faghy')
{
 $this->info = $info;
 $this->message = $message;
}

aggiungiamo anche message come attributo

<x-alert :info="'Faghy'" :message="'Ciao Faghy'"/>

Passare parametri in url

Per esempio ipotizziamo di voler passare un parametro name via GET nella URL

http://localhost:8000?name=Fag

Per prima cosa aggiorniamo la rotta web.php, ne approfittiamo per introdurre una novità delle nuove versioni di laravel che se la rotta da restituire è solo una view possiamo scrivere direttamente solo Route::view()

Route::view('/','welcome');

adesso aggiungiamo il parametro name nella view, passandolo come terzo parametro

Route::view('/','welcome',['name' => input('name')]);

nella view welcome invece che mettere un valore fisso al parametro name, richiamiamo la variabile $name

<x-alert :name="$name" :info="'Faghy'" :message="'Hi Faghy'"/>

adesso aggiungiamo alla classe alert e al suo costruttore il parametro name

class Alert extends Component {
 public $info;
 public $message;
 public $name;

 public function __construct($name='',$info='faghy', $message='ciao faghy') {
  $this->info = $info;
  $this->message = $message;
  $this->name = $name;
}

infine nel file alert.blade aggiungiamo la restituzione di $name

<div class="alert alert-{{$info}}">
  {{$message}} {{$name}}
</div>

adesso siamo pronti ad aprire la nostra URL con il parametro passato.

Se ricevessimo un errore potrebbe di Call to undefined function input() dobbiamo installare il package degli helpers oppure utilizziamo la Facades Request, aggiungiamo la dipendenza

use Illuminate\Support\Facades\Request;

infine utilizziamo Request::input() per il parametro name

Route::view('/','welcome',['name' => Request::input('name')]);

Possiamo includere bootstrap e avere la possibilità di dare al valore info le classi dei contenitori bootstrap, come info, danger….

Aggiungere stile con $attributes

Se per esempio volessimo passare uno stile nella nostra views tipo 

<x-alert style="color:red;" :name="$name" :info="'danger'" :message="'Hi Faghy'"/>

ispezionando l’HTML ci accorgeremmo che lo stile non viene passato. Per visualizzarlo dovremmo ricorrere ad una variabile globale di laravel che si chiama $attributes che cattura ogni attributo. Aggiungiamola nel template alert.blade

<div {{$attributes}} class="alert alert-{{$info}}">
 {{$message}} {{$name}}
</div>

a questo punto lo stile sarà caricato perfettamente.

merge degli attributi

se per esempio aggiungo una classe 

<x-alert class="text" style="color:red;" :name="$name" :info="'danger'" :message="'Hi Faghy'"/>

a questo punto verrebbe applicata la classe text perchè catturata dagli attributi. Dobbiamo unire la nuova classe con quelle precedenti effettuando un merge degli attributi

<div {{ $attributes->merge(['class' => 'alert alert-'.$info])}} >
  {{$message}} {{$name}}
</div>

usando $attributes->merge() possiamo unire gli attributi, quindi passiamo alla funzione merge passiamo un array che avrà come primo chiave quello di cui vogliamo fare il merge, quindi la classe

$attributes->merge(['class' =>

e come valore la classe che passavamo prima ma in puro php senza la sintassi blade

$attributes->merge(['class' => 'alert alert-'.$info])

a questo punto avremo le classi unite e l’ HTML ci restituirà 

class="alert alert-danger text"