Layout advises

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

Layout advises

Serkan Taş
Hi,

I have flex layout like :




but getting this for Royale Emulation



What am i missing ?

Or is have a better way to have this view ?

Here is the source :

<?xml version="1.0" encoding="latin5" ?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.apache.org/royale/spark"
               xmlns:mx="library://ns.apache.org/royale/mx"
               height="600" width="800">
   
    <fx:Metadata>
        [ResourceBundle("messages")]
    </fx:Metadata>
   
    <fx:Script>
        <![CDATA[
           
            private function setTabEnabled(index:int, enabled:Boolean):void {
            }
           
            private function showArgValuePopup():void {
            }
           
            private function showJobContentPopup():void {
            }
           
            private function showJobLogPopup():void {
            }
           
            private function showJobBuffPopup():void {
            }
           
            private function showGenericPopup(fileTag:String):void {
            }
           
        ]]>
    </fx:Script>
   
    <s:VGroup paddingTop="5">
        <!-- Create a Spark ButtonBar control to navigate
        the ViewStack container. -->
        <s:TabBar id="tabNavigator" dataProvider="{myViewStack}"/>
       
        <!-- Define the ViewStack and the three child containers. -->
        <mx:ViewStack id="myViewStack"
                      borderStyle="solid"
                      width="100%" height="160">
           
            <s:NavigatorContent id="search" label="{resourceManager.getString('messages', 'jobBaseInfoTabLabel')}">
                <s:HGroup width="100%" >
                   
                    <s:VGroup paddingLeft="5" paddingRight="5" gap="-10" width="100%">
                       
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobCommandText')}" width="105"/>
                            <s:TextInput id="jobCommand" top="5" editable="false" width="95"/>
                            <s:Image id="showJobContent" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'commandFileTooltip')}"
                                     buttonMode="true" click="showJobContentPopup()" visible="false" includeInLayout="false" />
                            <s:Image id="dontShowJobContent" source="{ImageContainer.getLogImage(1)}" toolTip="{resourceManager.getString('messages', 'noCommandFileTooltip')}"/>
                            <s:Label text="{resourceManager.getString('messages', 'dzGroupIdLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="dzGroup" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobLogFileLabel')}" width="105"/>
                            <s:TextInput id="jobLogFile" top="5" editable="false" width="95"/>
                            <s:Image id="showJobLog" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'logFileTooltip')}"
                                     buttonMode="true" click="showJobLogPopup()" visible="false" includeInLayout="false"/>
                            <s:Image id="dontShowJobLog" source="{ImageContainer.getLogImage(1)}" toolTip="{resourceManager.getString('messages', 'noLogFileTooltip')}" />
                            <s:Label text="{resourceManager.getString('messages', 'jobRestartableLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="restartable" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobPreviousDurationLabel')}" width="105"/>
                            <s:TextInput id="prevDuration" top="5" editable="false" width="95"/>
                            <s:Image id="showJobBuff" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'errBuffTooltip')}"
                                     buttonMode="true" click="showJobBuffPopup()" top="0"/>
                            <s:Label text="{resourceManager.getString('messages', 'jobParameterLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="paramValue" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="baseline" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobDiffDurationLabel')}" width="105"/>
                            <s:TextInput id="diffDuration" top="5" editable="false" width="95"/>
                            <s:Label text="{resourceManager.getString('messages', 'jobArgsLabel')}" width="65"/>
                            <s:TextInput id="argValues" top="5" editable="false" width="140"/>
                            <s:Button y="-27" right="290" label="{resourceManager.getString('messages', 'jobEditButtonLabel')}" click="showArgValuePopup()" width="50"/>
                        </s:HGroup>
                       
                        <s:HGroup verticalAlign="baseline" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobHandlerUriLabel')}" width="105" />
                            <s:TextInput id="handlerURI" top="5" editable="false" width="300"/>
                        </s:HGroup>
                       
                    </s:VGroup>
                   
                </s:HGroup>
            </s:NavigatorContent>
           
        </mx:ViewStack>
       
    </s:VGroup>
</s:Application>


Thanks,
Serkan

Reply | Threaded
Open this post in threaded view
|

Re: Layout advises

Alex Harui-2

Probably s:Image needs to force a layout of the parent.

 

From: Serkan Taş <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Thursday, March 19, 2020 at 5:58 AM
To: "[hidden email]" <[hidden email]>
Subject: Layout advises

 

