Interno funkcioniranje modernog GUI-ja(korisničkog sučelja)

na primjeru Unity 3D GUI frameworka

Autor: Danko Kozar, 17.2.2010.

Unity = mlad proizvod, mali broj korisnika Javascript, C# 2.0, Mono Skripta Attachiranje skripte (kamera...) MonoBehaviour

void Start() void Update() void OnGUI()

Style

DEMO „native“ Unity GUI-ja

Krećete od onoga što imate (low level API) Gradite OOP „wrapper“ oko low level

komponente IDrawable interface: public interface IDrawable {

/// <summary> /// Draws stuff /// </summary> void Draw(); }

Pozicija, dimenzije Bounds => klasa Rectangle (struct Rect) Visible, Alpha, Color Eventi: EVENT_SHOW, EVENT_HIDE Draw():

PreRender()

Render()

PostRender()

DEMO: DisplayObject

Composite Singleton Intenzivno korištenje kompozicije Koristiti interfejse gdje god je moguće Invalidacija/validacija Klasa Rectangle Global, local, content (*) MVC (DataGrid + kolekcije)

UiComponent klasa ima tendenciju biti ogromna (gomila funkcionalnosti je u njoj)

Razbiti UiComponent u hijerarhiju (EventDispatcher - DisplayObject – LifecycleComponent – InteractiveComponent) preglednosti radi

Prednost: testiranje svakog dijela hijerarhije nezavisno

Initialize() => invalidacija(*) propertyja, veličine i pozicije

Composite pattern Parent – child odnos AddChild(), RemoveChild() CreateChildren() => mjesto za kreiranje

childova unutar containera Initialize():

Parent, Stage (propagacija) invalidacija(*) layouta

Scrolling => global, local, content (*)

Konverzija koordinata: DisplayListMember:

IGlobalLocal: GlobalToLocal() LocalToGlobal()

Container: IGlobalContent:

GlobalToContent() ContentToGlobal()

ILocalContent: LocalToContent() ContentToLocal()

Kompozicija – Layout je child object od Containera

Prednost: zamjena Layouta on-the-fly (Flex: OpenFlux)

ILayout: Measure() LayoutChildren()

DEMO: Layout

IEventDispatcher AddEventListener() RemoveEventListener() DispatchEvent()

„+=“ i „-=“ notacija

Top-most container „Srce krvotoka“ prema child

komponenatama u hijerarhiji Update()

Late event processing Validacija komponenti

GuiStage => adapter za Stage na MonoBehaviour

GuiApplication preko GuiStage pokreće Update() metodu u svakom frameu

InvalidateProperties() InvalidateSize() InvalidateLayout() InvalidatePosition()Osnovna ideja:

Odgađa akcije do instanciranja childova u CreateChildren() metodi

Agregiranje više identičnih promjena u jednu Update komponente jednom i to tik prije

iscrtavanja

ValidateProperties() => CommitProperties() ValidateSize() => UpdateSize() [bottom-up!]

ValidateLayout() => UpdateLayout() ValidatePosition() => UpdatePosition()

Ako propertyji parenta utječu na childove Ideja: Odgađa akcije do nakon instanciranja

childova u CreateChildren() metodi Agregiranje više istih akcija u jednu Update komponente tik prije iscrtavanja Primjer

SystemManager (mouse, key) ClickManager (traži kliknutu komponentu) ComponentManager (dohvat komponente po ID-

ju) FocusManager (focus & blur) TabManager (tab => promjena fokusa) EventManager (event bubbling)

Ideja: prebaciti često korištenu funkcionalnost na centralno mjesto

Singleton ili statička klasa

DataGrid cell renderer => event dispatcher DataGrid => event listener GuiEvent (bubbles = true) Smanjuje broj potrebnih event listenera kod

grafičkih komponenti DEMO: DataGrid + item editor

ListCollection Ispucavaju event u slučaju da:

im je kompletni sadržaj promijenjen (EVENT_COLLECTION_CHANGE)

je jedan item promijenjen (EVENT_ITEM_CHANGE) UpdateItem() Filter Sort

Model: EventDispatcher + Singleton Primjeri: ProductModel, CartModel

View: DataList DataGrid

IDataRenderer: object Data {get; set;} string DataField {get; set;}

Happy coding!