PaleTa ui Documentation

7/25/2019 PaleTa ui Documentation

1/11

Paleta UI Usage DocumentationBy:Alfredo Alvarez

IntroductionPaletaUI is a system that allows us to draw on top of opengl a general ui. Thesystem was meant to e used in programmatic way y creating the hierarchichalstructure inside your cpp classes or in a declarative y loading position and loo!sfrom and "ml #le and #nding the component to set the interactions. The systemta!es care of font loading$ %uad drawing and image loading for you. The system isuild to e e"tensile and we will descrie the components and process on thisdocument and in the design document for the system.

&etting up PaletaUI'o matter which way you plan to use the system there is an initial setup that needsto happen in order for paletaUI to wor! we descrie here the entry points that areneeded. All of them are encapsulated in the class UI(anager

Initializing the Ui (anagerUI (anager re%uires to !now the size of the screen efore it can do anything. Do acall li!e this efore you call any other methodsUI(anager::initialize)*A(+,-IDT$ *A(+,+I*T/0

(a!ing it part of the draw update loopTo e ale to draw and update components you need to call the following methodsfor the ui manager from your rendering loop. After you have drawn your 1d scene

UI(anager::update)/0

UI(anager::draw)/0

Ta!ing inputThe (ouse Is a it harder to use than the other calls we have done so far youasically need to retrieve the virtual(ouse from Ui manager and then pass in theoptions. +"ample using *2UT

void(ousePress)intutton$ intstate$ int"$ inty/3

4irtual(ouse5 m 6 UI(anager::get4irtual(ouse)/0m789 6 "0m78 6 y0if)utton66 *2UT,2+;T,BUTTif)utton66 *2UT,2+;T,BUTT


2/11

if)utton66 *2UT,?I*T,BUTTif)utton66 *2UT,?I*T,BUTT


3/11

;rame;rames are used to control order ;irst frame in is the lowest one in the system.

ou need to set a widget to a frame. In a lot of scenarios ou will add a panel to theframe to e ale to add multiple widgets into the panel.

;rame5 topframe 6 new;rame)/0

Panel5 onlyPanel 6 newPanel)*A(+,-IDT$*A(+,+I*T/0onlyPanel78setBottom)J/0onlyPanel78set2eft)J/0onlyPanel78clearBac!ground)/0topframe78set-idget)onlyPanel/0startupUI78add;rame)Bottom;rame/0startupUI78add;rame)topframe/0

-idgetIs the ase class for all the component from here on on all widget have the followingattriutes: This is the class you inherit from if you are adding a new component

-idget5 imgK 6 newImage)/0imgK78set&ize)GLJ$ GJJ/0imgK78setBottom)LJ/0imgK78set2eft)GJJ/0

PanelThe Panel is a -idget that can hold a multitude of widgets inside their main point isthat they are a reference point to move widget together.

Panel5 onlyPanel 6 newPanel)*A(+,-IDT$*A(+,+I*T/0onlyPanel78setBottom)J/0

onlyPanel78set2eft)J/0onlyPanel78clearBac!ground)/0Image5 img 6 newImage)/0img78set&ize)GFJ$ GJJ/0img78setTe"ture)2A&+?/0img78setBottom)GMJ/0img78set2eft)GJJ/0onlyPanel78addHhildren)img/0

2aelThe lael is a panel that contains te"t inside of it. Is Used li!e most of the others utcontains a property &etTe"t. In the e"ample left &ide is a panel.

2ael5 -eapons2ael 6 new2ael)/0-eapons2ael78set;ont'ame)/0-eapons2ael78set;ontHolor)=Holors::-hite/0-eapons2ael78setBac!ground)=Holors::Dar!er*rey/0-eapons2ael78setTe"t)C-+AP


4/11

2eft&ide78addHhildren)-eapons2ael/0

Te"to"The te"to" is similar to the lael ut it allows people to write on it. getTe"t will giveyou ac! the updated te"t.

Te"to"5 t 6 newTe"to")/0t78set&ize)KLJ$ KE/0t78set;ont'ame)/0t78setTe"t)C'ameC/0t78setBottom)LEJ/0t78set2eft)KJ/02eft&ide78addHhildren)t/0

ButtonThe Button ta!es clic! and hover commands. Basically allows actions when clic!edand hovered over it. -e show how to create a command from scratch elow. But theimportan thing is that it needs to e setup.

Button5 playButton 6 newButton)/0playButton78set;ont'ame)/0playButton78setTe"t)CPlayC/0playButton78set&ize)NJ$ 1J/0playButton78set2eft)1JE/0playButton78setBottom)KJJ71E/0