Hi,

I have flex layout like :




but getting this for Royale Emulation



What am i missing ?

Or is have a better way to have this view ?

Here is the source :

<?xml version="1.0" encoding="latin5" ?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.apache.org/royale/spark"
               xmlns:mx="library://ns.apache.org/royale/mx"
               height="600" width="800">
   
    <fx:Metadata>
        [ResourceBundle("messages")]
    </fx:Metadata>
   
    <fx:Script>
        <![CDATA[
           
            private function setTabEnabled(index:int, enabled:Boolean):void {
            }
           
            private function showArgValuePopup():void {
            }
           
            private function showJobContentPopup():void {
            }
           
            private function showJobLogPopup():void {
            }
           
            private function showJobBuffPopup():void {
            }
           
            private function showGenericPopup(fileTag:String):void {
            }
           
        ]]>
    </fx:Script>
   
    <s:VGroup paddingTop="5">
        <!-- Create a Spark ButtonBar control to navigate
        the ViewStack container. -->
        <s:TabBar id="tabNavigator" dataProvider="{myViewStack}"/>
       
        <!-- Define the ViewStack and the three child containers. -->
        <mx:ViewStack id="myViewStack"
                      borderStyle="solid"
                      width="100%" height="160">
           
            <s:NavigatorContent id="search" label="{resourceManager.getString('messages', 'jobBaseInfoTabLabel')}">
                <s:HGroup width="100%" >
                   
                    <s:VGroup paddingLeft="5" paddingRight="5" gap="-10" width="100%">
                       
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobCommandText')}" width="105"/>
                            <s:TextInput id="jobCommand" top="5" editable="false" width="95"/>
                            <s:Image id="showJobContent" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'commandFileTooltip')}"
                                     buttonMode="true" click="showJobContentPopup()" visible="false" includeInLayout="false" />
                            <s:Image id="dontShowJobContent" source="{ImageContainer.getLogImage(1)}" toolTip="{resourceManager.getString('messages', 'noCommandFileTooltip')}"/>
                            <s:Label text="{resourceManager.getString('messages', 'dzGroupIdLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="dzGroup" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobLogFileLabel')}" width="105"/>
                            <s:TextInput id="jobLogFile" top="5" editable="false" width="95"/>
                            <s:Image id="showJobLog" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'logFileTooltip')}"
                                     buttonMode="true" click="showJobLogPopup()" visible="false" includeInLayout="false"/>
                            <s:Image id="dontShowJobLog" source="{ImageContainer.getLogImage(1)}" toolTip="{resourceManager.getString('messages', 'noLogFileTooltip')}" />
                            <s:Label text="{resourceManager.getString('messages', 'jobRestartableLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="restartable" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobPreviousDurationLabel')}" width="105"/>
                            <s:TextInput id="prevDuration" top="5" editable="false" width="95"/>
                            <s:Image id="showJobBuff" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'errBuffTooltip')}"
                                     buttonMode="true" click="showJobBuffPopup()" top="0"/>
                            <s:Label text="{resourceManager.getString('messages', 'jobParameterLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="paramValue" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="baseline" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobDiffDurationLabel')}" width="105"/>
                            <s:TextInput id="diffDuration" top="5" editable="false" width="95"/>
                            <s:Label text="{resourceManager.getString('messages', 'jobArgsLabel')}" width="65"/>
                            <s:TextInput id="argValues" top="5" editable="false" width="140"/>
                            <s:Button y="-27" right="290" label="{resourceManager.getString('messages', 'jobEditButtonLabel')}" click="showArgValuePopup()" width="50"/>
                        </s:HGroup>
                       
                        <s:HGroup verticalAlign="baseline" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobHandlerUriLabel')}" width="105" />
                            <s:TextInput id="handlerURI" top="5" editable="false" width="300"/>
                        </s:HGroup>
                       
                    </s:VGroup>
                   
                </s:HGroup>
            </s:NavigatorContent>
           
        </mx:ViewStack>
       
    </s:VGroup>
</s:Application>


Thanks,
Serkan

Reply | Threaded
Open this post in threaded view
|

Re: Layout advises

Serkan Taş
How can i fix ?




On Thu, Mar 19, 2020 at 6:34 PM +0300, "Alex Harui" <[hidden email]> wrote:

