Tutorial sobre Skinning

[ Voltar a Skinning do Shareaza ]

Criando Skins Remotas

Começando com uma analogia, o remoto é como uma cabeça do Mr. Potato. Você define uma imagem de fundo (a face) e então ancora toda as partes da banda e mídia (olhos, nariz, boca, etc) naquela imagem de fundo. Com o remoto você pode controlar as funções da banda e mídia. É inteiramente personalizável e pode incluir tantas ou tão poucas funções do Shareaza como você gosta.

Nesta seção, você será levado passo-a-passo, através da construção do remoto. Esta seção assume que você tenha um conhecimento de skinning do Shareaza. É por isso que é uma ótima idéia ler sobre manifestos, assim como windowskin elements antes de construir sua skin remota. Contudo, se você se sente como mergulhando direto, este tutorial mostra os elementos que você precisa. Procure o texto em negrito vermelho sempre que você precisar de um pouco mais de explicação. Vamos começar =)

Antes de nós adicionarmos âncoras e partes seu arquivo .xml deve se parecer com isto:

<?xml version="1.0" encoding="UTF-8"?>
<skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0">
<manifest name="My Remote"
 author="My name"
 description="A remote"
 link="http://shareaza.sourceforge.net/"
 email="Me@myemail.com"
 version="1.0"
 type="skin"
 language="en"
 />
<windowSkins>
<windowSkin>
</windowSkin>
</windowSkins>
</skin>

Neste ponto eu recomendaria copiar isto no seu arquivo texto e editar os campos do manifesto.

Aqui está uma breve descrição de todos os elementos do manifesto.

  • Name - O nome do seu remoto.
  • Author - O nome do criador do remoto.
  • Description - Uma descrição revelante do remoto (Ex: Este é um controlador de mini-banda).
  • Link - Para uma homepage para mais informação sobre seu remoto ou outras coleções de remotos.
  • E-mail - Um endereço de e-mail para contato para mais informação ou bugs no que diz respeito ao remoto.
  • Version - Um número denotando a versão. As versões mais novas estão numeradamente aumentadas (1,1.1,1.2 etc.)
  • Type - Sempre definida para a skin.
  • Language - Se em Inglês defina como "en".

A seguir, nós definiremos nossa imagem de fundo. Aqui estão os passos:

  • Defina o caminho da imagem para o .bmp em que seus gráficos do remoto estão.
  • Definir a janela do alvo como "CremoteWnd" (a janela do remoto).
  • Definir a região (<part name="Background"), que seu remoto de fundo ocupa (isto é, em x, y, largura, altura).

<?xml version="1.0" encoding="UTF-8"?>
<skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0">
<manifest name="My Remote"
 author="My name"
 description="A remote"
 link="http://shareaza.sourceforge.net/"
 email="Me@my_email.com"
 version="1.0"
 type="skin"
 language="en"
 />
 
<windowSkins>
 
 <windowSkin>
 
 
 <image type="image" path="MyRemote.bmp"/>
 
 <target window="CRemoteWnd"/>
 
        
 <parts>
 
 <part name="Background" rect="0,0,341,125"/>
 
 </parts>
 
 
 </windowSkin>
 
        
</windowSkins>
 
