DesenvolvendoTemasGTK

Tutorial Desenvolvendo Temas para Gnome

Introdução

Este tutorial explicará os princípios de como criar um tema GTK+2 para o uso com GNOME 2.2 ou posterior. Algum conhecimento da API GTK+2 pode ser útil com temas mais complicados, essa documentação pode ser encontrada em http://developer.gnome.org/doc/API/2.0/gtk/index.html.

Os temas de outras pessoas podem ser muito úteis; muitos podem ser encontrados na seção de GTK 2.x do site http://themes.freshmeat.net. Alguns temas provavelmente já se encontram disponiveis com sua instalação do Gnome e você pode usar como uma referência também.

Os temas ficam geralmente em um diretório público (disponível a todos os usuários, geralmente em /usr/share/themes/) ou apenas para o usuario atual (em ~/.themes/).

Um bom lugar para pôr os temas que você está críando é em ~/.themes/NOME_DO_TEMA/gtk-2.0/. Dentro deste diretório gtk-2.0 você colocará todos os arquivos que vão com seu tema. (icones, imagens, etc...)

Nota:

Se temas de mesmo nome forem instalados no público (/usr/share/themes/) e no diretório de usuario ( ~/.themes) o GNOME usará preferencialmente o que esiver em ~/.themes. 

Uma boa maneira de aprender a fazer um tema é examinar os temas de outras pessoas. Sua instalação do GNOME sempre virá com alguns, para obter mais temas os mesmos podem ser encontrado em:

Compatibilidade GTK+1.2

A maioria dos conceitos analizados aqui aplica-se também aos temas GTK+1.2. (Se alguem puder expor as diferenças entre 1.2 e 2.x, por favor contribua com seu texto aqui)

O Arquivo gtkrc

GTKRC é a sigla de "Gimp Tool Kit Resource Control", esse é o arquivo onde nós definimos os parametros do nosso tema. Assim como os outros arquivos relativos ao tema ele também fica no diretório gtk-2.0 dentro do diretório com o nome do tema. Ele deve ser nomeadogtkrc.

Agora vamos a sua estrutura:

Todo o texto após “#” (sem as aspas) é considerado um comentário e é ignorado.

Há muitos tipos de declarações que você pode usar em seu gtkrc. Estes são os que mais nós interessão:

  • style declarations, define a maneira como o tema é desenhado
  • class declarations, atribuem estilos à classes particulares
  • widget declarations, atribuem estilos aos widgets particulares pelo nome do widget
  • widget_class declarations, atribuem estilos aos widgets particulares pelo nome da classe

Você pode encontrar uma imensa gama de documentos sobre os recursos do GTK emhttp://developer.gnome.org/doc/API/2.0/gtk/gtk-Resource-Files.html. Lá você encontrará outros tipos de declarações que não são cobertas aqui.

Estilos: as definições do tema

Um estilo é definido pela palavra “style” seguido por um nome para o estilo e um outro nome do estilo que opcionalmente podemos herdar as suas propriedades. Aqui está um exemplo:

style "seu-estilo-nome" {
}

Você também pode unir uma classe no fim da definição do estilo:

style "seu-estilo-nome" {
} class "*" "seu-estilo-nome"

Isto diz ao estilo nomeado como “seu-estilo-nome” a qual classe ele será aplicádo, sendo então à classe “*”. Nós veremos mais a frente que você pode aplicar estilos às classes específicas do widget se desejar.

Você pode ter tantos estilos quanto você quiser, contanto que os mesmos estivejam nomeados diferentes uns dos outros. Para herdar propriedades de um outro estilo você pode fazer desta maneira:

style "seu-estilo-um" {
...
}

style "seu-estilo-dois" = "seu-estilo-um
" {
...

}

O segundo estilo herdaria as propriedades do primeiro estilo. As propriedades definidas no segundo estilo utilizariam a precedência naturalmente.

Propriedades de cor do estilo

Uma vez que o estilo está no lugar, a etapa seguinte é definir as novas corres do estilo. Agora, dentro de uma propriedade do estilo, há diversas bandeiras diferentes que podem ser ajustadas para mudar as cores para widgets diferentes e as peças do widget dentro dos vários estados do “widget”. O formato geral para ajustar tal bandeira seria:

As cores do estilo podem ser ajustadas usando indicações deste formulário:

BANDEIRA_DE_COR [ESTADO_DO_WIDGET] = COR

Onde:

  • BANDEIRA_DE_COR é bg, fg, text, ou base
  • ESTADO_DO_WIDGET é NORMAL, ATIVO, PRELIGHT, SELECTED, ou INSENSITIVE
  • A COR é uma cor descrita em uma das formas reconecidas

As cores podem ser especificadas das seguintes maneiras:

  • Através de uma string que contenha um nome de cor (GTK+ contem todos os nomes suportados pelo X na base de dados localizada em /usr/lib/X11/rgb.txt).
  • Através de um hexadecimal de forma #rrrrggggbbbb, #rrrgggbbb, #rrggbb, ou #rgb, onde r, g e b são dígitos do hexadecimal.
  • Ou como um triplet {r, g, b}, onde r, g e b são numeros inteiros na escala 0-65635 ou flutuadores na escala 0.0-1.0.

