Layout e CSS - bjverde/formDin GitHub Wiki
Para os padrões atuais o Layout e o CSS do formDin não é tão bom ou moderno. Pois não é totalmente responsivo ou apresenta um Layout semelhante ao BootStrap ou Angular Material. Isso está previsto para o FormDin 5.
Com a versão 4.2.3 diversas melhorias foram feitas na questão do CSS. Com a versão 4.3.0 o modo semi-responsivo virou o modo padrão.
Algumas melhorias no CSS
- TApplication->setResponsiveMode = Por padrão = TRUE e tem CSS com @Media
- TApplication->setCssFileFormDefault = Possibilita aplicar o mesmo CSS para todos os forms de um só vez.
- Heard and Footer agora são apenas DIV sem tabelas.
- Diversos métodos agora estão deprecated como por exemplo o que seta a largura da tela (veja setResponsiveMode)
Customização simples
Uma tela padrão criada em FormDin é parecidado com o exemplo abaixo.
Porém existem diversos elementos que podem ser customizados com pouco esforço. Tudo que está na cor cf1523 ou RGB 207,21,35 indica o local que customização afeta.
Edite o arquivo index.php
da sua aplicação depois de $app = new TApplication();
é onde iremos customizar.
$app = new TApplication(); // criar uma instancia do objeto aplicacao
$app->setFormDinMinimumVersion(FORMDIN_VERSION_MIN_VERSION);
$app->setTitle(SYSTEM_NAME.' com FormDin '.FORMDIN_VERSION);
$app->setSUbTitle('Framework para Desenvolvimento de Aplicativos WEB');
$app->setSigla(APLICATIVO);
$app->setImgLogoPath('images/appv1_logo.png');
$app->setVersionSystem(SYSTEM_VERSION);
//$app->setUnit('Departamento de Informática - DI - IBAMA 2011');
//$app->setLoginFile('includes/tela_login.php');
$app->setLoginInfo('Bem-vindo');
$app->setMainMenuFile('includes/menu.php');
$app->setFavIcon('../base/imagens/favicon-16x16.png'); //FavIcon da Aplicação
$app->setWaterMark('brasao_marca_dagua.png'); //Uma imagem que ficará ao fundo
$app->setBackgroundImage('../imagens/bg_blackmosaic.png'); // Imagem de Fundo
$app->run();
Customização avançada via CSS
Além da customização simples com elementos preconfigurados é possível alterar o CSS. Veja exemplos de alteração do Layout em Aplicação de Exemplos v1.0 do FormDin na parte do "Layout > Layout do Menu Principal > Layout index" apresenta alguns exemplos.
Alem disso seu CSS pode ser aplicado usando os metodos
- TApplication->setCssFile - CSS para parte externa da Aplicação: Hearder, Footer
- TApplication->setCssDefaultFormFile - CSS Default para todos os formularios
Próxima etapa ?
22 - API REST