Event and positioning list jewel

classic Classic list List threaded Threaded
11 messages Options
Reply | Threaded
Open this post in threaded view
|

Event and positioning list jewel

hiedra

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:

 

 

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>

 

 

c) This is displayed with the vertical layout: (observe that it is cut in the 4th item)

 

 

Any help will be welcome.

Thank you very much to all.

Hiedra.

 

 

Reply | Threaded
Open this post in threaded view
|

RE: Event and positioning list jewel

yishayw

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]
Sent: Sunday, January 12, 2020 9:19 PM
To: [hidden email]
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:image001.png@01D5C985.0BF003D0

 

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:image002.png@01D5C985.0BF003D0

 

c) This is displayed with the vertical layout: (observe that it is cut in the 4th item)

 

cid:image003.png@01D5C985.71C18940

 

Any help will be welcome.

Thank you very much to all.

Hiedra.

 

 

 

Reply | Threaded
Open this post in threaded view
|

RE: Event and positioning list jewel

hiedra

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] <ml+[hidden email]>
Enviado el: lunes, 13 de enero de 2020 10:40
Para: Maria Jose Esteve <[hidden email]>
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]
Sent: Sunday, January 12, 2020 9:19 PM
To: [hidden email]
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:image001.png@01D5C985.0BF003D0

 

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:image002.png@01D5C985.0BF003D0

 

c) This is displayed with the vertical layout: (observe that it is cut in the 4th item)

 

cid:image003.png@01D5C985.71C18940

 

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]
To unsubscribe from Apache Royale Users, click here.
NAML

Reply | Threaded
Open this post in threaded view
|

Re: Event and positioning list jewel

Carlos Rovira-2
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]>) 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]>
Enviado el: lunes, 13 de enero de 2020 10:40
Para: Maria Jose Esteve <[hidden email]>
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]
Sent: Sunday, January 12, 2020 9:19 PM
To: [hidden email]
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:image001.png@01D5C985.0BF003D0

 

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:image002.png@01D5C985.0BF003D0

 

c) This is displayed with the vertical layout: (observe that it is cut in the 4th item)

 

cid:image003.png@01D5C985.71C18940

 

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]
To unsubscribe from Apache Royale Users, click here.
NAML



--
Reply | Threaded
Open this post in threaded view
|

RE: Event and positioning list jewel

hiedra

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] <ml+[hidden email]>
Enviado el: lunes, 13 de enero de 2020 14:05
Para: Maria Jose Esteve <[hidden email]>
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]>) 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]>
Enviado el: lunes, 13 de enero de 2020 10:40
Para: Maria Jose Esteve <[hidden email]>
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]
Sent: Sunday, January 12, 2020 9:19 PM
To: [hidden email]
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:image001.png@01D5C985.0BF003D0

 

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:image002.png@01D5C985.0BF003D0

 

c) This is displayed with the vertical layout: (observe that it is cut in the 4th item)

 

cid:image003.png@01D5C985.71C18940

 

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]
To unsubscribe from Apache Royale Users, click here.
NAML


 

--

Carlos Rovira

 

 


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 [hidden email]
To unsubscribe from Apache Royale Users, click here.
NAML

Reply | Threaded
Open this post in threaded view
|

RE: Event and positioning list jewel

yishayw

Theoretically you should be able to use ComboBox and change the view and the popup beads. Then you could also reuse the HideComboBoxOnMouseDownBead.

 

From: [hidden email]
Sent: Monday, January 13, 2020 5:04 PM
To: [hidden email]
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] <ml+[hidden email]>
Enviado el: lunes, 13 de enero de 2020 14:05
Para: Maria Jose Esteve <[hidden email]>
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]>) 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]>
Enviado el: lunes, 13 de enero de 2020 10:40
Para: Maria Jose Esteve <[hidden email]>
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]
Sent: Sunday, January 12, 2020 9:19 PM
To: [hidden email]
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:image001.png@01D5C985.0BF003D0

 

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:image002.png@01D5C985.0BF003D0

 

c) This is displayed with the vertical layout: (observe that it is cut in the 4th item)

 

cid:image003.png@01D5C985.71C18940

 

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]
To unsubscribe from Apache Royale Users, click here.
NAML


 

--

Carlos Rovira

 

 

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 [hidden email]
To unsubscribe from Apache Royale Users, click here.
NAML

 

Reply | Threaded
Open this post in threaded view
|

Re: Event and positioning list jewel

Carlos Rovira-2
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 (<[hidden email]>) 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: [hidden email]
Sent: Monday, January 13, 2020 5:04 PM
To: [hidden email]
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] <[hidden email]>
Enviado el: lunes, 13 de enero de 2020 14:05
Para: Maria Jose Esteve <[hidden email]>
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]>) 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]>
Enviado el: lunes, 13 de enero de 2020 10:40
Para: Maria Jose Esteve <[hidden email]>
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]
Sent: Sunday, January 12, 2020 9:19 PM
To: [hidden email]
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:image001.png@01D5C985.0BF003D0

 

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:image002.png@01D5C985.0BF003D0

 

c) This is displayed with the vertical layout: (observe that it is cut in the 4th item)

 

cid:image003.png@01D5C985.71C18940

 

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]
To unsubscribe from Apache Royale Users, click here.
NAML


 

--

Carlos Rovira

 

 

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 [hidden email]
To unsubscribe from Apache Royale Users, click here.
NAML

 



--
Reply | Threaded
Open this post in threaded view
|

RE: Event and positioning list jewel

