Royale is all about PAYG [1] - You can definitely assume that if something was in Flex out of the box - in Royale it is not - Find bead which do the job or write one :)
If you are doing on App leve binding use js:ApplicationDataBinding If you are doing container data binding use ContainerDataBinding - Your case probably cause your panel is a separate file/component If you are inside item renderer use ItemRendererDataBinding [1] https://apache.github.io/royale-docs/features/payg wt., 30 cze 2020 o 10:20 Hugo Ferreira <[email protected]> napisał(a): > Databing is so important in the Flex and now Royale world that I thought > that we got that, out of the box, but OK. > Even so, it did not work. > > Here's my code: > > My App.mxml: > > <?xml version="1.0" encoding="UTF-8"?> > <j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; > xmlns:html="library://ns.apache.org/royale/html" > xmlns:j="library://ns.apache.org/royale/jewel" > xmlns:js="library://ns.apache.org/royale/basic" > xmlns:f="framework.*"> > > <fx:Style source="../../main/resources/styles.css"/> > > <fx:Script> > <![CDATA[ > import org.apache.royale.events.DragEvent; > import org.apache.royale.jewel.Card; > > private function onDragEnd(event:DragEvent):void > { > var card:Card = DragEvent.dragSource as Card; > mainArea.addElement(card); > card.style = "pointer-events: auto"; > } > ]]> > </fx:Script> > > <j:beads> > <js:ApplicationDataBinding/> > </j:beads> > <j:initialView> > <j:View> > <j:beads> > <j:VerticalCenteredLayout/> > <js:DropMouseController dragDrop="onDragEnd(event)"/> > </j:beads> > > <js:Group id="mainArea" > percentWidth="100" > percentHeight="100"> > <js:beads> > <j:VerticalCenteredLayout/> > </js:beads> > <f:Panel width="400" > height="400"/> > </js:Group> > </j:View> > </j:initialView> > </j:Application> > > My component Panel.mxml: > > <?xml version="1.0" encoding="utf-8"?> > <j:Card xmlns:fx="http://ns.adobe.com/mxml/2009"; > xmlns:js="library://ns.apache.org/royale/basic" > xmlns:html="library://ns.apache.org/royale/html" > xmlns:j="library://ns.apache.org/royale/jewel" > mouseMove="onResizing(event)"> > <fx:Script> > <![CDATA[ > import org.apache.royale.html.beads.controllers.DragMouseController; > import org.apache.royale.events.DragEvent; > import org.apache.royale.events.MouseEvent; > > private const DRAG_OFFSET:int = -20; > > private var localX:Number = 0; > private var localY:Number = 0; > > private var resizing:Boolean = false; > > public var draggable:Boolean = true; > > private function onMouseDown(event:MouseEvent):void > { > if (draggable) > { > localX = event.localX; > localY = event.localY; > } > } > > private function onDragStart(event:DragEvent):void > { > if (draggable) > { > DragMouseController.dragImageOffsetX = (localX * -1) + DRAG_OFFSET; > DragMouseController.dragImageOffsetY = (localY * -1) + DRAG_OFFSET; > DragMouseController.dragImage = this; > DragEvent.dragSource = this; > } > } > > private function onResizeStart():void > { > resizing = true; > } > > private function onResizing(event:MouseEvent):void > { > if (resizing) > { > this.width = event.screenX - this.positioner.offsetLeft; > this.height = event.screenY - this.positioner.offsetTop; > } > } > > private function onResizeEnd():void > { > resizing = false; > } > ]]> > </fx:Script> > > <j:beads> > <js:ApplicationDataBinding/> > </j:beads> > > <j:CardHeader mouseDown="onMouseDown(event)"> > <j:beads> > <js:DragMouseController dragStart="onDragStart(event)"/> > </j:beads> > > <html:H3 text="Drag and Drop Demo" className="primary-normal"/> > </j:CardHeader> > > <j:CardPrimaryContent> > <j:Label multiline="true"> > <j:html><![CDATA[<p>This Card adds a <b>CardHeader</b> as the first element > and the title is colored with "secondary-normal", then > <b>CardPrimaryContent</b> and <b>CardActions</b> card parts. Actions use > IconButton to add icons and the "outlined" style.</p>]]></j:html> > </j:Label> > </j:CardPrimaryContent> > > <j:CardActions> > <j:BarSection itemsHorizontalAlign="itemsRight"> > <j:IconButton emphasis="primary" unboxed="true"> > <j:icon> > <js:MaterialIcon text="{MaterialIconType.SHARE}"/> > </j:icon> > </j:IconButton> > </j:BarSection> > </j:CardActions> > </j:Card> > > As you can see, in the very end, I have a binding to MaterialIconType.SHARE > but the IconButton does not show the icon. > > Piotr Zarzycki <[email protected]> escreveu no dia terça, > 30/06/2020 à(s) 06:58: > > > Hi Hugo, > > > > Show us more code ;) I have a feeling that you are missing bead which > > allows you for binding. As default binding doesn't work in view - you > need > > to add bead which handle that. > > > > Thanks, > > Piotr > > > > On Tue, Jun 30, 2020, 1:43 AM Hugo Ferreira <[email protected]> > > wrote: > > > > > This does not take effect: <js:MaterialIcon > > text="{MaterialIconType.SHARE}" > > > /> > > > > > > I'm using the official 0,9,7 + Jewel. > > > > > > I already check tour the jewel. > > > > > > What I may be missing to use MaterialIcons ? > > > > > > -- Piotr Zarzycki Patreon: *https://www.patreon.com/piotrzarzycki <https://www.patreon.com/piotrzarzycki>*
