JavaScript

O LumisXP permite desenvolver estilos em JavaScript. Para criar um estilo em JavaScript basta ao criar o estilo, escolher a linguagem de programação "JavaScript".

Para informações sobre o formato de um estilo em script, veja o tópico Estilos em Thymeleaf, Javascript e Groovy.

A seguir encontram-se alguns exemplos de estilos em Javascript.

Lista rápida de notícias

<ul class="lum-list">
<%
  var rows = lum_xpath.selectNodes("//data/row");
  for(var i in rows)
   {
      var row = lum_xpath.toMap(rows[i]);
%>
  <li class="lum-list-item"<%=i == 0 ? " lum-first" : "" + i == rows.length-1 ? " lum-last" : ""%>>
      <article class="lum-content" data-lum-entityid="<%=row.contentId%>" data-lum-title="<%=row.title%>" data-lum-url="<%=row.$href%>" data-lum-serviceinstanceid="<%=row.serviceInstanceId%>">
          <header class="lum-content-header">
              <h1 class="lum-content-title">
                  <a href="<%=row.$href%>">
                      <%=row.title%>
                  </a>
              </h1>
              <ul class="lum-content-meta-information">
                  <li class="lum-first lum-last">
                       Em
                      <time datetime="<%=row.publishStartDate.year%>-<%=row.publishStartDate.month%>-<%=row.publishStartDate.day%>T<%=row.publishStartDate.hours%>:<%=row.publishStartDate.minutes%>:<%=row.publishStartDate.seconds%>">
                          <%=row.publishStartDate.value%>
                      </time>
                  </li>
              </ul>
              <div class="lum-content-introduction">
                  <p>
                      <%=row.introduction%>
                  </p>
              </div>
          </header>
      </article>
  </li>
<%
   }//fechamento do for
%>
</ul>

No exemplo acima, são utilizados métodos utilitários fornecidos pelo LumisXP. Para informações completas sobre os mesmos, veja o tópico Variável lum_xpath

List<Node> lum_xpath.selectNodes(String xpath)	Retorna uma lista com todos os Elementos do tipo Node com o XPath fornecido. No JavaScript a lista é convertida em um vetor.
Map<String, Object> lum_xpath.toMap(Node node)	Retorna um Map<String, Object> representando o Node fornecido. As regras de conversão podem ser encontradas na página IXPath. No JavaScript o mapa é convertido em um vetor[String] = Object

Uso de property bag no estilo

Este exemplo mostra como ler valores de uma property bag da página atual para variável no javascript, e assim poderá utilizá-los no estilo.

Uso de environment property no estilo

Este exemplo mostra como ler valores de uma propriedade de ambiente para variável no javascript, e assim poderá utilizá-los no estilo.