As várias bandeiras da cor que podem ser ajustadas são como segue:

  • bg - cor de fundo dos widget (cor do botão)
  • fg - cor do primeiro plano dos widget (texto do botão)
  • base - cor da árvore, ou da lista de fundo (como o fundo de entrada do endereço de um web browser)
  • texto - cor das fontes da árvore, ou da lista do primeiro plano (tal como a cor do texto no endereço do web browser)

As cores são especificadas em função do estado do widget. Os estados são:

  • NORMAL - o estado “normal” dos widget.
  • ACTIVE - é usado para a calha de um scrollbar, abas de um notebook com exceção da aba atual e áreas similares. Freqüentemente, este estado deve ser uma variante mais escura da cor NORMAL.
  • PRELIGHT - É o estado recomendado para GtkButton e objetos de menu que têm o cursor do mouse pairar sobre eles

  • SELECTED - O widget é destacado pelo usuário (tal como selecionar o texto em um widget editavel ou um item em uma lista).
  • INSENSITIVE - O widget é incapacitado com a função gtk_widget_set_sensisitive() ou talvez não esta na janela ativa.

Como todas as outras propriedades, qualquer coisa que você não especificar herdará as propriedades do estilo "pai" (ou do estilo default GTK se você não especificar um pai.)

Uma ferramenta útil para escolher cores é KColorEdit. você pode procura-lo em http://www.kde-apps.org/.

Propriedades de estilo do Widget: definindo propriedades dos widget tais como a espessura e o tamanho

GTK2 adiciona uma característica especialmente importante para arte do "theming", é a widget style properties. A widget style properties são as propriedades públicas da classe do widget que podem ser ajustadas nos temas através do formato C++. Estas propriedades incluem muitas maneiras úteis de customizar a aparencia do tema, tais como a espessura da peça, tamanho, o estilo da borda/sombra, a cor dos cursores do texto, etc. com exceção do xthickness/ythickness onde estes formatos serão do formato simples

WIDGETCLASS:: property_name = property_value 

Por exemplo para ajustar a largura do slider para todas as escalas de Widgets (tal como scrollbars) para 15 seria assim:

GtkRange:: slider_width = 15 

Motores do tema

Um estilo pode também especificar um motor do tema. Em muitos temas você vê algo semelhante a isto:

style "NAME-scrollbar" = "NAME-default" {
    engine "pixmap" {
        ...
    }

}

Isto aplica a pt&u=http://live.gnome.org/GnomeArt/Tutorials/GtkEngines/PixmapEngine&prev=/language_toolspt&u=http://live.gnome.org/GnomeArt/Tutorials/GtkEngines/PixmapEngine&prev=/language_tools ao estilo acima. As propriedades do motor são específicas a que motor você está usando. Há muitos pt&u=http://live.gnome.org/GnomeArt/Tutorials/GtkEngines&prev=/language_tools diferentes e se você usar um em seu tema então você necessitará ter que motor instalado em seu sistema (e querer assim seus usuários se você publicar seu tema).

Nota: você pode usar os motores múltiplos extrair estilos diferentes, mas você pode somente usar um motor por o estilo.

Classes: aplicando os estilos

Uma maneira alternativa de aplicar estilos é definir um estilo e aplicá-lo então a uma classe específica do widget. Esta pode ser uma maneira conveniente de organizar um tema complicado. Vamos examinar deste exemplo:

style "default" {
    # your style definitions
    # ...
    bg[PRELIGHT]      = "#00AFFF"
    base[PRELIGHT]    = "#00FFFF"
}

style "radiobutton" = "default" {
    bg[PRELIGHT]      = "#c3cfbf"
    base[PRELIGHT]    = "#d3dfcf"
}

class "GtkWidget" style "default"
class "GtkRadioButton" style "radio-button"

Aqui podemos notar que as cores do bg e da base estão definidas para à classe GtkWidget e a todos as suas subclasses (todas as classes derivadas de GtkWidget, podem ser encontradas aqui: pt&u=http://developer.gnome.org/doc/API/2.0/gtk/ch01.html&prev=/language_tools. Mas a última linha diz usar o estilo “radio-button” para a classe GtkRadioButton e todas as suas subclasses.

Se nós aplicássemos preferivelmente o estilo “radio-button” à classe de “GtkButton” então ambos os widget's GtkButton, GtkRadioButton, e GtkCheckButton teriam o mesmo estilo.

Testar

Que saber se está bom se você não puder testar?

Créditos

Autor: Agail Sanches ninjitisu@gmail.com

Data: 01/11/06

Local:

Wikifier: Agail Sanches

Data: 01/11/06

Mantenedor: AgailSanches

Time de Documentação do Ubuntu Brasil

CategoryDocumentacao

DesenvolvendoTemasGTK (last edited 2011-09-19 23:18:27 by localhost)