</skin>

    

  

  
ÂNCORAS

  
Agora que seu remoto tem um fundo,você vai querer ancorar alguns botões nele certo ? As âncoras dizem ao Shareaza aonde pintar as partes dos seus botões na janela do remoto. De novo, estas partes estão ancoradas na janela em x,y,largura,altura relativos ao fundo do remoto. Aqui está uma lista e descrição do que você pode ancorar:

  

    
 
      Âncoras
      Descrição
    

    
 
      StatusText
      Área exibindo o título da canção, o tempo decorrido, banda, etc.
    

    
 
      History
      Executando a exibição da banda
    

    
 
      FlowTx
      Exibição da banda de saída
    

    
 
      FlowRx
      Exibição da banda de entrada
    

    
 
      MediaSeekTrack
      Procurar a faixa para a mídia
    

    
 
      MediaVolTrack
      Faixa de volume para a mídia
    

    
 
      ScalerTrack
      Scaler faixa de limitação de banda
    

    
 
      MediaStatePlaying
      Área para o sinal gráfico 'tocar' quando a mídia está em execução
    

    
 
      MediaStatePaused
      Área para o sinal gráfico 'pausa' quando a mídia está pausada
    

    
 
      MediaStateStopped
      Área para o sinal gráfico 'pare' quando a mídia está parada
    

    
 
      _ID_TRAY_OPEN
      Restaura o Shareaza quando no tray do sistema
    

    
 
      _ID_MONITOR_CLOSE
      Fecha o remoto
    

    
 
      _ID_NETWORK_SEARCH
      Abre uma nova aba de busca
    

    
 
      _ID_TOOLS_DOWNLOAD
      Abre a janela do baixar um torrent
    

    
 
      _ID_TAB_LIBRARY
      Abre a aba da biblioteca
    

    
 
      _ID_MEDIA_PLAY
      O botão tocar
    

    
 
      _ID_MEDIA_PAUSE
      O botão pausar
    

    
 
      _ID_MEDIA_STOP
      O botão de mídia
    

    
 
      _ID_MEDIA_PREVIOUS
      O botão anterior
    

    
 
      _ID_MEDIA_NEXT
      O botão seguinte
    

    
 
      _ID_MEDIA_MUTE
      O botão mudo
    

  

  
Qualquer função do shareaza pode ser ancorada no remoto. Para achar mais funções apenas abra o arquivo default-pt-br.xml. É é achado na pasta de idiomas que reside na sua pasta de sinks. Com o que a sua âncora parece ? Dê uma olhada.

  

    
 
      
<anchors>
 
<anchor name="StatusText" rect="69,46,262,20"/>
 
<anchor name="History" rect="70,27,208,13"/>
 
<anchor name="FlowTx" rect="292,27,12,13"/>
 
<anchor name="FlowRx" rect="319,27,12,13"/>
 
        
<anchor name="MediaSeekTrack" rect="71,67,232,12"/>
 
<anchor name="MediaVolTrack" rect="162,91,64,17"/>
 
 <anchor name="ScalerTrack" rect="71,40,206,9"/>
 
<anchor name="_ID_TRAY_OPEN" rect="8,18,48,48"/>
 
<anchor name="_ID_MONITOR_CLOSE" rect="318,7,13,13"/>
 
<anchor name="_ID_NETWORK_SEARCH" rect="258,83,22,22"/>
 
        
 <anchor name="_ID_TOOLS_DOWNLOAD" rect="280,83,22,22"/>
 
<anchor name="_ID_TAB_LIBRARY" rect="302,83,22,22"/>
 
<anchor name="_ID_MEDIA_PLAY" rect="20,85,30,30"/>
 
 <anchor name="_ID_MEDIA_PAUSE" rect="20,85,30,30"/>
 
<anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/>
 
<anchor name="_ID_MEDIA_PREVIOUS" rect="82,90,20,20"/>
 
        
 <anchor name="_ID_MEDIA_NEXT" rect="107,90,20,20"/>
 
<anchor name="_ID_MEDIA_MUTE" rect="134,90,20,20"/>
 
</anchors>

    

  

  
PARTES

  
Em seguida, você vai querer que seus botões tenham pra cima, pairar, pra baixo e os estados desativados. Aqui está como você adiciona os estados dos botões:

  

    
 
      Partes
      Descrição
    

    
 
      _ID_MEDIA_STOP.Up
      Botão parar em seu estado de repouso (Pra cima).
    

    
 
      _ID_MEDIA_STOP.Hover
      Botão parar no estado do mouse-pairando-sobre.
    

    
 
      _ID_MEDIA_STOP.Down
      Botão parar em estado pressionado.
    

    
 
      _ID_MEDIA_STOP.Disabled
      Botão parar no estado desativado (Media player desligado).
    

  

  
