«

»

Nov 30

Print this Post

Crie um ColdFusion stylesheet switcher

Problema:

Quero criar um método que permita que meus visitantes possam mudar os estilos sem o uso de JavaScript em ColdFusion. Pode ser feito ?

Solução:

Sim, para acomodar condições de diferentes usuários, existem vários métodos que são usados para mudar estilos em uma página da web. O método mais popular é mudando o CSS (Cascading Style Sheets) com JavaScript no lado do cliente. Ironicamente, usando “alguns” dos métodos de JavaScript você poderia estar fazendo seu site ainda menos acessível ao usuário final. Aqui está um método simples que você pode implementar no ColdFusion de uma tecnologia do lado do servidor que não dependa do uso de JavaScript.

Explicação detalhada:

Certifique-se de que links que desencadeiam scripts trabalhem quando scripts estão desligados ou não são suportados. http://www.w3.org/TR/WCAG10/

Usando ColdFusion mudar o seus estilos significa que o navegador do cliente não precisa de suporte JavaScript porque é executado no servidor. Claro que a desvantagem de usar uma linguagem do lado do servidor é que a página é submetida cada vez que o visitante muda o estilo ao contrário dos métodos de JavaScript. Entretanto, fazendo-o do lado do servidor pode significar um melhor cumprimento da DDA (Disability Discrimination Act).

Abaixo está um método muito simples de mudar estilos usando ColdFusion server side. Estou certo que este método pode ser expandido e de nenhuma forma é o único método em CF.

Pouco antes do exemplo, é importante notar que a chave de criar qualquer método switcher é certificar-se de ter criado as bases do seu site em primeiro lugar. Separação do conteúdo da apresentação é fundamental para a boa acessibilidade e é fundamental para que isso funcione.

A primeira coisa que você precisa fazer é inicializar uma sessão, chamada de “style” se nenhuma sessão com esse nome já tiver sido definida. A sessão guarda o nome do estilo padrão neste exemplo chamado ‘standard.css’. O CFSCRIPT como você pode ver abaixo é melhor ser adicionado à sua função OnSessionStart no Application.cfc. Você não precisa bloquear (lock) este escopo de sessão como no método OnSessionStart (único segmento em termos da sua sessão).


<!---file Application.cfc
OnSessionStart - Fires when the session is first created.
--->
<cffunction name="OnSessionStart" access="public"
     returntype="void" output="false">
     <!---Style Sheet Switcher--->
     <cfscript>session.style = "standard.css";</cfscript>
</cffunction>

A próxima coisa que você precisa fazer é adicionar um link para o stylesheet que irá mudar o arquivo CSS para o visitante. Normalmente, você teria um caminho estático para o seu estilo (stylesheet), mas neste caso você adiciona o nome da sessão que criou acima, em vez do nome do arquivo. Isto agora significa que quando você executar o que você tem até agora  o nome do estilo padrão ‘standard.css’ será mostrado. Eu recomendo o exemplo de código abaixo, contidos em um arquivo de inclusão para que você possa editá-lo globalmente em suas páginas, se necessário.


<!--- include --->
<cfoutput>
     <link href="your-path-to-your-CSS/#session.style#" rel="stylesheet"
     type="text/css" />
</cfoutput>

Agora você tem cabeçario de sua página um link para seu estilo chamado standard.css, mas se voce quiser que seus usuários alterem o estilo padrão de standard.css para outra coisa? Bem, em seguida, adicione alguns links em qualquer lugar no seu site que você queira. Esses links passam no escopo URL o nome da nova stylesheet você quer que eles se apliquem. Você terá que criar primeiro as stylesheets como a  standard.css.


<ul>
     <li><a href="«cfoutput>#cgi.script_name#?newstyle=standard.css</cfoutput>"
          title="change style sheet to normal"»Default CSS</a></li>
     <li><a href="«cfoutput>#cgi.script_name#?newstyle=printer_friendly.css</cfoutput>"
          title="change style sheet to text only"»Print/Text only version</a></li>
</ul>

Nada vai acontecer quando você clicar nos links acima criado a menos que você faça alguma coisa com a variável que estamos passando URL.newstyle. Este exemplo usando a função OnRequestStart em Application.cfc que executa no início de cada pedido para mudar a session.style para refletir o novo estilo passado na URL. Por sua vez, porque isto funciona como o início do pedido quando a página for carregada,  a stylesheet será aplicada, se necessário.


<!--- Application.cfc
OnRequestStart() - Fires at first part of page processing.
--->
<cffunction name="OnRequestStart" access="public" returntype="boolean" output="false">
     <!--- Define arguments. --->
     <cfargument name="TargetPage" type="string" required="true"/>
     <!---Style Sheet Switcher--->
     <cfparam name="newstyle" default="#session.style#">
     <cflock scope="SESSION" type="EXCLUSIVE" timeout="15">
          <cfscript>
          if (newstyle neq session.style){
               session.style = newstyle;
          }
          </cfscript>
     </cflock>
     <!---End of Style Sheet Switcher--->
     <cfreturn true />
     <!--- Return out. --->
</cffunction>

Os exemplos de código acima fazem uso de funções do Application.cfc para configurar e mudar os stylesheets. Entretanto, se voce não quiser usar o Application.cfc ou estiver rodando uma versão mais velha de CF, voce pode tentar o seguinte:


<cfif Not StructKeyExists(Session,"Style")>
     <cflock scope="SESSION" type="EXCLUSIVE" timeout="15">
          <cfset session.style="default_style.css">
     </cflock>
</cfif>
<cfparam name="newstyle" default="session.style">
<cfif newstyle neq session.style>
     <cflock scope="SESSION" type="EXCLUSIVE" timeout="15">
           <cfset session.style=newstyle>
     </cflock>
</cfif>
<cfoutput>
     <link href="../#session.style#" rel="stylesheet" type="text/css" />
</cfoutput>

Então, por que fazer isso? Bem,  é mais provável que você seja compatível com as normas de acessibilidade usando CF para mudar estilos do que de usar JavaScript como você não está confiando no navegador do visitante de ter o JavaScript habilitado.

Uma última coisa a notar, é que pode ser útil ter a tag “no follow” no stylesheet!

Espero que isso ajude.

by Glyn Jackson
Versão em inglês: Adobe ColdFusion Cookbook

Permanent link to this article: http://ensina.me/coldfusion/crie-um-coldfusion-stylesheet-switcher/

Leave a Reply