$('#helloMessage_' + this.instanceId);
      

  $message = $('<div>').addClass('message').append(this.message);
   

$div.append($message)

;
    }
});
 

<div id="HelloWorld_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide"
     data-params="HelloWorld.instance({message: 'Hello world'})">
    

<!-- efetua a 

tradução 

do 

texto do objeto 

i18n -->	
    

<h1>${i18n.getTranslation('hello.example.hello')}</h1>
    <div>
 

<button type="button" class="btn btn-default" data-show-message>${i18n.getTranslation('hello.button.showMessage')}</button>
    </div>
    <div id='helloMessage_${instanceId}'>
    

</div>
    
</div>

<div class="fluig-style-guide">
    <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 

pageRender.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>
    

</div>

{

/

/code
    

},
    bindings: {
        local: {
   

'show-message': ['click_showMessage']
        }
    },
    showMessage: function () {
        $div = 

$(

'#helloMessage_' + this.instanceId);
        $message 

= $('

<div>').

addClass('

message').

append(this.message);
    

    $div.append($message);
    

}
});