Subversion Repositories bacoAlunos

Compare Revisions

Ignore whitespace Rev 1670 → Rev 1675

/branches/v3/impl/src/web/examples/angular/angular-tree.jsp
New file
0,0 → 1,319
 
<%--
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
PARA TESTAR ESTE EXEMPLO INVOQUE O SEGUINTE URL:
/examples/angular/angularTree.do
PORQUE ESTA PAGINA USA A INCLUSAO DOS SCRIPTS DA ANGULAR TREE
QUE ESTAO EM /layout/themes/scripts-default.jsp
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
--%>
 
 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="bacoTags" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="logic" uri="/WEB-INF/tlds/struts-logic.tld" %>
 
<style>
.btn {
margin-right: 8px;
}
 
.tree-node,.angular-ui-tree-handle {
background: #f8faff;
border: 1px solid #dae2ea;
color: #7c9eb2;
padding: 10px 10px;
}
 
.ui-tree-node
{
padding: 10px;
}
.angular-ui-tree-handle:hover {
color: #438eb9;
background: #f4f6f7;
border-color: #dce2e8;
}
 
.angular-ui-tree-placeholder {
background: #f0f9ff;
border: 2px dashed #bed2db;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
 
.nodeEmpty {
height: 50px;
margin:10px;
margin-left: 30px;
border: 1px dashed blue;
}
 
.group-title {
background-color: #687074 !important;
color: #FFF !important;
}
 
 
/* --- Tree --- */
.tree-node {
border: 1px solid #dae2ea;
background: #f8faff;
color: #7c9eb2;
}
 
.nodrop {
background-color: #f2dede;
}
 
 
.nodrag {
background-color: #f2eec1;
}
 
.tree-node-content {
margin: 10px;
}
 
 
/*Estilo adicionado por mim para os movidos*/
.moved
{
border: 2px solid blue !important;
}
 
 
 
 
</style>
<div class="container-fluid">
 
<%
 
//Para ler da base de dados por exemplo
// AbstractDao.getCurrentSession().beginTransaction();
//List<RepositoryDocumentCollection> collections = DaoFactory.getRepositoryDocumentCollectionDaoImpl().findRoots();
//String collectionsJson = RepositoryDocumentCollectionImpl.toJson(collections);
 
//NAO ESTA A SER USADO É APENAS PARA EXEMPLIFICAR
//O JSON ESTA INCIALIZADO NO SCOPE DO JAVA_SCRIPT
String collectionsJson ="";
 
 
request.setAttribute("collectionsJson", collectionsJson);
 
%>
 
 
 
 
<div id="treeAppPageContent" ng-app="treeAppPageContent" ng-controller="treeAppPageContentController">
 
 
<script>
 
var treeAppPageContent = angular.module('treeAppPageContent', ['ui.tree']);
GLOBAL_BacoAngularAppDependencies.push('treeAppPageContent');
 
<!-- estes codigos todos do remove e do toggle e etc's não mechi em nada limitei-me a copiar dos gajos-->
treeAppPageContent.controller('treeAppPageContentController', function ($scope) {
//PARA USAR O QUE VEM DA BASE DE DADOS
//$scope.data = ${collectionsJson};
 
$scope.data = [
{
"id" : 1,
"name" : "Nao deixa fazer drag",
"nodrag" : true,
"isDirectory" : true
 
},
{
"id" : 2,
"name" : "Nao deixa fazer drop",
"nodrop" : true,
"isDirectory" : true
},
{
"id" : 3,
"name" : "Deixa fazer Tudo",
"isDirectory" : true
},
{
"id" : 4,
"name" : "Deixa fazer Tudo e ja foi movido",
"moved" : true,
"isDirectory" : true
},
{
"id" : 5,
"name" : "Exemplo de folha nao deixa abrir",
"isDirectory" : false
}
];
$scope.treeOptions = {
accept: function(sourceNodeScope, destNodesScope, destIndex) {
return true;
},
dropped: function(e) {
console.log (e.source.nodeScope.$modelValue);
alert ("Largado o nó com nome: " + e.source.nodeScope.$modelValue.name + " sobre " + e.dest.nodesScope.$parent.$modelValue.name);
e.source.nodeScope.$modelValue.moved = true;
 
}
};
$scope.remove = function (scope)
{
var nodeData = scope.$modelValue;
alert("removendo item com id " + nodeData.id)
scope.remove();
};
$scope.openedAndHasNotChilds = function(node)
{
if(node.childs == null)
return false;
return node.childs.length == 0;
}
$scope.newSubItem = function (scope)
{
var nodeData = scope.$modelValue;
if(nodeData.open != null && nodeData.open == true)
{
 
if(!nodeData.childs)
{
nodeData.childs = [];
}
nodeData.childs.push({
id: -1,
title: nodeData.name + '.' + (nodeData.childs.length + 1),
nodes: [],
isDirectory: true
});
}
else
{
alert("Abra primeiro o nó")
}
 
};
 
$scope.collapseAll = function () {
$scope.$broadcast('angular-ui-tree:collapse-all');
};
 
$scope.expandAll = function () {
$scope.$broadcast('angular-ui-tree:expand-all');
};
 
$scope.openItem = function(item)
{
//apenas deixa abrir neste caso
if(item.open && item.open==true)
{
//Desligamos o Close se nao isto é uma trapalhada para os elementos que já perderam filhos
//e depois iamos abri-los novamente
//item.open=false;
//delete item.childs;
}
else
{
alert("Abrindo Filhos Exemplo");
item.open = true;
item.childs = []; //linha necessária para deixar fazer drop no <ul>
 
/*
Exemplo de chamar um JSON para abrir filhos
$.getJSON("<%=request.getContextPath()%>/user/pagecontent/jorgeaux/section.jsp",{path:item.path},
function(json){
item.childs = json;
item.open = true;
angular.element($("#treeAppPageContent")).scope().$apply();
});*/
}
}
 
 
}
);
 
</script>
 
<!--TEMPLATE RECURSIVO-->
<script type="text/ng-template" id="childs_renderer.html">
<!--Para nao deixar fazer drag-->
<div ng-attr-data-nodrag="{{node.nodrag}}" class="tree-node tree-node-content clearfix" ng-class="{nodrop: node.nodrop, nodrag: node.nodrag, moved: node.moved}">
 
<!--O ATRIBUTO ui-tree-handle DEVE SER COLOCADO ONDE É FEITO O CONTROLO DE ARRASTO DRAG AND DROP
NORMALMENTE NOS EXEMPLOS DEFAULT ESTÁ NO NÓ INTEIRO MAS SE QUISERMOS OUTROS BOTOES TEMOS DE SEPARAR
SE NAO NADA FUNCIONA POIS O DRAG SOBREPOEM-SE A TUDO-->
<div class="col-md-1">
<i class="glyphicon glyphicon-resize-vertical" ui-tree-handle></i>
</div>
<!--O atributo isDirectory apenas deixa abrir ou nao
data-nodrag significa que não é arrastavel este botão
as setas são colocadas consoante esteja aberto ou fechado
-->
<div class="col-md-1">
<a class="btn btn-success btn-xs" ng-if="node.isDirectory" data-nodrag ng-click="openItem(node)">
<span
class="glyphicon"
ng-class="{
'glyphicon-chevron-right': !node.open,
'glyphicon-chevron-down': node.open
 
}">
</span>
</a>
</div>
 
