Aproveite ao máximo os seus designs StyleVision com a seleção dinâmica de ficheiros CSS

Uma das grandes vantagens do StyleVision é a flexibilidade que oferece. Com o StyleVision, é possível criar folhas de estilo e relatórios visualmente sofisticados para diferentes formatos, incluindo HTML, PDF e formulários eletrónicos. Agora, o StyleVision torna ainda mais fácil adaptar-se a diferentes necessidades de formatação num único design, com a seleção dinâmica de ficheiros CSS – uma nova funcionalidade introduzida no StyleVision 2012.

Embora seja possível gerir praticamente todas as tarefas de formatação diretamente no design do StyleVision, a seleção dinâmica de ficheiros CSS permite criar um único modelo para utilização em diversas situações. Para demonstrar, criámos uma fatura para a empresa fictícia Nanonull Corporation, cujo design se adapta consoante o número de dias decorridos entre a data de emissão da fatura e a data de vencimento. Embora pudéssemos ter utilizado XPath para alterar a formatação de cada elemento com base no número de dias decorridos, neste caso, é mais eficiente criar ficheiros CSS individuais que se aplicam a diferentes cenários.

Abaixo, encontra-se a fatura que criámos no StyleVision. Note que, para além dos títulos em negrito, ela está quase sem formatação. Aplicaremos a formatação com base no número de dias decorridos entre a data de emissão da fatura e a data de vencimento, através de ficheiros CSS.

Agora podemos criar os nossos ficheiros CSS no XMLSpy, da Altova Editor XML com suporte integrado para a edição de CSS2 e CSS3.

Primeiro, vamos criar um ficheiro CSS para as faturas com datas de vencimento posteriores à data de emissão da fatura (ou seja, faturas que não estão em atraso). Neste caso, criámos simplesmente o seletor "body" com um fundo amarelado, o logótipo da Nanonull e uma classe para o cabeçalho.

Agora, vamos criar um CSS mais elaborado para as faturas em atraso. O seletor "body" incluirá uma imagem de "atrasado", o seletor de parágrafos terá uma fonte vermelha e negrita de 20 pontos, e as classes de cabeçalho e sub-cabeçalho terão uma fonte vermelha e negrita em diferentes tamanhos.

Agora podemos atribuir os ficheiros CSS ao design do StyleVision e, posteriormente, atribuir classes a diferentes elementos do design.

No StyleVision, basta clicar em "Adicionar novo ficheiro CSS" na visão geral do design e navegar até aos ficheiros CSS que criámos no XMLSpy. O StyleVision suporta vários ficheiros CSS no mesmo design.

O nosso design tem agora esta aparência – notem que a formatação proveniente tanto do CSSRegular como do CSSOverdue foi aplicada na visualização de design do StyleVision.

No entanto, gostaríamos de atribuir o ficheiro CSS com base na distância entre a data de emissão da fatura e a data de vencimento. Para isso, clicaremos com o botão direito do rato na seta ao lado do ficheiro CSS na visão geral do design e selecionaremos a opção "Selecionar um ficheiro CSS com XPath" (abaixo).

Isto irá abrir a caixa de diálogo "Selecionar ficheiro CSS usando XPath" (mostrada abaixo). Podemos usar o XPath nesta caixa de diálogo para selecionar o ficheiro CSS apropriado, com base em dados variáveis. Neste caso, instruímos o StyleVision a usar o ficheiro CSSOverdue.css se a data de vencimento da fatura for anterior à data de emissão da fatura, e o ficheiro CSSRegular.css em todos os outros casos.

Aqui está o XPath completo que introduzimos na caixa de diálogo "Selecionar ficheiro CSS usando XPath" mencionada acima.

Agora podemos atribuir as classes definidas nos ficheiros CSS aos elementos de design individuais no design do StyleVision.

Nesta secção, atribuímos o parágrafo que contém o texto "Fatura" à classe "cabeçalho" no painel de Estilos. Com base no conteúdo dos nossos ficheiros CSS, este texto aparecerá a vermelho, em negrito e com tamanho 20, para faturas em atraso, e a preto, em negrito e com tamanho 20, para faturas cuja data de vencimento está no futuro.

Da mesma forma, vamos atribuir a data de vencimento da fatura à classe "título pequeno"

Agora, estamos prontos para visualizar a fatura.

A seguir, apresentamos uma pré-visualização em HTML de uma fatura em atraso. Note que o texto "Fatura" e a data de vencimento estão em fonte vermelha e negrito, e que a imagem "Em Atraso" está estampada no centro.

Agora, vamos analisar a mesma fatura, mas com uma data de vencimento futura. Observe o fundo amarelo, o logótipo da Nanonull, e que as palavras "Fatura" e a data de vencimento aparecem em preto.

A capacidade de selecionar um ficheiro CSS com base em informações dinâmicas abre um leque de possibilidades e torna os seus designs StyleVision ainda mais adaptáveis. Com esta funcionalidade, pode fazer alterações de formatação em tempo real através dos ficheiros CSS associados a um design – o que é especialmente útil para designs com muitos elementos.

Criou um projeto excelente utilizando a folha de estilos StyleVision e o editor de relatórios, ou alguma outra ferramenta da Altova, e gostaria de mostrá-lo? Partilhe a sua experiência com outros utilizadores da Altova comentando neste artigo do blog.

Se acha que esta história seria um excelente estudo de caso, visite a página de estudos de caso da Altova. Se utilizarmos a sua história, receberá um cartão presente da Amazon no valor de 200 dólares. Teremos todo o prazer em ouvir o que tem para nos contar!