Criando componentes para o Adianti Framework usando Composer

Pablo Dall'Oglio 15/12/2020 (há 3 anos)

Neste artigo vou ensinar você a utilizar o Composer para criar um componente para o Adianti Framework. O Composer (www.php.com.br/23?composer-mais-de-1000-bibliotecas-disponiveis-em-s) é um gerenciador de pacotes para o PHP. Com ele, você pode usar milhares de pacotes criados pela comunidade, e também criar os seus componentes.

Introdução

No desenvolvimento de sistemas, é muito comum precisarmos criar componentes para resolver problemas comuns. Mesmo que o Framework ofereça uma quantidade boa de componentes, nem sempre vai atender 100% das demandas. Quando criamos um componente, podemos reaproveitá-lo entre projetos, ou mesmo divulgá-lo na comunidade para que mais pessoas se beneficiem com ele. Neste artigo, vamos criar um componente simples para Accordion, e publicá-lo em um repositório GitHub para reaproveitamento em outros projetos.

Criar repositório Git

O primeiro passo é criar um repositório Git. Vamos criar um repositório vazio no GitHub, e em seguida efetuamos um clone dele:

cd /tmp/ git clone https://github.com/adianti/plugins.git

Estrutura

Você acessará o repositório recém criado e criará o diretório src dentro dele.

cd accordion mkdir src mkdir src/Accordion

O componente

O componente terá um namespace, que neste caso será formado pelo nome do autor (Adianti), tipo (Plugins) e pelo nome do pacote (Accordion). O nome do componente (widget de tela) que criaremos será AccordionContainer. Dentro deste pacote (Adianti\Plugins) poderão existir outras classes necessárias para o funcionamento deste componente. Como esse componente utiliza classes existentes do Framework, será necessário indicar estes no header (use). As classes utilizadas aqui são: TElement, TScript, e TStyle. O método addContent() adicionará um conteúdo ao accordion. O método show(), exibe os elementos criados internamente, e acrescenta um script por meio do TScript::importFromFile(), e um estilo, por meio do TStyle::importFromFile().

plugins/src/Accordion/AccordionContainer.php

<?php
namespace Adianti\Plugins\Accordion;
use Adianti\Widget\Base\TElement;
use Adianti\Widget\Base\TScript;
use Adianti\Widget\Base\TStyle;
/**
* Accordion Container
*/
class AccordionContainer extends TElement
{
protected $elements;
/**
* Class Constructor
*/
public function __construct()
{
parent::__construct('div');
$this->id = 'taccordion_' . uniqid();
$this->elements = array();
}
/**
* Add a page to the accordion
* @param $title Title
* @param $object Content
*/
public function addContent($title, $object)
{
$this->elements[] = array($title, $object);
}
/**
* Shows the widget at the screen
*/
public function show()
{
foreach ($this->elements as $child)
{
$title = new TElement('button');
$title->class = 'taccordion';
$title->add($child[0]);
$content = new TElement('div');
$content->class = 'taccordion-content';
$content->add($child[1]);
parent::add($title);
parent::add($content);
}
TStyle::importFromFile('vendor/adianti/plugins/src/Accordion/accordion.css');
TScript::importFromFile('vendor/adianti/plugins/src/Accordion/accordion.js');
parent::show();
}
}
?>

A seguir o arquivo de estilo necessário:

plugins/src/Accordion/accordion.css

.taccordion { background-color: #eee; font-weight: bold; cursor: pointer; padding: 12px; width: 100%; border: none; text-align: left; outline: none; } .taccordion.active, .taccordion:hover { background-color: #ccc; } .taccordion-content { padding: 0 18px; display: none; overflow: hidden; } .taccordion:after { content: '\002B'; color: black; font-weight: bold; float: right; margin-left: 5px; }

A seguir o arquivo Javascript necessário:

plugins/src/Accordion/accordion.js

Metadados

O pacote precisará de um arquivo composer.json no seu diretório principal para descrever o pacote, sua licença, seus autores, e como ele será carregado. No autoload, fazemos um mapeamento do namespace "Adianti\Plugins" para a pasta "src".

plugins/composer.json

{ "name": "adianti/plugins", "description": "Plugins for Adianti Framework", "type": "library", "license": "MIT", "authors": [ { "name": "Pablo Dall Oglio", "email": "seu@email.com" } ], "require": {}, "autoload": { "psr-4": { "Adianti\\Plugins\\": "src" } }

Comitando tudo

git add -A git commit -m "first commit" git push

Testando

Agora, chegou o momento de testar o componente. Vamos trocar de contexto e acessar o diretório de seu projeto, e instalar o componente:

cd /caminho/para/seu/projeto

Dentro de seu projeto, vamos usar este comando para adicionar o repositório ao composer:

php7 composer.phar config repositories.accordion vcs https://github.com/adianti/plugins

E vamo utilizar este comando para instalar o pacote:

php7 composer.phar require adianti/plugins dev-master

Agora basta usar dentro de suas classes...

<?php
use Adianti\Plugins\Accordion\AccordionContainer;
class AccordionView extends TPage
{
function __construct()
{
parent::__construct();
$accordion = new AccordionContainer;
// ...
}
}
?>

Referências

blog.jgrossi.com/2013/creating-your-first-composer-packagist-package