Tutorial sobre Skinning

[ Voltar a Skinning do Shareaza ]

<windowSkins>

O elemento <windowSkins> é o elemento mais poderoso disponível. Ele permite que a aparência de qualquer janela do Shareaza seja personalizada. Ele afeta as fronteiras externas que você vê em uma skin do Shareaza.

Skins da janela aparecem como elementos <windowSkin> dentro do elemento <windowSkins> principal. Cada skin da janela tem um número de elementos dentro dela para definir os diferentes aspectos da aparência da janela.

Aqui está um simples exemplo:

<?xml version="1.0" encoding="UTF-8"?>
<skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0">

<manifest name="My Window Skin" author="Me" type="Skin"/>
   <windowSkins>
      <windowSkin>
          <target name="CMainWnd"/>
          <image path="MySkin.bmp"/>
          <parts>
             <part name="Top" rect="0,0,64,20"/>
          </parts>
      </windowSkin>
   </windowSkins>
</skin>

Elementos

Há alguns elementos diferentes que você pode incluir em uma skin de janela, e cada um será descrito separadamente mais abaixo nesta página. Aqui está um índice dos elementos:

Elemento Descrição
<target> Aplica a skin para uma janela específica ou a família do windows
<image> Carrega um bitmap para usar na skin
<parts> Define as partes (áreas) da imagem fonte a ser usada para pintar a janela
<anchors> Define áreas da janela as quais tem significado especial, tais como botões
<caption> Define como o texto da legenda deve ser pintado
<region> Gera uma região não-retangular para a janela

<target>

O elemento <target> especifica uma janela para aplicar esta skin de janela particular (ex: a janela do monitor de download). Pode haver mais do que um elemento <target> na skin, portanto, aplicando-o a mais do que uma janela.

O alvo é inserido em um atributo name , e é o nome de uma janela do Shareaza ou "base class". A seguinte é uma lista de nomes alvos example:

Alvo Descrição
CMainWnd A janela principal
CChildWnd Qualquer janela criança flutuante
CChildWnd.Panel Qualquer janela criança fixa (modo em abas)
CSearchWnd A janela de busca apenas, quando flutuando
CSearchWnd.Panel A janela de busca apenas, quando fixo (modo em abas)
*** Qualquer painel dentro do Shareaza pode ser skinned como este (ex: CHomeWnd.Panel/CmediaWnd.Panel) ***
CBaseMatchWnd A busca, monitor de acertos e navegar pelas janelas dos hosts, quando flutuando
CHostCacheWnd A janela do cache dos hosts
CDialog Cada diálogo no aplicativo
CAboutDlg O diálogo sobre
CSettingsSheet A folha das configurações do shareaza (NÃO um CDialog)
CDownloadMonitorDlg O monitor de downloads

<image>

A tag <image> especifica uma imagem para carregar para formar parte da skin. O nome do arquivo bitmap é especificado em um atributo path. Há dois tipos de tags <image> suportadas atualmente. O tipo útil e mais comum é o seguinte:

<image path="SomeImage.bmp"/>

Este formulário carrega a imagem especificada, e usa-a para pintar a skin. Todas as partes da janela, etc, são carregadas da imagem. A outra forma menos comum é:

<image path="Background.bmp" type="watermark"/>

Isto ladrilha a imagem nomeada como o fundo para a janela alvo, como uma marca d'água. Atualmente isso só é suportado em diálogos.

<parts>

O elemento <parts> contém uma lista de áreas (ou "peças") da imagem fonte a qual deve ser usada para pintar a janela. Janelas são divididas em várias partes, com cada parte sendo dado um nome tal como "TopLeft". Shareaza pinta a janela desenhando as partes da imagem da skin em cada uma destas partes da janela.

A cada parte é dado um name e um rect. O nome indica qual área da janela que deve ser desenhada, e o rect especifica o retângulo exato da imagem a usar no formato x, y, largura, altura. Por exemplo:

<parts>
    <part name="TopLeft" rect="0,0,32,20"/>
    <part name="Top" rect="32,0,64,20"/>
    <part name="TopRight" rect="96,0,32,20"/>
</parts>

Os seguintes nomes das partes podem ser incluídos na skin:

ParteDescrição
TopLeft O canto superior esquerdo da janela
Top A borda superior do meio da janela (variable size)
TopRight O canto superior direito da janela
 
