[SkinWars] Leçon3 [MSN Tutorial]

MasterCloud

All Killer No Filler

Premium

Date d'inscription : avril 2006

Messages : 642

Envoyer un message via MSN à MasterCloud

La Revanche des Uifiles ! (*Tadadam*)
Dans cette leçon, les enfants, vous allez apprendre à rajouter ou à supprimer un boutton d'une fenetre de conversation WLM (Ou du menu principal de WLM)

/!\ A chaque fois que vous changez un code uifile, n'oubliez pas de compilez en appuiyant sur le boutton "Compile Script" :)

Ajouter un bouton-icone

Le Debut du Commencement...

Pour commencer, il vous faut une icone de taille 16*16 ou 36*36 (la taille fait changer 2-3 petits trucs) !
Pour illuster le tutorial, j'utiliserai l'icone de iMotion

Hop ! On ouvre Resource Hacker (Nous n'aurons besoin QUE de Resource Hacker et de votre imagination ), et on ouvre la dll "msgsres".

Puis on ajoute un resource, comme on l'a appris dans la leçon 2 !
Je vous rappelle la procédure:

Action : Add a Ressource

Puis completé comme ça :

Vérifiez que vous n'ayez aucune ressource nommée "9999" dans le dossier "4000"

Voilà, il ne manque plus que le codage

Place au codage !

Il y a un petit code extremement simple qui permet d'ajouter un boutton-icone qui est :

Code:

<Button AccRole=43 class="TransparentButton" Layout=flowlayout(0,2,0,2) id=atom(imotion) tooltip=true Active=MouseandKeyboard|NoSyncFocus>
<urlelem layout=borderlayout() url="http://music-way.freezee.org/dotclear/">
<ButtonIcon class="ToolbarIcon" contentalign=middlecenter ID=Atom(ai002a)/>
</urlelem>
</Button>

Je vais vous expliquer où le mettre, ce qu'il faut remplir et à quoi ça sert

Déjà, pour ceux qui ont des notions de xHTML, cela va leur rappeller des choses :

Code:

<Button AccRole=43 class="TransparentButton" Layout=flowlayout(0,2,0,2) id=atom(imotion) tooltip=true Active=MouseandKeyboard|NoSyncFocus>

Cela défini que l'élément serra un boutton

"AccRole=43" signifie que le type de boutton sera le type "43" c'est à dire que l'icone serra de taille 36*36 (car c'est le type "43" qui définie ça)
Pour ceux qui ont pris une icone de taille 16*16, vous devez mettre "AccRole=57"

"Class="TransparentButton"" cela permet au boutton d'avoir de la transparence

"Layout=flowlayout(0,2,0,2)" : Jamais compris à quoi ça servait, mais faut le mettre :whistle: (Oui ça fait pro.. )
"id=atom(imotion)" TRES IMPORTANT ! Mais on en parlera plus tard dans la leçon :)
"tooltip=true" cela fait une "tooltip", une bulle d'information, Ceux qui ne la veulent pas, mettez "false" :)
"Active=MouseandKeyboard|NoSyncFocus>" Rends le boutton cliquable avec la souris, et pour les tarrés du clavier, permet de selectionner le boutton avec "tab"

Code:

<urlelem layout=borderlayout() url="http://music-way.freezee.org/dotclear/">

Cela parametre ce que fait le boutton

"url="http://music-way.freezee.org/dotclear/">" IMPORTANT AUSSI ! Cela dit ce que cela ouvre ! Ici "http://music-way.freezee.org/dotclear/". Vous pouvez aussi remplacer par un chemin dans votre bureau comme "C:\Program Files\Adobe\Photoshop CS2\Photoshop.exe"

Code:

<ButtonIcon class="ToolbarIcon" contentalign=middlecenter ID=Atom(ai002a)/>

Cela definit le type de boutton (encore..).. Ici, ce sera un boutton-icone

"<ButtonIcon class="ToolbarIcon"" : Boutton icone
"contentalign=middlecenter" : l'icone serra au milieu du boutton
"ID=Atom(ai002a)" : TRES IMPORTANT aussi ! On en reparlera plus tard dans la leçon

Donc une fois que nous avons le code, il ne manque plus qu'à le placer !

Comme j'ai envie de le placer à côté du boutton "Bloquer", dans la fenetre de conversation, le code serra juste à côté !

Donc, ouvrez le dossier "4004" (les codes "xHTML-Like" se trouvent dans le dossier 4004, et le "CSS-Like se trouve dans le dossier "4005" ) faites une recherche de "blockbtn" !

Vous tombez sur

Code:

<button class="HIGToolbarButton" padding=rect(10,5,10,4) layout=borderlayout() id=atom(blockbtn) cmdid=40276 AccRole=43 Tooltip=true active=mouseandkeyboard|nosyncfocus>
<ButtonIcon class="HIGToolbarIcon" contentalign=middlecenter ID=Atom(ai123)/>
<element layoutpos=Right contentalign=middlecenter layout=filllayout()>
<ButtonText class="HIGToolbarText" content="" contentalign=middlecenter Shortcut=1 ID=Atom(ai124)/>
</element>
</button>

Eh bien, vous allez, rire, mais il suffit de mettre le code juste aprés le </button>

Il ne reste plus qu'une étape : Mettre en relation le boutton et l'icone

Et il y a encore un code trés simple pour ça

Code:

Button[id=atom(imotion)]
{
accdesc:"iMotion";
}
ButtonIcon[ID=Atom(ai002a)]
{
Content:rcimg(9999);
}

Là, je ne vais pas y passé des heures: C'est extremement simple !

"Button[id=atom(imotion)]" : Cela signifie que l'on va "s'occuper" de l'element "imotion", On peut aussi dire que l'on va executer la commande "imotion", donc afficher le boutton
"accdesc:"iMotion";" : C'est ce que la "tooltip" affichera

"ButtonIcon[ID=Atom(ai002a)]" : Pareil que pour le "button", on va "s'occuper" de l'element, ou le modifier (dans notre cas)
"Content:rcimg(9999

" : Affiche l'icone que l'on a ajouté précédement (Ici, "9999")

Ouvrez donc le dossier 4005 et faites une recherche de "blockbtn", toujours, puis appuyer sur "F3" pour voir le second resultat

Vous tombez sur

Code:

button[id=atom(blockbtn)]
{
AccDefAction:rcstr(20068);
ShortcutString:rcstr(21125);
AccName:rcstr(426);
AccDesc:rcstr(3174);
}

Vous allez (encore) rire, mais il ne suffit que de coller le code aprés !

Et voilà, lancez WLM, et vous avez un beau boutton !

Retirer un boutton (ou à l'ancienne, des ongles et splotch...)

Simple : Il suffit de supprimer le code

Comme exemple, je veux supprimer le boutton d'enregistrement vocale, je fait une recherche de "VoiceImToolBarBtn".
Et je tombe sur :

Code:

<multicmdbutton class="HIGToolbarButton" padding=rect(6,3,6,3) layout=borderlayout() id=atom(VoiceIMtoolbarbtn) MouseUpCMDID=698 MouseDownCMDID=697 AccRole=43 Tooltip=true>
<ButtonIcon class="HIGToolbarIcon" contentalign=middlecenter padding=rect(0,0,0,0) ID=Atom(ai73)/>
<element layoutpos=Right contentalign=middlecenter layout=filllayout()>
<ButtonText class="HIGToolbarText" content="" contentalign=middlecenter padding=rect(1,0,0,0) Shortcut=1 ID=Atom(ai74)/>
</element>
</multicmdbutton>

Et hop, je supprime tout ça

Pareil pour le "CSS-Like", faites une autre recherche, et vous tombez sur :

Code:

multicmdbutton[id=atom(VoiceIMtoolbarbtn)]
{
AccDefAction:rcstr(20068);
AccName:rcstr(41108);
AccDesc:rcstr(41109);
}
ButtonIcon[ID=Atom(ai73)]
{
content:rcimg(992);
}

Supprimez cela

Si vous avez bien suivi ce tutorial, votre fenetre de conversation ressemblera à ça :

Enjoy

PS: Merci à Jonathan de LiveCrea pour l'idée

Software is like sex... It's better when it's free. (Linus Torvalds)

		Forums CustomXP > Interface > Modifications Dll - Exe
[SkinWars] Leçon3 [MSN Tutorial]

madness Analyste chez CXP Team CustomXP.net Date d'inscription : juin 2004 Messages : 11 075	super tuto Chapeau bas pour tout le travail
	Par lefreut, Le meilleur logiciel de transparence...

madness Analyste chez CXP Team CustomXP.net Date d'inscription : juin 2004 Messages : 11 075	vu mon age, c'est à moi de te dire : De rien, jeune padawan Beau boulot en tout cas
	Par lefreut, Le meilleur logiciel de transparence...

madness Analyste chez CXP Team CustomXP.net Date d'inscription : juin 2004 Messages : 11 075	J'ai presque le double de ton age. (ho piniase ) Et je suis aussi vieux que yoda, j'ai juste plus d'exprérience, c'est tout
	Par lefreut, Le meilleur logiciel de transparence...

Anti-trust Z'avez pas vu Cortex ? Ultimate Date d'inscription : décembre 2002 Messages : 11 004	moi j'suis djeun dans la tete mayrde... les vieux disent ça aussi
	Just Maried ! Ce soir, comme tous les soirs Cortex et moi allons tenter de conquérir le monde

Identifiant		Se souvenir de moi ?
Mot de passe