Probably s:Image needs to force a layout of the parent.

 

From: Serkan Taş <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Thursday, March 19, 2020 at 5:58 AM
To: "[hidden email]" <[hidden email]>
Subject: Layout advises

 

Hi,

I have flex layout like :




but getting this for Royale Emulation



What am i missing ?

Or is have a better way to have this view ?

Here is the source :

<?xml version="1.0" encoding="latin5" ?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.apache.org/royale/spark"
               xmlns:mx="library://ns.apache.org/royale/mx"
               height="600" width="800">
   
    <fx:Metadata>
        [ResourceBundle("messages")]
    </fx:Metadata>
   
    <fx:Script>
        <![CDATA[
           
            private function setTabEnabled(index:int, enabled:Boolean):void {
            }
           
            private function showArgValuePopup():void {
            }
           
            private function showJobContentPopup():void {
            }
           
            private function showJobLogPopup():void {
            }
           
            private function showJobBuffPopup():void {
            }
           
            private function showGenericPopup(fileTag:String):void {
            }
           
        ]]>
    </fx:Script>
   
    <s:VGroup paddingTop="5">
        <!-- Create a Spark ButtonBar control to navigate
        the ViewStack container. -->
        <s:TabBar id="tabNavigator" dataProvider="{myViewStack}"/>
       
        <!-- Define the ViewStack and the three child containers. -->
        <mx:ViewStack id="myViewStack"
                      borderStyle="solid"
                      width="100%" height="160">
           
            <s:NavigatorContent id="search" label="{resourceManager.getString('messages', 'jobBaseInfoTabLabel')}">
                <s:HGroup width="100%" >
                   
                    <s:VGroup paddingLeft="5" paddingRight="5" gap="-10" width="100%">
                       
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobCommandText')}" width="105"/>
                            <s:TextInput id="jobCommand" top="5" editable="false" width="95"/>
                            <s:Image id="showJobContent" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'commandFileTooltip')}"
                                     buttonMode="true" click="showJobContentPopup()" visible="false" includeInLayout="false" />
                            <s:Image id="dontShowJobContent" source="{ImageContainer.getLogImage(1)}" toolTip="{resourceManager.getString('messages', 'noCommandFileTooltip')}"/>
                            <s:Label text="{resourceManager.getString('messages', 'dzGroupIdLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="dzGroup" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobLogFileLabel')}" width="105"/>
                            <s:TextInput id="jobLogFile" top="5" editable="false" width="95"/>
                            <s:Image id="showJobLog" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'logFileTooltip')}"
                                     buttonMode="true" click="showJobLogPopup()" visible="false" includeInLayout="false"/>
                            <s:Image id="dontShowJobLog" source="{ImageContainer.getLogImage(1)}" toolTip="{resourceManager.getString('messages', 'noLogFileTooltip')}" />
                            <s:Label text="{resourceManager.getString('messages', 'jobRestartableLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="restartable" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobPreviousDurationLabel')}" width="105"/>
                            <s:TextInput id="prevDuration" top="5" editable="false" width="95"/>
                            <s:Image id="showJobBuff" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'errBuffTooltip')}"
                                     buttonMode="true" click="showJobBuffPopup()" top="0"/>
                            <s:Label text="{resourceManager.getString('messages', 'jobParameterLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="paramValue" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="baseline" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobDiffDurationLabel')}" width="105"/>
                            <s:TextInput id="diffDuration" top="5" editable="false" width="95"/>
                            <s:Label text="{resourceManager.getString('messages', 'jobArgsLabel')}" width="65"/>
                            <s:TextInput id="argValues" top="5" editable="false" width="140"/>
                            <s:Button y="-27" right="290" label="{resourceManager.getString('messages', 'jobEditButtonLabel')}" click="showArgValuePopup()" width="50"/>
                        </s:HGroup>
                       
                        <s:HGroup verticalAlign="baseline" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobHandlerUriLabel')}" width="105" />
                            <s:TextInput id="handlerURI" top="5" editable="false" width="300"/>
                        </s:HGroup>
                       
                    </s:VGroup>
                   
                </s:HGroup>
            </s:NavigatorContent>
           
        </mx:ViewStack>
       
    </s:VGroup>
</s:Application>


Thanks,
Serkan

Reply | Threaded
Open this post in threaded view
|

Re: Layout advises

