L'ordre L4G TRAITER_PGM *POPUP_MODAL a pour but d'afficher un programme Adélia Web dans une nouvelle fenêtre (ou un nouvel onglet) du navigateur.
Il est possible de modifier le comportement de cet ordre pour que l'affichage du programme appelé se fasse directement dans la page du programme appelant au sein d'une zone définie par l'utilisateur : la "fenêtre cadre".
Cette "fenêtre cadre" est une zone rectangulaire qui s'affiche au dessus du contenu de la page de l'appelant mais qui reste contenue dans cette page : il n'est pas possible de la déplacer en-dehors de cette page.
La modalité est gérée de la même façon qu'un TRAITER_PGM *POPUP_MODAL classique : il n'est pas possible d'interagir sur les contrôles graphiques de la page de l'appelant tant que la "fenêtre cadre" n'est pas fermée (via l'ordre L4G TERMINER). De plus, lorsque la "fenêtre cadre" s'affiche, la page de l'appelant s'assombrie.
ATTENTION : Il n'est pas possible d'avoir la même fonctionnalité pour un TRAITER_PGM *POPUP car l'affichage du programme appelé se fait dans la page de l'appelant : si celui est terminé alors l'appelé disparaîtra.
Techniquement, le flux HTTP retourné lors de l'appel au TRAITER_PGM *POPUP_MODAL est interprété par une balise IFRAME qui est automatiquement insérée dans la page de l'appelant : Cette IFRAME est elle même insérée dans un cadre (balise DIV) crée à l'exécution et permettant de définir l’allure de la "fenêtre cadre".
Pour utiliser cette fonctionnalité, les modifications à faire sur l'existant sont :
1) Dans le L4G du programme appelant, rajouter 'awsLB=true' aux paramètres de *POPUP_MODAL comme suit :
TRAITER_PGM LIGHTBOX_POPUP *POPUP_MODAL('awsLB=true')
Compatibilité avec les autres paramètres de *POPUP_MODAL :
Si d'autres paramètres sont présents (Cf. l’aide en ligne "Attributs de paramétrage pour l'ouverture d'une fenêtre Popup"), seuls les paramètres "height" et "width" sont repris pour dimensionner le cadre contenant l'IFRAME.
Nouveaux paramètres spécifiques à cette fonctionnalité :
Il est possible de rajouter d'autres paramètres optionnels (en utilisant la même syntaxe que celle décrite dans l'aide en ligne) permettant de spécifier le comportement d'affichage de la "fenêtre cadre" :
- awsLBIfrCtn=<Valeur de l'attribut ID du DIV conteneur de l'IFRAME>.
Par défaut, la "fenêtre cadre" est simplement constituée d'une balise conteneur DIV de valeur d'attribut ID "awsDivLB" contenant une IFRAME de valeur d'attribut ID "awsIfrLightBox". Il est possible de spécifier sa propre balise conteneur DIV (par exemple pour définir une barre de titre avec un bouton de fermeture) : La valeur de l'attribut ID de ce conteneur doit être spécifiée comme valeur du paramètre "awsLBIfrCtn",
- awsLBIfrPos=<Valeur de l'attribut ID d'un descendant de awsLBIfrCtn>#<Position d'insertion de l'IFRAME>
Si ce paramètre n'est pas défini, l'IFRAME est insérée après la dernière balise fille de awsLBIfrCtn (s'il n'y a pas de fils, l'IFRAME devient le premier fils).
Ce paramètre permet de décrire la position d'insertion de l'IFRAME dans awsLBIfrCtn si celui-ci est défini. Deux informations sont nécessaires pour le décrire :
- <Valeur de l'attribut ID d'un descendant de awsLBIfrCtn> : identifie une balise HTML référence pour l'insertion,
- <Position d'insertion de l'IFRAME> : Valeur numérique
- 0 : l'IFRAME est insérée après le dernier fils du composant référence,
- 1 : l'IFRAME est insérée avant le composant référence (et devient frère du composant référence),
- 2 : l'IFRAME est insérée après le composant référence (et devient frère du composant référence)
- awsLBTitleCtn=<Valeur de l'attribut ID du conteneur contenant le titre de la "fenêtre cadre" (valeur de la balise TITLE de la maquette du programme appelé)
Ce paramètre permet de spécifier une balise qui contiendra le titre du programme appelé (le titre de la fenêtre dans le cas d'un TRAITER_PGM *POPUP_MODAL classique).
- awsLBCenterX=true : centre la "fenêtre cadre" suivant l'axe des X dans la fenêtre appelante,
- awsLBCenterY=true : centre la "fenêtre cadre" suivant l'axe des Y dans la fenêtre appelante.
2) Dans la maquette HTML du programme appelant :
· Insérer ce fichier Javascript à l'aide d'une balise SCRIPT dans le HEAD de la maquette : <script src=".../AWSLightBox.js" type="text/javascript"></script>
· Si l'utilisateur a spécifié son propre conteneur de "fenêtre cadre" (paramètre awsLBIfrCtn) alors insérer une balise DIV servant de conteneur et lui spécifier une valeur d'attribut ID : <div id="myContainer"></div>
· Si l'utilisateur a spécifié un conteneur de titre (paramètre awsLBTitleCtn) alors insérer une balise HTML conteneur et lui spécifier une valeur d'attribut ID : <div id="myContainer"><div id="myTitle"></div></div>
· Insérer dans la feuille de style liée à la page de l'appelant ou dans une balise STYLE placée dans le HEAD les classes CSS suivantes :
/* Classe CSS pour le fond de la page appelante servant à l'assombrir lorsque la "fenêtre cadre" est affichée */
#awsDivOverlay {
background-color:#000000; /* couleur d'assombrissement */
filter:alpha(opacity=70); /* niveau de transparence pour IE */
opacity:0.7; /* niveau de transparence pour Firefox, Chrome */
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
z-index:999;
}
/* Classe CSS de l'IFRAME */
#awsIfrLightBox
{
width:100%;
height:100%;
}
/* Classe CSS du conteneur s'il s'agit d'un conteneur spécifié par l'utilisateur (paramètre awsLBIfrCtn) */
#myContainer {
position:absolute;
top:200px; /* non utilisé si le paramètre awsLBCenterY=true est spécifié */
left:200px; /* non utilisé si le paramètre awsLBCenterX=true est spécifié */
width:400px; /* non utilisé si le paramètre width=XXX est spécifié */
height:300px; /* non utilisé si le paramètre height=XXX est spécifié */
z-index:1000; /* toujours supérieur au z-index défini dans #awsDivOverlay */
display:none;
}
/* Classe CSS du conteneur par défaut si aucun conteneur n'a été spécifié par l'utilisateur (paramètre awsLBIfrCtn) */
#awsDivLB {
background-color:#CCFF00;
position:absolute;
top:200px; /* non utilisé si le paramètre awsLBCenterY=true est spécifié */
left:200px; /* non utilisé si le paramètre awsLBCenterX=true est spécifié */
width:400px; /* non utilisé si le paramètre width=XXX est spécifié */
height:300px; /* non utilisé si le paramètre height=XXX est spécifié */
z-index:1000; /* toujours supérieur au z-index défini dans #awsDivOverlay */
}
3) Dans le L4G du programme appelé (programme en popup) :
Si l'ordre TERMINER est exécuté dans un événement Ajax alors sauter ce point.
Si l'ordre TERMINER est exécuté dans un événement non Ajax, alors rajouter l'instruction SAUVER_CTX 'AWS_LBOX_TERMINATE' 'REQUEST' flag (où flag est une variable booléenne fixée à *VRAI) juste avant l'ordre TERMINER.
Attention : la chaîne AWS_LBOX_TERMINATE doit être écrite en majuscule.
4) Dans la maquette HTML du programme appelé (programme en popup) :
Par défaut, l'IFRAME est créée avec une couleur de fond transparente. Si l'utilisateur veut que la couleur de fond de la "fenêtre cadre" soit la couleur de fond du conteneur alors il doit rajouter l'attribut bgcolor="transparent" à la balise BODY de la maquette de la page du programme appelé (sinon la couleur de fond sera la couleur système blanche).
5) Dans le web.xml de l'application Adélia Web :
Si l'ordre TERMINER dans le L4G du programme appelé (programme en popup) est exécuté dans un événement Ajax alors sauter ce point.
a) Si dans le L4G du programme appelé, l'ordre TERMINER est exécuté dans un événement non Ajax, alors il faut rajouter dans le fichier \WEB-INF\web.xml la définition suivante :
<filter> <filter-name>AWSLightboxFilter</filter-name> <filter-class>AWSLightboxFilter</filter-class> </filter>
et rajouter :
<filter-mapping> <filter-name>AWSLightboxFilter</filter-name> <url-pattern>*.jsp</url-pattern> </filter-mapping>
b) De plus, il faut copier deux fichiers .class dans le répertoire WEB-INF\classes :
AWSLightboxFilter$CharResponseWrapper.class
Ressources :
Fichier source Java : AWSLightboxFilter.java
Fichier AWSLightBox.js non compressé : AWSLightBox-noncompressé.js
Articles connexes
Commentaire
Utilisateur inconnu (jparis) dit :
Bonjour,
Impeccable. Solution mise en place à SOGECAP dans le cadre d'affichage d'écran d'aide.
Petite remarque sur les paramètres optionnels : il ne faut pas d'espace entre la "virgule" et le paramètre suivant. Autrement le script prend en compte cet espace et le nom du paramètre contient alors cet espace en 1ère position. Il n'est donc pas reconnu.
TRAITER_PGM MonPGM_LIGHTBOX *POPUP_MODAL('awsLB=true,awsLBCenterX=true').
A l'intérieur de cet écran, nous avons ajouté une iFrame où son affichage est piloté par une servlet externe : <IFRAME src="::ZW_LIB_IFRAME" frameBorder="0" class="modalIframeAide"/>. Pour le projet, l'aide est en mode participatif et géré via "vignette".
Merci pour cet article.