Yii 1.1: Ativando temas no Zii Widgets

4 followers

Um aspecto do design da interface de usuário tem a ver com a coerência do design e da utilização das cores entre os diferentes componentes da interface do usuário utilizada.

Normalmente um site ou aplicação web são projetados com uma aparência específica e normalmente obedece à identidade da aplicação.

O Yii oferece uma maneira para integrar os controles de interface do usuário chamada Zii Widgets, com base na JQuery UI para nossas aplicações, porém, eles vem com o design padrão.

Este design pode ser facilmente alterado com uma série de passos simples, que foram relatados por Sebas para mim.

Temos procurado várias vezes no site, no fórum, tutoriais, porém não conseguimos encontrar um lugar específico onde você pudesse obter esta informação de uma forma simples e eficaz.

É por isso que eu decidi compartilhar o conhecimento adquirido, passado por Sebas e escrito por mim.

1 - Criando o design do Zii Widgets

Todos os Zii Widgets utilizam o JQuery UI.

A forma mais fácil é usar a ferramenta fornecida pela JQuery UI para criar o design ou temas que melhor se encaixam em nossas aplicações web.

Temos que navegar no JQuery UI Theme Roller e brincar com ele até chegarmos ao nosso próprio design.

Uma vez que fizemos isso, nós temos que baixar o tema. O Theme Roller irá solicitar que você selecione a versão. A versão 1.8.11 estava disponível quando este artigo foi traduzido e é compatível com o Yii 1.1.7.

2 - Incluir os arquivos necessários no Yii

O próximo passo é copiar os arquivos necessários em uma das pastas públicas da nossa aplicação: os recursos criados, CSS e imagens que serão utilizados pelo Zii Widgets (JQuery UI) para fornecer o tema configurado para a nossa interface com o usuário.

No meu caso, eu criei uma pasta chamada 'jqueryui' dentro da pasta css: /css/jqueryui Esta pasta será atribuída a propriedade themeUrl do CJuiWidget.

Então eu criei uma outra pasta com o nome do tema que eu decidi utilizar, no meu caso, 'fc'. O nome desta pasta será atribuída a propriedade theme do CJuiWidget.

Então, dentro da pasta fc (ou o nome utilizado pelo seu tema), você deve copiar alguns dos arquivos contidos dentro do arquivo que você baixou no Theme Roller.

So é necessário copiar os arquivos da pasta /css/custom-theme/ para a pasta 'fc'.

Finalmente, você deve alterar o nome do arquivo CSS, de 'jquery-ui-1.8.6.custom.css' para 'jquery-ui.css'.

3 - Configurar os componentes Widget do Zii para utilizar o nosso tema

A última etapa envolve a configuração dos componentes do Zii Widget, para que eles utilizem o tema.

Cada componente precisa ser configurado. A melhor maneira é fazê-lo no arquivo de configuração principal: /protected/config/main.php

A seguir é exibida a minha configuração:

$config = array(
'components' => array(
        // ativa o tema baseado no JQueryUI
        'widgetFactory' => array(
            'widgets' => array(
                'CJuiAutoComplete' => array(
                    'themeUrl' => '/css/jqueryui',
                    'theme' => 'fc',
                ),
                'CJuiDialog' => array(
                    'themeUrl' => '/css/jqueryui',
                    'theme' => 'fc',
                ),
                'CJuiDatePicker' => array(
                    'themeUrl' => '/css/jqueryui',
                    'theme' => 'fc',
                ),
            ),
        ),

Desta maneira, os três componentes CJuiAutoComplete, CJuiDialog e CJuiDatePicker utilizarão o tema definido.

(Versão em Inglês: Theming your Zii Widgets)

(Versão em Espanhol: Cambiando el diseño de JuiWidgets)

Total 3 comments

#3749 report it
Alexandrino at 2011/05/04 02:01pm
Parabéns!

Fico muito feliz em ver a comunidade brasileira participar com conteúdo tão relevante quanto ao que você postou. Obrigado por partilhar!

#3631 report it
Junior - df9 at 2011/04/25 11:47am
Especificar o nome do arquivo

Esqueci de mencionar, no caso de alterar o nome do arquivo como eu sugeri, não esquecer de alterar a propriedade cssFile para o nome correspondente do arquivo css.

[code] 'CJuiAutoComplete' => array( 'themeUrl' => '/css/jqueryui', 'theme' => 'fc', 'cssFile' => ''jquery-ui-fc-100.css', ), [/code]

:)

#3630 report it
Junior - df9 at 2011/04/25 11:41am
Sugestão

Luis, primeiramente parabéns pela iniciativa de compartilhar a informação, pois realmente às vezes é difícil procurar as coisas no fórum.

Gostaria apenas de sugerir atenção no tocante ao nome do arquivo ser sempre 'jquery-ui.css', pois, no caso de uma configuração far-future expire para arquivos css, o arquivo antigo estaria no cache do browser e não seria recarregado até que a data de expiração fosse atingida.

Usualmente, costumo utilizar o nome do tema mesclado aos nomes dos arquivos css para evitar esse tipo de coisa. Com isso acaba-se criando mais um pequeno problema, porque quando você altera algo no tema, o mesmo arquivo está em cache. Assim, seguindo a sugestão do Yahoo! sugere-se adicionar a versão do arquivo na nomenclatura do mesmo. Obviamente existem outras alteranativas, mas fica somente a dica para os leitores ficarem atentos.

Para exemplificar o que eu quis dizer, o nome do arquivo neste caso seria 'jquery-ui-fc-100.css' indicando que o arquivo pertence ao tema fc e é a versão 1.00.

Se fizer alguma alteração, mude o nome para 'jquery-ui-fc-101.css', a próxima 'jquery-ui-fc-102.css' e assim por diante.

Espero que meu comentário tenha sido útil.

Abração!

Leave a comment

Please to leave your comment.

Write new article