Alex Harui-2

Not sure.  Spark Image looks like it is dispatching the right event, so someone has to debug the layouts and figure out why.

 

To try  a workaround, if you know the height of the image, set the height on the Image tag.

 

-Alex

 

From: Serkan Taş <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Thursday, March 19, 2020 at 9:12 AM
To: "[hidden email]" <[hidden email]>
Subject: Re: Layout advises

 

How can i fix ?

 



On Thu, Mar 19, 2020 at 6:34 PM +0300, "Alex Harui" <[hidden email]> wrote:

Probably s:Image needs to force a layout of the parent.

 

From: Serkan Taş <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Thursday, March 19, 2020 at 5:58 AM
To: "[hidden email]" <[hidden email]>
Subject: Layout advises

 

Hi,

I have flex layout like :




but getting this for Royale Emulation



What am i missing ?

Or is have a better way to have this view ?

Here is the source :

<?xml version="1.0" encoding="latin5" ?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.apache.org/royale/spark"
               xmlns:mx="library://ns.apache.org/royale/mx"
               height="600" width="800">
   
    <fx:Metadata>
        [ResourceBundle("messages")]
    </fx:Metadata>
   
    <fx:Script>
        <![CDATA[
           
            private function setTabEnabled(index:int, enabled:Boolean):void {
            }
           
            private function showArgValuePopup():void {
            }
           
            private function showJobContentPopup():void {
            }
           
            private function showJobLogPopup():void {
            }
           
            private function showJobBuffPopup():void {
            }
           
            private function showGenericPopup(fileTag:String):void {
            }
           
        ]]>
    </fx:Script>
   
    <s:VGroup paddingTop="5">
        <!-- Create a Spark ButtonBar control to navigate
        the ViewStack container. -->
        <s:TabBar id="tabNavigator" dataProvider="{myViewStack}"/>
       
        <!-- Define the ViewStack and the three child containers. -->
        <mx:ViewStack id="myViewStack"
                      borderStyle="solid"
                      width="100%" height="160">
           
            <s:NavigatorContent id="search" label="{resourceManager.getString('messages', 'jobBaseInfoTabLabel')}">
                <s:HGroup width="100%" >
                   
                    <s:VGroup paddingLeft="5" paddingRight="5" gap="-10" width="100%">
                       
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobCommandText')}" width="105"/>
                            <s:TextInput id="jobCommand" top="5" editable="false" width="95"/>
                            <s:Image id="showJobContent" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'commandFileTooltip')}"
                                     buttonMode="true" click="showJobContentPopup()" visible="false" includeInLayout="false" />
                            <s:Image id="dontShowJobContent" source="{ImageContainer.getLogImage(1)}" toolTip="{resourceManager.getString('messages', 'noCommandFileTooltip')}"/>
                            <s:Label text="{resourceManager.getString('messages', 'dzGroupIdLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="dzGroup" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobLogFileLabel')}" width="105"/>
                            <s:TextInput id="jobLogFile" top="5" editable="false" width="95"/>
                            <s:Image id="showJobLog" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'logFileTooltip')}"
                                     buttonMode="true" click="showJobLogPopup()" visible="false" includeInLayout="false"/>
                            <s:Image id="dontShowJobLog" source="{ImageContainer.getLogImage(1)}" toolTip="{resourceManager.getString('messages', 'noLogFileTooltip')}" />
                            <s:Label text="{resourceManager.getString('messages', 'jobRestartableLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="restartable" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobPreviousDurationLabel')}" width="105"/>
                            <s:TextInput id="prevDuration" top="5" editable="false" width="95"/>
                            <s:Image id="showJobBuff" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'errBuffTooltip')}"
                                     buttonMode="true" click="showJobBuffPopup()" top="0"/>
                            <s:Label text="{resourceManager.getString('messages', 'jobParameterLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="paramValue" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="baseline" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobDiffDurationLabel')}" width="105"/>
                            <s:TextInput id="diffDuration" top="5" editable="false" width="95"/>
                            <s:Label text="{resourceManager.getString('messages', 'jobArgsLabel')}" width="65"/>
                            <s:TextInput id="argValues" top="5" editable="false" width="140"/>
                            <s:Button y="-27" right="290" label="{resourceManager.getString('messages', 'jobEditButtonLabel')}" click="showArgValuePopup()" width="50"/>
                        </s:HGroup>
                       
                        <s:HGroup verticalAlign="baseline" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobHandlerUriLabel')}" width="105" />
                            <s:TextInput id="handlerURI" top="5" editable="false" width="300"/>
                        </s:HGroup>
                       
                    </s:VGroup>
                   
                </s:HGroup>
            </s:NavigatorContent>
           
        </mx:ViewStack>
       
    </s:VGroup>
