Assistência ao utilizador para autores de conteúdo

Personalizar elementos com JSP

Um campo "JSP personalizada" está disponível em alguns tipos de elementos, quando adicionados a um modelo de autoria. Este campo pode ser utilizado para fazer referência a um ficheiro JSP a utilizar, em detrimento da vista predefinida do elemento na interface do utilizador. É possível introduzir JSP para controlar a concepção de um elemento, bem como para restringir os valores que podem ser introduzidos no mesmo.

Armazenar ficheiros JSP: Os ficheiros JSP são armazenados numa aplicação da Web que é executada no portal. Para fazer referência a um ficheiro JSP noutra aplicação da Web, utilize o seguinte caminho: contextPath;jspPath. Por exemplo: /wps/customapplication;/jsp/jspFilename.jsp.

Um valor de caminho de contexto dinâmico pode ser definido ao adicionar um símbolo ao caminho de contexto que corresponde a um par de chave e valor no fornecedor de ambiente de serviço do Web Content Manager. Quando esta chave é utilizada como o símbolo no campo de valor jsp, é substituído de forma dinâmica no momento de composição. Por exemplo: [my.custom.key];myfile, em que my.custom.key corresponde a uma constante no serviço de configuração do Web Content Manager.

API CustomBean e EditorBean:

A API CustomBean e EditorBean pode ser encontrada em com.ibm.workplace.wcm.api.authoring no Javadoc.

Consulte a documentação de Javadoc para obter mais informações. Os ficheiros Javadoc do Web Content Manager encontram-se no directório PortalServer_root/doc/Javadoc/spi_docs/com/ibm/workplace/wcm.

Fazer referência a ficheiros jsp

Ao referenciar um ficheiro JSP no campo JSP personalizado da vista de propriedades do elemento, pode utilizar os seguintes formatos.

Quando localizado no directório ilwwcm-authoring.war/jsp/html do servidor, utilize este formato:

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

Nota: A página JSP também é armazenada no directório war do cliente da portlet de apresentação local ou da servlet ou que invoca a JSP, se for utilizada a API do Web Content Manager. Por exemplo, para apresentar uma página JSP numa portlet de apresentação local, também teria de armazenar uma cópia do ficheiro JSP em AppServer_root/installedApps/node-name/PA_WCMLocalRendering.ear/ilwwcm-localrende.war.

Quando localizado em qualquer outra aplicação da Web:

contextPath;jspPath: Especifica uma versão de modo de edição do campo onde o JSP está localizado noutra aplicação. Por exemplo: /wps/customapplication;/jsp/editor.jsp
jspPath: Especifica uma versão de modo de edição do campo onde o JSP está localizado na mesma aplicação do que o Web Content Manager.
editmode=contextPath;jspPath: Especifica uma versão de modo de edição do campo onde o JSP está localizado noutra aplicação.
editmode=jspPath: Especifica uma versão de modo de edição do campo onde o JSP está localizado na mesma aplicação do que o Web Content Manager.
readmode=contextPath;jspPath: Especifica uma versão de modo de leitura do campo onde o JSP está localizado noutra aplicação.
readmode=jspPath: Especifica uma versão de modo de leitura do campo onde o JSP está localizado na mesma aplicação do que o Web Content Manager.
readmode=contextPath;jspPath,editmode=contextPath;jspPath: Especifica uma versão de modo de edição e de modo de leitura do campo onde os JSPs estão localizados noutra aplicação.
readmode=jspPath,editmode=jspPath: Especifica uma versão de modo de edição e de modo de leitura do campo onde os JSPs estão localizados na mesma aplicação do que o Web Content Manager.

Exemplo de elemento de texto

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

Exemplo de elemento de 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>

Exemplo do elemento de selecção de opções predefinidas com validação

Este exemplo é utilizado para criar de selecção de opções predefinidas.

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

Exemplo de elemento de data

Este exemplo é utilizado para criar uma lista de selecção de datas predefinidas.

Nota: Apenas podem ser seleccionadas datas e não horas.

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

Exemplo de elemento de número

Este exemplo é utilizado para criar uma lista de selecção de números predefinidos.

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

Exemplo de elemento de selecção de utilizadores

Este exemplo é utilizado para criar um campo para introdução de um nome do utilizador.

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