<div class="col-md-8">
<input ng-model="node.name" type="text" class="form-control" data-nodrag>
<span ng-if="node.nodrop">* No drop</span> <span ng-if="node.nodrag">* No drag</span>
</div>
<!--BOTOES DE REMOVE E NEW SUBITEMS CHAMAM FUNCOES DO SCOPE-->
<div class="col-md-2">
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)">
<span class="glyphicon glyphicon-remove"></span>
</a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;">
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
</div>
 
<!-- 1) UMA LISTA PARA O NODROP data-nodrop-enabled="true" 2) (EM BAIXO) OUTRA PARA OS QUE DEIXAM FAZER DROP DROP-->
<ol ng-if="node.nodrop" ui-tree-nodes="" data-nodrop-enabled="true" ng-model="node.childs" ng-class="{hidden: collapsed, nodeEmpty: openedAndHasNotChilds(node) }">
<li ng-repeat="node in node.childs" ui-tree-node ng-include="'childs_renderer.html'">
</li>
</ol>
<!-- 2) LISTA DO DROP-->
<ol ng-if="!node.nodrop" ui-tree-nodes="" ng-model="node.childs" ng-class="{hidden: collapsed, nodeEmpty: openedAndHasNotChilds(node) }">
<li ng-repeat="node in node.childs" ui-tree-node ng-include="'childs_renderer.html'">
</li>
</ol>
</script>
 
 
<!-- E finalmente este é o unico codigo dos gajos que metem no HTML puro-->
<div class="row">
 
<div class="col-sm-6">
<div ui-tree="treeOptions" id="page-content-root">
<ol ui-tree-nodes ng-model="data">
<li ng-repeat="node in data" ui-tree-node ng-include="'childs_renderer.html'"></li>
</ol>
</div>
</div>
 
<div class="col-sm-6">
<pre class="code">{{ data | json }}</pre>
</div>
</div>
</div>
 
 
<%--AbstractDao.getCurrentSession().getTransaction().commit();--%>
 
</div>
/branches/v3/impl/src/web/examples/examples.jsp
51,5 → 51,12
</ul>
 
 
<h2>6 - Angular Tree</h2>
 