Para todas as suas partes você pode ter estes estados. Quando você paira sobre eles no seu remoto, o estado 'pairar' é pintado. Quando você pressiona o botão pra baixo, o estado 'pra baixo' é pintado. Claro, estas partes só são pintadas se você tiver uma âncora de acompanhamento. Se você queria o parar você precisaria das seguntes âncora e partes. Dê uma olhada.

  

    
 
      
<anchors>
 
<anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/>
 
</anchors>
 
<parts>
 
        
  <part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/>
 
        
  <part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/>
 
<part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/>
 
</parts>

    

  

  
Há algumas peculiaridades interessantes:

  
    
    
  • Ancore tocar e pausar na mesma área e exclua uma parte do estado desativado. Você terá um botão pausar quando a música tocar e um botão tocar quando a música está pausada/parada.
    • 
    
  • Excluir um estado desativado para tocar e tocar agirá como um botão de abrir o arquivo de mídia quando o media player estiver fechado/vazio.
    • 
    
  • Para as partes Histórico/Fluxo use "1" para ter a imagem pintada do fundo e "2" para ter a imagem pintada do topo (ex: uma borda do pico para a sua barra de banda).
    • 
  

  
Aqui está com o que a sua seção das partes (pra cima, pra baixo, desativado, os estados do botão pairar) se pareceria.

  

    
 
      
<parts>
 
<part name="Background" rect="0,0,341,125"/>
 
<part name="HistoryTx1" rect="6,150,208,13"/>
 
<part name="HistoryRx1" rect="6,131,208,13"/>
 
<part name="FlowTx1" rect="228,131,12,13"/>
 
        
<part name="FlowRx1" rect="255,131,12,13"/>
 
<part name="MediaSeekTab" rect="159,210,23,11"/>
 
<part name="MediaSeekBar" rect="209,210,92,10"/>
 
<part name="MediaVolTab" rect="140,210,9,17"/>
 
<part name="MediaVolBar" rect="159,221,58,17"/>
 
<part name="ScalerTab" rect="224,224,9,9"/>
 
        
<part name="_ID_TRAY_OPEN.Hover" rect="221,147,48,48"/>
 
<part name="_ID_TRAY_OPEN.Down" rect="269,147,48,48"/>
 
<part name="_ID_MONITOR_CLOSE.Hover" rect="324,148,13,13"/>
 
<part name="_ID_MONITOR_CLOSE.Down" rect="318,7,13,13"/>
 
<part name="_ID_NETWORK_SEARCH.Hover" rect="275,114,22,22"/>
 
<part name="_ID_NETWORK_SEARCH.Checked" rect="275,114,22,22"/>
 
        
<part name="_ID_NETWORK_SEARCH.Down" rect="258,83,22,22"/>
 
<part name="_ID_TOOLS_DOWNLOAD.Hover" rect="297,114,22,22"/>
 
<part name="_ID_TOOLS_DOWNLOAD.Checked" rect="297,114,22,22"/>
 
<part name="_ID_TOOLS_DOWNLOAD.Down" rect="280,83,22,22"/>
 
<part name="_ID_TAB_LIBRARY.Hover" rect="319,114,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Checked" rect="319,114,22,22"/>
 
        
<part name="_ID_TAB_LIBRARY.Down" rect="302,83,22,22"/>
 
<part name="_ID_MEDIA_PLAY.Up" rect="140,180,30,30"/>
 
<part name="_ID_MEDIA_PLAY.Hover" rect="0,180,30,30"/>
 
<part name="_ID_MEDIA_PLAY.Down" rect="0,210,30,30"/>
 
<part name="_ID_MEDIA_PAUSE.Up" rect="170,180,30,30"/>
 
<part name="_ID_MEDIA_PAUSE.Hover" rect="30,180,30,30"/>
 
        
<part name="_ID_MEDIA_PAUSE.Down" rect="30,210,30,30"/>
 