</s:Application>


Thanks,
Serkan


Reply | Threaded
Open this post in threaded view
|

Re: Layout advises

Serkan Taş
I guess it is not only related with the images but with layout in general.

19.03.2020 19:19 tarihinde Alex Harui yazdı:

Not sure.  Spark Image looks like it is dispatching the right event, so someone has to debug the layouts and figure out why.

 

To try  a workaround, if you know the height of the image, set the height on the Image tag.

 

-Alex

 

From: Serkan Taş [hidden email]
Reply-To: [hidden email] [hidden email]
Date: Thursday, March 19, 2020 at 9:12 AM
To: [hidden email] [hidden email]
Subject: Re: Layout advises

 

How can i fix ?

 



On Thu, Mar 19, 2020 at 6:34 PM +0300, "Alex Harui" <[hidden email]> wrote:

Probably s:Image needs to force a layout of the parent.

 

From: Serkan Taş [hidden email]
Reply-To: [hidden email] [hidden email]
Date: Thursday, March 19, 2020 at 5:58 AM
To: [hidden email] [hidden email]
Subject: Layout advises

 

Hi,

I have flex layout like :




but getting this for Royale Emulation



What am i missing ?

Or is have a better way to have this view ?

Here is the source :

<?xml version="1.0" encoding="latin5" ?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.apache.org/royale/spark"
               xmlns:mx="library://ns.apache.org/royale/mx"
               height="600" width="800">
   
    <fx:Metadata>
        [ResourceBundle("messages")]
    </fx:Metadata>
   
    <fx:Script>
        <![CDATA[
           
            private function setTabEnabled(index:int, enabled:Boolean):void {
            }
           
            private function showArgValuePopup():void {
            }
           
            private function showJobContentPopup():void {
            }
           
            private function showJobLogPopup():void {
            }
           
            private function showJobBuffPopup():void {
            }
           
            private function showGenericPopup(fileTag:String):void {
            }
           
        ]]>
    </fx:Script>
   
    <s:VGroup paddingTop="5">
        <!-- Create a Spark ButtonBar control to navigate
        the ViewStack container. -->
        <s:TabBar id="tabNavigator" dataProvider="{myViewStack}"/>
       
        <!-- Define the ViewStack and the three child containers. -->
        <mx:ViewStack id="myViewStack"
                      borderStyle="solid"
                      width="100%" height="160">
           
            <s:NavigatorContent id="search" label="{resourceManager.getString('messages', 'jobBaseInfoTabLabel')}">
                <s:HGroup width="100%" >
                   
                    <s:VGroup paddingLeft="5" paddingRight="5" gap="-10" width="100%">
                       
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobCommandText')}" width="105"/>
                            <s:TextInput id="jobCommand" top="5" editable="false" width="95"/>
                            <s:Image id="showJobContent" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'commandFileTooltip')}"
                                     buttonMode="true" click="showJobContentPopup()" visible="false" includeInLayout="false" />
                            <s:Image id="dontShowJobContent" source="{ImageContainer.getLogImage(1)}" toolTip="{resourceManager.getString('messages', 'noCommandFileTooltip')}"/>
                            <s:Label text="{resourceManager.getString('messages', 'dzGroupIdLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="dzGroup" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobLogFileLabel')}" width="105"/>
                            <s:TextInput id="jobLogFile" top="5" editable="false" width="95"/>
                            <s:Image id="showJobLog" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'logFileTooltip')}"
                                     buttonMode="true" click="showJobLogPopup()" visible="false" includeInLayout="false"/>
                            <s:Image id="dontShowJobLog" source="{ImageContainer.getLogImage(1)}" toolTip="{resourceManager.getString('messages', 'noLogFileTooltip')}" />
                            <s:Label text="{resourceManager.getString('messages', 'jobRestartableLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="restartable" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobPreviousDurationLabel')}" width="105"/>
                            <s:TextInput id="prevDuration" top="5" editable="false" width="95"/>
                            <s:Image id="showJobBuff" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'errBuffTooltip')}"
                                     buttonMode="true" click="showJobBuffPopup()" top="0"/>
                            <s:Label text="{resourceManager.getString('messages', 'jobParameterLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="paramValue" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="baseline" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobDiffDurationLabel')}" width="105"/>
                            <s:TextInput id="diffDuration" top="5" editable="false" width="95"/>
                            <s:Label text="{resourceManager.getString('messages', 'jobArgsLabel')}" width="65"/>
                            <s:TextInput id="argValues" top="5" editable="false" width="140"/>
                            <s:Button y="-27" right="290" label="{resourceManager.getString('messages', 'jobEditButtonLabel')}" click="showArgValuePopup()" width="50"/>
                        </s:HGroup>
                       
                        <s:HGroup verticalAlign="baseline" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobHandlerUriLabel')}" width="105" />
                            <s:TextInput id="handlerURI" top="5" editable="false" width="300"/>
                        </s:HGroup>
                       
                    </s:VGroup>
                   
                </s:HGroup>
            </s:NavigatorContent>
           
        </mx:ViewStack>
       
    </s:VGroup>
