9.3.2 – htmlHelper
Não perca a motivação só porque as coisas não estão correndo como o previsto. Adversidade gera sabedoria e é isso que levará você ao sucesso.
class Cake\View\Helper\HtmlHelper(View $view, array $config =[])
O papel do HtmlHelper no CakePHP é fazer opções relacionados a HTML mais fácil, mais rápido e mais resistente à mudança. Usando este helper permitirá que sua aplicação seja mais luz em seus pés, e mais flexível de onde ele é colocado em relação à raiz de um domínio.
Você deve ter notado o uso de um objeto chamado $this->Html, uma instância da classe Cake\View\Helper\HtmlHelper do CakePHP. O CakePHP vem com um conjunto de view helpers que simplificam tarefas como gerar links e formulários. Você pode aprender como usá-los em Helpers (Facilitadores), mas aqui é importante notar que o método link() irá gerar um link HTML com o referido título (primeiro parâmetro) e URL (segundo parâmetro).
Muitos métodos HtmlHelper incluem um parâmetro $attributes, que lhe permitem aderência em quaisquer atributo extras em suas tags. Aqui estão alguns exemplos de como usar o parâmetro $attributtes:
Desired attributes: <tag class="someClass" /> Array parameter: ['class' => 'someClass'] Desired attributes: <tag name="foo" value="bar" /> Array parameter: ['name' => 'foo', 'value' => 'bar']
Inserindo Elementos Bem Formatados
A tarefa mais importante que o HtmlHelper realiza é a criação de marcação bem formado. Esta seção irá cobrir alguns dos métodos do HtmlHelper e como usá-los.
Criando a tag Charset
Cake\View\Helper\HtmlHelper::charset($charset=null)
Usado para criar a meta tag especificando o charset do documento. O default valor é UTF-8. Veja um exemplo:
echo $this->Html->charset();
Uma alternativa:
echo $this->Html->charset('ISO-8859-1');
Linkando para Arquivos CSS
Cake\View\Helper\HtmlHelper::css(mixed $path, array $options =[])
Cria um link para um CSS. Caso o bloco option seja configurado para true, a tag link é adicionada para o bloco CSS que você pode imprimir dentro da tag head do documento.
Este método de inclusão do CSS assume que o CSS especificado reside dentro do webroot/css e não inicia com '/':
echo $this->Html->css('forms');
Deve gerar:
<link rel="stylesheet" href="/css/forms.css" />
O primeiro parâmetro deve ser um array para incluir múltiplos arquivos:
echo $this->Html->css(['forms', 'tables', 'menu']);
Saída:
<link rel="stylesheet" href="/css/forms.css" /> <link rel="stylesheet" href="/css/tables.css" /> <link rel="stylesheet" href="/css/menu.css" />
Adicionando CSS de um Plugin:
echo $this->Html->css('DebugKit.toolbar.css');
Criando Meta tags
<?= $this->Html->meta(
'favicon.ico',
'/favicon.ico',
['type' => 'icon']
);
?>
<?= $this->Html->meta(
'keywords',
'enter any meta keyword here'
);
?>
<?= $this->Html->meta(
'description',
'enter any meta description here'
);
?>Linkando para Imagens
Cake\View\Helper\HtmlHelper::image(string $path, array $options =[])
echo $this->Html->image('cake_logo.png', ['alt' => 'CakePHP']);
Gera:
<img src="/img/cake_logo.png" alt="CakePHP" />
echo $this->Html->image("recipes/6.jpg", [ "alt" => "Brownies", 'url' => ['controller' => 'Recipes', 'action' => 'view', 6] ]);
Plugin:
echo $this->Html->image('DebugKit.icon.png');
Criando Links
echo $this->Html->link(
'Enter',
'/pages/home',
['class' => 'button', 'target' => '_blank']
);
echo $this->Html->link(
'Dashboard',
['controller' => 'Dashboards', 'action' => 'index', '_full' => true]
);
echo $this->Html->link(
'Delete',
['controller' => 'Recipes', 'action' => 'delete', 6],
['confirm' => 'Are you sure you wish to delete this recipe?'],
);
echo $this->Html->link('View image', [
'controller' => 'Images',
'action' => 'view',
1,
'?' => ['height' => 400, 'width' => 500]
]);
Linkando Vídeos
<?= $this->Html->media('audio.mp3') ?> // Output <audio src="/files/audio.mp3"></audio> <?= $this->Html->media('video.mp4', [ 'fullBase' => true, 'text' => 'Fallback text' ]) ?> <?= $this->Html->media( ['video.mp4', ['src' => 'video.ogg', 'type' => "video/ogg; codecs='theora, vorbis'"]], ['autoplay'] ) ?>
Link para Imagens
Cake\View\Helper\HtmlHelper::image(string $path, array $options = [])
Creates a formatted image tag. The path supplied should be relative to webroot/img/.
echo $this->Html->image('cake_logo.png', ['alt' => 'CakePHP']);
Irá mostrar:
<img src="/img/cake_logo.png" alt="CakePHP" />
CSS CakePHP
Customizar CSS do bootstrap numa view
echo $this->Form->input('grupo',['style'=>'width: 200px']);
Tipos de Campos
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
max-width: 280px;
}
Usando num template login.ctp
<div class="users form">
<?= $this->Flash->render('auth') ?>
<?= $this->Form->create() ?>
<div align="center">
<fieldset>
<legend><?= __('<h3><b>Favor entrar seu com login e senha</b></h3>') ?></legend>
<?= $this->Form->input('username', ['label'=>'Login', 'class'=>'col4']) ?>
<?= $this->Form->input('password',['label'=>'Senha', 'class'=>'col4']) ?>
</fieldset>
<?= $this->Form->button(__('Acessar')); ?>
<?= $this->Form->end() ?>
</div>
</div>
No arquivo webroot/css/custom.css
/* Para a customização da largura dos campos de form: echo $this->Form->input('grupo',['class'=>'col2']); */
.col1{
width:50px;
}
.col2{
width:100px;
}
.col3{
width:150px;
}
.col4{
width:200px;
}
.col5{
width:250px;
}
.col6{
width:300px;
}
.col7{
width:350px;
}
.col8{
width:400px;
}
.col9{
width:950px;
}
JavaScript em View/Template
<div class="actions columns col-lg-2 col-md-3">
<h3><?= __('Ações') ?></h3>
<ul class="nav nav-stacked nav-pills">
<li class="active disabled"><?= $this->Html->link(__('Novo Materiai'), ['action' => 'add']) ?></li>
<li><?= $this->Html->link(__('Listar Materiais'), ['action' => 'index']) ?></li>
</ul>
</div>
<script type="text/javascript">
function grupoFocus() {
// conta_grupo receber o valor da combo grupo
var elt = document.getElementById('grupo');
var selection=elt.options[elt.selectedIndex].innerHTML;
document.getElementById('conta').value = selection;
// Foco na descrição
document.getElementById('descricao').focus();
}
</script>
<div class="materiais form col-lg-10 col-md-9 columns">
<?= $this->Form->create($materiai); ?>
<fieldset>
<legend><?= __('Add Materiai') ?></legend>
<?php
echo $this->Form->input('codigo', ['autofocus'=>'autofocus']);
echo $this->Form->input('grupo', ['label'=>'','id'=>'grupo','readonly' => true,'options' => $grupos, 'empty'=>'Selecione o grupo', 'onchange'=>'grupoFocus()']);
echo $this->Form->input('conta_grupo',['id'=>'conta', 'readonly'=>true]);
echo $this->Form->input('descricao',['id'=>'descricao']);
echo $this->Form->input('uid_inclusao');
echo $this->Form->input('uid_data_inclusao');
echo $this->Form->input('uid_alteracao');
echo $this->Form->input('uid_data_alteracao');
echo $this->Form->input('status');
?>
</fieldset>
<?= $this->Form->button(__('Enviar'), ['class' => 'btn-success']) ?>
<?= $this->Form->end() ?>
</div>Mais detalhes em:
http://book.cakephp.org/3.0/en/views/helpers/html.html
http://book.cakephp.org/3.0/en/views/helpers/paginator.html
http://book.cakephp.org/3.0/en/views/helpers/form.html
http://book.cakephp.org/3.0/en/views.html
http://book.cakephp.org/3.0/en/core-libraries/form.html
http://book.cakephp.org/3.0/en/core-libraries/email.html
http://book.cakephp.org/3.0/en/views/helpers.html
Comments fornecido por CComment