OtClient - Tutorial Básico #2
Aula 2: Editando mod/Modules Parte 2
Hoje estarei me especificando mais com as janelas matrizes ou raízes como preferirem.
Passo 1: Conhecendo as matrizes
Irei mostrar 2 matrizes para vocês que são as únicas que vi até agora dentro dos códigos do OtClient (Isso não quer dizer que não possam existir novos modelos)
Modelo 1 : MainWindowModelo 2: MiniWindow
Cada um desses 2 modelos tem um jeito diferente para ler o código.
No Modelo 1, ele é mais simples, Pois você só precisa mostrar a janela que irá ser criada dentro dele, como no exemplo:
MainWindowid: tutorialWindow!text: tr('Tutorial')size: 150 150Buttonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.right
Como podem ver é um jeito mais simples e pratico de fazer os códigos, Porem, esse tipo de janela não "Gruda" nos painéis direitos e nem esquerdos.
Já no Modelo 2, as coisas ficam um pouco mais complicadas como por exemplo, o código tem que ser escrito de uma maneira diferente para que funcione corretamente, Mais também tem as suas vantagens, como, botão de fechar e minimizar automático icones ao lado do titulo entre outros, agora vamos ver alguns exemplos:
1° vou dar um exemplo de codigo '.lua', para se usar com a matriz MiniWindow
tutorialPanel = niltutorialButton = nilfunction init()tutorialButton = modules.client_topmenu.addRightGameToggleButton('tutorialButton', tr('tutorial'), '/images/topbuttons/skills', toggle)tutorialButton:setOn(false)tutorialWindow = g_ui.loadUI('tutorial', modules.game_interface.getRightPanel())tutorialWindow:disableResize()tutorialWindow:setup()endfunction terminate()tutorialButton:destroy()endfunction toggle()if tutorialButton:isOn() thentutorialWindow:close()tutorialButton:setOn(false)elsetutorialWindow:open()tutorialButton:setOn(true)endendfunction onMiniWindowClose()tutorialButton:setOn(false)end
E agora 1 exemplo de código .otui usando MiniWindow de forma errada
MiniWindowid: tutorialWindow!text: tr('Tutorial')size: 150 120@onClose: onMiniWindowClose()&save: trueButtonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.right
E agora 1 exemplo de cósigo .otui usando MiniWindow escrito certo
TutorialButton < Buttonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.rightMiniWindowid: tutorialWindow!text: tr('Tutorial')height: 150@onClose: onMiniWindowClose()&save: trueMiniWindowContentsTutorialButton
Agora vamos intender o porque dessa forma mais complicada.
1° para que o MiniWindow funcione corretamente ele precisa da função 'MiniWindowContents' dentro dele, dentro dessa função existem duas formas de adicionarmos itens, que são elas:
1°
TutorialButton < Buttonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.rightMiniWindowid: tutorialWindow!text: tr('Tutorial')height: 150@onClose: onMiniWindowClose()&save: trueMiniWindowContentsTutorialButton
2°
MiniWindowid: tutorialWindow!text: tr('Tutorial')height: 150@onClose: onMiniWindowClose()&save: trueMiniWindowContentsButtonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.right
Dos dois modos estão certos, mais é importante lembrar que você também pode usar as duas maneiras juntas como no exemplo:
TutorialButton < Buttonid: tutorialbutton!text: tr('xD')anchors.top: prev.bottomanchors.left: parent.leftanchors.right: parent.rightMiniWindowid: tutorialWindow!text: tr('Tutorial')height: 150@onClose: onMiniWindowClose()&save: trueMiniWindowContentsButtonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.rightTutorialButton
Você também pode adicionar um icone na MiniWindow, como exemplo:
MiniWindowid: tutorialWindow!text: tr('Tutorial')height: 150icon: /images/topbuttons/skills@onClose: onMiniWindowClose()&save: true
Lembre-se que '/images/topbuttons/' é o diretório onde o ícone tá, e 'skills' é a imagem.
Bom, esse é um tutorial mais básico só para apresentar as 2 Janelas matrizes ( Eu só conheço esses 2 modelos "Main, Mini" e não sei se existem outros.) e ensinar um pouco da diferença e das vantagens entre usar uma e outra.
Passo 2: Adicionando funções aos botoes
Bom até agora eu só mostrei os botoes mais ainda não ensinei a fazer eles executarem outra funções, e é isso que eu estarei ensinando agora.
Existem diversas formas de um botão executar uma função, Você pode criar essa função no arquivo.lua caso ela seja mais complexa ou pode fazer elas direto no arquivo.otui.
Tenha em mente, que não irei ensinar a criar funções, só estarei ensinando a como fazer um botão executar ela.
Vamos pegar nosso botão
Buttonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.right
Aqui nesse exemplo, o botão é criado mais não tem nem uma função pre definida, ou seja, mesmo que clicando nele nada irá acontecer.
Agora vamos fazer uma função dento do arquivo.lua para que o botão execute
function sendBottom()return g_game.talk('Nossa Funcionou')end
Quando a função sendBottom for executada o jogador vai falar "Nossa Funcionou"
Agora vamos fazer o botão executar ela usando esta função
@onClick:
a função onClick vai ser executada quando alguém clicar no nosso botão, Agora vamos adicionar ela no nosso botão e adicionar o parâmetro que ela deve executar.
Buttonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.right@onClick: sendBottom()
Pronto agora nosso botão vai executar o que lhe foi programado, Porem por ele executar uma função simples podemos simplificar ainda mais o que nosso botão deve fazer deixando assim:
Buttonid: tutorialbutton!text: tr('Ok')anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.right@onClick: g_game.talk('Nossa Funcionou')
Ele irá fazer a mesma coisa que a função sendBottom() porem não precisamos criar nada dentro do arquivo.lua
