Histórico da Página
| HTML |
|---|
<div id="main-content" class="wiki-content group">
<div class="rbtoc1389613594096">
<div>
<h1 id="ConstruçãodecomponentesWCMnoFluigStudio-Índice">Contents</h1>
<p>
<style type='text/css'>/*<![CDATA[*/
div.rbtoc1412696135608 {
padding: 0px;
}
div.rbtoc1412696135608 ul {
list-style: none;
margin-left: 0px;
}
div.rbtoc1412696135608 li {
margin-left: 0px;
padding-left: 0px;
}
/*]]>*/
</style>
<div class='toc-macro rbtoc1412696135608'>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>1</span> <a
href='#ConstruçãodecomponentesWCMnoFluigStudio-Objetivo'>Objective</a></li>
<li><span class='TOCOutline'>2</span> <a
href='#ConstruçãodecomponentesWCMnoFluigStudio-ConstruçãodecomponentesWCMnoFluigStudio'>Building
WCM components in Fluig Studio</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>2.1</span> <a
href='#ConstruçãodecomponentesWCMnoFluigStudio-CriaçãodeWidget'>Widget
Creation</a></li>
<li><span class='TOCOutline'>2.2</span> <a
href='#ConstruçãodecomponentesWCMnoFluigStudio-ExemplodecódigoJavaScript'>Example
of JavaScript code</a></li>
<li><span class='TOCOutline'>2.3</span> <a
href='#ConstruçãodecomponentesWCMnoFluigStudio-ExemplodecódigoHTMLcomFreeMarker(view.ftl)'>Example
of HTML code with FreeMarker (view.ftl)</a></li>
<li><span class='TOCOutline'>2.4</span> <a
href='#ConstruçãodecomponentesWCMnoFluigStudio-CriaçãodeLayout'>Layout
Creation</a></li>
<li><span class='TOCOutline'>2.5</span> <a
href='#ConstruçãodecomponentesWCMnoFluigStudio-ExemplodecódigoFreeMarker(layout.ftl)'>Example
of FreeMarker code (layout.ftl)</a></li>
<li><span class='TOCOutline'>2.6</span> <a
href='#ConstruçãodecomponentesWCMnoFluigStudio-ExemplodecódigoJavaScript.1'>Example
of JavaScript code</a></li>
</ul></li>
<li><span class='TOCOutline'>3</span> <a
href='#ConstruçãodecomponentesWCMnoFluigStudio-Snippets'>Snippets</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>3.1</span> <a
href='#ConstruçãodecomponentesWCMnoFluigStudio-Widget'>Widget</a></li>
<li><span class='TOCOutline'>3.2</span> <a
href='#ConstruçãodecomponentesWCMnoFluigStudio-Layout'>Layout</a></li>
</ul></li>
<li><span class='TOCOutline'>4</span> <a
href='#ConstruçãodecomponentesWCMnoFluigStudio-AutocompleteparaFreeMarkereJavaScript'>Autocomplete
for FreeMarker and JavaScript</a></li>
<li><span class='TOCOutline'>5</span> <a
href='#ConstruçãodecomponentesWCMnoFluigStudio-Realizandoodeploydocomponente'>Deploying
the component</a></li>
<li><span class='TOCOutline'>6</span> <a
href='#ConstruçãodecomponentesWCMnoFluigStudio-ThirdPartyTrademarks'>Third-Party
Trademarks</a></li>
</ul>
</div>
</p>
</div>
</div>
<h1 id="ConstruçãodecomponentesWCMnoFluigStudio-Objetivo">Objective</h1>
<p>The objective of this guide is to enable developers to create
WCM components via Fluig Studio.</p>
<h1
id="ConstruçãodecomponentesWCMnoFluigStudio-ConstruçãodecomponentesWCMnoFluigStudio">Building
WCM components in Fluig Studio</h1>
<p>Initially, go to Fluig Studio and create or open a Fluig
project.</p>
<p>Open the Fluig perspective through the menu Window/Open
Perspective/Other.../Fluig (Figure 1).</p>
<p style="text-align: center;">
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/113803693/Screenshot%20from%202014-01-24%2015%3A56%3A08.png?version=1&modificationDate=1390586233000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/113803693/Screenshot%20from%202014-01-24%2015%3A56%3A08.png?version=1&modificationDate=1390586233000&api=v2"><strong>Figure
1 - Fluig Perspective<br />
</strong>
</p>
<h3 id="ConstruçãodecomponentesWCMnoFluigStudio-CriaçãodeWidget">Widget
Creation</h3>
<p>Follow these steps:</p>
<ol>
<li>In Package Explorer, click on the right button and choose
New...</li>
<li><p>Select the Widget option.</p></li>
<li><p>Fill out the required fields of the Widget component
(Figure 2): Code (key field), Name and Description.</p>
<p style="text-align: center;">
<br /> <img class="confluence-embedded-image"
src="http://tdn.totvs.com/download/attachments/113803693/Screenshot%20from%202014-12-16%2010%3A03%3A15.png?version=1&modificationDate=1418731310000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/113803693/Screenshot%20from%202014-12-16%2010%3A03%3A15.png?version=1&modificationDate=1418731310000&api=v2">
</p>
<p style="text-align: center;">
<strong>Figure 2 - Creating a new Widget (required fields)</strong><br />
<br />
</p>
<div class="panelMacro">
<p> </p>
<div class="table-wrap">
<table class="confluenceTable">
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td class="confluenceTd"><img
class="confluence-embedded-image confluence-external-resource"
height="16" width="16" src="http://tdn.totvs.com/images/icons/emoticons/information.png"
data-image-src="http://tdn.totvs.com/downloadimages/attachmentsicons/113803693/wizard-campos-opcionais.png?version=1&modificationDate=1418731772000&api=v2emoticons/information.png"></td>
<td class="confluenceTd"><strong>Note</strong><br />
<p>The Code field is unique (key field) and must be filled
out with letters, numbers and underscore.</p></td>
</tr>
</tbody>
</table>
</div>
</div></li>
<li>Choose a Template for your widget from the combo-box button,
or check <strong>None</strong> if you do not wish to use a template.
</li>
<li>Click Next to continue (Figure 3) filling out the fields or
Finish to conclude.</li>
</ol>
<div class="panelMacro">
<p style="margin-left: 30.0px; text-align: center;">
<img class="confluence-embedded-image"
src="http://tdn.totvs.com/download/attachments/113803693/wizard-campos-opcionais.png?version=1&modificationDate=1418731772000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/113803693/wizard-campos-opcionais.png?version=1&modificationDate=1418731772000&api=v2">
</p>
<p style="margin-left: 30.0px; text-align: center;">
<strong>Figure 3 - Creating a new Widget (optional fields)</strong>
</p>
</div>
<div class="panelMacro">
<p> </p>
<div class="table-wrap">
<table class="confluenceTable">
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td class="confluenceTd"><img
class="confluence-embedded-image confluence-external-resource"
height="16" width="16"
src="http://tdn.totvs.com/images/icons/emoticons/information.png"
data-image-src="http://tdn.totvs.com/images/icons/emoticons/information.png"></td>
<td class="confluenceTd"><strong>Note</strong><br />
<p>The Code fields of developer, Name of developer, URL of
developer and Category are optional. As for the Renderer field,
it allows only one option: Freemarker.</p></td>
</tr>
</tbody>
</table>
</div>
<p>When concluding the Widget construction, the directory
structure should be as shown in Figure 4 below.</p>
<p style="text-align: center;">
<img class="confluence-embedded-image"
src="http://tdn.totvs.com/download/attachments/113803693/menu-widget.png?version=1&modificationDate=1418732120000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/113803693/menu-widget.png?version=1&modificationDate=1418732120000&api=v2">
</p>
<p style="text-align: center;">
<strong>Figure 4 - Structure of directories of a Widget
project</strong>
</p>
</div>
<div class="syntaxhighlighter nogutter java"
style="text-align: center;">
<p style="text-align: left;">Where:</p>
<div class="table-wrap">
<table class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh"><p>
<span style="color: rgb(0, 51, 102);">File/Folder</span>
</p></th>
<th class="confluenceTh"><p>
<span style="color: rgb(0, 51, 102);">Description</span>
</p></th>
</tr>
<tr>
<td class="confluenceTd"><p><código-da-widget></p></td>
<td class="confluenceTd"><p>Name/Identifier of Widget.</p></td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><p>src/main/java</p></td>
<td colspan="1" class="confluenceTd"><p>Location of Java
classes, in case of any specific business rule of the Widget.</p></td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><p>src/main/resources/application.info</p></td>
<td colspan="1" class="confluenceTd"><p>Configuration
file of the Widget, where the Widget code, title and developer
is persisted, among other information. We will provide further
details on this file in the following pages of this document.</p></td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><p>src/main/resources/view.ftl</p></td>
<td colspan="1" class="confluenceTd"><p>Freemarker
template file that will be interpreted during rendering of the
Widget.</p></td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><p>src/main/resources/edit.ftl</p></td>
<td colspan="1" class="confluenceTd"><p>File that will be
interpreted during rendering of the Widget in edit mode. Used to
configure specific options for rendering of the Widget, such as,
data filters, the dollar exchange rate, etc. This file is
optional, and if it is not available, it will be considered that
the Widget has no edit mode, being view only.</p></td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><p>src/main/resources/<código-da-widget>.properties</p></td>
<td colspan="1" class="confluenceTd"><p>Translatable
string file used by the Widget. Must have derivations according
to the language supported by the Widget. The default will always
be the Widget code followed by the suffix referring to its
language. A file being translated to English would be:
“código-da-widget_EN_US.properties”.</p></td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><p>src/main/webapp/icon.png</p></td>
<td colspan="1" class="confluenceTd"><p>Icon that
represents the Widget. It will be used to represent the widget
on the side menu of the application, or on any screen that
requires a visual representation of the component. Dimension
must be 55 x 30.</p></td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><p>src/main/webapp/WEB-INF/web.xml</p></td>
<td colspan="1" class="confluenceTd"><p>Default
descriptor of a Java application for the web.</p></td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><p>src/main/webapp/WEB-INF/jboss-web.xml</p></td>
<td colspan="1" class="confluenceTd"><p>Specific director
for JBoss. Must contain at least the property “context-root”.
The context-root represents the Web context of the Widget and we
recommend using the same code as the Widget.</p></td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><p>src/main/webapp/resources/css/<código-da-widget>.css</p></td>
<td colspan="1" class="confluenceTd"><p>Not in Widget
style.</p></td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><p>src/main/webapp/resources/js/<código-da-widget>.js</p></td>
<td colspan="1" class="confluenceTd"><p>Javascript file
of the Widget (if needed).</p></td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><p>src/main/webapp/resources/images</p></td>
<td colspan="1" class="confluenceTd"><p>Specific image
folder of Widget, if needed.</p></td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><p>src/test/java</p></td>
<td colspan="1" class="confluenceTd"><p>Specific folder
for building unit tests.</p></td>
</tr>
</tbody>
</table>
</div>
<h3 style="text-align: left;"
id="ConstruçãodecomponentesWCMnoFluigStudio-ExemplodecódigoJavaScript">Example
of JavaScript code</h3>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">var applicationCodeObj = SuperWidget.extend({
instanceId: null,
sociableId: null,
init: function() {
//code
},
bindings: {
local: {
'someFunc': ['click_someFunc']
}
},
someFunc: function() {
}
});</pre>
</div>
</div>
<div style="text-align: left;">
<div class="syntaxhighlighter nogutter java"
style="text-align: left;">
<br />
<h3 style="text-align: left;"
id="ConstruçãodecomponentesWCMnoFluigStudio-ExemplodecódigoHTMLcomFreeMarker(view.ftl)">Example
of HTML code with FreeMarker (view.ftl)</h3>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><#-- cria uma div para a widget -->
<div class="wcm-widget-class super-widget"
<#-- pega o id do objeto applicationCodeObj -->
id="applicationCodeObj_${instanceId}"
<#-- parâmetros de dados para a lista -->
data-params="applicationCodeObj.instance({param1: 'teste', param2: 'ok'})">
<#-- cria a internacionalização da widget -->
<h1>${i18n.getTranslation('hellow.example.hello')}</h1>
</div></pre>
</div>
</div>
<p> </p>
</div>
</div>
<h3 style="text-align: left;"
id="ConstruçãodecomponentesWCMnoFluigStudio-CriaçãodeLayout">Layout
Creation</h3>
<p style="text-align: left;">Follow these steps:</p>
<ol style="text-align: left;">
<li style="text-align: left;">In Package Explorer, click on the
right button and choose New...</li>
<li style="text-align: center;"><p style="text-align: left;">Select
the Layout option.</p>
<p>
<img class="confluence-embedded-image"
src="http://tdn.totvs.com/download/attachments/113803693/Screenshot%20from%202014-01-27%2009%3A38%3A09.png?version=1&modificationDate=1390822967000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/113803693/Screenshot%20from%202014-01-27%2009%3A38%3A09.png?version=1&modificationDate=1390822967000&api=v2">
</p>
<p>
<strong>Figure 5 - Creating a new Layout (required fields)</strong>
</p>
<p>
<br /> <br />
</p></li>
<li><p style="text-align: left;">Fill out the required
fields of the Layout component (Figure 5): Code, Name and
Description.</p></li>
<li><p style="text-align: left;">
Choose a Template for your layout from the combo-box button, or
check <strong>None</strong> if you do not wish to use a template.
</p>
<div class="table-wrap">
<table class="confluenceTable">
<tbody>
<tr>
<td class="confluenceTd"><img
class="confluence-embedded-image confluence-external-resource"
height="16" width="16" src="http://tdn.totvs.com/downloadimages/attachmentsicons/113803693emoticons/layout_2information.png?version=2&modificationDate=1390823443000&api=v2"
data-image-src="http://tdn.totvs.com/downloadimages/attachmentsicons/113803693emoticons/layout_2information.png?version=2&modificationDate=1390823443000&api=v2"></td>
<td class="confluenceTd"><strong>Note</strong><br />
<p>The Code field must be filled out with letters, numbers
and underscore.</p></td>
</tr>
</tbody>
</table>
</div></li>
<li><p style="text-align: left;">Click Next to continue
(Figure 6) filling out the fields or Finish to conclude.</p></li>
</ol>
<p>
<img class="confluence-embedded-image"
src="http://tdn.totvs.com/download/attachments/113803693/layout_2.png?version=2&modificationDate=1390823443000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/113803693/layout_2.png?version=2&modificationDate=1390823443000&api=v2">
</p>
<p style="text-align: center;">
<strong>Figure 6 - Creating a new Layout (optional fields)</strong><br />
<br />
</p>
<div class="table-wrap">
<table class="confluenceTable">
<tbody>
<tr>
<td class="confluenceTd"><img
class="confluence-embedded-image confluence-external-resource"
height="16" width="16"
src="http://tdn.totvs.com/downloadimages/attachmentsicons/113803693emoticons/layout_estruturainformation.png?version=1&modificationDate=1390823682000&api=v2"
data-image-src="http://tdn.totvs.com/downloadimages/attachmentsicons/113803693emoticons/layout_estruturainformation.png?version=1&modificationDate=1390823682000&api=v2"></td>
<td class="confluenceTd"><strong>Note</strong><br />
<p>The fields: Code of developer, Name of developer, URL of
developer and Category are optional fields. As for the Renderer
field, it allows only one option: Freemarker.</p></td>
</tr>
</tbody>
</table>
</div>
<p style="text-align: left;">When concluding the Layout
construction, the directory structure should be as shown in Figure 7
below.</p>
<p>
<img class="confluence-embedded-image"
src="http://tdn.totvs.com/download/attachments/113803693/layout_estrutura.png?version=1&modificationDate=1390823682000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/113803693/layout_estrutura.png?version=1&modificationDate=1390823682000&api=v2">
</p>
<strong>Figure 7 - Structure of directories of a Layout
project</strong>
<p style="text-align: left;"> </p>
<div class="table-wrap">
<table class="confluenceTable">
<tbody>
<tr>
<td class="confluenceTd"><img
class="confluence-embedded-image confluence-external-resource"
height="16" width="16"
src="images/icons/emoticons/information.png"
data-image-src="http://tdn.totvs.com/images/icons/emoticons/information.png"></td>
<td class="confluenceTd"><strong>Note</strong><br />
<p>The structure of folders and files in a Layout component
is practically the same as that of a Widget component. The
change is normally found in the src/main/resources/ path, where
the view.ftl and edit.ftl files are replaced by the layout.ftl
file.</p></td>
</tr>
</tbody>
</table>
</div>
<br />
<h3 style="text-align: left;"
id="ConstruçãodecomponentesWCMnoFluigStudio-ExemplodecódigoFreeMarker(layout.ftl)">Example
of FreeMarker code (layout.ftl)</h3>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><!-- Layout com 3 slots verticais -->
<!-- Header -->
<div id="wcm_header" class="wcm-header-background wcm-header">
<!-- Group left -->
<div class="header-grouper-left">
<a href="home" class="wcm_logo" title="${i18n.getTranslation('layout.label.pagetitle')}">
<#if '${imageLogo}'=='true'>
<img src="${serverContextURL}/resources/images/${pageRender.user.tenantId}/logo_image.png"></img>
<#else>
<img src="${serverContextURL}/resources/images/logo.png"></img>
</#if>
</a>
</div>
<!-- Group right -->
<div class="header-grouper-right">
<!-- Container login -->
<div id="SlotLogin" slot="true" class="slot-header-actions">
<#list (pageRender.getInstancesIds("SlotLogin"))! as id>
${pageRender.renderInstanceNoDecorator(id)}
</#list>
</div>
</div>
</div>
<!-- WCM Wrapper content -->
<div class="wcm-wrapper-content">
<!-- Menu esquerdo -->
<nav class="wcm-navigation wcm-menu-background">
<div id="SlotMenu" slot="true">
<#list (pageRender.getInstancesIds("SlotMenu"))! as id>
${pageRender.renderInstanceNoDecorator(id)}
</#list>
</div>
</nav>
<!-- Wrapper -->
<div class="wcm-all-content">
<div id="wcm-content" class="clearfix wcm-background">
<!--WIDGETS DO LAYOUT -->
<link type="text/css" rel="stylesheet" href="${contextPath}/resources/css/wcm_layout.css"/>
<!-- Onde deverá estar a barra de formatação -->
<#if widgetRender.isEditMode()=true>
<div name="formatBar" id="formatBar"></div>
<!-- Div geral -->
<!-- Há CSS distinto para Edição/Visualização -->
<div id="edicaoPagina" class="clearfix">
<#else>
<div id="visualizacaoPagina" class="clearfix">
</#if>
<!-- Titulo da página -->
<div class="slotfull layout-1-1">
<span class="titleArea">${i18n.getTranslation('wcm.layoutdefault.title')}</span>
<h2 class="pageTitle">${pageTitle}</h2>
</div>
<!-- Slot 1 -->
<div class="editable-slot slotfull layout-1-1" id="slotFull1">
<div id="SlotC" slot="true" class="slotint" decorator="false" editableSlot="true">
<#list (pageRender.getInstancesIds("SlotC"))! as id>
${pageRender.renderInstanceNoDecorator(id)}
</#list>
</div>
</div>
<!-- Slot 2 -->
<div class="editable-slot slotfull layout-1-1" id="slotFull2">
<div id="SlotB" slot="true" class="slotint" decorator="false" editableSlot="true">
<#list (pageRender.getInstancesIds("SlotB"))! as id>
${pageRender.renderInstanceNoDecorator(id)}
</#list>
</div>
</div>
<!-- Slot 3 -->
<div class="editable-slot slotfull layout-1-1" id="slotFull3">
<!-- Widget -->
<div id="SlotA" slot="true" class="slotint" decorator="true" editableSlot="true">
<#list (pageRender.getInstancesIds("SlotA"))! as id>
${pageRender.renderInstance(id)}
</#list>
</div>
</div>
</div>
<!-- FIM DAS WIDGETS DO LAYOUT -->
<div id="wcm_footer" class="wcm_footer"></div>
</div>
</div>
</div></pre>
</div>
</div>
<h3 style="text-align: left;"
id="ConstruçãodecomponentesWCMnoFluigStudio-ExemplodecódigoJavaScript.1">Example
of JavaScript code</h3>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">// JavaScript Document
$(document).ready(function() {
/*$(".wcm_config_widgets").click(function() {
$(this).parent('li').children('ul').toggle();
});*/
//'Live' is used to prevent event handler from getting lost when widgets are updated.
$(".wcm_config_widgets").live("click", function(){
$(this).parent('li').children('ul').toggle();
});
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("wcm_controles_widgets"))
$(".wcm_controles_widgets ul li ul").hide();
});
});</pre>
</div>
</div>
<p> </p>
</div>
<div class="syntaxhighlighter nogutter java" style="text-align: left;">
<h1 style="text-align: left;"
id="ConstruçãodecomponentesWCMnoFluigStudio-Snippets">Snippets</h1>
<p>The Snippet option provides the developer with a small snippet
of an sample code related to a given feature. The goal is to provide
a quick and easy way for the developer to view a sample code and
start building the component.</p>
<p>Access Studio, open the Window menu and choose the option Show
View/Other... or press  Shift + Alt + Q Q. Open the General
folder and choose the option Snippets (Figure 8).</p>
<p style="text-align: center;">
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/109871147/show-view.png?version=1&modificationDate=1389644092000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/109871147/show-view.png?version=1&modificationDate=1389644092000&api=v2"><strong>Figure
8 - Show View Window<br />
</strong>
</p>
<p> </p>
<p>The Snippets tab will present options for WCM components, as
seen in Figure 9.</p>
<p style="text-align: center;">
<img class="confluence-embedded-image"
src="http://tdn.totvs.com/download/attachments/113803693/snippets-js.png?version=1&modificationDate=1418733148000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/113803693/snippets-js.png?version=1&modificationDate=1418733148000&api=v2">
</p>
<p style="text-align: center;">
<strong>Figure 9 - Show View Window</strong>
</p>
<p> </p>
<h3 id="ConstruçãodecomponentesWCMnoFluigStudio-Widget">
<strong>Widget</strong>
</h3>
<ul>
<li><strong>Saving parameters of a widget</strong><br />
<ul>
<li>A JavaScript feature that demonstrates how to save fields
on the edit screen of the widget through the attributes of
arguments.<br /> <br />
</li>
</ul></li>
<li><strong>Messages on the screen</strong><br />
<ul>
<li>Snippet to create a window and display a message.<br /> <br /></li>
</ul></li>
<li><strong>Open a window</strong><br />
<ul>
<li>A JavaScript feature that demonstrates how to open a
window.<br /> <br />
</li>
</ul></li>
<li><strong>Generic Ajax/Rest Call</strong><br />
<ul>
<li>A JavaScript feature that demonstrates an AJAX call to a
REST service.</li>
</ul></li>
</ul>
<ul>
<li><strong>Ajax/Rest Call (JavaScript)</strong>
<ul>
<li>A JavaScript feature that demonstrates an AJAX call to a
REST service of query, to a user, treating the JSON received and
showing a message such as “Hello user X”, where the user name
returned in the call must be displayed.</li>
</ul></li>
</ul>
<h3 id="ConstruçãodecomponentesWCMnoFluigStudio-Layout">
<strong>Layout</strong>
</h3>
<ul>
<li><strong>Layout Slot (FTL)</strong><br />
<ul>
<li>Displays the snippet referring to a slot that may exist
within the layout.</li>
</ul></li>
</ul>
</div>
<div>
<h1
id="ConstruçãodecomponentesWCMnoFluigStudio-AutocompleteparaFreeMarkereJavaScript">Autocomplete
for FreeMarker and JavaScript</h1>
<p>
<span style="color: rgb(0, 0, 0);">When opened with the "Fluig
Freemarker Editor" the Freemarker files (".ftl" extension) feature
auto-complete for the basic directives of the FTL (starting with
"<#") and for the context variables in the interpolations of
Freemarker ("${}"). Context names available for auto-complete are
widgetRender and pageRender.</span>
</p>
<p>
<span style="color: rgb(0, 0, 0);"><br /></span>
</p>
<p>
<em><img class="confluence-embedded-image image-center"
width="500" src="http://tdn.totvs.com/download/attachments/113803693/auto3-ftl.png?version=1&modificationDate=1418733837000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/113803693/auto3-ftl.png?version=1&modificationDate=1418733837000&api=v2"></em>
</p>
<p style="text-align: center;">
<strong>Figure 10 - Example of Freemarker auto-complete</strong>
</p>
<p style="text-align: center;">
<strong><br /></strong>
</p>
<p>
<span style="color: rgb(0, 0, 0);"><br /></span>
</p>
<p>
<span style="color: rgb(0, 0, 0);">The JavaScript files (".js"
extension), when opened in a Fluig project, also feature
auto-complete for the native APIs of JavaScript and of Fluig.</span>
</p>
<p>
<span style="color: rgb(0, 0, 0);"><br /></span>
</p>
<p>
<img class="confluence-embedded-image image-center" width="500"
src="http://tdn.totvs.com/download/attachments/113803693/autocomplete-js.png?version=1&modificationDate=1418734032000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/113803693/autocomplete-js.png?version=1&modificationDate=1418734032000&api=v2">
</p>
<p style="text-align: center;">
<strong>Figure 11 - Example of JavaScript auto-complete</strong>
</p>
<p style="text-align: center;">
<strong><br /></strong>
</p>
</div>
<div>
<h1 style="text-align: left;"
id="ConstruçãodecomponentesWCMnoFluigStudio-Realizandoodeploydocomponente">Deploying
the component</h1>
<p>From this moment, it is possible to generate the package and
install the component in the server (deployment). To start the
procedure, select the project, click on the File menu and select the
Export option... (or click with the right button over the Widget or
Layout project).</p>
<div class="table-wrap">
<table class="confluenceTable">
<tbody>
<tr>
<td class="confluenceTd"><img
class="confluence-embedded-image confluence-external-resource"
height="16" width="16"
src="images/icons/emoticons/information.png"
data-image-src="http://tdn.totvs.com/images/icons/emoticons/information.png"></td>
<td class="confluenceTd"><strong>Note</strong><br />
<p>Select the project (Widget or Layout) to be exported and
click the right mouse button on the project folder for proper
installation.</p></td>
</tr>
</tbody>
</table>
</div>
<p>A new Wizard will be started to guide you through the
installation (Figure 10).</p>
<p> </p>
<p style="text-align: center;">
<img class="confluence-embedded-image"
src="http://tdn.totvs.com/download/attachments/113803693/deploy_1.png?version=1&modificationDate=1390838055000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/113803693/deploy_1.png?version=1&modificationDate=1390838055000&api=v2">
</p>
<p style="text-align: center;">
<strong>Figure 12 - Export wizard for Fluig WCM component
(1)</strong>
</p>
<p style="text-align: center;">
<strong><br /></strong>
</p>
<p>Follow the steps below (Figure 11):</p>
<ol>
<li>Select<strong> Export to Fluig server</strong> and click
Next.
</li>
<li>Select the server the service will be exported to.</li>
<li>Click Finish.</li>
</ol>
<p> </p>
<p style="text-align: center;">
<img class="confluence-embedded-image"
src="http://tdn.totvs.com/download/attachments/113803693/deploy_2.png?version=3&modificationDate=1390838483000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/113803693/deploy_2.png?version=3&modificationDate=1390838483000&api=v2">
</p>
<p style="text-align: center;">
<strong><strong>Figure 13 - Export wizard for Fluig
WCM component (2)</strong><br /></strong>
</p>
<p> </p>
<p>Ready! This step facilitates the entire process. At the end,
the server will have installed the component and it will be ready for
use.</p>
<h1 id="ConstruçãodecomponentesWCMnoFluigStudio-ThirdPartyTrademarks">Third-Party
Trademarks</h1>
</div>
</div>
|
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas