Entender manifest.xml
O manifest.xml é o arquivo de configuração do widget, é obrigatório. Através dele definem-se dados como a tag do widget, parâmetros, template principal entre outros.
Estrutura
<?xml version="1.0" encoding="utf-8" ?>
<package>
<widgets>
<!-- Validar se não tem caracteres estranhos no campo "tagName" -->
<!-- Validar, deve ter um componentRef, se não tiver, então o default "WidgetComponent" deve ser utilizado -->
<!-- Se o campo "folder" está vazio, então deve ser utilizado "tagName" como o nome da pasta -->
<!-- Para não ficar repetindo os paths, fazer com que os campos "icon" e "template" procurem dentro da pasta folder, e não achar procura no zip -->
<widget
category="general"
component="WidgetComponent"
description="Exemplo de plugin"
folder="my.widget"
icon="my.widget\image\icon.gif"
isPreLoad="False"
jsHandler="MyWidget"
tagName="my_widget"
template="wd.my.widget.template"
title="Exemplo de plugin"
widgetName="Exemplo de plugin"
>
<!-- <property defaultValue="valor default" friendlyName="Propriedade 1" name="Prop1" required="false" type="Text" visibility="Server" />
<property defaultValue="" friendlyName="Propriedade 2" name="Prop2" required="false" type="Number" visibility="Server" />
<property defaultValue="" friendlyName="Propriedade 3" name="Prop3" required="true" type="Enum" visibility="Client">
<options>
<option friendlyName="option 1" value="1" />
<option friendlyName="option 2" value="2" />
<option friendlyName="option 3" value="3" />
</options>
</property> -->
<include relativePath="Scripts/wd.my.widget.js" type="Javascript" />
<include relativePath="Styles/wd.my.widget.css" type="StyleSheet" />
</widget>
</widgets>
</package>
Informações principais
category: categoria do widget. O valor padrão é "general"
component: componente de dados do widget. Veja aqui mais detalhes
description: Breve descrição do widget
folder: nome da pasta do widget. Este nome é utilizado para clonar a pasta do widget e customizar os templates dentro do tema. Veja mais detalhes aqui
icon: ícone usado apenas dentro do painel administrativo da plataforma
isPreLoad: seu valor padrão é "true". Esta propriedade ficará obsoleta
jsHandler: nome (único) de registro do widget para o JavaScript. Caso seja utilizado um valor incorreto, o script do widget que depende desse manipulador não executará
tagName: tag utilizada para chamar o widget via liquid dentro do template. Estrutura recomendada: nome_do_widget em letras minúsculas, sem caracteres especiais e com termos separados por _ (underline)
template: nome do template principal. Sempre termina com .template
title: título do widget
widgetName: nome do widget
Propriedades
defaultValue: valor padrão da propriedade
frieldlyName: nome amigável da propriedade. É exibido ao incluir widgets em áreas pelo Configurar Design
name: nome utilizado para chamar o parâmetro via liquid no template
required: indica se o parâmetro é obrigatório
type: tipo do parâmetro. Pode ser "Text" (Texto), "Number" (Número), "Boolean" (true ou false) ou "Enum" (lista de opções)
visibility: visibilidade do parâmetro. Pode ser "Client" (acessível via JavaScript pelo this.options do widget) ou "Server" (acessível via liquid no template)
Assets
Utiliza-se a tag include informando no "relativePath" o caminho do arquivo e no "type" o tipo de asset ("JavaScript" ou "StyleSheet")
Tipos de componente
Os dados do componente estão disponíveis para uso no template (liquid) através do objeto ComponentData. No caso do tipo WidgetComponent, o ComponentData será um objeto vazio.
WidgetComponent
É o componente de dados padrão. Indica que o widget irá utilizar os contextos globais.
Componente Próprio
Indica que o widget possui um componente com dados próprios para serem utilizados por ele.
Parâmetros globais
Nome | Descrição | Tipo |
---|---|---|
WidgetBox | Exibir Box? | Boolean |
WidgetDefaultClass | Classe CSS Padrão | Boolean |
WidgetClass | Classe CSS Alternativa | Texto |
WidgetTitle | Título | Texto |
Template | Template principal | Texto |
Importante!
Com o parâmetro Template é possível definir um template alternativo para substituir o principal. Esta é uma das formas possíveis de customização. Veja aqui mais informações sobre customização de widgets.
Updated about 2 months ago