</s:Application>


Thanks,
Serkan



Reply | Threaded
Open this post in threaded view
|

Re: Layout advises

Alex Harui-2

I made one fix to get HGroup to honor paddingTop.  This seems like an unusual test case in that you have paddingTop=15 on each child but a gap of -10 between them. I don’t think I’ve ever seen gap < 0.

 

Anyway, see if that looks better and if there are remaining issues.

 

HTH,

-Alex

 

From: Serkan Taş <[hidden email]>
Date: Thursday, March 19, 2020 at 9:48 AM
To: "[hidden email]" <[hidden email]>, Alex Harui <[hidden email]>
Subject: Re: Layout advises

 

I guess it is not only related with the images but with layout in general.

19.03.2020 19:19 tarihinde Alex Harui yazdı:

Not sure.  Spark Image looks like it is dispatching the right event, so someone has to debug the layouts and figure out why.

 

To try  a workaround, if you know the height of the image, set the height on the Image tag.

 

-Alex

 

From: Serkan Taş [hidden email]
Reply-To: [hidden email] [hidden email]
Date: Thursday, March 19, 2020 at 9:12 AM
To: [hidden email] [hidden email]
Subject: Re: Layout advises

 

How can i fix ?

 




On Thu, Mar 19, 2020 at 6:34 PM +0300, "Alex Harui" <[hidden email]> wrote:

Probably s:Image needs to force a layout of the parent.

 

From: Serkan Taş [hidden email]
Reply-To: [hidden email] [hidden email]
Date: Thursday, March 19, 2020 at 5:58 AM
To: [hidden email] [hidden email]
Subject: Layout advises

 

Hi,

I have flex layout like :




but getting this for Royale Emulation



What am i missing ?

Or is have a better way to have this view ?

Here is the source :