<part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/>
 
<part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/>
 
<part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/>
 
<part name="_ID_MEDIA_PREVIOUS.Hover" rect="80,180,20,20"/>
 
<part name="_ID_MEDIA_PREVIOUS.Down" rect="80,200,20,20"/>
 
        
<part name="_ID_MEDIA_PREVIOUS.Disabled" rect="80,220,20,20"/>
 
<part name="_ID_MEDIA_MUTE.Hover" rect="100,180,20,20"/>
 
<part name="_ID_MEDIA_MUTE.Down" rect="100,200,20,20"/>
 
<part name="_ID_MEDIA_NEXT.Hover" rect="120,180,20,20"/>
 
<part name="_ID_MEDIA_NEXT.Down" rect="120,200,20,20"/>
 
<part name="_ID_MEDIA_NEXT.Disabled" rect="120,220,20,20"/>
 
        
</parts>

    

  

  
FONTES

  
Em seguida, nós precisamos definir sua legenda-de-texto. Ela define a fonte e estilo que aparece na sua âncora StatusText. Ela será usada para o título da música, tempo, banda, etc.

  
    
    
  • Face - O nome da face da fonte, por exemplo "Tahoma".
    • 
    
  • Size - O tamanho da fonte, por exemplo "8".
    • 
    
  • Weight - O peso da fonte, seja como um valor constante ou integral entre 1 e 1000. "normal" e "negrito" também são aceitos.
    • 
    
  • Colour - A cor do seu StatusText em formato html.
    • 
  

  

    
 
      
<caption fontFace="Tahoma" fontSize="8" fontWeight="normal" colour="FFB000"/>

    

  

  
REGIÕES

  
Finalmente, você pode ter qualquer forma de remoto através do uso de  regiões. 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 usando as operações de padrão definido para 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"
    • 
  

  
ARQUIVO .XML FINAL

  

    
 
      
<?xml version="1.0" encoding="UTF-8"?>
 
<skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0">
 
<manifest name="My Remote"
 
 author="My name"
 
 description="A remote"
 
        
 link="http://www.shareaza.com/"
 
 email="Me@myemail.com"
 
 version="1.0"
 
 type="skin"
 
 language="en"
 
 />
 
        
