Criar um controlo de elemento editável

O controlo de elemento editável é utilizado para tornar os elementos de itens de conteúdo e áreas do sítio editáveis quando apresentados utilizando a portlet de visualizador de conteúdo da Web quando a página se encontra no modo de edição.

[EditableElement type=" " context=" " name=" " key=" " format=" " mode=" " 
     callback=" " stateChangeCallback=" " refreshValueOnEdit=" " class=" " htmlencode=" " placeholder=" "]

[/EditableElement]

1. Faça clique em Inserir um controlo a partir de um modelo de apresentação ou de um campo de concepção de elemento. É apresentada a caixa de diálogo Ajuda de controlos.
2. Seleccione EditableElement como tipo de controlo.
3. Seleccione o tipo de item no qual o elemento é armazenado e o contexto utilizado para determinar o item a referenciar:

   Se não for definido, o tipo de item é content e o contexto é current.

   Tabela 1. Matriz de contexto e tipo de item. Esta tabela descreve o modo como o contexto muda para tipos de itens diferentes.

   Contexto e tipo de item	type="auto"	type="content"	type="sitearea"	type="parent"	type="top"
   context="Selected" Se seleccionado, o contexto é definido pelo item seleccionado. Um item é seleccionado fazendo clique em Seleccionar. Este parâmetro é adicionado ao controlo como parâmetro name=" ":	Este parâmetro torna editável um elemento do item de conteúdo seleccionado quando a página se encontra no modo de edição.	Este parâmetro torna editável um elemento do item de conteúdo seleccionado quando a página se encontra no modo de edição. Se for seleccionada uma área do sítio, nada será editável.	Se o item seleccionado corresponder a uma área do sítio, este parâmetro torna editável o elemento da área do sítio quando a página se encontra no modo de edição. Se o item seleccionado corresponder a um item de conteúdo, este parâmetro torna editável o elemento da área do sítio ascendente do item de conteúdo quando a página se encontrar no modo de edição.	Este parâmetro torna editável um elemento do elemento ascendente do item seleccionado quando a página se encontra no modo de edição.	Este parâmetro torna editável um elemento do primeiro item no caminho do item seleccionado quando a página se encontra no modo de edição.
   context="Current" Se seleccionado, o contexto é definido pelo item actual.	Este parâmetro torna editável um elemento do item que está actualmente a ser apresentado quando a página se encontra no modo de edição.	Este parâmetro torna editável um elemento do item de conteúdo actual quando a página se encontra no modo de edição. Se for seleccionada uma área do sítio, nada será editável.	Se o item que está actualmente a ser apresentado corresponder a uma área do sítio, este parâmetro torna editável o elemento da área do sítio actual quando a página se encontra no modo de edição. Se o item que está actualmente a ser apresentado corresponder a um item de conteúdo, este parâmetro torna editável o elemento da área do sítio ascendente do item de conteúdo quando a página se encontra no modo de edição.	Este parâmetro torna editável um elemento da área do sítio ascendente do item que está actualmente a ser apresentado quando a página se encontra no modo de edição.	Este parâmetro torna editável um elemento do primeiro item no caminho do item que está actualmente a ser apresentado quando a página se encontra no modo de edição.
   context="Autofill" Utilize esta opção quando o elemento a ser referenciado é determinado pelos parâmetros de procura de um componente de menu, navegador ou taxonomia. Se o controlo não for utilizado num componente de menu, navegador ou taxonomia, o contexto reverte para o item actual.	Este parâmetro torna editável um elemento do item devolvido por um componente de menu, navegador ou taxonomia quando a página se encontra no modo de edição.	Este parâmetro torna editável um elemento de um item de conteúdo devolvido por componente de menu, navegador ou taxonomia quando a página se encontra no modo de edição. Se for seleccionada uma área do sítio, nada será editável.	Se o item actual devolvido por um componente de menu, navegador ou taxonomia corresponder a uma área do sítio, o elemento da área do sítio é editável quando a página se encontrar no modo de edição. Se o item actual devolvido por um componente de menu, navegador ou taxonomia corresponder a um item de conteúdo, este parâmetro torna editável o elemento da área do sítio ascendente quando a página se encontra no modo de edição.	Este parâmetro torna editável um elemento do item ascendente do item devolvido por um componente de menu, navegador ou taxonomia quando a página se encontra no modo de edição.	Este parâmetro torna editável um elemento do primeiro item no caminho do item devolvido por componente de menu, navegador ou taxonomia quando a página se encontra no modo de edição.

