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 l'apparence d'un élément et limiter les valeurs qui peuvent être entrées dans cet élément.

Stockage des fichiers JSP :

Les fichiers JSP se trouvent :

  • dans le répertoire was_profile_root/installedApps/node-name/wcm.ear/ilwwcm.war de votre serveur.

    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 Management. Par exemple, pour rendre une page JSP sur un portlet de rendu local, vous devez également stocker une copie du fichier JSP sous was_profile_root/installedApps/node-name/PA_WCMLocalRendering.ear/ilwwcm-localrende.war.

  • dans toute autre application Web exécutée sur le portail. Lors du référencement des fichiers JSP dans une autre application Web, utilisez le chemin d'accès suivant : contextPath;jspPath.

    Par exemple : /wps/customapplication;/jsp/editor.jsp

Bean personnalisé et API EditorBean :

Le bean personnalisé et l'API EditorBean sont disponibles sous com.ibm.workplace.wcm.api.authoring dans le document Java sous le dossier was_profile_root\installedApps\nodename\wcm.ear\ilwwcm.war\webinterface\.

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.war de votre serveur, utilisez le format suivant :

was_profile_root/installedApps/node-name/wcm.ear/ilwwcm.war

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 Management. Par exemple, pour rendre une page JSP sur un portlet de rendu local, vous devez également stocker une copie du fichier JSP sous was_profile_root/installedApps/node-name/PA_WCMLocalRendering.ear/ilwwcm-localrende.war.
Lorsque le fichier se trouve dans n'importe quelle autre application Web exécutée sur le portail :
contextPath;jspPath
Indique une version de mode d'édition de la zone dans laquelle se trouve le fichier JSP dans une autre application. Par exemple : /wps/customapplication;/jsp/editor.jsp
jspPath
Indique une version de mode d'édition de la zone dans laquelle se trouve le fichier JSP dans la même application que Web Content Management.
editmode=contextPath;jspPath
Indique une version de mode d'édition de la zone dans laquelle se trouve le fichier JSP dans une autre application.
editmode=jspPath
Indique une version de mode d'édition de la zone dans laquelle se trouve le fichier JSP dans la même application que Web Content Management.
readmode=contextPath;jspPath
Indique une version de mode de lecture de la zone dans laquelle se trouve le fichier JSP dans une autre application.
readmode=jspPath
Indique une version de mode de lecture de la zone dans laquelle se trouve le fichier JSP dans la même application que Web Content Management.
readmode=contextPath;jspPath,editmode=contextPath;jspPath
Indique une version de mode d'édition et de lecture de la zone dans laquelle se trouvent les fichiers JSP dans une autre application.
readmode=jspPath,editmode=jspPath
Indique une version de mode d'édition et de lecture de la zone dans laquelle se trouvent les fichiers JSP dans la même application que Web Content Management.

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 : Seules les dates peuvent être sélectionnées, non 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%>">










Sujet parent : Création d'un modèle de création


Sujet précédent : Définition des paramètres d'affichage des zones et des éléments