English title: "GUI Framework Internals (Unity3d)" Pretty old presentation of GUI framework tips and tricks (made back in 2010). It describes how to build the framework on top of low-level elements that the particular platforms offers (could be applied to Javascript, Flash, Unity3d and all the platforms providing the clickable screen and moveable elements). Video recording of the presentation: https://experts.adobeconnect.com/_a204547676/p10429271/?launcher=false&fcsContent=true&pbMode=normal Unity Web player demo: http://dankokozar.com/unity/GuiGridTest.html It's all in Croatian. Sorry! :)

1. Interno funkcioniranje modernog GUI-ja
(korisničkog sučelja)
na primjeru Unity 3D GUI frameworka
Autor: Danko Kozar, 17.2.2010.

3. 
Unity = mlad proizvod, mali broj korisnika

Javascript, C# 2.0, Mono

Skripta

Attachiranje skripte (kamera...)

MonoBehaviour

void Start()

void Update()

void OnGUI()

Style

4. DEMO „native“ Unity GUI-ja

5. 
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();
}

6. 
Pozicija, dimenzije

Bounds => klasa Rectangle (struct Rect)

Visible, Alpha, Color

Eventi: EVENT_SHOW, EVENT_HIDE

Draw():

PreRender()

Render()

PostRender()

7. DEMO: DisplayObject

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

9. 
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

10. 
Composite pattern

Parent – child odnos

AddChild(), RemoveChild()

CreateChildren() => mjesto za kreiranje childova
unutar containera

Initialize():

Parent, Stage (propagacija)

invalidacija(*) layouta

Scrolling => global, local, content (*)

11. Konverzija koordinata:

DisplayListMember:

IGlobalLocal:
− GlobalToLocal()
− LocalToGlobal()

Container:

IGlobalContent:
− GlobalToContent()
− ContentToGlobal()

ILocalContent:
− LocalToContent()
− ContentToLocal()

12. 
Kompozicija – Layout je child object od
Containera

Prednost: zamjena Layouta on-the-fly (Flex:
OpenFlux)

ILayout:

Measure()

LayoutChildren()

13. DEMO: Layout

14. 
IEventDispatcher

AddEventListener()

RemoveEventListener()

DispatchEvent()

„+=“ i „-=“ notacija

15. 
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

16. 
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

17. 
ValidateProperties() => CommitProperties()

ValidateSize() => UpdateSize() [bottom-up!]

ValidateLayout() => UpdateLayout()

ValidatePosition() => UpdatePosition()

18. 
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

19. 
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

20. 
DataGrid cell renderer => event dispatcher

DataGrid => event listener

GuiEvent (bubbles = true)

Smanjuje broj potrebnih event listenera kod
grafičkih komponenti

DEMO: DataGrid + item editor

21. 
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

22. 
Model:

EventDispatcher + Singleton

Primjeri: ProductModel, CartModel

View:

DataList

DataGrid

IDataRenderer:

object Data {get; set;}

string DataField {get; set;}

23.  Happy coding! 