Personnalisation d'éléments à l'aide de JSP

Une zone 'fichier JSP personnalisé' est accessible sur certains types d'éléments, lorsqu'ils sont ajoutés à un modèle de création. Elle permet de spécifier un fichier JSP en remplacement de la vue par défaut de l'élément dans l'interface utilisateur. Vous pouvez écrire une page JSP pour définir la conception d'un élément et limiter les valeurs qui peuvent être entrées dans cet élément.

Storing JSP files : Les fichiers JSP sont stockées au sein d'une application Web qui s'exécute sur le portail. Pour faire référence à un fichier JSP qui se trouve dans une autre application Web, utilisez le chemin d'accès suivant : contextPath;jspPath. Par exemple: /wps/customapplication;/jsp/jspFilename.jsp.

Une valeur de chemin de contexte dynamique peut être définie en ajoutant un jeton au chemin de contexte qui correspond à une paire clé/valeur au fournisseur d'environnement du service de configuration Web Content Manager. Lorsque cette clé est utilisée comme jeton dans la zone de valeur JSP , elle est remplacée de manière dynamique au moment de l'affichage. Par exemple: [my.custom.key];myfile, où my.custom.key est une constante dans le service de configuration de Web Content Manager.

Custom bean and EditorBean API :

L'API CustomBean and EditorBean se trouve sous com.ibm.workplace.wcm.api.authoring dans Javadoc.

Consultez la documentation Javadoc pour plus d'informations. Les fichiers Javadoc pour Web Content Manager se trouvent dans le répertoire PortalServer_root/doc/Javadoc/spi_docs/com/ibm/workplace/wcm.

Référencement des fichiers jsp

Lorsque vous référencez un fichier JSP dans la zone fichier JSP personnalisé de la vue des propriétés de l'élément, vous pouvez utiliser les formats suivants.

Si le fichier se trouve dans le répertoire ilwwcm-authoring.war/jsp/html de votre serveur, utilisez le format suivant :

AppServer_root/installedApps/node-name/PA_WCM_Authoring_UI.ear/ilwwcm-authoring.war/jsp/html

Remarque : La page JSP est également stockée dans le répertoire war client du portlet de rendu local, du servlet ou du portlet appelant le JSP, si vous utilisez l'API Web Content Manager. Par exemple, pour rendre une page JSP sur un portlet de rendu local, vous devez également stocker une copie du fichier JSP sous AppServer_root/installedApps/node-name/PA_WCMLocalRendering.ear/ilwwcm-localrende.war.

Lorsque le fichier se trouve dans n'importe quelle autre application Web :

contextPath;jspPath: Indique une version de mode d'édition de la zone dans laquelle le fichier JSP se trouve dans une autre application. Par exemple: /wps/customapplication;/jsp/editor.jsp
jspPath: Indique une version de mode d'édition de la zone dans laquelle le fichier JSP se trouve dans la même application que Web Content Manager.
editmode=contextPath;jspPath: Indique une version de mode d'édition de la zone dans laquelle le fichier JSP se trouve dans une autre application.
editmode=jspPath: Indique une version de mode d'édition de la zone dans laquelle le fichier JSP se trouve dans la même application que Web Content Manager.
readmode=contextPath;jspPath: Indique une version de mode de lecture de la zone dans laquelle le fichier JSP se trouve dans une autre application.
readmode=jspPath: Indique une version de mode de lecture de la zone dans laquelle le fichier JSP se trouve dans la même application que Web Content Manager.
readmode=contextPath;jspPath,editmode=contextPath;jspPath: Indique une version de mode d'édition et de lecture de la zone dans laquelle les fichiers JSP se trouvent dans une autre application.
readmode=jspPath,editmode=jspPath: Indique une version de mode d'édition et de lecture de la zone dans laquelle les fichiers JSP se trouvent dans la même application que Web Content Manager.

Exemple d'élément de texte

<%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %>
<%@ page import="com.ibm.workplace.wcm.api.authoring.CustomItemBean" %>

<portletAPI:init />


<% 
    CustomItemBean customItem = 
    (CustomItemBean) request.getAttribute("CustomItemBean"); 
    customItem.setSubmitFunctionName("myoptionsubmit");
    String fvalue = (String)customItem.getFieldValue();
    fvalue = fvalue.replaceAll("\"", "&quot;").replaceAll("\"","&#39;");
%>

<script language='Javascript'>
function myoptionsubmit()
{
document.getElementById('<%=customItem.getFieldName()%>').value = 
document.getElementById('<%=customItem.getFieldName()%>_mycustomoption').value;
}
</script>

<INPUT id='<%=customItem.getFieldName()%>_mycustomoption' value="<%=fvalue%>">

Exemple d'élément de texte enrichi

<%@ page import="com.ibm.workplace.wcm.app.ui.portlet.widget.EditorBean"%>
<%@ taglib uri="/WEB-INF/tld/wcm.tld" prefix="wcm" %>

<% 
   EditorBean editor = (EditorBean) request.getAttribute("EditorBean");
%>

<script language='Javascript'>
function setHtml(id, html) 
{
    document.getElementById(id + "_rte").value = html;
}

function getHtml(id)
{
     return document.getElementById(id + "_rte").value;
}

function setRichTextValue(theText)
{
    document.getElementById('<%= editor.getName()%>_rte').value = theText;
}
</script>

<textarea  cols="85" rows="15" id="<%= editor.getName() %>_rte"></textarea>

<script type="text/javascript">
   var initialValue = document.getElementById('<%= editor.getHiddenContentFieldName() %>_inithtml').value;
   var editorTextArea = document.getElementById('<%= editor.getName()%>_rte');
   editorTextArea.value = initialValue;

   if (initialisedRTEs != null)
   {
      initialisedRTEs = initialisedRTEs + 1;
   }
