interno funkcioniranje gui-ja na primjeru unity 3d gui frameworka
DESCRIPTION
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! :)TRANSCRIPT
![Page 1: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/1.jpg)
Interno funkcioniranje modernog GUI-ja(korisničkog sučelja)
na primjeru Unity 3D GUI frameworka
Autor: Danko Kozar, 17.2.2010.
![Page 2: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/2.jpg)
![Page 3: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/3.jpg)
Unity = mlad proizvod, mali broj korisnika Javascript, C# 2.0, Mono Skripta Attachiranje skripte (kamera...) MonoBehaviour
void Start() void Update() void OnGUI()
Style
![Page 4: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/4.jpg)
DEMO „native“ Unity GUI-ja
![Page 5: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/5.jpg)
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(); }
![Page 6: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/6.jpg)
Pozicija, dimenzije Bounds => klasa Rectangle (struct Rect) Visible, Alpha, Color Eventi: EVENT_SHOW, EVENT_HIDE Draw():
PreRender() Render() PostRender()
![Page 7: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/7.jpg)
DEMO: DisplayObject
![Page 8: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/8.jpg)
Composite Singleton Intenzivno korištenje kompozicije Koristiti interfejse gdje god je moguće Invalidacija/validacija Klasa Rectangle Global, local, content (*) MVC (DataGrid + kolekcije)
![Page 9: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/9.jpg)
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
![Page 10: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/10.jpg)
Composite pattern Parent – child odnos AddChild(), RemoveChild() CreateChildren() => mjesto za kreiranje childova
unutar containera Initialize():
Parent, Stage (propagacija) invalidacija(*) layouta
Scrolling => global, local, content (*)
![Page 11: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/11.jpg)
Konverzija koordinata: DisplayListMember:
IGlobalLocal:− GlobalToLocal()− LocalToGlobal()
Container: IGlobalContent:
− GlobalToContent()− ContentToGlobal()
ILocalContent:− LocalToContent()− ContentToLocal()
![Page 12: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/12.jpg)
Kompozicija – Layout je child object od Containera
Prednost: zamjena Layouta on-the-fly (Flex: OpenFlux)
ILayout: Measure() LayoutChildren()
![Page 13: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/13.jpg)
DEMO: Layout
![Page 14: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/14.jpg)
IEventDispatcher AddEventListener() RemoveEventListener() DispatchEvent()
„+=“ i „-=“ notacija
![Page 15: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/15.jpg)
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
![Page 16: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/16.jpg)
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
![Page 17: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/17.jpg)
ValidateProperties() => CommitProperties() ValidateSize() => UpdateSize() [bottom-up!] ValidateLayout() => UpdateLayout() ValidatePosition() => UpdatePosition()
![Page 18: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/18.jpg)
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
![Page 19: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/19.jpg)
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
![Page 20: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/20.jpg)
DataGrid cell renderer => event dispatcher DataGrid => event listener GuiEvent (bubbles = true) Smanjuje broj potrebnih event listenera kod
grafičkih komponenti DEMO: DataGrid + item editor
![Page 21: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/21.jpg)
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
![Page 22: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/22.jpg)
Model: EventDispatcher + Singleton Primjeri: ProductModel, CartModel
View: DataList DataGrid
IDataRenderer: object Data {get; set;} string DataField {get; set;}
![Page 23: Interno funkcioniranje GUI-ja na primjeru Unity 3D GUI frameworka](https://reader033.vdocuments.site/reader033/viewer/2022060121/559487f91a28ab177d8b4596/html5/thumbnails/23.jpg)
Happy coding!