Menu Dinamico alimentado por tabelas de dados e gerado usando controle Html interagindo no WINDEV, WEBDEV e WINDEV Mobile
Ou seja, se a pessoa dominar html, css e js faz coisas incriveis e consegue interagir no wx!!!!
Conforme prometi essa semana, eu e o Paulo fizemos um projeto WINDEV, mas que a tecnica pode ser extendida para o WEBDEV e para o WINDEV Mobile, onde vc coloca um controle Html e esse controle vc pode por qualquer tipo de controle( Table, Menu, Looper, Combo, Treeview, Carrosel,... qualquer coisa que vc ache bonito na internet) e interagir com eventos de mouse e responsividade e criação e carga de dados dinamicamente. Fiz um video curto de no max 40 min onde explico de forma bem organizada como foi feito o projeto que esta na versao 29. Dentro do repositorio tera o exemplo com o PDF com os codigos prontos, só seguir o video e copiar os dados. Espero que com essa ação possamos criar novos controles diferentes e gerir esses exemplos juntos, sozinho eu nao consigo, é necessario voces ajudarem para termos esses controles nossos. Bom espero que sirva esse exemplo para dar novas ideias para os seus projetos, sucesso e ótimo final de semana.
COM ESSE EXEMPLO VOCE TEM A LIBERDADE DE CRIAÇÃO DE QUALQUER CONTROLE PARA AS SUAS APLICAÇÕES
VOCE PODE CRIAR MENUS, TABLES, LOOPERS, TREEVIEWS, COMBOS DIFERENTES E MAIS COMPLETOS A TECNICA É A MESMA
NA PASTA EXE TEM O PROJETO COMPILADO PARA TESTES COM TODAS AS DLLS
VIDEO NO YOUTUBE
https://youtu.be/I4xTr0dCz8g
REQUISITO
UM FORM
UM CONTROLE WEB
ROTINAS WLANGUAGE COM HTML, CSS, JS USANDO O EXECUTE WL.NOME DA FUNCAO
DENTRO DO ZIP TEM O PDF COM TODO O CODIGO FONTE USADO NESSE EXEMPLO
BONS ESTUDOS
CODIGO
// Summary: <specify the procedure action>
// Syntax:
// Menu_Html ()
//
// Parameters:
// None
// Return value:
// None
//
// Example:
// <Specify a usage example>
//
PROCEDURE Menu_Html()
smeuhtml_cab, smeuhtml_itens, smeuhtml_rodape is string
smeuhtml_cab =[
<!DOCTYPE html>
<html lang="pt" >
<head>
<meta charset="UTF-8">
<title>i9sistemas</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #2d2c41;
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
}
ul {
list-style-type: none;
}
a {
color: #b63b4d;
text-decoration: none;
}
/** =======================
* Contenedor Principal
===========================*/
h1 {
color: #FFF;
font-size: 24px;
font-weight: 400;
text-align: center;
margin-top: 80px;
}
h1 a {
color: #c12c42;
font-size: 16px;
}
.accordion {
width: 100%;
max-width: 360px;
margin: 30px auto 20px;
background: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
color: #4D4D4D;
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #CCC;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.accordion li:last-child .link {
border-bottom: 0;
}
.accordion li i {
position: absolute;
top: 16px;
left: 12px;
font-size: 18px;
color: #595959;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.accordion li i.fa-chevron-down {
right: 12px;
left: auto;
font-size: 16px;
}
.accordion li.open .link {
color: #b63b4d;
}
.accordion li.open i {
color: #b63b4d;
}
.accordion li.open i.fa-chevron-down {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion li.default .submenu {display: block;}
/**
* Submenu
-----------------------------*/
.submenu {
display: none;
background: #444359;
font-size: 14px;
}
.submenu li {
border-bottom: 1px solid #4b4a5e;
}
.submenu a {
display: block;
text-decoration: none;
color: #d9d9d9;
padding: 12px;
padding-left: 42px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.submenu a:hover {
background: #b63b4d;
color: #FFF;
}
</style>
</head>
<body>
<h1>Menu Html Dinamico<br><a href="https://wxsolucoes.com.br">Wx Soluções</a></h1>
<!-- Contenedor -->
<ul id="accordion" class="accordion">
]
//<li><div class="link"><i class="fa fa-globe"></i>Posicionamiento web<i class="fa fa-chevron-down"></i></div>
//<ul class="submenu">
//<li><a onclick="WL.Execute('rot_WINDEV','Outros buscarores');">Outros buscadores</a></li>
//</ul>
//</li>
FOR EACH MenuXpTaskHeaders
smeuhtml_itens += [
<li><div class="link"><i class="fa fa-globe"></i>TASKHEADER_TITLE<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
]
smeuhtml_itens = Replace(smeuhtml_itens,"TASKHEADER_TITLE",MenuXpTaskHeaders.TaskHeader_Title,IgnoreCase)
FOR EACH MenuXpTaskItens where TaskHeader_UUID = MenuXpTaskHeaders.TaskHeader_UUID
smeuhtml_itens += [
<li><a onclick="WL.Execute('menu_rot_abrir','TASKITENS_TITLE');">TASKITENS_TITLE</a></li>
]
smeuhtml_itens = Replace(smeuhtml_itens,"TASKITENS_TITLE",MenuXpTaskItens.TaskItem_Title,IgnoreCase)
END
smeuhtml_itens += [
</ul>
</li>
]
END
smeuhtml_itens += [
</ul>
]
smeuhtml_rodape = [
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion($('#accordion'), false);
});
</script>
</body>
</html>
]
HTML_MENU_01 = StringToUTF8(smeuhtml_cab) + StringToUTF8(smeuhtml_itens) + StringToUTF8(smeuhtml_rodape)
//------------------------------------------
// Summary: <specify the procedure action>
// Syntax:
//menu_rot_abrir (<param_v>)
//
// Parameters:
// param_v:
// Example:
// <Specify a usage example>
//
PROCEDURE menu_rot_abrir(param_v)
//info(param_v)
EDT_OpMenu = param_v
SWITCH Upper(param_v)
//CONTABIL
CASE "LIVRO RAZAO"
Open(WIN_Janela,"LIVRO RAZAO")
CASE "LIVROS CONTABEIS"
Open(WIN_Janela,"LIVROS CONTABEIS")
CASE "RAZONETES"
Open(WIN_Janela,"RAZONETES")
//FINANCEIRO
CASE "LIVRO CAIXA"
Open(WIN_Janela,"LIVRO CAIXA")
CASE "BANCOS"
Open(WIN_Janela,"BANCOS")
CASE "INVESTIMENTOS"
Open(WIN_Janela,"INVESTIMENTOS")
//FISCAIS
CASE "EMITIR NFE"
Open(WIN_Janela,"EMITIR NFE")
CASE "GERAR DOCUMENTOS FISCAIS"
Open(WIN_Janela,"GERAR DOCUMENTOS FISCAIS")
//ALMOXARIFADO
CASE "LIBERA SAIDA MATERIAL"
Open(WIN_Janela,"LIBERAR SAIDA DE MATERIAL")
CASE "ENTRADA DE ESTOQUE"
Open(WIN_Janela,"ENTRADA DE ESTOQUE")
//ESTOQUE
CASE "PRODUTOS"
Open(WIN_Janela,"PRODUTOS")
CASE "GRUPOS"
Open(WIN_Janela,"GRUPOS")
CASE "FAMILIAS"
Open(WIN_Janela,"FAMILIAS")
//VENDAS
CASE "CLIENTES"
Open(WIN_Janela,"CLIENTES")
CASE "PEDIDOS"
Open(WIN_Janela,"PEDIDOS")
CASE "PEDIDOS CANCELADOS"
Open(WIN_Janela,"PEDIDOS CANCELADOS")
CASE "ORDEM DE COMPRA"
Open(WIN_Janela,"ORDEM DE COMPRA")
CASE "TASK HEADER MENU"
Open(WIN_Task_Headers)
CASE "TASK ITENS SUB MENU"
Open(WIN_Task_Itens)
OTHER CASE
END
/// SE CRIOU ALGO PARECIDO ENCAMINHE PARA POR AQUI NO REPOSITORIO DE EXEMPLOS E VAMOS EVOLUINDO OS PROJETOS PARA LAGO MAIS COMPLETO E CUSTOMIZAVEL.
MEU WHATSAPP
+55 41 99949 1800
adriano@wxsolucoes.com.br