hiedra

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 <[hidden email]>
Enviado el: lunes, 13 de enero de 2020 22:16
Para: [hidden email]
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 (<[hidden email]>) 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: [hidden email]
Sent: Monday, January 13, 2020 5:04 PM
To: [hidden email]
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] <[hidden email]>
Enviado el: lunes, 13 de enero de 2020 14:05
Para: Maria Jose Esteve <[hidden email]>
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]>) 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]>
Enviado el: lunes, 13 de enero de 2020 10:40
Para: Maria Jose Esteve <[hidden email]>
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]
Sent: Sunday, January 12, 2020 9:19 PM
To: [hidden email]
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:image001.png@01D5C985.0BF003D0

 

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:image002.png@01D5C985.0BF003D0

 

c) This is displayed with the vertical layout: (observe that it is cut in the 4th item)

 

cid:image003.png@01D5C985.71C18940

 

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]
To unsubscribe from Apache Royale Users, click here.
NAML


 

--

Carlos Rovira

 

 

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 [hidden email]
To unsubscribe from Apache Royale Users, click here.
NAML

 


 

--

Carlos Rovira

 

Reply | Threaded
Open this post in threaded view
|

RE: Event and positioning list jewel

yishayw

Thanks for sharing. Glad you found something that works for you.

 

From: [hidden email]
Sent: Thursday, February 6, 2020 6:03 PM
To: [hidden email]
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 <[hidden email]>
Enviado el: lunes, 13 de enero de 2020 22:16
Para: [hidden email]
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 (<[hidden email]>) 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: [hidden email]
Sent: Monday, January 13, 2020 5:04 PM
To: [hidden email]
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] <[hidden email]>
Enviado el: lunes, 13 de enero de 2020 14:05
Para: Maria Jose Esteve <[hidden email]>
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]>) 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]>
Enviado el: lunes, 13 de enero de 2020 10:40
Para: Maria Jose Esteve <[hidden email]>
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]
Sent: Sunday, January 12, 2020 9:19 PM
To: [hidden email]
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:image001.png@01D5C985.0BF003D0

 

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:image002.png@01D5C985.0BF003D0

 

c) This is displayed with the vertical layout: (observe that it is cut in the 4th item)

 

cid:image003.png@01D5C985.71C18940

 

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]
To unsubscribe from Apache Royale Users, click here.
NAML


 

--

Carlos Rovira

 

 

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 [hidden email]
To unsubscribe from Apache Royale Users, click here.
NAML

 


 

--

 

 

Reply | Threaded
Open this post in threaded view
|

Re: Event and positioning list jewel

Carlos Rovira-2
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 (<[hidden email]>) escribió:

Thanks for sharing. Glad you found something that works for you.

 

From: [hidden email]
Sent: Thursday, February 6, 2020 6:03 PM
To: [hidden email]
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 <[hidden email]>
Enviado el: lunes, 13 de enero de 2020 22:16
Para: [hidden email]
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 (<[hidden email]>) 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: [hidden email]
Sent: Monday, January 13, 2020 5:04 PM
To: [hidden email]
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] <[hidden email]>
Enviado el: lunes, 13 de enero de 2020 14:05
Para: Maria Jose Esteve <[hidden email]>
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]>) 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]>
Enviado el: lunes, 13 de enero de 2020 10:40
Para: Maria Jose Esteve <[hidden email]>
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]
Sent: Sunday, January 12, 2020 9:19 PM
To: [hidden email]
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:image001.png@01D5C985.0BF003D0

 

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:image002.png@01D5C985.0BF003D0

 

c) This is displayed with the vertical layout: (observe that it is cut in the 4th item)

 

cid:image003.png@01D5C985.71C18940

 

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]
To unsubscribe from Apache Royale Users, click here.
NAML


 

--

Carlos Rovira

 

 

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 [hidden email]
To unsubscribe from Apache Royale Users, click here.
NAML

 


 

--

 

 



--
Reply | Threaded
Open this post in threaded view
|

RE: Event and positioning list jewel

hiedra

It has been group work, we are moving forward :)

 

Hiedra.

 

De: Carlos Rovira <[hidden email]>
Enviado el: viernes, 7 de febrero de 2020 9:51
Para: [hidden email]
Asunto: Re: Event and positioning list jewel

 

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 (<[hidden email]>) escribió:

Thanks for sharing. Glad you found something that works for you.

 

From: [hidden email]
Sent: Thursday, February 6, 2020 6:03 PM
To: [hidden email]
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 <[hidden email]>
Enviado el: lunes, 13 de enero de 2020 22:16
Para: [hidden email]
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 (<[hidden email]>) 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: [hidden email]
Sent: Monday, January 13, 2020 5:04 PM
To: [hidden email]
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] <[hidden email]>
Enviado el: lunes, 13 de enero de 2020 14:05
Para: Maria Jose Esteve <[hidden email]>
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]>) 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]>
Enviado el: lunes, 13 de enero de 2020 10:40
Para: Maria Jose Esteve <[hidden email]>
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]
Sent: Sunday, January 12, 2020 9:19 PM
To: [hidden email]
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:image001.png@01D5C985.0BF003D0

 

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:image002.png@01D5C985.0BF003D0

 

c) This is displayed with the vertical layout: (observe that it is cut in the 4th item)

 

cid:image003.png@01D5C985.71C18940

 

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]
To unsubscribe from Apache Royale Users, click here.
NAML


 

--

Carlos Rovira

 

 

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 [hidden email]
To unsubscribe from Apache Royale Users, click here.
NAML

 


 

--

 

 


 

--

Carlos Rovira