<windowSkins>
 <windowSkin> 
 <image type="image" path="WMPRemote.bmp"/>
 
 <target window="CRemoteWnd"/>
 
 <anchors>
 
 <anchor name="StatusText" rect="69,46,262,20"/>
 
        
 <anchor name="History" rect="70,27,208,13"/>
 
 <anchor name="FlowTx" rect="292,27,12,13"/>
 
 <anchor name="FlowRx" rect="319,27,12,13"/>
 
 <anchor name="MediaSeekTrack" rect="71,67,232,12"/>
 
 <anchor name="MediaVolTrack" rect="162,91,64,17"/>
 
 <anchor name="ScalerTrack" rect="71,40,206,9"/>
 
        
 <anchor name="_ID_TRAY_OPEN" rect="8,18,48,48"/>
 
 <anchor name="_ID_MONITOR_CLOSE" rect="318,7,13,13"/>
 
 <anchor name="_ID_NETWORK_SEARCH" rect="258,83,22,22"/>
 
 <anchor name="_ID_TOOLS_DOWNLOAD" rect="280,83,22,22"/>
 
 <anchor name="_ID_TAB_LIBRARY" rect="302,83,22,22"/>
 
 <anchor name="_ID_MEDIA_PLAY" rect="20,85,30,30"/>
 
        
 <anchor name="_ID_MEDIA_PAUSE" rect="20,85,30,30"/>
 
 <anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/>
 
 <anchor name="_ID_MEDIA_PREVIOUS" rect="82,90,20,20"/>
 
 <anchor name="_ID_MEDIA_NEXT" rect="107,90,20,20"/>
 
 <anchor name="_ID_MEDIA_MUTE" rect="134,90,20,20"/>
 
 </anchors>
 
        
 <parts>
 
 <part name="Background" rect="0,0,341,125"/>
 
 <part name="HistoryTx1" rect="6,150,208,13"/>
 
 <part name="HistoryRx1" rect="6,131,208,13"/>
 
 <part name="FlowTx1" rect="228,131,12,13"/>
 
 <part name="FlowRx1" rect="255,131,12,13"/>
 
        
 <part name="MediaSeekTab" rect="159,210,23,11"/>
 
 <part name="MediaSeekBar" rect="209,210,92,10"/>
 
 <part name="MediaVolTab" rect="140,210,9,17"/>
 
 <part name="MediaVolBar" rect="159,221,58,17"/>
 
 <part name="ScalerTab" rect="224,224,9,9"/>
 
 <part name="_ID_TRAY_OPEN.Hover" rect="221,147,48,48"/>
 
        
 <part name="_ID_TRAY_OPEN.Down" rect="269,147,48,48"/>
 
 <part name="_ID_MONITOR_CLOSE.Hover" rect="324,148,13,13"/>
 
 <part name="_ID_MONITOR_CLOSE.Down" rect="318,7,13,13"/>
 
 <part name="_ID_NETWORK_SEARCH.Hover" rect="275,114,22,22"/>
 
 <part name="_ID_NETWORK_SEARCH.Checked" rect="275,114,22,22"/>
 
 <part name="_ID_NETWORK_SEARCH.Down" rect="258,83,22,22"/>
 
        
 <part name="_ID_TOOLS_DOWNLOAD.Hover" rect="297,114,22,22"/>
 
 <part name="_ID_TOOLS_DOWNLOAD.Checked" rect="297,114,22,22"/>
 
 <part name="_ID_TOOLS_DOWNLOAD.Down" rect="280,83,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Hover" rect="319,114,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Checked" rect="319,114,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Down" rect="302,83,22,22"/>
 
        
 <part name="_ID_MEDIA_PLAY.Up" rect="140,180,30,30"/>
 
 <part name="_ID_MEDIA_PLAY.Hover" rect="0,180,30,30"/>
 
 <part name="_ID_MEDIA_PLAY.Down" rect="0,210,30,30"/>
 
 <part name="_ID_MEDIA_PAUSE.Up" rect="170,180,30,30"/>
 
 <part name="_ID_MEDIA_PAUSE.Hover" rect="30,180,30,30"/>
 
 <part name="_ID_MEDIA_PAUSE.Down" rect="30,210,30,30"/>
 
        
 <part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/>
 
 <part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/>
 
 <part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/>
 
 <part name="_ID_MEDIA_PREVIOUS.Hover" rect="80,180,20,20"/>
 
 <part name="_ID_MEDIA_PREVIOUS.Down" rect="80,200,20,20"/>
 
 <part name="_ID_MEDIA_PREVIOUS.Disabled" rect="80,220,20,20"/>
 
        
 <part name="_ID_MEDIA_MUTE.Hover" rect="100,180,20,20"/>
 
 <part name="_ID_MEDIA_MUTE.Down" rect="100,200,20,20"/>
 
 <part name="_ID_MEDIA_NEXT.Hover" rect="120,180,20,20"/>
 
  <part name="_ID_MEDIA_NEXT.Down" rect="120,200,20,20"/>
 
 <part name="_ID_MEDIA_NEXT.Disabled" rect="120,220,20,20"/>
 
 </parts>
 
        
 <caption fontFace="Small Fonts" fontSize="8" fontWeight="normal" colour="FFB000"/>
 
 <region>
 
  <shape type="rectangle"  rect="1,15,341,83"/>
 
  <shape type="roundrectangle" rect="319,0,332,1" combine="or" />
 
 </region>
 
 </windowSkin>
 
        
</windowSkins>
</skin>

    

  

  
Boa sorte! Se voce tem quaisquer perguntas, por favor poste elas no fórum de skinning: skinning forum. =)
  

  

 
[ 
    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 >