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

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

3. Osnove Unity GUI-ja • 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. Osnovni principi • Krećete od onoga što imate (low level API) • Gradite OOP „wrapper“ oko low level komponente • IDrawable interface: publicinterfaceIDrawable {///<summary>/// Draws stuff///</summary>void Draw(); }

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

7. DEMO: DisplayObject

8. Design patterni • 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 • 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. Container • 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. Global, Local, Content Konverzija koordinata: • DisplayListMember: • IGlobalLocal: • GlobalToLocal() • LocalToGlobal() • Container: • IGlobalContent: • GlobalToContent() • ContentToGlobal() • ILocalContent: • LocalToContent() • ContentToLocal()

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

13. DEMO: Layout

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

15. Stage • 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. Invalidacija • 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. Validacija • ValidateProperties() => CommitProperties() • ValidateSize() => UpdateSize() [bottom-up!] • ValidateLayout() => UpdateLayout() • ValidatePosition() => UpdatePosition()

18. CommitProperties() • 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. Manageri • 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. Event bubbling • 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. EventDispatcher kolekcije • 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. MVC • Model: • EventDispatcher + Singleton • Primjeri: ProductModel, CartModel • View: • DataList • DataGrid • IDataRenderer: • object Data {get; set;} • string DataField {get; set;}

23. Kraj prezentacije • Happy coding! 