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):
[cid:[email protected]]
-Opened:
[cid:[email protected]]
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]<mailto:[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<mailto:[email protected]>
Sent: Monday, January 13, 2020 5:04 PM
To: [email protected]<mailto:[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]<mailto:ml%[email protected]>>
Enviado el: lunes, 13 de enero de 2020 14:05
Para: Maria Jose Esteve <[email protected]<mailto:[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:
[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>
[cid:[email protected]]
c) This is displayed with the vertical layout: (observe that it is cut in the
4th item)
[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]<mailto:[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
