{{tag>dragonscript behavior}}
[[:start|Start Page]] >> [[main|DragonScript Scripting Language]] >> [[abstractions#behavior_elementsquick_and_easy_development|Behavior Elements: Quick and Easy Development]] >> **ECBehaviorRenderablePanel**
* [[behaviors_use_cases|Behaviors Explained: By Use-Case]]
* [[behaviors_a_to_z|Behaviors Explained: From A to Z]]
====== 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 #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1Panel.html,Panel~@# widget. Multiple other behaviors can add their content #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1Widget.html,Widget~@# to the #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1Panel.html,Panel~@# separating logic for reuse. Using **ECBehaviorRenderablePanel** instead of [[behavior_renderablecanvas|ECBehaviorRenderableCanvas]] allows to use the full power of the GUI ToolKit including using [[dragengine:modules:dragonscript:guitheme|Gui Themes]] to create complex content easily.
The default layout for the #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1Panel.html,Panel~@# is #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1Layouts_1_1StackLayout.html,StackLayout~@#]. The default gui theme is //"/shareddata/guithemes/modern/modern.guitheme.xml"//. The default #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1Panel.html,Panel~@# designer selector is //"RenderablePanel"//.
To use this behavior add an [[behavior_dynamicskin|ECBehaviorDynamicSkin]] to the element class before adding this behavior. Create **ECBehaviorRenderablePanel** behavior and set the dynamic skin and designer selector and #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1GuiTheme.html,GuiTheme~@# for the #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1Panel.html,Panel~@#. Now you can add other behaviors targeting the ECBehaviorRenderablePanel to add #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1Widget.html,Widget~@# resources to.
The #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1Panel.html,Panel~@# is created with a default size of 512x512 . 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 [[gamedev:renderables|renderable]] in the component skin to modify.
* Full name: "renderablePanel.renderable" or "renderablePanel(id).renderable"
* Type: string
* Default Value: "" (empty string)
* Example (*.deeclass): monitor content
===== size =====
Size of panel in pixels.
* Full name: "renderablePanel.size" or "renderablePanel(id).size"
* Type: #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1Point.html,Point~@#
* Default value: (512, 512)
* Example (*.deeclass): /content/ui/ingame.guitheme.xml
===== 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.
* Full name: "renderablePanel.designerSelector" or "renderablePanel(id).designerSelector"
* Type: string
* Default Value: "RenderablePanel"
* Example (*.deeclass): RenderablePanel.CockpitMonitor.Center
====== Required Behaviors ======
* [[behavior_dynamicskin|ECBehaviorDynamicSkin]]
====== Optional Behaviors ======
This behavior does not support optional behaviors.
====== Persistency ======
This behavior does not use persistency.
====== API Documentation ======
#@LinkApiDocDEDS2_HTML~classDragengine_1_1Scenery_1_1ECBehaviorRenderablePanel.html,ECBehaviorRenderablePanel~@#.
Since DragonScript Module Version **1.3**
====== Use Cases ======
* Create displays and monitors showing dynamic content like a digital wall clock or a train station time table. The element has one renderable used (typically [[gamedev:textureproperties:emissivity|emissivity]] to show the content. For each dynamic content to show add behavior providing the content.
* Generate textures with randomized content during game loading. Same as previous use case but content typically is static.
* Create dynamic skin content which is difficult to create using skin properties only. This can be individual moving and changing content like advertize board or shop signs.
====== 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