Subversion Repositories bacoAlunos

Compare Revisions

Ignore whitespace Rev 1814 → Rev 1830

/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>