Table of Contents

,

Start Page » DragonScript Scripting Language » Behavior Elements: Quick and Easy Development » ECBehaviorRenderablePanel

ECBehaviorRenderablePanel

Behavior element behavior adding a renderable Panel widget.

This behavior is useful for models with a complex dynamic texture where the content of the texture is provided by a Panel widget. Multiple other behaviors can add their content Widget to the Panel separating logic for reuse. Using ECBehaviorRenderablePanel instead of ECBehaviorRenderableCanvas allows to use the full power of the GUI ToolKit including using Gui Themes to create complex content easily.

The default layout for the Panel is StackLayout]. The default gui theme is “/shareddata/guithemes/modern/modern.guitheme.xml”. The default Panel designer selector is “RenderablePanel”.

To use this behavior add an ECBehaviorDynamicSkin to the element class before adding this behavior. Create ECBehaviorRenderablePanel behavior and set the dynamic skin and designer selector and GuiTheme for the Panel. Now you can add other behaviors targeting the ECBehaviorRenderablePanel to add Widget resources to.

The Panel is created with a default size of 512×512 . You can change the size using the element property to fit the texture requirements.

Instance Counts

Multiple instances of ECBehaviorRenderablePanel can be added to affect individual dynamic skin textures. The example below uses one component with one dynamic skin to two individual renderables named “content1” and “content2” each allowing to be individiaully filled with content by different behaviors.

class MyElement extends BehaviorElementClass
   public func new()
      ECBehaviorComponent.new(this)
      ECBehaviorDynamicSkin.new(this)
      
      ECBehaviorCanvas.new(this)
      ECBehaviorCanvas.new(this, "canvas2")
      
      var ECBehaviorRenderablePanel behavior = ECBehaviorRenderablePanel.new(this)
      behavior.getRenderable().setValue("content1")
      behavior.getGuiTheme().setPath("/content/renderable.guitheme.xml")
      behavior.getDesignerSelector().setValue("Panel.MyElement")
      
      behavior = ECBehaviorRenderablePanel.new(this, "renderablePanel2")
      behavior.setBackgroundColor(Color.blue)
      behavior.getRenderable().setValue("intensity2")
      behavior.getGuiTheme().setPath("/content/renderable.guitheme.xml")
      behavior.getDesignerSelector().setValue("Panel.MyElement")
   end
end

Element Class Properties

Element class properties have the prefix renderablePanel. or renderablePanel(id). if id is not empty.

renderable

Name of the renderable in the component skin to modify.

size

Size of panel in pixels.

guiTheme

Path to gui theme (*.guitheme.xml) to load. If the same gui theme is used in multiple elements it is loaded only once and shared.

designerSelector

Name of designer selector to use from gui theme specified in guiTheme property for panel widget. Allows to define multiple panels in one gui theme potentially sharing definitions.

Required Behaviors

Optional Behaviors

This behavior does not support optional behaviors.

Persistency

This behavior does not use persistency.

API Documentation

ECBehaviorRenderablePanel.

Since DragonScript Module Version 1.3

Use Cases

Element Class Example

class ExampleElementClass extends BehaviorElementClass
   public var ECBehaviorComponent component
   public var ECBehaviorCollider collider
   public var ECBehaviorDynamicSkin dynamicSkin
   public var ECBehaviorRenderablePanel renderablePanel
   
   public func new() super("ExampleElement")
     // add required behaviors component and collider
     component = ECBehaviorComponent.new(this)
     collider = ECBehaviorCollider.new(this, component)
     
     // add dynamic skin to modify component
     dynamicSkin = ECBehaviorDynamicSkin.new(this, component)
     
     // create renderable panel. the skin has to use a renderable named "board".
     // the panel has a size of 512x256 and uses gui theme loaded from "adboard.guitheme.xml".
     // the panel uses by default a stack layout hence all widgets added fill the
     // entire panel space and are layered ontop of each other. any behavior can
     // change the layout used for the panel if required
     renderablePanel = ECBehaviorRenderablePanel.new(this, dynamicSkin)
     renderablePanel.getRenderable().setValue("board")
     renderablePanel.getSize().setPoint(Point.new(512, 256))
     renderablePanel.getGuiTheme().setPath("/content/ui/adboard.guitheme.xml")

     // here you could now add behaviors adding content to the renderable.
     // the simply have to create (during their init(StubElement) call) one or more widgets
     // adding them to the renderable. using behavior makes this a reusable process
     //
     // MyContentBehavior.new(this, renderablePanel)
   end
   
   // another way is adding widgets yourself. this can be useful for prototyping
   // and situations where you have a simple gui widget
   protected func Element createElement()
     var BehaviorElement element = super.createElement()
     var Panel panel = renderablePanel.instance(element).getPanel()
     
     // add some content to it, for example a label which we can design using
     // the design selector "Label.AdEatMorePears"
     panel.addWidget(Label.new("Eat more Pears", "Label.AdEatMorePears"))
     
     // you could also add a panel with composed content inside. this is
     // usually the way to go as you can add content with your desited layout.
     // this example adds two labels against the top and bottom edge with an
     // image stretched between them. each can be designed using a respective
     // designer selector like adding borders, changing background, changing
     // padding, font and color
     panel.addWidget(Panel.new(BorderLayout.new(5), block Panel p
       p.addWidget(Label.new("Top-Side", "Label.TopSide"), BorderLayout.Area.top)
       p.addWidget(DisplayImage.new("/content/adEatMorePears.png", RepeatMode.stretch, "Image.AdEatMorePears"), BorderLayout.Area.content)
       p.addWidget(Label.new("Bottom-Side", "Label.BottomSide"), BorderLayout.Area.bottom)
     end))
     
     return element
   end
end