Before I changed the default.css I had managed to get the DropDownList down 
into a size I can use.  It was the movement that was hard to deal with.  I'll 
consider it a viable backup.
I'm going to give your combobox code a try today.

From: Carlos Rovira [mailto:carlosrov...@apache.org]
Sent: Monday, October 26, 2020 3:59 AM
To: users@royale.apache.org
Subject: Re: [EXTERNAL] Re: Getting to Jewel ComboBox to work under certain 
circunstancies


This message was sent from outside of Boeing. Please do not click links or open 
attachments unless you recognize the sender and know that the content is safe.




Hi Warren,

DropDownList uses the "select" tag in HTML. That is controlled by the browser 
and then by OS, not by us. So we just can configure a little part of it. The 
good thing is that in tablet or mobile, it shows in a way very user friendly. 
But in desktop the look and feel and positioning can't be changed. When I have 
time I want to make another Jewel version of DropDownList more near to the rest 
of Jewel look and feel and positioning and make the actual DropDownList renamed 
as "SimpleDropDownList". But that could be many months from now since there's 
things more urgent now.

So we can't change how systems position the select popup, sorry. Or at least I 
think is not possible, you can search in internet is there's some trick about 
it on html select, and if that's the case I could do something to integrate it 
(if not in the control, as a bead)

So I think another problem for you with DropDownList could be that it looks 
bigger than expected? If so I can see how to reduce it, it should not be 
difficult. Let me know so I take a look at it in that case.

Thanks

Carlos


El dom., 25 oct. 2020 a las 21:37, Koch (US), Warren R 
(<warren.r.k...@boeing.com<mailto:warren.r.k...@boeing.com>>) escribió:
I will see if I can get this going tonight or tomorrow.   The CSS threw off 
some of my layouts so I'm having to find and fix them.  I'm going to have to be 
very careful with updates to the default.css.

Also, I've been looking at the DropDownList as a replacement for a Non-Editable 
ComboBox.  The version of Flex (3.6) I'm using didn't have that so I forced the 
ComboBox to act like one.  I think the DropDownList might be closer to what I 
need – using the ComboBox feels "forced".

So far the big DropDownList issue is dropdown doesn't drop below the control 
but "moves" relative to the pick.   If I pick something at the bottom of the 
list then next time it is picked the whole list shifts up.

Most of my users are on high resolution desktops – if I were on other devices 
than what you have is great.

And thank you again for all your time.


From: Carlos Rovira 
[mailto:carlosrov...@apache.org<mailto:carlosrov...@apache.org>]
Sent: Sunday, October 25, 2020 2:30 PM
To: users@royale.apache.org<mailto:users@royale.apache.org>
Subject: [EXTERNAL] Re: Getting to Jewel ComboBox to work under certain 
circunstancies


This message was sent from outside of Boeing. Please do not click links or open 
attachments unless you recognize the sender and know that the content is safe.




Hi Warren,

hope you get this example working. I fixed the same issue as yesterday in List 
about min-height limiting the populist in combo, also added support for 
itemRenderer at instance level. Is all committed in the repo. Code:

<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
               
xmlns:j="library://ns.apache.org/royale/jewel<http://ns.apache.org/royale/jewel>"
               
xmlns:js="library://ns.apache.org/royale/basic<http://ns.apache.org/royale/basic>"
               
xmlns:html="library://ns.apache.org/royale/html<http://ns.apache.org/royale/html>"
               xmlns:vos="vos.*">

    <fx:Script>
        <![CDATA[
            import org.apache.royale.collections.ArrayList;

            [Bindable]
            private var loadStatusList:ArrayList = new 
ArrayList(['ALL','COMPLETED','NOTIFIED','ERROR', 'LOAD']);
        ]]>
    </fx:Script>

    <j:beads>
        <js:ApplicationDataBinding/>
    </j:beads>

    <j:initialView>
        <j:View>
            <j:beads>
                <js:Paddings padding="30"/>
                <j:VerticalLayout gap="3"/>
            </j:beads>

            <html:H3 text="ComboBox Search"/>

            <j:ComboBox height="16" labelField="label" 