<?xml version="1.0" encoding="latin5" ?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.apache.org/royale/spark"
               xmlns:mx="library://ns.apache.org/royale/mx"
               height="600" width="800">
   
    <fx:Metadata>
        [ResourceBundle("messages")]
    </fx:Metadata>
   
    <fx:Script>
        <![CDATA[
           
            private function setTabEnabled(index:int, enabled:Boolean):void {
            }
           
            private function showArgValuePopup():void {
            }
           
            private function showJobContentPopup():void {
            }
           
            private function showJobLogPopup():void {
            }
           
            private function showJobBuffPopup():void {
            }
           
            private function showGenericPopup(fileTag:String):void {
            }
           
        ]]>
    </fx:Script>
   
    <s:VGroup paddingTop="5">
        <!-- Create a Spark ButtonBar control to navigate
        the ViewStack container. -->
        <s:TabBar id="tabNavigator" dataProvider="{myViewStack}"/>
       
        <!-- Define the ViewStack and the three child containers. -->
        <mx:ViewStack id="myViewStack"
                      borderStyle="solid"
                      width="100%" height="160">
           
            <s:NavigatorContent id="search" label="{resourceManager.getString('messages', 'jobBaseInfoTabLabel')}">
                <s:HGroup width="100%" >
                   
                    <s:VGroup paddingLeft="5" paddingRight="5" gap="-10" width="100%">
                       
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobCommandText')}" width="105"/>
                            <s:TextInput id="jobCommand" top="5" editable="false" width="95"/>
                            <s:Image id="showJobContent" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'commandFileTooltip')}"
                                     buttonMode="true" click="showJobContentPopup()" visible="false" includeInLayout="false" />
                            <s:Image id="dontShowJobContent" source="{ImageContainer.getLogImage(1)}" toolTip="{resourceManager.getString('messages', 'noCommandFileTooltip')}"/>
                            <s:Label text="{resourceManager.getString('messages', 'dzGroupIdLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="dzGroup" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobLogFileLabel')}" width="105"/>
                            <s:TextInput id="jobLogFile" top="5" editable="false" width="95"/>
                            <s:Image id="showJobLog" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'logFileTooltip')}"
                                     buttonMode="true" click="showJobLogPopup()" visible="false" includeInLayout="false"/>
                            <s:Image id="dontShowJobLog" source="{ImageContainer.getLogImage(1)}" toolTip="{resourceManager.getString('messages', 'noLogFileTooltip')}" />
                            <s:Label text="{resourceManager.getString('messages', 'jobRestartableLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="restartable" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobPreviousDurationLabel')}" width="105"/>
                            <s:TextInput id="prevDuration" top="5" editable="false" width="95"/>
                            <s:Image id="showJobBuff" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'errBuffTooltip')}"
                                     buttonMode="true" click="showJobBuffPopup()" top="0"/>
                            <s:Label text="{resourceManager.getString('messages', 'jobParameterLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="paramValue" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="baseline" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobDiffDurationLabel')}" width="105"/>
                            <s:TextInput id="diffDuration" top="5" editable="false" width="95"/>
                            <s:Label text="{resourceManager.getString('messages', 'jobArgsLabel')}" width="65"/>
                            <s:TextInput id="argValues" top="5" editable="false" width="140"/>
                            <s:Button y="-27" right="290" label="{resourceManager.getString('messages', 'jobEditButtonLabel')}" click="showArgValuePopup()" width="50"/>
                        </s:HGroup>
                       
                        <s:HGroup verticalAlign="baseline" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobHandlerUriLabel')}" width="105" />
                            <s:TextInput id="handlerURI" top="5" editable="false" width="300"/>
                        </s:HGroup>
                       
                    </s:VGroup>
                   
                </s:HGroup>
            </s:NavigatorContent>
           
        </mx:ViewStack>
       
    </s:VGroup>
</s:Application>


Thanks,
Serkan





Reply | Threaded
Open this post in threaded view
|

Re: Layout advises

Serkan Taş
Confirm Alex, it is good now.



Just need to see the issue(764) fixed related with 0 height for next.

Thanks,
Serkan



22.03.2020 09:51 tarihinde Alex Harui yazdı:

I made one fix to get HGroup to honor paddingTop.  This seems like an unusual test case in that you have paddingTop=15 on each child but a gap of -10 between them. I don’t think I’ve ever seen gap < 0.

 

Anyway, see if that looks better and if there are remaining issues.

 

HTH,

-Alex

 

From: Serkan Taş [hidden email]
Date: Thursday, March 19, 2020 at 9:48 AM
To: [hidden email] [hidden email], Alex Harui [hidden email]
Subject: Re: Layout advises

 

I guess it is not only related with the images but with layout in general.

19.03.2020 19:19 tarihinde Alex Harui yazdı:

Not sure.  Spark Image looks like it is dispatching the right event, so someone has to debug the layouts and figure out why.

 

To try  a workaround, if you know the height of the image, set the height on the Image tag.

 

-Alex

 

From: Serkan Taş [hidden email]
Reply-To: [hidden email] [hidden email]
Date: Thursday, March 19, 2020 at 9:12 AM
To: [hidden email] [hidden email]
Subject: Re: Layout advises

 

How can i fix ?

 




On Thu, Mar 19, 2020 at 6:34 PM +0300, "Alex Harui" <[hidden email]> wrote:

Probably s:Image needs to force a layout of the parent.

 

From: Serkan Taş [hidden email]
Reply-To: [hidden email] [hidden email]
Date: Thursday, March 19, 2020 at 5:58 AM
To: [hidden email] [hidden email]
Subject: Layout advises

 

Hi,

I have flex layout like :




but getting this for Royale Emulation



