1 / 23

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

Interno funkcioniranje modernog GUI-ja (korisničkog sučelja) na primjeru Unity 3D GUI frameworka Autor: Danko Kozar, 17.2.2010. Osnove Unity GUI-ja. Unity = mlad proizvod, mali broj korisnika Javascript, C# 2.0, Mono Skripta Attachiranje skripte (kamera...) MonoBehaviour void Start()

aira
Télécharger la présentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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

  3. DEMO „native“ Unity GUI-ja

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

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

  6. DEMO: DisplayObject

  7. 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)

  8. 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

  9. 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 (*)

  10. Global, Local, Content Konverzija koordinata: • DisplayListMember: • IGlobalLocal: • GlobalToLocal() • LocalToGlobal() • Container: • IGlobalContent: • GlobalToContent() • ContentToGlobal() • ILocalContent: • LocalToContent() • ContentToLocal()

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

  12. DEMO: Layout

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

  14. 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

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

  16. Validacija • ValidateProperties() => CommitProperties() • ValidateSize() => UpdateSize() [bottom-up!] • ValidateLayout() => UpdateLayout() • ValidatePosition() => UpdatePosition()

  17. 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

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

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

  20. 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

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

  22. Kraj prezentacije • Happy coding! 

More Related