LeftTop A área entre TopLeft e Esquerda
Left A borda esquerda da janela (variable size)
LeftBottom A área entre a Esquerda e BottomLeft
 
RightTop A área entre TopRight e Direita
Right A borda direita da janela (variable size)
RightBottom A área entre a Direita e a BottomRight
 
BottomLeft O canto inferior esquerdo da janela
Bottom A borda inferior no meio da janela (variable size)
BottomRight O canto inferior direito da janela
   
System O elemento do menu do sistema nos estados normal, pairar e pressionado
SystemHover
SystemDown
Minimise O botão minimizar nos estados normal, pairar e pressionado
MinimiseHover
MinimiseDown
Maximise O botão de maximizar nos estados normal, pairar e pressionado
MaximiseHover
MaximiseDown
Close O botão fechar nos estados normal, pairar e pressionado
CloseHover
CloseDown

Estas partes têm os seguintes estados inativos:

Parte Descrição
TopLeftIA O canto superior esquerdo da janela
TopIA A borda superior do meio da janela (variable size)
TopRightIA O canto superior direito da janela

As quatro partes do canto estão sempre pintadas exatamente como elas aparecem na imagem fonte. As quatro partes das bordas estão ladrilhadas para preencher o espaço conforme necessário. Todas as partes são opcionais e não serão personalizadas se não forem achadas no arquivo XML.

Para as quatro partes de tamanho variável, ladrilhar é o método padrão de preencher o espaço necessário na tela. Um método alternativo também está disponível o qual estende a parte fonte para preencher a área alvo. Para especificar isto, inclua mode="stretch" na <part> elemento. Partes inativas e esticada apareceriam como tais:

<parts>
    <part name="TopLeft" rect="0,0,32,20"/>
    <part name="TopLeftIA" rect="0,0,32,20"/>
    <part name="Top" rect="32,0,64,20" mode="stretch"/>
    <part name="TopIA" rect="32,0,64,20" mode="stretch"/>
    <part name="TopRight" rect="96,0,32,20"/>
    <part name="TopRightIA" rect="96,0,32,20"/>
</parts>

Por último, como declarado mais cedo, todas as janelas-painéis podem ser skinned com as partes. Por exemplo, no Shareaza Media Player há um painel de janela acima que declara "media", assim como um botão "fechar". Aqui está um exemplo das partes:

<image path="WindowPanel.bmp"/>
<target window="CMediaWnd.Panel"/>
    <parts>
        <part name="TopLeft" rect="1,23,129,21"/>
        <part name="Top" rect="130,23,10,21"/>
        <part name="TopRight" rect="0,45,64,21"/>
        <part name="CloseHover" rect="64,45,61,21"/>
        <part name="CloseDown" rect="128,45,61,21"/>
    </parts>

Claro, você ancoraria num botão para fechar, mas é pra isso que a próxima seção é. =)

<anchors>

Âncoras são usadas para posicionar partes importante da janela, tais como os botões fechar, maximizar e minimizar. Shareaza precisa saber aonde estas áreas estão para que ele possa gerenciar a entrada de dados do usuário corretamente.

Por exemplo:

<anchors>
    <anchor name="System" rect="4,4,18,18"/>
    <anchor name="Close" rect="-21,4,17,17"/>
    <anchor name="Maximise" rect="-40,4,17,17"/>
    <anchor name="Minimise" rect="-59,4,17,17"/>
</anchors>

Matendo em mente que o rect's no elemento <anchor> são as posições da janela em vez de posições na imagem fonte, e que as janelas podem ser de tamanho arbitrário , precisa haver um modo de especificar retângulos relativos a qualquer canto da janela, não apenas ao canto superior esquerdo.

Isto é feito permitindo números positivos e negativos nas coordenadas. Coordenadas positivas são relativas ao canto superior/esquerdo, enquanto coordenadas negativas são relativas ao fundo/canto direito. Então no exemplo acima, uma coordenada X de "-21" significa 21 pixels da borda da mão-direita, enquanto que uma coordenada X do "4" significa 4 pixels da borda da mão-esquerda. Retângulos estão no formato x, y, largura, altura.

Âncoras e partes podem trabalhar juntas para produzir a janela. Por exemplo, se você tiver fornecido MinimiseHover e partes MinimiseDown, estas serão pintadas na sua âncora Minimizar.

