Hi Maria Jose, very cool! Great you are progressing in Royale component creation :)
Carlos El jue., 6 feb. 2020 a las 19:42, Yishay Weiss (<[email protected]>) escribió: > Thanks for sharing. Glad you found something that works for you. > > > > *From: *Maria Jose Esteve <[email protected]> > *Sent: *Thursday, February 6, 2020 6:03 PM > *To: *[email protected] > *Subject: *RE: Event and positioning list jewel > > > > Hi, first thank you for your help and guidance. In the end we have created > a component ... surely it cannot be called "PopupButton" but, the truth is > that it works well: > > > > Our current solution has been to create an MXML control consisting of an > image and a horizontal list: > > > > <j:List id="list" visible="false" style="color: #000000;" itemRenderer= > "ImgLabelListItemRenderer" > > dataProvider="{dataProvider}" labelField="label" change= > "list_change(event)"> > > <j:beads> > > <j:HorizontalLayout itemsExpand="true" /> > > </j:beads> > > </j:List> > > <j:Image id="image" src= > "{list.selectedItem ? list.selectedItem['source']: ''}" visible="{!open}" > click="image_Click(event)"/> > > > > We have replicated the “HideDrawerOnMouseDown” bead of Jewel Drawer > component, in order to hide the list and show the image if the control > loses focus: > > > > protected function handleControlMouseDown(event:MouseEvent): > void > > { > > event.stopImmediatePropagation(); > > } > > > > protected function handlePopupShow(event:Event):void > > { > > if(!event.target.hasEventListener(MouseEvent. > MOUSE_DOWN,handleControlMouseDown)){ > > IEventDispatcher(event.target).addEventListener( > MouseEvent.MOUSE_DOWN, handleControlMouseDown); > > callLater(function():void { > > IUIBase(event.target).topMostEventDispatcher. > addEventListener(MouseEvent. > MOUSE_DOWN, handleTopMostEventDispatcherMouseDown); > > }); > > } > > } > > > > protected function handleTopMostEventDispatcherMouseDown(event > :MouseEvent):void > > { > > open = false; > > } > > > > protected function handlePopupHide(event:Event):void > > { > > if(event.target.hasEventListener(MouseEvent. > MOUSE_DOWN,handleControlMouseDown)){ > > IEventDispatcher(event.target).removeEventListener( > MouseEvent.MOUSE_DOWN, handleControlMouseDown); > > IUIBase(event.target).topMostEventDispatcher. > removeEventListener(MouseEvent. > MOUSE_DOWN, handleTopMostEventDispatcherMouseDown); > > } > > } > > > > Finally, we have added some properties: > > - dataProvider: Corresponding to the dataprovider of the list. > > - labelField: Corresponding to the label field of the list. > > - Open: Changes the status to open / closed. > > We have also exposed “change” event to handle selection changes: > > > > <fx:Metadata> > > [Event(name="change",type="org.apache.royale.events.Event")] > > </fx:Metadata> > > > > > > The following is an example of language selection in the bottom bar of our > application: > > > > -Collapsed (default): > > > > > > -Opened: > > > > > > > > Thanks, > > Hiedra. > > > > > > > > *De:* Carlos Rovira <[email protected]> > *Enviado el:* lunes, 13 de enero de 2020 22:16 > *Para:* [email protected] > *Asunto:* Re: Event and positioning list jewel > > > > Hi, > > > > in fact as Yishay if DropDownList doesn't fit for you, you can use > directly Jewel ComboBox that supports itemrenderers that can be decorated > with icons. > > I think PopUpButton should be for custom views that need to be popped out > (like a form or other kind of screen). But for a language list, I'll be > using ComboBox. I think we should make as well another DropDownList that > not use the system select underneath, and be similar to ComboBox. Is > something to analyze... > > > > > > > > El lun., 13 ene. 2020 a las 20:50, Yishay Weiss (<[email protected]>) > escribió: > > Theoretically you should be able to use ComboBox and change the view and > the popup beads. Then you could also reuse the HideComboBoxOnMouseDownBead. > > > > *From: *Maria Jose Esteve <[email protected]> > *Sent: *Monday, January 13, 2020 5:04 PM > *To: *[email protected] > *Subject: *RE: Event and positioning list jewel > > > > Hi Carlos, > > I like the idea of PopUpButton. We really got to this point (button + > list) because the dropdownlist was not built well but now, I like this > button option more, it is more clean and simple. > > I can help you very little with the creation of the new component but, > with its debugging sure it is. > > Let's see if I take a while today and I can extract the project code so > you can see the example. > > > > Thanks for your help. > > Hiedra > > > > *De:* Carlos Rovira-2 [via Apache Royale Users] < > [email protected]> > *Enviado el:* lunes, 13 de enero de 2020 14:05 > *Para:* Maria Jose Esteve <[email protected]> > *Asunto:* Re: Event and positioning list jewel > > > > Hi Maria Jose, > > > > For the Image/List need: related to what Yishay said, there're similar > code in Jewel ComboBox and PopUp components, although, I think we'll need > to do some new component that shows a Button and clicking on it open > another user defined component and manages the "click outside" behavior. > Let's call it "PopUpButton" to refer to it. I think it could be very useful > since seems it could be use a lot, and that we'll make a cleaner use in > apps with a well defined API. > > > > For the List layout problem, I'll need more data. Can you post a simple > code where I can find the problem? posting it here, or creating a gihub > issue will make it more easy to understand the problem and try to find a > solution. > > > > Thanks > > > > El lun., 13 ene. 2020 a las 11:10, Maria Jose Esteve (<[hidden email] > <http://user/SendEmail.jtp?type=node&node=3193&i=0>>) escribió: > > Hi Yishay, > > Thanks for answering. > > I know that I have to adapt to PAYG, I only need a little more time and > work but "I will get it": P > > I will look at the example of HideComboPopup that you indicate and I will > tell you how it goes ... > > As for the design, the truth is that what I had thought was a "vertical" > design ... I was debugging the CSS but I have not managed to recognize what > property makes the list cut, it must be an inherited property, I imagine > that foother I will continue researching and I will tell you more. > > > > Thanks Yishay. > > Hiedra > > > > *De:* yishayw [via Apache Royale Users] <[hidden email] > <http://user/SendEmail.jtp?type=node&node=3193&i=1>> > *Enviado el:* lunes, 13 de enero de 2020 10:40 > *Para:* Maria Jose Esteve <[hidden email] > <http://user/SendEmail.jtp?type=node&node=3193&i=2>> > *Asunto:* RE: Event and positioning list jewel > > > > Hi Maria, > > > > Flex was richer and heavier, and had lots of features built in just in > case someone might need them. In Royale we stress a Pay As You Go > philosophy which means your application should contain less code that you > are not using. This means there will be less events and attributes out of > the box. If you are porting a Flex application or are just looking for a > more Flex like experience you might want to take look at the Royale > mx/spark components. Most of the APIs you mentioned should work there out > of the box. > > > > If you want to write a new application using Jewel then you’ll have to > work a bit differently. So regarding events: ‘enter’ is not implemented, > ‘show’ and ‘hide’ are, and ‘creationComplete’ can probably be replaced with > ‘initComplete’ if it’s a container. We don’t have > FlexMouseEvent.MOUSE_DOWN_OUTSIDE, but you can take a look at this bead [1] > to understand how you can implement this behavior in your app. > > > > The horizontal layout issue I’m not sure about, maybe Carlos has an idea. > You could also try inspecting the css to see why it’s not working and file > a bug. > > > > Hope this helps, > > Yishay > > > > [1] > https://github.com/apache/royale-asjs/blob/develop/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/HideComboPopupOnMouseDownBead.as > > > > *From: *[hidden email] <http://user/SendEmail.jtp?type=node&node=3191&i=0> > *Sent: *Sunday, January 12, 2020 9:19 PM > *To: *[hidden email] <http://user/SendEmail.jtp?type=node&node=3191&i=1> > *Subject: *Event and positioning list jewel > > > > Hi, as many of us come from Flex and I'm used to using events like "enter" > "show" "hide" "creationcomplete" ... > > I am working with the jewel components, which I love, but it is difficult > for me to understand the new way of working, with Royale (beads, strand > ...) For example, I have a List that I open when I click on an image and > the I want to close if you click "outside" but I can't get it ... I only > manage to close it if I select an item. > > Another problem I have is that I cannot position the list "above the > button, it is always positioned vertically centered, maybe it has to do > with what is inside the FooterBar ... can you give me a hand? > > > > Some catch: > > a) General display: > > > > [image: cid:[email protected]] > > > > b) For you to see the elements in the list I have established a horizontal > layout: > > > > <j*:*BarSection itemsHorizontalAlign="itemsLeft"> > > <j*:*HGroup gap="20" visible="true" visible.error="false" > visible.init="false" visible.exit="false" visible.noinit="false"> > > <j*:*List id="dropDownList_LanManager" visible="false" > style="color: #00000;" > > itemRenderer="ImageDopDownItemRenderer" dataProvider= > "{langModel.list}" labelField="label" > > change="lanManager_change(event)" > > > <j*:*beads> > > <j*:*HorizontalLayout itemsExpand="true" /> > > <!-- > * <j:RequireSelection requireSelection="true"/>*--> > > </j*:*beads> > > </j*:*List> > > <j*:*Image id="langImage" visible="true" click= > "lanImage_Click(event)"/> > > </j*:*HGroup> > > </j*:*BarSection> > > > > [image: cid:[email protected]] > > > > c) This is displayed with the vertical layout: (observe that it is cut in > the 4th item) > > > > [image: cid:[email protected]] > > > > Any help will be welcome. > > Thank you very much to all. > > Hiedra. > > > > > > > > > > *If you reply to this email, your message will be added to the discussion > below:* > > > http://apache-royale-users.20374.n8.nabble.com/Event-and-positioning-list-jewel-tp3190p3191.html > > To start a new topic under Apache Royale Users, email [hidden email] > <http://user/SendEmail.jtp?type=node&node=3193&i=3> > To unsubscribe from Apache Royale Users, click here. > NAML > <http://apache-royale-users.20374.n8.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml> > > > > > -- > > Carlos Rovira > > http://about.me/carlosrovira > > > > > > *If you reply to this email, your message will be added to the discussion > below:* > > > http://apache-royale-users.20374.n8.nabble.com/Event-and-positioning-list-jewel-tp3190p3193.html > > To start a new topic under Apache Royale Users, email > [email protected] > To unsubscribe from Apache Royale Users, click here > <http://apache-royale-users.20374.n8.nabble.com/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=1&code=bWplc3RldmVAaWVzdC5jb218MXwtMTMzODcyOQ==> > . > NAML > <http://apache-royale-users.20374.n8.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml> > > > > > > > -- > > Carlos Rovira > > http://about.me/carlosrovira > > > > > -- Carlos Rovira http://about.me/carlosrovira
