Histórico da Página

...

Interface aplicada com Fluig Style Guide

...

Para construir a interface de nossa widget, vamos utilizar o Fluig Style Guide, que nos facilita a construção dos componentes visuais. O guia pode ser acessado em Fluig Style Guide.

Para essa widget de notícias por exemplo, precisamos utilizar um form para cadastro de alguns dados, para utiliza o padrão visual do Fluig Style Guide, basta adicionar a classe .form-group. Assim todos os elementos textuais como <input>, <textarea>, e <select> terão seus tamanhos ajustados para 100%.

<form role="form">
	<div id="newsSource_${instanceId}" class="form-group">
		<!-- código -->
    </div>
</form>

Para criar um botão no padrão, basta adicionar as classes 'btn btn-default'.

<button type="submit" class="btn btn-default" data-save-preferences> Salvar </button>

Como salvar as preferências da widget

...