<ul>
<li><html:link action="/examples/angular/angularTree"> Exemplo de Uso Angular Tree</html:link></li>
</ul>
 
 
</body>
</html>
/branches/v3/impl/src/web/examples/jsonwidget/pesquisa.jsp
New file
0,0 → 1,26
<%@ page import="jomm.dao.impl.AbstractDao" %>
<%@ page import="pt.estgp.estgweb.domain.User" %>
<%@ page import="pt.estgp.estgweb.domain.dao.DaoFactory" %>
<%@ page import="pt.estgp.estgweb.services.common.SearchTypeEnum" %>
<%@ page import="java.util.List" %>
<%@ page import="org.json.JSONArray" %>
<%@ page import="org.json.JSONObject" %>
<%@ page contentType="application/json;charset=UTF-8" language="java" %><%
 
String query = request.getParameter("query");
AbstractDao.getCurrentSession().beginTransaction();
 
List<User> users = DaoFactory.getUserDaoImpl().search(query, SearchTypeEnum.AllWords,10,0);
 
JSONArray array = new JSONArray();
for(User u: users)
{
JSONObject obj = new JSONObject();
obj.put("name",u.getName());
obj.put("morada",u.getAddress());
array.put(obj);
}
 
AbstractDao.getCurrentSession().getTransaction().commit();
out.write(array.toString());
%>
/branches/v3/impl/src/web/examples/jsonwidget/simpleAngularConfigExampleTable.jsp
New file
0,0 → 1,203
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
<body ng-app="myApp0">
<script>
var GLOBAL_BacoAngularAppDependencies = [];
angular.module('myApp0', GLOBAL_BacoAngularAppDependencies);
</script>
<p>Try to change the names.</p>
 
 
<div id="myApp1" ng-app="myApp1" ng-controller="myCtrl1">
 
Variavel <input type="text" value="{{pessoas}}">
 
 
Nome do Director: <input type="text" ng-model="director.nome"><br>
Morada do Director: <input type="text" ng-model="director.morada"><br>
<br>
Full Name: {{firstName + " " + lastName}}
 
<h2>Pessoas</h2>
 
<button type="button" ng-click="addPessoa()">Adicionar User</button>
 
<table>
<tr>
<th>Nome</th>
<th>Ultimo</th>
<th>Completo</th>
<th>Morada</th>
<th>Idade</th>
<th></th>
</tr>
<tr ng-repeat="p in pessoas">
<td>
<input ng-model="p.nome"/>
</td>
<td>
<input ng-model="p.apelido"/>
</td>
<td>
<input readonly="true" value="{{p.nome + ' ' + p.apelido}}"/>
</td>
<td>
<input ng-model="p.morada"/>
</td>
<td>
<input ng-model="p.idade"/>
</td>
</tr>
</table>
 
<div class="row form-horizontal">
 
<div class="col-md-4">
<div class="form-group">
<label class="control-label col-md-2">
Pesquisar Pessoa
</label>
<div class="col-md-9">
<input class="form-control" type="text" id="query">
</div>
<div class="col-md-1">
<button class="btn btn-default " type="button" ng-click="pesquisar()">
<span class="glyphicon glyphicon-search"/>
</button>
</div>
</div>
</div>
 
<div class="col-md-7">
<table class="table" ng-show="findUsers.length > 0">
<thead>
<tr>
<th>Nome</th>
<th>Morada</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in findUsers">
<td>
{{p.name}}
</td>
<td>
{{p.morada}}
</td>
<td>
<button class="btn btn-success" type="button" ng-click="escolheDirector(p)">
<span class="glyphicon glyphicon-plus"/>
</button>
</td>
</tr>
</tbody>
</table>
</div>
 
 
 
</div>
 
 
 
<br/>
Media de idades: <input type="text" ng-model="mediaIdades()"/>
<div>
<pre>{{pessoas | json}}</pre>
</div>
 
 
</div>
 
 
 
 
 
<script>
 
var app1 = angular.module('myApp1', []);
GLOBAL_BacoAngularAppDependencies.push('myApp1');
app1.controller('myCtrl1', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
 
$scope.findUsers= [];
 
$scope.director = {
"nome" : "",
"morada" :""
}
 
$scope.pessoas = [
{
"nome" : "jorge",
"apelido" : "machado",
"morada" : "portalegre"
},
{
"nome" : "Mario",
"apelido" : "Costa",
"morada" : "portalegre"
 
 
}
];
 
$scope.addPessoa = function(){
$scope.pessoas.push(
 
{
"nome" : "",
"apelido" : "",
"morada" : ""
 
}
);
 
}
 
$scope.mediaIdades = function(){
soma = 0;
for (index = 0; index < $scope.pessoas.length; ++index) {
soma += parseFloat($scope.pessoas[index].idade);
}
 
media = soma / $scope.pessoas.length;
return media;
}
 
$scope.pesquisar = function()
{
query = $("#query").val();
 
$.getJSON("<%=request.getContextPath()%>/examples/jsonwidget/pesquisa.jsp",
{
"query" : query
},
function(json){
$scope.findUsers = json;
angular.element($("#myApp1")).scope().$apply();
}
);
 
}
 
$scope.escolheDirector = function(p)
{
$scope.director.nome = p.name;
$scope.director.morada = p.morada;
 
}
});
</script>
 
 
</body>
</html>