dataProvider="{loadStatusList}" itemRenderer="renderers.ComboRenderer">
                <j:beads>
                    <j:ComboBoxPresentationModel rowCount="3" rowHeight="16"/>
                    <j:ComboBoxTextPrompt prompt="OPTIONS..."/>
                </j:beads>
            </j:ComboBox>
        </j:View>
    </j:initialView>

</j:Application>

Code for ComboRender:

<j:ListItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009";
    
xmlns:j="library://ns.apache.org/royale/jewel<http://ns.apache.org/royale/jewel>"
    
xmlns:js="library://ns.apache.org/royale/basic<http://ns.apache.org/royale/basic>">

    <fx:Script>
        <![CDATA[
            import vos.IconListVO;

            [Bindable("dataChange")]
            public function get iconList():IconListVO
            {
                return data as IconListVO;
            }
        ]]>
    </fx:Script>

    <j:beads>
        <js:ItemRendererDataBinding />
        <j:HorizontalLayout gap="8" itemsVerticalAlign="itemsCenter"/>
        <js:Paddings padding="0"/>
    </j:beads>

    <j:Label html="{text}"/>

</j:ListItemRenderer>

IconListVO (but icon is not used)

package vos
{
    [Bindable]
    public class IconListVO
    {
        public var label:String;
        public var icon:String;

        public function IconListVO(label:String, icon:String = null)
        {
            this.label = label;
            this.icon = icon;
        }
    }
}

Now the combo can be more compact as you want, but still need some work to make 
it look better. I'll work over it in the next few days.

I think I need to make it even more easy to configure this way since right now 
it implies to make configs in more than one place, which is not optimal. I 
always think of Jewel as a responsive UI set so to make it work on desktop and 
also mobile, you should want the controls to be bigger so a finger could touch 
on screen but also on desktop you can work easily with the mouse pointer.

So this is really a new use case for Jewel that must be solved since until now 
nobody tried it.

Hope you can work with it in the meanwhile to continue integrating your pieces 
in your migration.

Carlos



El sáb., 24 oct. 2020 a las 18:45, Carlos Rovira 
(<carlosrov...@apache.org<mailto:carlosrov...@apache.org>>) escribió:
Hi Warren,

about Jewel ComboBox let's start trying to get the combo loaded with data.
The following code should work for you to get the data you need with just 3 
rows showing.

I check that rowHeight is having the same problem as in the jewel list. I must 
exit now so I'll be looking at it tomorrow since for sure there is another bug 
that we need to solve.

For now concentrate on getting this code working, that should be very 
straightforward.

Thanks

<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
xmlns:j="library://ns.apache.org/royale/jewel<http://ns.apache.org/royale/jewel>"
xmlns:js="library://ns.apache.org/royale/basic<http://ns.apache.org/royale/basic>"
xmlns:html="library://ns.apache.org/royale/html<http://ns.apache.org/royale/html>"
xmlns:vos="vos.*">
<fx:Script>
<![CDATA[
import org.apache.royale.collections.ArrayList;

[Bindable]
private var loadStatusList:ArrayList = new 
ArrayList(['ALL','COMPLETED','NOTIFIED','ERROR', 'LOAD']);
]]>
</fx:Script>

<j:beads>
<js:ApplicationDataBinding/>
</j:beads>

<j:initialView>
<j:View>
<j:beads>
<js:Paddings padding="30"/>
<j:VerticalLayout gap="3"/>
</j:beads>
<html:H3 text="ComboBox Search"/>
<j:Label multiline="true">
<j:html><![CDATA[<p>This <b>ComboBox</b> uses a <b>SearchFilter</b> bead to 
perform a local search in the <i>dataProvider</i>. The filter is decorated, and 
can be configured.</p>]]></j:html>
</j:Label>

<j:ComboBox labelField="label" dataProvider="{loadStatusList}">
<j:beads>
<j:ComboBoxPresentationModel rowCount="3"/>
<j:ComboBoxTextPrompt prompt="OPTIONS..."/>
</j:beads>
</j:ComboBox>
</j:View>
</j:initialView>

</j:Application>

--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation
http://about.me/carlosrovira



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation
http://about.me/carlosrovira



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation
http://about.me/carlosrovira

Reply via email to