Personalizzazione degli elementi mediante JSP

Un campo "JSP personalizzato" è disponibile su alcuni tipi di elementi quando vengono aggiunti a un template di sviluppo. Utilizzare tale campo per fare riferimento a un file JSP da utilizzare al posto della vista predefinita dell'elemento nell'interfaccia utente. È possibile scrivere JSP per controllare l'aspetto di un elemento e per limitare i valori che è possibile immettere in un elemento.

Memorizzazione dei file JSP:

I file JSP si possono trovare:

nella directory was_profile_root/installedApps/node-name/wcm.ear/ilwwcm.war del server.
la pagina JSP deve essere memorizzata anche nella directory war del client del servlet o del portlet di rendering locale o del portlet che richiama il file JSP, se si utilizza l'API Web Content Manager. Ad esempio, per effettuare il rendering di una pagina JSP in un portlet di rendering locale, è anche necessario memorizzare una copia del file JSP in was_profile_root/installedApps/node-name/PA_WCMLocalRendering.ear/ilwwcm-localrende.war
in qualsiasi altra applicazione Web in esecuzione sul portale. Quando si fa riferimento a file JSP di un'altra applicazione Web, utilizzare il seguente percorso: contextPath;jspPath
Ad esempio: /wps/customapplication;/jsp/editor.jsp

API CustomBean ed EditorBean:

Le API CustomBean e EditorBean API si trovano in com.ibm.workplace.wcm.api.authoring nel JavaDoc presente nella cartella was_profile_root\installedApps\nodename\wcm.ear\ilwwcm.war\webinterface\.

Riferimenti ai file JSP

Quando si fa riferimento a un file JSP nel campo JSP personalizzato della vista proprietà dell'elemento, è possibile utilizzare i formati seguenti.

Quando si trova nella directory ilwwcm.war del server, utilizzare questo formato

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

Nota: la pagina JSP deve essere memorizzata anche nella directory war del client del servlet o del portlet di rendering locale o del portlet che richiama il file JSP, se si utilizza l'API Web Content Manager. Ad esempio, per effettuare il rendering di una pagina JSP in un portlet di rendering locale, è anche necessario memorizzare una copia del file JSP in was_profile_root/installedApps/node-name/PA_WCMLocalRendering.ear/ilwwcm-localrende.war

Quando si trova in qualsiasi altra applicazione Web in esecuzione sul portale

contextPath;jspPath: Specifica una versione in modalità di modifica del campo in cui il JSP si trova in un'altra applicazione. Ad esempio: /wps/customapplication;/jsp/editor.jsp
jspPath: Specifica una versione in modalità di modifica del campo in cui il JSP si trova nella stessa applicazione di Web Content Manager.
editmode=contextPath;jspPath: Specifica una versione in modalità di modifica del campo in cui il JSP si trova in un'altra applicazione.
editmode=jspPath: Specifica una versione in modalità di modifica del campo in cui il JSP si trova nella stessa applicazione di Web Content Manager.
readmode=contextPath;jspPath: Specifica una versione in modalità di lettura del campo in cui il JSP si trova in un'altra applicazione.
readmode=jspPath: Specifica una versione in modalità di lettura del campo in cui il JSP si trova nella stessa applicazione di Web Content Manager.
readmode=contextPath;jspPath,editmode=contextPath;jspPath: Specifica una versione in modalità di modifica e di lettura del campo in cui i JSP si trovano in un'altra applicazione.
readmode=jspPath,editmode=jspPath: Specifica una versione in modalità di modifica e di lettura del campo in cui i JSP si trovano nella stessa applicazione di Web Content Manager.

Esempio di elemento di testo

<%@ 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%>">

Esempio di elemento Rich Text

<%@ 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>

Esempio di elemento selezione opzioni personalizzato con convalida

Questo esempio viene utilizzato per creare un elenco di selezione di opzioni predefinite.

<%@ 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>

Esempio di un elemento data

Questo esempio viene utilizzato per creare un elenco di selezione di date predefinite.

Nota: è possibile selezionare solo le date, non le ore.

<%@ 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>

Esempio di un elemento numero

Questo esempio viene utilizzato per creare un elenco di selezione di numeri predefiniti.

<%@ 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>

Esempio di un elemento selezione utente

Questo esempio viene utilizzato per creare un campo in cui immettere un nome utente.

<%@ 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%>">