*otoPlay&ceneAnd&aveDataHommand5 pHommand 6 new*otoPlay&ceneAnd&aveDataHommand)tK78getTe"t)/$ t78getTe"t)//0

playButton78setHlic!Hommand)pHommand/0?ight&ide78addHhildren)playButton/0

ImageThe Image is a panel that ta!es an Azul Te"ture'ame to allow to display that image.

Image5 imgM 6 newImage)/0imgM78set&ize)EJ$ EJ/0imgM78setTe"ture)&TA?/0imgM78setBottom)E/0imgM78set2eft)F1J/0onlyPanel78addHhildren)imgM/0

Hommand &ystemBelow a sample of how to implement a command:

OifndefIncrementIntHlic!Hommand,Ode#neIncrementIntHlic!Hommand,OincludeCHommand.hC

classIncrementIntHlic!Hommand: pulicHommand3


5/11

pulic:IncrementIntHlic!Hommand)/0virtualool+"ecute)-idget5 parent$ +ventDetails5/0voidset4alue)oat f/0oatget4alue)/0voidsetIncrement)oatf/0

QIncrementIntHlic!Hommand)/0private:oatvalue0oatincrement0

>0

Oendif

Hpp

OincludeC

oolIncrementIntHlic!Hommand::+"ecute)-idget5 parent$ +ventDetails5/3

parent0value S6 increment0returnfalse0

>

voidIncrementIntHlic!Hommand::set4alue)oatf/3

value 6 f0>

oatIncrementIntHlic!Hommand::get4alue)/3

returnvalue0>

voidIncrementIntHlic!Hommand::setIncrement)oatf/3

increment 6 f0>

IncrementIntHlic!Hommand::QIncrementIntHlic!Hommand)/3>


6/11

Declarative Usageow to 2oad:Is a very simple call to deserialize and entire view.

4iew5 current4iew 6 4iew&erializer::2oad)C*ame&cene."mlC/0

ow to &earch ;or a Homponent:ou can &earch for a component y name to programmatically change is propertieseven if it was originally in declarative form: Using on ;rame get;rameBy'ame andthe get-idgetBy'ame on -idget.

4iew5 current4iew 6 4iew&erializer::2oad)C*ame&cene."mlC/0;rame5 of 6 current4iew78get;rameBy'ame)C


7/11

Panel8 ;rame84iew8

+"tending Paleta

Hreating a new -idgetAll of the main components in Paleta Ui have virtual methods to follow theopenclosed principles and e"tend for them. -ith that said the most common caseis the need for a widget or a panel if needs to have widget childrens. To do you dopulic inheritance from -idget or Panel and you are re%uired to implement. Theupdate method.

Below is an e"ample of a igh&core-idget this is an interesting e"ample ecause isa component that uses other widgets from the framewor!. 'ote that implementinga widget wont ma!e it discoverale to the serialization pipeline for that please loo!elow.

To see the UML of the Ui Objects please refer to the design document.

HighScoreWidget.hOifndefigh&core-idget,Ode#neigh&core-idget,OincludeC2ael.hCOincludeC-idget.hCclassigh&core-idget:pulic-idget3pulic:

igh&core-idget)/0virtualvoiddraw)int"$ inty/0

virtualvoidupdate)/0voidseteader;ont)charf/0voidset&core;ont)charf/0voidsetItemG)char5 initials$ char5 score/0voidsetItemK)char5 initials$ char5 score/0voidsetItem1)char5 initials$ char5 score/0Qigh&core-idget)/0

private:2ael5 title'ame02ael5 title&core02ael5 nameG02ael5 nameK02ael5 name10

2ael5 scoreG02ael5 scoreK02ael5 score10

>0

Oendif


8/11

HighScoreWidget.cpp

igh&core-idget::igh&core-idget)/3

title'ame 6 new2ael)/0title'ame78setTe"t)CInitialsC/0

title'ame78set&ize)GJJ$ 1J/0title'ame78set2eft)KJ/0title'ame78setBottom)1KJ/0title&core 6 new2ael)/0title&core78setTe"t)C&coreC/0title&core78set&ize)GJJ$ 1J/0title&core78set2eft)GFJ/0title&core78setBottom)1KJ/0nameG 6 new2ael)/0nameG78set&ize)GJJ$ 1J/0nameG78set2eft)KE/0nameG78setBottom)KNJ/0nameK 6 new2ael)/0

nameK78set&ize)GJJ$ 1J/0nameK78set2eft)KE/0nameK78setBottom)KKJ/0name1 6 new2ael)/0name178set&ize)GJJ$ 1J/0name178set2eft)KE/0name178setBottom)GNJ/0