As seguintes âncoras podem ser definidas:

Âncora

Descrição
Icon Uma área de 16x16 para exibir o ícone da janela
System A área a qual pode ser clicada para produzir o menu popup do sistema
Minimise O botão minimizar
Maximise O botão maximizar
Close O botão fechar

<caption>

O elemento <caption> descreve como a janela do texto-da-legenda deve ser exibida. Se nenhum elemento da legenda estiver presente, o texto-da-legenda não será desenhado. Aqui está um exemplo de elemento da legenda:

<caption
    rect="25,2,-69,22"
    fontFace="Tahoma" fontSize="11"
    colour="FFFFFF" inactiveColour="273C47"/>

Os seguintes atributos podem estar presentes em um elemento de legenda:

  • rect - O retângulo a ser ocupado pela legenda. Cada uma das quatro coordenadas é um absolute coordinate, ex: x1, y1, x2, y2 , e coordenadas negativas são relativas a borda inferior ou a direita da janela. Isto permite ao retângulo da legenda escalar com o tamanho da janela.
  • fontFace - O nome da face da fonte, se diferente ir para a fonte de legenda padrão do Windows.
  • fontSize - O tamanho da fonte, em pontos ou pixels. Se um tamanho é especificado, você deve especificar o nome da face também.
  • fontWeight - O peso da fonte, ou como um inteiro entre 1 e 1000 ou uma palavra-chave tais como "plain" ou "bold".
  • colour - A cor para pintar o texto da legenda quando a janela está ativa.
  • inactiveColour - A cor para pintar o texto da legenda quando a janela está inativa.
  • OutlineColour - A cor para pintar uma borda do tamanho de um pixel em torno do texto da legenda.
  • ShadowColour - A cor para pintar uma sombra em torno do texto da legenda.
  • fill - A cor para preencher o retângulo da legenda antes de pintar o texto. Se nenhuma é especificada, o retângulo não é preenchido.
  • caps - Se definido como "all", as legendas são convertidas para maiúsculas antes da exibição.

<region>

O elemento <region> diz ao Shareaza como construir uma região não-retangular para a janela, o que permite que janelas não-retangulares sejam criadas para um estilo visual impressionante. Se este elemento não está presente, Shareaza cria uma região retangular padrão.

Se o elemento região está incluído, ele consiste de um ou mais elementos <shape> , cada um representando uma forma primitiva, as quais são unidas juntas usando o conjunto de operações padrão pra produzir a região complexa final.

Aqui está um exemplo:

<region>
    <shape type="rectangle" rect="9,25,-11,-1"/>
    <shape type="roundRect" rect="0,0,-1,26" size="16,25" combine="or"/>
</region>

Cada forma consecutiva é combinada com a região atual para produzir a última forma para a janela. Cada forma contém:

  • type - O tipo de forma (veja abaixo).
  • rect - O retângulo limite para este formato, em formulário x1, y1, x2, y2 . Os números negativos são relativos a borda do fundo ou a direita da janela, então "0,0, -1, -1" cobriria a janela inteira.
  • combine - Como combinar esta forma com as anteriores. A primeira forma não deve ter atributos combinando.

Os modos de combinação possíveis são :

  • or - Adicionar esta forma com as anteriores (lógica ou)
  • and - Pegue a área de sobreposição desta forma e as anteriores (lógica e)
  • xor - Pegue a área coberta por esta forma, ou a outra forma, mas nao as áreas de sobreposição (xor lógico)
  • diff - Subtrair esta forma das anteriores

Os tipos de formas possíveis são:

  • rectangle - Um retângulo
  • ellipse - Uma elipse
  • roundRect - Um retângulo com bordas arredondadas. Formas deste tipo precisam de ter um atributo extra chamado size com dois parâmetros inteiros representando a largura e altura das curvas, por exemplo size="16,20"

[ Voltar a Skinning do Shareaza ]

  • en
  • es
  • fr
  • de
  • hr
  • it
  • lt
  • nl
  • nb
  • pl
  • pt
  • sl
  • tr
  • el
  • he
  • ja
  • zh-tw
  • en
  • ca
  • fa
  • ru
Muitas pessoas contribuem com o tempo delas e esforço para o Shareaza. Por favor veja nossa página de reconhecimento.
Visit Shareaza's Project Page at SourceForge.net
< Topo da Página | Contacte-nos >