WebUI: framework para criação de interfaces para Web [PHP]

WebUI: framework para criação de interfaces para Web

Publicado por EVERTON DA ROSA (última atualização em 14/10/2011)

[ Hits: 7.446 ]

Homepage: http://everton3x.github.io

Download webui-1.1.zip

0 0

Denuncie Favoritos Indicar

WEB UI - WEB USER INTERFACE FRAMEWORK
Versão 1.1
Desenvolvido por Everton da Rosa - Everton3x
everton3x@gmail.com

1. INTRODUÇÃO
WebUI é um framework para geração de componentes de interface com o usuário através de PHP/HTML5.

Com o WebUI o programador/desenvolvedor pode criar botões, menus, painéis, grid, formulários, TreeView, etc personalizáveis e de forma fácil(?) e rápida(?).

O framework foi desenvolvido de forma que cada componente é independente dos demais componentes.

Esta versão do framework possui completa documentação inclusive com exemplos de utilização.

2. INSTALAÇÃO/CONFIGURAÇÃO
Para utilizar o WebUI, basta apenas fazer um include nos arquivos dos componentes desejados e inclua via HTML o arquivo CSS com os estilos.

3. CARACTERÍSTICAS
* Componentes independentes entre si: não há dependência entre os componentes, dispensando a inclusão de diversos arquivos para utilização de um único componente;
* Estilo via CSS: toda a configuração visual de cores, bordas, fonte, etc é feita através de CSS em um (ou mais) arquivos de estilos;
* Suporte a temas: para mudar o tema, apenas utilize um arquivo CSS diferente;
* HTML5 compatível: o cóidog foi escrito utilizando a especificação HTML5 para criação dos componentes;
* Mínimo uso de Javascript: a utilização de Javascript é praticamente nula, aumentando a compatibilidade com os diversos browsers do mercado. Entretanto, é possível utilizar Javascript através de eventos (onclick, onfocus, etc) na maioria dos componentes;
* Funções automáticas de componentes: alguns componentes tem funções disparadas automaticamente, tais como criação de links automática para expandir/esconder itens do TreeView;

4. COMPONENTES
* wAccordion: cria um painel com subpainéis expandíveis/retráteis;
* wBtn: cria botões clicáveis;
* wCalendar: cria um calendário
* wCheckbox: cria campos de formulário tipo checkbox;
* wDataTime: cria campos de formulário tipo date/time;
* wEmail: cria campos de formulário tipo e-mail;
* wFieldset: cria um fieldset;
* wFile: cria campos de formulário tipo file;
* wForm: cria formulários;
* wGrid: cria tabela de dados (grid) com paginação, ordenação e busca;
* wHidden: cria campos de formulário tipo hidden (oculto);
* wIcon: cria botão clicável do tipo ícone;
* wImage: cria campos de formulário do tipo image;
* wMenu: cria um menu;
* wNumber: cria campos de formulário do tipo número;
* wPanel: cria um painel para conter outros componentes;
* wPassword: cria campos de formulário do tipo senha;
* wRadio: cria campos de formulário do tipo rádio;
* wRange: cria campos de formulário do tipo range (intervalo);
* wSearch: cria campos de formulário do tipo search;
* wSelect: cria campos de formulário do tipo select;
* wSidebar: cria uma sidebar;
* wTabPanel: cria um painel com abas;
* wTel: cria campos de formulário do tipo telefone;
* wText: cria campos de formulário do tipo texto;
* wTextarea: cria campos de formulário do tipo textarea;
* wTree: cria uma visualização em árvore;
* wUrl: cria campos de formulário do tipo URL;
* wWizard: cria um painel do tipo wizard (assistente);

5. LICENÇA
WebUI é licenciado sob a GPL.
Você encontra uma cópia da GPL no arquivo licence.txt.

Esconder código-fonte

<!-- Exemplo de criação de um painel com conteúdo -->
<?php
require '../wpanel.php';

$panel = new wPanel();

$cfg = array(
   'title' => 'Painel do WebUI'
   ,'items' => array(
      'Filho 1'
      ,'Filho 2'
   )
   ,'tbar' => array('Botao 1', 'Botao 2')
   ,'bbar' => 'Rodapé'
   ,'icon' => 'icon16.png'
   ,'width' => '400px'
   //,'layout' => 'inline'
);


$panel->applyCfg($cfg);

$html = $panel->render();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <title>sem título</title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <meta name="generator" content="Geany 0.20" />
   
   <link rel="stylesheet" type="text/css" href="../w3school.css" />

</head>

<body>
   <?php echo $html; ?>
</body>

</html>

Scripts recomendados

Valor por extenso - PHP e ZF2

Menu Dinâmico Horizontal

SuperTab - tabela HTML com paginação e ordenação (PHP + MySQL)

Contador Automático

Xajax - FrameWork

Comentários

[1] Comentário enviado por alefesampaio em 15/10/2011 - 09:42h

Existe algum vídeo de criação dele?.

0 0

[2] Comentário enviado por everton3x em 15/10/2011 - 20:57h

Não fiz nenhum vídeo. Basicamente o processo é o mesmo para qualquer componente: 1º - crie uma instância do componente; 2º - aplique as configurações desejadas; 3º - renderize! Mas tutoriais em vídeo é uma boa ideia. Vou pensar a respeito.

0 0