scoreG 6 new2ael)/0scoreG78set&ize)GJJ$ 1J/0scoreG78set2eft)GVE/0scoreG78setBottom)KNJ/0

scoreK 6 new2ael)/0scoreK78set&ize)GJJ$ 1J/0scoreK78set2eft)GVE/0scoreK78setBottom)KKJ/0score1 6 new2ael)/0score178set&ize)GJJ$ 1J/0score178set2eft)GVE/0score178setBottom)GNJ/0

>

voidigh&core-idget::draw)int"$ inty/3

intpos" 6 this78left S "0

intposy 6 this78ottom S y0-idget::draw)pos"$ posy/0title'ame78draw)pos"$posy/0title&core78draw)pos"$ posy/00nameG78draw)pos"$ posy/0nameK78draw)pos"$ posy/0name178draw)pos"$ posy/0scoreG78draw)pos"$ posy/0scoreK78draw)pos"$ posy/0


9/11

score178draw)pos"$ posy/0>

voidigh&core-idget::update)/3>

voidigh&core-idget::seteader;ont)charf/3

title'ame78set;ont'ame)f/0title&core78set;ont'ame)f/0

>

voidigh&core-idget::set&core;ont)charf/3

nameG78set;ont'ame)f/0nameK78set;ont'ame)f/0name178set;ont'ame)f/0scoreG78set;ont'ame)f/0

scoreK78set;ont'ame)f/0score178set;ont'ame)f/0>

voidigh&core-idget::setItemG)char5 initials$ char5 score/3

nameG78setTe"t)initials/0scoreG78setTe"t)score/0

>

voidigh&core-idget::setItemK)char5 initials$ char5 score/3

nameK78setTe"t)initials/0

scoreK78setTe"t)score/0>

voidigh&core-idget::setItem1)char5 initials$ char5 score/3

name178setTe"t)initials/0score178setTe"t)score/0

>

igh&core-idget::Qigh&core-idget)/3

deletetitle'ame0deletetitle&core0

deletenameG0deletenameK0deletename10deletescoreG0deletescoreK0deletescore10

>


10/11

Adding &erialization AilityIn order to &erialize a custom class two things need to happen you need to create aserializer class for it that inherits pulically from -idget&erializerHomponent and

ou need to register this component with the static class -idget &erializer y callingAdd. I recommend to that right after your Ui(anager Initialize Hall.

+"ample:

Sample element for HighsScoreWidget

igh&coreBoard 'ame6Cigh&coreC &core;ont6CC eader;ont6CcC 2eft6CKEJCBottom6CGEJC

-idth6C1JJC eight6C1EJC Bac!ground6CDA?@+?*?+CPlayerG6CAAAC &coreG6CKJC

PlayerK6CBBBC &coreK6CKEC Player16CHHHC &core16C1EC 8

HighScoreWidgetSerializerOincludeCigh&core-idget&erializer.hCOincludeCigh&core-idget.hC

igh&core-idget&erializer::igh&core-idget&erializer)/3

out)Cigh&core-idget&erializer)/: 777777777777777777777RnC/0serialization'ame 6 Cigh&coreBoardC0

>

-idget5 igh&core-idget&erializer::2oad)tiny"mlK::9(2+lement5 el/3

if)elW6 J/3

constchar5 element'ame 6 el78'ame)/0if)strcmp)element'ame$ serialization'ame/ 66 J/3

igh&core-idget5 l 6 newigh&core-idget)/0this78&et-idgetProperties;rom9ml)l$el/0if)el78Attriute)Ceader;ontC//3

l78seteader;ont)el78Attriute)Ceader;ontC/XJY/0>if)el78Attriute)C&core;ontC//3

l78set&core;ont)el78Attriute)C&core;ontC/XJY/0>if)el78Attriute)CPlayerGC/ == el78Attriute)C&coreGC//3

l78setItemG))char5/el78Attriute)CPlayerGC/$ )char5/el78Attriute)C&coreGC//0

>if)el78Attriute)CPlayerKC/ == el78Attriute)C&coreKC//3

l78setItemK))char5/el78Attriute)CPlayerKC/$ )char5/el78Attriute)C&coreKC//0

>if)el78Attriute)CPlayer1C/ == el78Attriute)C&core1C//3


11/11

l78setItem1))char5/el78Attriute)CPlayer1C/$ )char5/el78Attriute)C&core1C//0

>returnl0

>>

returnJ0>

igh&core-idget&erializer::Qigh&core-idget&erializer)/3>

PaleTa ui Documentation

Documents

Transcript of PaleTa ui Documentation