What am i missing ?

Or is have a better way to have this view ?

Here is the source :

<?xml version="1.0" encoding="latin5" ?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.apache.org/royale/spark"
               xmlns:mx="library://ns.apache.org/royale/mx"
               height="600" width="800">
   
    <fx:Metadata>
        [ResourceBundle("messages")]
    </fx:Metadata>
   
    <fx:Script>
        <![CDATA[
           
            private function setTabEnabled(index:int, enabled:Boolean):void {
            }
           
            private function showArgValuePopup():void {
            }
           
            private function showJobContentPopup():void {
            }
           
            private function showJobLogPopup():void {
            }
           
            private function showJobBuffPopup():void {
            }
           
            private function showGenericPopup(fileTag:String):void {
            }
           
        ]]>
    </fx:Script>
   
    <s:VGroup paddingTop="5">
        <!-- Create a Spark ButtonBar control to navigate
        the ViewStack container. -->
        <s:TabBar id="tabNavigator" dataProvider="{myViewStack}"/>
       
        <!-- Define the ViewStack and the three child containers. -->
        <mx:ViewStack id="myViewStack"
                      borderStyle="solid"
                      width="100%" height="160">
           
            <s:NavigatorContent id="search" label="{resourceManager.getString('messages', 'jobBaseInfoTabLabel')}">
                <s:HGroup width="100%" >
                   
                    <s:VGroup paddingLeft="5" paddingRight="5" gap="-10" width="100%">
                       
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobCommandText')}" width="105"/>
                            <s:TextInput id="jobCommand" top="5" editable="false" width="95"/>
                            <s:Image id="showJobContent" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'commandFileTooltip')}"
                                     buttonMode="true" click="showJobContentPopup()" visible="false" includeInLayout="false" />
                            <s:Image id="dontShowJobContent" source="{ImageContainer.getLogImage(1)}" toolTip="{resourceManager.getString('messages', 'noCommandFileTooltip')}"/>
                            <s:Label text="{resourceManager.getString('messages', 'dzGroupIdLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="dzGroup" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobLogFileLabel')}" width="105"/>
                            <s:TextInput id="jobLogFile" top="5" editable="false" width="95"/>
                            <s:Image id="showJobLog" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'logFileTooltip')}"
                                     buttonMode="true" click="showJobLogPopup()" visible="false" includeInLayout="false"/>
                            <s:Image id="dontShowJobLog" source="{ImageContainer.getLogImage(1)}" toolTip="{resourceManager.getString('messages', 'noLogFileTooltip')}" />
                            <s:Label text="{resourceManager.getString('messages', 'jobRestartableLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="restartable" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="middle" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobPreviousDurationLabel')}" width="105"/>
                            <s:TextInput id="prevDuration" top="5" editable="false" width="95"/>
                            <s:Image id="showJobBuff" source="{ImageContainer.getLogImage(0)}" toolTip="{resourceManager.getString('messages', 'errBuffTooltip')}"
                                     buttonMode="true" click="showJobBuffPopup()" top="0"/>
                            <s:Label text="{resourceManager.getString('messages', 'jobParameterLabel')}" width="105" paddingLeft="10" />
                            <s:TextInput id="paramValue" top="5" editable="false"/>
                        </s:HGroup>
                        <s:HGroup verticalAlign="baseline" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobDiffDurationLabel')}" width="105"/>
                            <s:TextInput id="diffDuration" top="5" editable="false" width="95"/>
                            <s:Label text="{resourceManager.getString('messages', 'jobArgsLabel')}" width="65"/>
                            <s:TextInput id="argValues" top="5" editable="false" width="140"/>
                            <s:Button y="-27" right="290" label="{resourceManager.getString('messages', 'jobEditButtonLabel')}" click="showArgValuePopup()" width="50"/>
                        </s:HGroup>
                       
                        <s:HGroup verticalAlign="baseline" paddingTop="15">
                            <s:Label text="{resourceManager.getString('messages', 'jobHandlerUriLabel')}" width="105" />
                            <s:TextInput id="handlerURI" top="5" editable="false" width="300"/>
                        </s:HGroup>
                       
                    </s:VGroup>
                   
                </s:HGroup>
            </s:NavigatorContent>
           
        </mx:ViewStack>
       
    </s:VGroup>
</s:Application>


Thanks,
Serkan