[JAVA] Représentation modale des transitions de page de service Web [Development Memo]
introduction
Quand j'ai créé Tobidemo, comme clé de la fonction Je note comment implémenter l'écran d'édition qui crée la transition d'écran de la page.
introduction
Afin d'exprimer la transition de page du service Web, les captures d'écran sont connectées de manière modale et affichées. Cet écran peut tout être créé à partir de l'interface graphique.
Flux global
- Placez une fenêtre contextuelle
- Cliquez sur le bouton d'édition de l'icône contextuelle
- Un nouvel élément HTML est généré. Affichage: aucun; sauf pour la hiérarchie d'affichage
- Dites-moi le bouton Enregistrer et enregistrez avec Ajax.
Au début, j'étais inquiet parce que je ne pouvais pas penser à un moyen de le réaliser. Vu plus tard, c'est assez simple! Les principaux points sont présentés ci-dessous.
Remarque au moment de l'invention:
Modifier la conception de l'écran
Pour modifier les transitions de page, ajoutez des éléments HTML si nécessaire En dehors de cela, j'ai défini display: none; afin de pouvoir modifier l'interaction avec le côté serveur avec un minimum de stress. Voici les éléments qui sont réellement générés.
Au départ, je n'avais pas cette idée, et je pensais à une implémentation qui stocke de manière asynchrone les données existantes à mesure que le nombre de pages augmente. Une requête est générée pour chaque transition de page, et lors du retour à la hiérarchie précédente et de l'édition à nouveau, Je dois prendre des informations de la base de données et les redessiner, et cela prend du temps à mettre en œuvre, donc je pense que l'ancienne implémentation était la bonne réponse même maintenant.
python
//Créez l'élément à afficher
$('.edit_popup_target')
.on(
'click',
function() {
var _this = $('.flag_now_edit');
var page_level_num = TRANSITION_MANAGER[TRANSITION_MANAGER.length - 1];
var page_level = page_level_num.slice(0, 1);
var next_page_level = Number(page_level) + 1;
var page_num = page_level_num.slice(2, 3);
var next_page_num = $('[data-dropzone^="'
+ next_page_level + '"]').length;
if ($(_this).attr("data-popuptarget") == undefined) {
if (next_page_num != 0) {
next_page_num += 1;
} else {
next_page_num = 1;
}
var this_dropzone_id = page_level + "." + page_num;
var next_dropzone_id = next_page_level + "."
+ next_page_num;
$('.mapEreaWrapper')
.append(
'<div class="maperea" data-dropzone="'
+ next_dropzone_id
+ '"><img src ="./../../img/default-none.png "></div>');
$(_this).attr("data-popuptarget", next_dropzone_id);
Conception de gestion hiérarchique
Chaque page contient les informations suivantes.
- numéro de page
- Numéro de page cible de la transition --Informations sur les éléments (expliquez l'écran comme les mémos)
- image de fond
Le numéro de page commence à partir de 1.1 et augmente à 1.2 et 1.3 dans la même hiérarchie. Dans la nouvelle hiérarchie, le nombre au début est remonté comme 2.1, suivi de 2.1,2,2. Les éléments de la page sont numérotés séquentiellement après le numéro de page, par exemple 2.1.1, 2.1.2,.
Sur la base de ce numéro de contrôle, les données enregistrées seront redessinées.
Mise en place du bouton retour
Puisqu'il s'agit d'un écran d'édition, vous devez revenir à l'écran précédent!
À la suite de me tordre la tête, en écrivant le numéro de page dans le tableau lors du déplacement de pages, Il gère l'historique des transitions de page.
// ------------Variables globales--------------
TRANSITION_MANAGER = [ '1.1' ]; //Localisation actuelle TRANSITION_MANAGER[TRANSITION_MANAGER.length
// - 1]
// ---------------------------------------
Par exemple, lors du renvoi d'une page, les données sont acquises à partir du tableau de gestion de page (TRANSITION_MANAGER) comme indiqué ci-dessous.
//Reculer d'une page
$('.backToBeforePage')
.on(
'click',
function() {
if (TRANSITION_MANAGER.length != 1) {
$(
'[data-dropzone="'
+ TRANSITION_MANAGER[TRANSITION_MANAGER.length - 1]
+ '"]').hide();
$(
'[data-dropzone="'
+ TRANSITION_MANAGER[TRANSITION_MANAGER.length - 2]
+ '"]').show();
// ACTIVE_PAGE_NUMBER =
// TRANSITION_MANAGER[TRANSITION_MANAGER.length-2];
TRANSITION_MANAGER.pop();
changePageTransitionView();
}
;
return false;
});
Stockage de données
- numéro de page
- Numéro de page cible de la transition --Informations sur les éléments (expliquez l'écran comme les mémos)
- image de fond
Etc. sont enregistrés à la fois avec Ajax. Je pense que j'ai pu l'envoyer proprement quand je l'ai imbriqué.
Si vous préparez un bean correspondant aux données Json, Spring Boot le recevra bien. Je ne savais pas comment exprimer la structure imbriquée, donc je voulais envoyer seulement quelques éléments comme indiqué ci-dessous. Tous les articles préparés par Bean sont préparés. Mes cheveux arrière sont tirés, mais cette fois j'ai abandonné parce qu'il y avait une solution de contournement.
J'avais également l'intention d'écrire un processus pour mettre à jour les données enregistrées, Dans Spring boot, si les informations spécifiées dans la clé du côté table de la base de données correspondent Puisqu'il est mis à jour avec les mêmes données, j'ai pu l'implémenter sans le vouloir.
item_stat_array.push({
id : linkid + "_" + dropzone,
type : "drop-zone", // common
itemid : "0", // common
top : "0", // common
left : "0", // common
color : "0", // common
size : "0", // popup,tooltip
title : "0", // tooltip
target : "0", // popup
width : "0", // sticky
height : "0", // sticky
text : "0", // sticky
dropzone : dropzone, // dropzpne
img : img
// dropzone
C'est un peu long, mais le texte intégral ci-dessous.
$(document)
.on(
'submit',
".save_to_server",
function(e) {
e.preventDefault();
$(".maperea").show(); // disply:aucun n'est top,Je ne peux pas partir
var demoname = $('.demo-name-val').val();
if (demoname === undefined || demoname === null | demoname.replace(/[\t\s ]/g, '').length < 1){
demoname = "-";
}
var item_stat_array = [];
var maperea_array = $('.maperea');
var maperea_leng = $('.maperea').length;
$(maperea_array[i]).attr('data-dropzone');
var linkid = $('#linkid').text();
var xsrf = $.cookie('XSRF-TOKEN');
for (var i = 0; i < maperea_leng; i++) {
var dropzone = $(maperea_array[i]).attr(
'data-dropzone');
var img = $(maperea_array[i]).attr('data-img')
if (img === undefined || img === null) {
img = "0";
}
// var id = linkid + "_" +dropzone; //Clé primaire lors de l'enregistrement de la base de données
item_stat_array.push({
id : linkid + "_" + dropzone,
type : "drop-zone", // common
itemid : "0", // common
top : "0", // common
left : "0", // common
color : "0", // common
size : "0", // popup,tooltip
title : "0", // tooltip
target : "0", // popup
width : "0", // sticky
height : "0", // sticky
text : "0", // sticky
dropzone : dropzone, // dropzpne
img : img
// dropzone
});
}
var targetArray = $('.dropped');
var item_num = targetArray.length;
item_num - 1;
for (var i = 0; i < item_num; i++) {
var target = targetArray[i];
if (target.className.indexOf('_tooltip') != -1) {
var itemid = $(target).attr("data-item");
var top = $(target).position().top;
var left = $(target).position().left;
var color = $(target).attr(
"data-tooltipIconColor");
var size = $(target).attr(
"data-tooltipIconSize");
var title = $(target).attr("title");
// var id = linkid + "_" + itemid;
// //Clé primaire lors de l'enregistrement de la base de données
item_stat_array.push({
id : linkid + "_" + itemid,
type : "_tooltip", // common
itemid : itemid, // common
top : top, // common
left : left, // common
color : color, // common
size : size, // popup,tooltip
title : title, // tooltip
target : "0", // popup
width : "0", // sticky
height : "0", // sticky
text : "0", // sticky
dropzone : "0", // dropzpne
img : img
// dropzone
});
} else if (target.className.indexOf('_popup') != -1) {
var top = $(target).position().top;
var left = $(target).position().left;
var itemid = $(target).attr("data-item");
var color = $(target).attr("data-popupColor");
var size = $(target).attr("data-popupSize");
var target = $(target).attr("data-popuptarget");
item_stat_array.push({
id : linkid + "_" + itemid,
type : "_popup", // common
itemid : itemid, // common
top : top, // common
left : left, // common
color : color, // common
size : size, // popup,tooltip
title : "0", // tooltip
target : target, // popup
width : "0", // sticky
height : "0", // sticky
text : "0", // sticky
dropzone : "0", // dropzpne
img : img
// dropzone
});
} else if (target.className.indexOf('_sticky') != -1) {
var top = $(target).position().top;
var left = $(target).position().left;
var width = $(target).width();
var height = $(target).height();
var itemid = $(target).attr("data-item");
var color = $(target).attr("data-stickycolor");
var text = $(target).children(".textsticky")
.val();
item_stat_array.push({
id : linkid + "_" + itemid,
type : "_sticky", // common
itemid : itemid, // common
top : top, // common
left : left, // common
color : color, // common
size : "0", // popup,tooltip
title : "0", // tooltip
target : "0", // popup
width : width, // sticky
height : height, // sticky
text : text, // sticky
dropzone : "0", // dropzpne
img : img
// dropzone
});
}
}
$(".maperea").hide();
$(
'[data-dropzone="'
+ TRANSITION_MANAGER[TRANSITION_MANAGER.length - 1]
+ '"]').show();
if (window.FormData) {
var ajaxUrl = "/edit/uploaditemstat" + "?name=" + demoname ;
$
.ajax(
{
type : "POST", //Type de communication HTTP
url : ajaxUrl, //URL à laquelle envoyer la demande
dataType : "json", //Type de données renvoyées par le serveur
data : JSON
.stringify(item_stat_array),
contentType : 'application/json; charset=utf-8',
"beforeSend": function(xhr, setting) {
$(".btn").attr('disabled', true);
$(".item-uploading-animation").removeClass("nodispy");
},
headers : {
'X-XSRF-TOKEN' : xsrf
},
})
.done(
function(data) { //Traitement lorsque la communication Ajax est réussie
var yourLink = "/show?id=";
var yourLinkID = $("#linkid")
.text();
var demoname = $(".demo-name-val").val();
if(demoname==null ||demoname== "") {demoname = "Démo Tobi sans titre"}
$(".yourLink").attr("href",
yourLink + yourLinkID);
$(".yourLink").text(
demoname);
$(".yourLink").attr('target',
'_blank');
$('.upload-item-done').slideDown(1500);
$(".btn").attr('disabled', false);
$(".item-uploading-animation").addClass("nodispy");
}).fail(
function(XMLHttpRequest,
textStatus, errorThrown) { //Traitement en cas d'échec de la communication Ajax
$(".btn").attr('disabled', false);
$(".item-uploading-animation").addClass("nodispy");
$('.upload-item-failed').slideDown(1500);
return false;
});
} else {
alert("C'est un navigateur qui ne prend pas en charge le téléchargement.");
}
});
Résumé
c'est tout!
En plus de ce que j'ai écrit ici, j'ai également ajouté des détails tels que les coordonnées des éléments et le dessin d'écran. Cela a pris quelques semaines. Cependant, au début, je pensais que ce serait impossible, mais je peux le faire!