/branches/v3/impl/src/web/examples/angular/fileUpload.jsp |
---|
New file |
0,0 → 1,108 |
<!DOCTYPE html> |
<html> |
<head> |
<script src="<%=request.getContextPath()%>/js/angularjs/1.4.8/angular.min.js"></script> |
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquerytables/bootstrap/js/bootstrap.js"></script> |
<link rel="stylesheet" href="<%=request.getContextPath()%>/js/jquerytables/bootstrap/css/bootstrap.css" type="text/css"/> |
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquerytables/jquery-2.1.4.min.js"></script> |
</head> |
<body ng-app="BacoAngularApp"> |
<jsp:include page="/layout/themes/scripts-default.jsp"/> |
<jsp:include page="/layout/headerTools.jsp"/> |
<div class="container"> |
<h1>Exemplo de um upload de um ficheiro atavés da modal de uploads</h1> |
<p> |
Para fazer upload de um ficheiro basta introduzir um link com os parametros |
de upload. O resultado é enviado a uma função de callback definida por nós. |
Caso queiramos usar uma função de angular e um objeto target do modelo isso pode |
ser feito à custa do atributo ng-model. |
Quando a callback é chamada, o módulo de upload, envia também o elemento |
relacionado com a chamada. Basta termos nesse elemento um ng-model definido. |
Desta forma e como mostra o exemplo podemos ir buscar esse elemento. |
</p> |
<p>Seguidamente encontra-se um exemplo com duas chamadas distintas ao modulo de upload. Em |
cada uma delas o elemento target é diferente e assim mantemos o track desse elemento</p> |
<p>O ficheiro importado é colocado na TMP do BACO. O resutado é uma classe pt.estgp.estgweb.web.controllers.utils.FilesUploadResult |
que pode ser serializada/descerializada em JSON. o nome do ficheiro é o nome na tmp do BACO</p> |
<p>O resutlado pode ser acedido com a servlet de TMP's do BACO</p> |
<script> |
//Especifico da aplicacao |
var app1 = angular.module('myApp1', []); |
GLOBAL_BacoAngularAppDependencies.push('myApp1'); |
app1.controller('myCtrl1', function($scope) |
{ |
$scope.dados = |
[ |
{ |
"nome" : "elemento1" |
}, |
{ |
"nome" : "elemento2" |
} |
] |
$scope.callbackUploadedFiles = function(filesUploadResult,token,targetElement) |
{ |
var modelObject = BacoAngularUtils.getAngularElementModel(targetElement); |
modelObject.filesUploadResult = filesUploadResult; |
} |
}); |
</script> |
<div id="myApp1" ng-app="myApp1" ng-controller="myCtrl1"> |
<div class="col-md-6"> |
<div> |
<div ng-repeat="item in dados"> |
<div> |
<div class="row"> |
<div class="form-group"> |
<label class="col-md-2 control-label">Nome</label> |
<div class="col-md-10"> |
<input type="text" class="form-control" ng-model="item.nome"> |
</div> |
</div> |
</div> |
<div class="row"> |
<div class="col-md-2"> |
<a class="btn btn-default" href="#" ng-model="item" |
data-title="Escolha Imagem" |
data-showmetafields="false" |
data-confirmonupload="true" |
data-toggle="modal" |
data-target="#filesUploadModal" |
data-multiple="false" |
data-allowed-extensions="jpg,png,gif" |
data-callback-target-function="angular.element($('#myApp1')).scope().callbackUploadedFiles"> |
Carregar Ficheiros <span class="glyphicon glyphicon-upload"/> |
</a> |
</div> |
<div class="col-md-10"> |
<img ng-if="item.filesUploadResult.uploadedFiles" width="100" ng-src="<%=request.getContextPath()%>/tmpStream/{{item.filesUploadResult.uploadedFiles[0].tmpName}}"> |
</div> |
</div> |
</div> |
</div> |
</div> |
</div> |
<div class="col-md-6"> |
<pre> |
{{dados | json}} |
</pre> |
</div> |
</div> |
</div> |
</body> |
</html> |
/branches/v3/impl/src/web/examples/angular/resize.jsp |
---|
New file |
0,0 → 1,267 |
<%-- |
Created by IntelliJ IDEA. |
User: jorgemachado |
Date: 25/10/17 |
Time: 17:15 |
To change this template use File | Settings | File Templates. |
--%> |
<%@taglib prefix="bacoTags" tagdir="/WEB-INF/tags" %> |
<%@ page contentType="text/html;charset=UTF-8" language="java" %> |
<html> |
<head> |
<style> |
.box { |
width: 200px; |
height: 200px; |
line-height: 200px; |
color: white; |
text-align: center; |
vertical-align: middle; |
background: -webkit-linear-gradient(red, #ccc); /* For Safari 5.1 to 6.0 */ |
background: -o-linear-gradient(red, #ccc); /* For Opera 11.1 to 12.0 */ |
background: -moz-linear-gradient(red, #ccc); /* For Firefox 3.6 to 15 */ |
background: linear-gradient(red, #ccc); /* Standard syntax */ |
} |
</style> |
</head> |
<body ng-app="BacoAngularApp"> |
<jsp:include page="/layout/themes/scripts-default.jsp"/> |
<jsp:include page="/layout/headerTools.jsp"/> |
<link rel="stylesheet" href="<%=request.getContextPath()%>/js/jquery-ui-1.12.1/jquery-ui.css"> |
<script src="<%=request.getContextPath()%>/js/jquery-ui-1.12.1/jquery-ui.min.js"></script> |
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/flora-commons/flora.resizable.css"> |
<script> |
(function () { |
'use strict'; |
//Especifico da aplicacao |
angular.module('myApp1', []) |
.directive('resizable', function () { |
return { |
restrict: 'A', |
scope: { |
callback: '&onResize' |
}, |
link: function postLink(scope, elem, attrs) { |
elem.resizable(); |
elem.on('resize', function (evt, ui) { |
scope.$apply(function() { |
if (scope.callback) { |
scope.callback({$evt: evt, $ui: ui }); |
} |
}) |
}); |
} |
}; |
}) |
/*app1.directive('resizable', function () { |
return { |
restrict: 'A', |
scope: { |
callback: '&onResize' |
}, |
link: function postLink(scope, elem, attrs) { |
elem.resizable({ |
maxHeight: 600, |
maxWidth: 600}); |
elem.on('resize', function (evt, ui) |
{ |
scope.$apply(function() { |
if (scope.callback) { |
scope.callback({$evt: evt, $ui: ui }); |
//here is where I want to set maximum width |
} |
}) |
}); |
} |
};*/ |
/* |
return { |
restrict: 'A', |
scope: { |
callback: '&onResize' |
}, |
link: function postLink(scope, elem, attrs) { |
elem.resizable({handles: "all"}); |
elem.on('resize', function (evt, ui) { |
scope.$apply(function() { |
if (scope.callback) { |
scope.callback({$evt: evt, $ui: ui }); |
} |
}) |
}); |
} |
}; |
})*/ |
.controller('myCtrl1', function($scope) |
{ |
$scope.dados = |
[ |
{ |
"nome" : "elemento1" |
}, |
{ |
"nome" : "elemento2" |
} |
] |
$scope.resize = function(evt,ui) { |
//console.log (evt,ui); |
$scope.dados[0].width = ui.size.width; |
$scope.dados[0].height = ui.size.height; |
} |
/*$scope.makeResizable = function($element){ |
alert("Aqui"); |
interact($element) |
.draggable({ |
onmove: window.dragMoveListener |
}) |
.resizable({ |
preserveAspectRatio: true, |
edges: { left: true, right: true, bottom: true, top: true } |
}) |
.on('resizemove', function (event) { |
var target = event.target, |
x = (parseFloat(target.getAttribute('data-x')) || 0), |
y = (parseFloat(target.getAttribute('data-y')) || 0); |
// update the element's style |
target.style.width = event.rect.width + 'px'; |
target.style.height = event.rect.height + 'px'; |
// translate when resizing from top or left edges |
x += event.deltaRect.left; |
y += event.deltaRect.top; |
target.style.webkitTransform = target.style.transform = |
'translate(' + x + 'px,' + y + 'px)'; |
target.setAttribute('data-x', x); |
target.setAttribute('data-y', y); |
target.textContent = Math.round(event.rect.width) + '×' + Math.round(event.rect.height); |
}); |
}*/ |
$scope.callbackUploadedFiles = function(filesUploadResult,token,targetElement) |
{ |
var modelObject = BacoAngularUtils.getAngularElementModel(targetElement); |
modelObject.filesUploadResult = filesUploadResult; |
//DIFERENTE NOVO |
if(modelObject.image && modelObject.image.identifier) |
{ |
widgetCallWithActionParameters( |
"<%=request.getContextPath()%>/user/json/repository.do", |
"replaceRepositoryFileFromTempPrivateDomain", |
{ |
"identifier" : modelObject.image.identifier, |
"fileUploaded" : BacoJS.stringifyOrdered(filesUploadResult.uploadedFiles[0]) |
}, |
"#myApp1", |
function(repositoryFile4JsonView) |
{ |
modelObject.image = repositoryFile4JsonView; |
modelObject.imageUrl = "<%=request.getContextPath()%>/repositoryStream/" + modelObject.image.identifier + "?" + new Date().getTime(); |
delete modelObject.filesUploadResult; |
angular.element($("#myApp1")).scope().$apply(); |
}, |
function(){} |
); |
} |
else |
{ |
widgetCallWithActionParameters( |
"<%=request.getContextPath()%>/user/json/repository.do", |
"saveRepositoryFileFromTempPrivateDomain", |
{ |
"fileUploaded" : BacoJS.stringifyOrdered(filesUploadResult.uploadedFiles[0]) |
}, |
"#myApp1", |
function(repositoryFile4JsonView) |
{ |
modelObject.image = repositoryFile4JsonView; |
modelObject.imageUrl = "<%=request.getContextPath()%>/repositoryStream/" + modelObject.image.identifier + "?" + new Date().getTime(); |
delete modelObject.filesUploadResult; |
angular.element($("#myApp1")).scope().$apply(); |
}, |
function(){} |
); |
} |
} |
}); |
})(); |
GLOBAL_BacoAngularAppDependencies.push('myApp1'); |
</script> |
<div id="myApp1" ng-app="myApp1" ng-controller="myCtrl1"> |
<div style="width: 200px;height: 200px" resizable on-resize="resize($evt, $ui)"> |
<img src="../../imgs/add.png" style="width:100%;height: 100%"> |
</div> |
<div class="web-messages"></div> |
<div class="col-md-6"> |
<div> |
<ul> |
<div ng-repeat="item in dados"> |
<div> |
<div class="row"> |
<div class="form-group"> |
<label class="col-md-4 control-label">Nome</label> |
<div class="col-md-8"> |
<input type="text" class="form-control" ng-model="item.nome"> |
</div> |
</div> |
</div> |
<div class="row"> |
<div class="col-md-4"> |
<a class="btn btn-default" href="#" ng-model="item" |
data-title="Escolha Imagem" |
data-showmetafields="false" |
data-confirmonupload="true" |
data-toggle="modal" |
data-target="#filesUploadModal" |
data-multiple="false" |
data-allowed-extensions="jpg,png,gif" |
data-callback-target-function="angular.element($('#myApp1')).scope().callbackUploadedFiles"> |
Carregar Ficheiros <span class="glyphicon glyphicon-upload"/> |
</a> |
</div> |
<div class="col-md-8"> |
<img ng-if="item.filesUploadResult.uploadedFiles" width="100" ng-src="<%=request.getContextPath()%>/tmpStream/{{item.filesUploadResult.uploadedFiles[0].tmpName}}"> |
<div style="width: 200px;height: 200px" resizable on-resize="resize($evt, $ui)"> |
<img style="width: 200px;height: 200px" resizable on-resize="resize($evt, $ui)" ng-if="item.image.identifier" ng-src="{{item.imageUrl}}"> |
</div> |
<label ng-if="item.image.identifier">{{item.image.name}}</label> |
<label ng-if="item.image.identifier">{{item.image.size/1024}} KB</label> |
</div> |
</div> |
</div> |
</div> |
</ul> |
</div> |
</div> |
<div class="col-md-6"> |
<pre> |
{{dados | json}} |
</pre> |
</div> |
</div> |
</body> |
</html> |
/branches/v3/impl/src/web/examples/angular/fileUploadComRepositorio.jsp |
---|
New file |
0,0 → 1,206 |
<%@taglib prefix="bacoTags" tagdir="/WEB-INF/tags" %> |
<html> |
<head> |
</head> |
<body ng-app="BacoAngularApp"> |
<jsp:include page="/layout/themes/scripts-default.jsp"/> |
<jsp:include page="/layout/headerTools.jsp"/> |
<link rel="stylesheet" href="<%=request.getContextPath()%>/js/jquery-ui-1.12.1/jquery-ui.css"> |
<script src="<%=request.getContextPath()%>/js/jquery-ui-1.12.1/jquery-ui.min.js"></script> |
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/flora-commons/flora.resizable.css"> |
<script> |
</script> |
<div class="container"> |
<h1>Exemplo de um upload de um ficheiro atavés da modal de uploads</h1> |
<p> |
Este exemplo acrescenta ao fileupload uma posterior chamada ao controlador de |
utilitarios para gravar o ficheiro no repositorio de ficheiros |
</p> |
<p> |
Para fazer upload de um ficheiro basta introduzir um link com os parametros |
de upload. O resultado é enviado a uma função de callback definida por nós. |
Caso queiramos usar uma função de angular e um objeto target do modelo isso pode |
ser feito à custa do atributo ng-model. |
Quando a callback é chamada, o módulo de upload, envia também o elemento |
relacionado com a chamada. Basta termos nesse elemento um ng-model definido. |
Desta forma e como mostra o exemplo podemos ir buscar esse elemento. |
</p> |
<p>Seguidamente encontra-se um exemplo com duas chamadas distintas ao modulo de upload. Em |
cada uma delas o elemento target é diferente e assim mantemos o track desse elemento</p> |
<p>O ficheiro importado é colocado na TMP do BACO. O resutado é uma classe pt.estgp.estgweb.web.controllers.utils.FilesUploadResult |
que pode ser serializada/descerializada em JSON. o nome do ficheiro é o nome na tmp do BACO</p> |
<p>O resutlado pode ser acedido com a servlet de TMP's do BACO</p> |
<script> |
//Especifico da aplicacao |
var fileUploadExample = angular.module('myApp1', []); |
GLOBAL_BacoAngularAppDependencies.push('myApp1'); |
fileUploadExample.directive('resizable', function () { |
return { |
restrict: 'A', |
scope: { |
callback: '&onResize' |
}, |
link: function postLink(scope, elem, attrs) { |
elem.resizable(); |
elem.on('resize', function (evt, ui) { |
scope.$apply(function() { |
if (scope.callback) { |
scope.callback({$evt: evt, $ui: ui }); |
} |
}) |
}); |
} |
}; |
}); |
fileUploadExample.controller('myCtrl1', function($scope) |
{ |
$scope.dados = |
[ |
{ |
"nome" : "elemento1" |
}, |
{ |
"nome" : "elemento2" |
} |
] |
$scope.resize = function(evt,ui) { |
//console.log (evt,ui); |
$scope.dados[0].width = ui.size.width; |
$scope.dados[0].height = ui.size.height; |
} |
$scope.callbackUploadedFiles = function(filesUploadResult,token,targetElement) |
{ |
var modelObject = BacoAngularUtils.getAngularElementModel(targetElement); |
modelObject.filesUploadResult = filesUploadResult; |
//DIFERENTE NOVO |
if(modelObject.image && modelObject.image.identifier) |
{ |
widgetCallWithActionParameters( |
"<%=request.getContextPath()%>/user/json/repository.do", |
"replaceRepositoryFileFromTempPrivateDomain", |
{ |
"identifier" : modelObject.image.identifier, |
"fileUploaded" : BacoJS.stringifyOrdered(filesUploadResult.uploadedFiles[0]) |
}, |
"#myApp1", |
function(repositoryFile4JsonView) |
{ |
modelObject.image = repositoryFile4JsonView; |
modelObject.imageUrl = "<%=request.getContextPath()%>/repositoryStream/" + modelObject.image.identifier + "?" + new Date().getTime(); |
delete modelObject.filesUploadResult; |
angular.element($("#myApp1")).scope().$apply(); |
}, |
function(){} |
); |
} |
else |
{ |
widgetCallWithActionParameters( |
"<%=request.getContextPath()%>/user/json/repository.do", |
"saveRepositoryFileFromTempPrivateDomain", |
{ |
"fileUploaded" : BacoJS.stringifyOrdered(filesUploadResult.uploadedFiles[0]) |
}, |
"#myApp1", |
function(repositoryFile4JsonView) |
{ |
modelObject.image = repositoryFile4JsonView; |
modelObject.imageUrl = "<%=request.getContextPath()%>/repositoryStream/" + modelObject.image.identifier + "?" + new Date().getTime(); |
delete modelObject.filesUploadResult; |
angular.element($("#myApp1")).scope().$apply(); |
}, |
function(){} |
); |
} |
} |
}); |
</script> |
<div id="myApp1" ng-app="myApp1" ng-controller="myCtrl1"> |
<div class="web-messages"></div> |
<div class="col-md-6"> |
<div> |
<ul> |
<div ng-repeat="item in dados"> |
<div> |
<div class="row"> |
<div class="form-group"> |
<label class="col-md-4 control-label">Nome</label> |
<div class="col-md-8"> |
<input type="text" class="form-control" ng-model="item.nome"> |
</div> |
</div> |
</div> |
<div class="row"> |
<div class="col-md-4"> |
<a class="btn btn-default" href="#" ng-model="item" |
data-title="Escolha Imagem" |
data-showmetafields="false" |
data-confirmonupload="true" |
data-toggle="modal" |
data-target="#filesUploadModal" |
data-multiple="false" |
data-allowed-extensions="jpg,png,gif" |
data-callback-target-function="angular.element($('#myApp1')).scope().callbackUploadedFiles"> |
Carregar Ficheiros <span class="glyphicon glyphicon-upload"/> |
</a> |
</div> |
<div class="col-md-8"> |
<%--<img ng-if="item.filesUploadResult.uploadedFiles" width="100" ng-src="<%=request.getContextPath()%>/tmpStream/{{item.filesUploadResult.uploadedFiles[0].tmpName}}">--%> |
<div ng-if="item.image.identifier" style="width: 200px;height: 200px" resizable on-resize="resize($evt, $ui)"> |
<img style="width: 100%;height: 100%" ng-src="{{item.imageUrl}}"> |
</div> |
<label ng-if="item.image.identifier">{{item.image.name}}</label> |
<label ng-if="item.image.identifier">{{item.image.size/1024}} KB</label> |
</div> |
</div> |
</div> |
</div> |
</ul> |
</div> |
</div> |
<div class="col-md-6"> |
<pre> |
{{dados | json}} |
</pre> |
</div> |
</div> |
</div> |
<div class="resize-container"> |
<div class="resize-drag"> |
Resize from any edge or corner |
</div> |
</div> |
</body> |
</html> |