</script>

Exemple d'élément de sélection d'option personnalisée avec validation

Cet exemple sert à créer une liste de sélection d'options prédéfinies.

<%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %>
<%@ page import="com.ibm.workplace.wcm.api.authoring.CustomItemBean" %>

<portletAPI:init />


<% 
    CustomItemBean customItem = 
    (CustomItemBean) request.getAttribute("CustomItemBean"); 
    customItem.setSubmitFunctionName("mysubmit");
    String fvalue = (String)customItem.getFieldValue();
    fvalue = fvalue.replaceAll("\"", "&quot;").replaceAll("\"","&#39;");
%>

<SELECT id='<%=customItem.getFieldName()%>_mycustom'  >
<OPTION></OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Option1") == 0)  {%>
SELECTED
<% } %>
>Option1</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Option2") == 0)  {%>
SELECTED
<% } %>
>Option2</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Option3") == 0)  {%>
SELECTED
<% } %>
>Option3</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Option4") == 0)  {%>
SELECTED
<% } %>
>Option4</OPTION>
</SELECT>

<script language='Javascript'>
function mysubmit()
{
	var selIndex=document.getElementById('<%=customItem.getFieldName()%>_mycustom').selectedIndex;
	
	if (selIndex <= 0)
	{
		document.getElementById("<%=customItem.getFieldName()%>").value = "";
	}
	else
	{
		document.getElementById("<%=customItem.getFieldName()%>").value = 
			document.getElementById('<%=customItem.getFieldName()%>_mycustom').options[selIndex].text;
	}
}
</script>

Exemple d'élément de date

Cet exemple sert à créer une liste de sélection de dates prédéfinies.

Remarque : Les dates peuvent être sélectionnées, mais pas les heures.

<%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %>
<%@ page import="com.ibm.workplace.wcm.api.authoring.CustomItemBean" %>

<portletAPI:init />


<% 
    CustomItemBean customItem = 
    (CustomItemBean) request.getAttribute("CustomItemBean"); 
    customItem.setSubmitFunctionName("mydatesubmit");
    String fvalue = (String)customItem.getFieldValue();
    fvalue = fvalue.replaceAll("\"", "&quot;").replaceAll("\"","&#39;");
%>

<SELECT id='<%=customItem.getFieldName()%>_mycustomdate'  >
<OPTION></OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Jul 4, 2005") == 0)  {%>
SELECTED
<% } %>
>Jul 4, 2005</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Aug 15, 2005") == 0)  {%>
SELECTED
<% } %>
>Aug 15, 2005</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Dec 25, 2005") == 0)  {%>
SELECTED
<% } %>
>Dec 25, 2005</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Jan 26, 2006") == 0)  {%>
SELECTED
<% } %>
>Jan 26, 2006</OPTION>
</SELECT>



<script language='Javascript'>
function mydatesubmit()
{
var selIndex=document.getElementById('<%=customItem.getFieldName()%>_mycustomdate').selectedIndex;

document.getElementById("<%=customItem.getFieldName()%>").value = 
document.getElementById('<%=customItem.getFieldName()%>_mycustomdate').options[selIndex].text;
}
</script>

Exemple d'élément de nombre

Cet exemple sert à créer une liste de sélection de nombres prédéfinis.

<%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %>
<%@ page import="com.ibm.workplace.wcm.api.authoring.CustomItemBean" %>

<portletAPI:init />


<% 
    CustomItemBean customItem = 
    (CustomItemBean) request.getAttribute("CustomItemBean"); 
    customItem.setSubmitFunctionName("mynumbersubmit");
    String fvalue = (String)customItem.getFieldValue();
    fvalue = fvalue.replaceAll("\"", "&quot;").replaceAll("\"","&#39;");
%>

<SELECT id='<%=customItem.getFieldName()%>_mycustomnumber'  >
<OPTION></OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("6") == 0)  {%>
SELECTED
<% } %>
>6</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("8.5") == 0)  {%>
SELECTED
<% } %>
>8.5</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("12") == 0)  {%>
SELECTED
<% } %>
>12</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("15.45") == 0)  {%>
SELECTED
<% } %>
>15.45</OPTION>
</SELECT>



<script language='Javascript'>
function mynumbersubmit()
{
var selIndex=document.getElementById('<%=customItem.getFieldName()%>_mycustomnumber').selectedIndex;


document.getElementById("<%=customItem.getFieldName()%>").value = 
document.getElementById('<%=customItem.getFieldName()%>_mycustomnumber').options[selIndex].text;
}
</script>

Exemple d'élément de sélection d'utilisateur

Cet exemple sert à créer un champ de saisie du nom d'utilisateur.

<%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %>
<%@ page import="com.ibm.workplace.wcm.api.authoring.CustomItemBean" %>

<portletAPI:init />


<% 
    CustomItemBean customItem = 
    (CustomItemBean) request.getAttribute("CustomItemBean"); 
    customItem.setSubmitFunctionName("myusersubmit");
    String fvalue = (String)customItem.getFieldValue();
    fvalue = fvalue.replaceAll("\"", "&quot;").replaceAll("\"","&#39;");
%>
<script language='Javascript'>
function myusersubmit()
{
document.getElementById('<%=customItem.getFieldName()%>').value = 
document.getElementById('<%=customItem.getFieldName()%>_mycustomuser').value;
}
</script>

<INPUT id='<%=customItem.getFieldName()%>_mycustomuser' value="<%=fvalue%>">