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 <hferreira...@gmail.com> 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 <piotrzarzyck...@gmail.com> 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 <hferreira...@gmail.com>
> > 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>*

Reply via email to