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/downloadimages/attachmentsicons/113803693/wizard-campos-opcionais.png?version=1&modificationDate=1418731772000&api=v2emoticons/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/113836774wizard-campos-opcionais.png?version=1&modificationDate=1418731772000&api=v2" data-image-src="http://tdn.totvs.com/download/attachments/113803693/113836774wizard-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/downloadimages/attachmentsicons/113803693/menu-widget.png?version=1&modificationDate=1418732120000&api=v2emoticons/information.png" data-image-src="http://tdn.totvs.com/downloadimages/attachmentsicons/113803693emoticons/menu-widgetinformation.png?version=1&modificationDate=1418732120000&api=v2"></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