4. Faça clique em Seleccionar modelo de autoria para seleccionar um modelo de autoria adequado. Seleccione o elemento a tornar editável na lista de elementos disponíveis. Este parâmetro é adicionado ao controlo como parâmetro key=" ".
   Nota: Se tiver seleccionado um tipo de origem da área ascendente, superior ou do sítio, terá de preencher manualmente o parâmetro key=" " na etiqueta de elemento editável, em vez de fazer clique em Seleccionar modelo de autoria.
5. Seleccione se pretende incluir secções iniciais e finais. Pode introduzir texto adicional entre as secções inicial e final do controlo, bem como outros controlos de conteúdo da Web, tais como um controlo de componente ou elemento.
6. Faça clique em OK para adicionar o controlo à concepção do navegador.

Como proceder a seguir

Após ter adicionado o controlo à concepção, também pode adicionar os seguintes parâmetros ao controlo:

Tabela 2. Parâmetros de controlo adicionais. Esta tabela apresenta os parâmetros adicionais que podem ser adicionados manualmente a este controlo.

Parâmetros de controlos	Detalhes
name=" "	Tem de especificar o nome do item a ser referenciado se context="selected". Se especificar name="./itemName", o caminho real não é processado até que o item seja apresentado. Este método demora ligeiramente mais tempo a processar do que especificar o caminho para o item.
format=" "	Se especificar format="div", a região editável é apresentada num controlo div. Se não for especificado qualquer formato, é utilizado um controlo div por predefinição. Se especificar format="span", a região editável é apresentada num controlo span.
mode=" "	Este parâmetro determina o modo de edição incluído. Especifique mode="inplace" para activar a edição no local de um elemento. Nem todos os campos suportam o modo local. Se um elemento não suportar o modo local, é utilizado o modo de caixa de diálogo em alternativa. Especifique mode="embed" para activar a edição incorporada de um elemento. Nem todos os campos suportam o modo incorporado. Se um elemento não suportar o modo de incorporação, é utilizado o modo de caixa de diálogo em alternativa. Especifique mode="dialog" para activar a edição numa caixa de diálogo. Este parâmetro é útil para elementos de maiores dimensões como, por exemplo, elementos de rich text que podem não ser adequados para edição local. Todos os campos suportam o modo de caixa de diálogo. Se não for especificado um modo, é utilizada a predefinição especificada na propriedade inplaceEdit.defaultModeForText ou inplaceEdit.defaultModeForRichText do serviço WCM WCMConfigService. Nota: O editor de rich text predefinido é sempre utilizado com os modos 'inplace' ou 'embed'. Quando é utilizado o modo 'dialog', o editor de rich text seleccionado nas definições da portlet de autoria ou no modelo de conteúdo dos itens de conteúdo é utilizado.
callback=" "	Este parâmetro é utilizado para referenciar uma promessa i$. A promessa é processada se a edição incluída estiver concluída e é rejeitada se a edição incluída tiver sido cancelada. Consulte o Javadoc para obter mais informações sobre as promessas i$. Por exemplo: Uma chamada de retorno padrão pode ser escrita do seguinte modo: var myCallBack=new i$.Promise(); myCallBack.then(function(){window.alert('resolved')}, function(){window.alert('rejected')});return myCallBack; Se myCallBack for uma promessa i$, a chamada de retorno pode ser escrita do seguinte modo:myCallBack. Uma função que devolve uma nova promessa sempre que é executada pode ser escrita do seguinte modo: return (function() {var myCallBack = new i$.Promise(); myCallBack.then(function() {window.alert('resolved');}, function() {window.alert('rejected');}); return myCallBack;})();
stateChangeCallback=" "	Este parâmetro é utilizado para referenciar chamadas de retorno de alteração de estado de JavaScript para todas as alterações de estado. Consulte o Javadoc para obter mais informações. Por exemplo, para especificar stateChangeCallback="myStateChangeCallback", poderá criar a seguinte função de chamada de retorno de alteração de estado. /** * element: id of the current editing element region * state : the new state * additionalData: some additional data like tag type, element name, messages */ function myStateChangeCallback(element, state, additionalData) State Constants: // loading value StateChangeEvent.STATE_LOADING = 0; // editing StateChangeEvent.STATE_EDITING = 1; // saving StateChangeEvent.STATE_SAVING = 2; // saved StateChangeEvent.STATE_SAVED = 3; // cancelled StateChangeEvent.STATE_CANCELLED = 4; // error StateChangeEvent.STATE_ERROR = 5; A função de JavaScript registada é executada sempre que o estado é alterado. Nota: O estado de carregamento é executado apenas na primeira vez em que um utilizador edita o elemento.
refreshValueOnEdit=" "	Esta definição força o valor da etiqueta a ser actualizado quando o elemento é editado por um utilizador. Esta definição está activada por predefinição. Se pretender desactivar esta função, especifique a definição como false. Restrição: Este atributo funciona apenas para elementos de texto, elementos de short text, elementos de números e elementos de rich text. Ao utilizar este parâmetro com um elemento de rich text, não pode utilizar uma referência a uma etiqueta de conteúdo da Web no conteúdo do elemento, uma vez que não é analisada. Se o campo estiver no modo de diálogo ou for qualquer outro tipo de elemento, como, por exemplo, referência de ficheiros ou dados, este valor não tem qualquer efeito. Se definido como false, não existe qualquer estado de carregamento para o elemento.
class=" "	Este parâmetro é utilizado para especificar uma classe CSS para o controlo div ou span especificado através da utilização do parâmetro de formato. Nota: A classe personalizada que especificar aqui tem de incluir estilos com os nomes "saving", "editing" e "error." Estes nomes são necessários para a apresentação do campo editável em modo de edição, ao guardar, e para a apresentação de mensagens de erro. A classe CSS predefinida utilizada para campos editáveis incluídos é wcm-default-inplace-editable. Esta classe pode ser substituída adicionando a seguinte definição no serviço WCM WCMConfigService utilizando a WebSphere Integrated Solutions Console: inplaceEdit.defaultClasses=class1 class2 São adicionadas todas as classes requeridas a esta definição, separadas por espaços. Baseie as classes personalizadas na folha de estilos predefinida, localizada em AppServer_root\installedApps\nodename\wcm.ear\wcm-inplaceEdit.war\css\default-style.css. Nota: Quaisquer classes especificadas no controlo EditableElement ou EditableProperty tem precedência em relação a este valor. Se também necessitar de utilizar a classe CSS predefinida, adicione a mesma à lista de classes. Por exemplo: inplaceEdit.defaultClasses=wcm-default-inplace-editable class1 class2
htmlencode=" "	Se htmlencode="true", s caracteres HTML reservados em elementos que apresentam texto são convertidos em entidades de caracteres. Por exemplo, '<' é convertido em '&lt;'. Este método é útil se pretender impedir que os utilizadores adicionem código malicioso ou que alterem a concepção do respectivo texto utilizando HTML. Se não for especificado, a predefinição especificada pela propriedade cmpnt.htmlEncodeDefault no serviço WCM WCMConfigService para apresentação de texto é utilizada. A predefinição especificada pela propriedade cmpnt.htmlEncodeUrls no serviço WCM WCMConfigService é utilizada para apresentação de URLs. Por predefinição, estas propriedades estão definidas como true.
placeholder=" "	O texto aqui introduzido é apresentado quando não existe qualquer valor inicial para o corpo do campo de elementos editáveis. Por exemplo: placeholder="Enter title" Também pode ser utilizado em conjunto com um fornecedor de texto para apresentar texto traduzido. Por exemplo: placeholder="[Plugin:TextProvider provider="com.mycompany.mybundle" key="enter_title"]" Estes valores especiais são utilizados para apresentar texto de origens existentes: placeholder="useName" Este parâmetro apresenta o nome do elemento. placeholder="useTitle" Este parâmetro apresenta o título do elemento. placeholder="useHelpText" Este parâmetro apresenta o texto de ajuda do elemento. placeholder="useNone" Este parâmetro não apresenta qualquer marcador de posição.

O texto adicional, HTML ou controlos têm de ser adicionados entre os controlos [EditableElement] e [/EditableElement]. O texto e os controlos adicionados aqui correspondem ao conteúdo apresentado na página. Quando a página está no modo de edição, esta região é editável. Quando adicionado pela primeira vez à concepção, um controlo de elemento correspondente é adicionado por predefinição.

Por exemplo, para apresentar um elemento editável denominado body, utilize os seguintes controlos:

[EditableElement type="content" context="current" key="body"]
[Element type="content" context="current" key="body"]
[/EditableElement]

A adição de pre="true" ao controlo de elemento editável força o elemento editável a manter a formatação de linha introduzida pelo utilizador a reter. Por exemplo, se um utilizador introduzir quebras de linha, estas são mantidas quando o campo é guardado. Esta função é apenas aplicável a elementos de texto e short text. Este parâmetro também deve ser adicionado ao controlo de elemento, para que as quebras de linha também sejam apresentadas.

Por exemplo:

[EditableElement type="content" context="current" key="body" pre="true"]
[Element type="content" context="current" key="body" pre="true"]
[/EditableElement]

Nota: As definições de contexto de portalContext e portalMapping não podem ser utilizadas com o controlo de elemento editável. Esta restrição aplica-se ao controlo de elemento editável e a quaisquer outros controlos referenciados entre os controlos [EditableElement] e [/EditableElement].