[Flex JS] Adobe <s:panel> substitute

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

[Flex JS] Adobe <s:panel> substitute

m_awais
Hi,

I am trying to create the simple login form using Flex JS, like following
GUI created using adobe flex.
<http://apache-flex-development.2333347.n4.nabble.com/file/t1235/login.png>

Flash builder has generated the following code for above UI.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955"
minHeight="600">
        <fx:Declarations>
               
               
        </fx:Declarations>
        <s:Panel x="100" y="137" width="428" height="282" title="Login">
                <s:Label x="80" y="70" text="User Name"/>
                <s:Label x="88" y="114" text="Password"/>
                <s:TextInput x="171" y="64"/>
                <s:TextInput x="171" y="107"/>
                <s:Button x="165" y="162" label="Login"/>
                <s:Button x="246" y="162" label="Cancel"/>
        </s:Panel>
       
</s:Application>

I succeeded to create the following GUI in JS Flex

<http://apache-flex-development.2333347.n4.nabble.com/file/t1235/Capture.png>

Code for above GUI is

<?xml verison="1.0" encoding ="UTF-8"?>

<js:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
                xmlns:js = "library://ns.apache.org/flexjs/express"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:basic="library://ns.apache.org/flexjs/basic">

   
<js:initialView>
    <js:View>
        <js:Label id="name_label" text="User Name" x="500" y="205"/>
        <js:TextInput  id="name_field" x="600" y="200"/>

        <js:Label id="password_label" text="Password" x="500" y="255"/>
        <js:TextInput  id="password_field" x="600" y="250"/>

        <js:TextButton text="Login" click="checkCredential(event)" x="600"
y="300"/>
        <js:TextButton text="Clear" click="clearFields(event)" x="650"
y="300"/>
    </js:View>
</js:initialView>

</js:Application>

I want to enclose JS Flex GUI in a panel like first GUI which i shared. I
used Flex JS group and containers but unfortunately those tags were not
working for me. Another option was to create layouts using beads and strands
which i think is not fair for simple GUI. *Is there any substitute of adobe
<s:panel> in JS FLex?*

Thanks in advance.

Regards




--
Sent from: http://apache-flex-development.2333347.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: [Flex JS] Adobe <s:panel> substitute

piotrz
Hi,

There is PanelWithControlBar - I'm not sure whether it is an answer to your
needs. Take a look example available in our repository where this is being
used [1]

[1]
https://github.com/apache/flex-asjs/tree/develop/examples/flexjs/TodoListSampleApp

Thanks, Piotr


2017-09-11 12:59 GMT+02:00 m_awais <[hidden email]>:

> Hi,
>
> I am trying to create the simple login form using Flex JS, like following
> GUI created using adobe flex.
> <http://apache-flex-development.2333347.n4.nabble.com/file/t1235/login.png
> >
>
> Flash builder has generated the following code for above UI.
>
> <?xml version="1.0" encoding="utf-8"?>
> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
>                            xmlns:s="library://ns.adobe.com/flex/spark"
>                            xmlns:mx="library://ns.adobe.com/flex/mx"
> minWidth="955"
> minHeight="600">
>         <fx:Declarations>
>
>
>         </fx:Declarations>
>         <s:Panel x="100" y="137" width="428" height="282" title="Login">
>                 <s:Label x="80" y="70" text="User Name"/>
>                 <s:Label x="88" y="114" text="Password"/>
>                 <s:TextInput x="171" y="64"/>
>                 <s:TextInput x="171" y="107"/>
>                 <s:Button x="165" y="162" label="Login"/>
>                 <s:Button x="246" y="162" label="Cancel"/>
>         </s:Panel>
>
> </s:Application>
>
> I succeeded to create the following GUI in JS Flex
>
> <http://apache-flex-development.2333347.n4.nabble.
> com/file/t1235/Capture.png>
>
> Code for above GUI is
>
> <?xml verison="1.0" encoding ="UTF-8"?>
>
> <js:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
>                 xmlns:js = "library://ns.apache.org/flexjs/express"
>                 xmlns:s="library://ns.adobe.com/flex/spark"
>                 xmlns:basic="library://ns.apache.org/flexjs/basic">
>
>
> <js:initialView>
>     <js:View>
>         <js:Label id="name_label" text="User Name" x="500" y="205"/>
>         <js:TextInput  id="name_field" x="600" y="200"/>
>
>         <js:Label id="password_label" text="Password" x="500" y="255"/>
>         <js:TextInput  id="password_field" x="600" y="250"/>
>
>         <js:TextButton text="Login" click="checkCredential(event)" x="600"
> y="300"/>
>         <js:TextButton text="Clear" click="clearFields(event)" x="650"
> y="300"/>
>     </js:View>
> </js:initialView>
>
> </js:Application>
>
> I want to enclose JS Flex GUI in a panel like first GUI which i shared. I
> used Flex JS group and containers but unfortunately those tags were not
> working for me. Another option was to create layouts using beads and
> strands
> which i think is not fair for simple GUI. *Is there any substitute of adobe
> <s:panel> in JS FLex?*
>
> Thanks in advance.
>
> Regards
>
>
>
>
> --
> Sent from: http://apache-flex-development.2333347.n4.nabble.com/
>



--

Piotr Zarzycki

mobile: +48 880 859 557
skype: zarzycki10

LinkedIn: http://www.linkedin.com/piotrzarzycki
<https://pl.linkedin.com/in/piotr-zarzycki-92a53552>
Reply | Threaded
Open this post in threaded view
|

Re: [Flex JS] Adobe <s:panel> substitute

Olaf Krueger
There's also a js:Panel [1].
And this is a working snippet [2]

HTH,
Olaf

[1]
https://github.com/apache/flex-asjs/blob/develop/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/Panel.as

[2]
<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:js="library://ns.apache.org/flexjs/basic">

    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>
   
    <js:initialView>
        <js:View>
            <js:Panel x="100" y="137" width="428" height="282"
title="Login">
                <js:Label x="80" y="70" text="User Name"/>
                <js:Label x="88" y="114" text="Password"/>
                <js:TextInput x="171" y="64"/>
                <js:TextInput x="171" y="107"/>
                <js:TextButton x="165" y="162" text="Login"/>
                <js:TextButton x="246" y="162" text="Cancel"/>
            </js:Panel>
        </js:View>
    </js:initialView>
</js:Application>



--
Sent from: http://apache-flex-development.2333347.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: [Flex JS] Adobe <s:panel> substitute

piotrz
Olaf,

You got me! I haven't seen second part of the code! Example of Panel usage
you can find in FlexJSStore [1]. There is a lot of additional code, but
apart of that MXML shows how use it. :)

[1]
https://github.com/apache/flex-asjs/blob/develop/examples/flexjs/FlexJSStore/src/main/flex/productsView/ProductCatalogPanel.mxml

Thanks, Piotr


2017-09-11 13:40 GMT+02:00 Olaf Krueger <[hidden email]>:

> There's also a js:Panel [1].
> And this is a working snippet [2]
>
> HTH,
> Olaf
>
> [1]
> https://github.com/apache/flex-asjs/blob/develop/
> frameworks/projects/Basic/src/main/flex/org/apache/flex/html/Panel.as
>
> [2]
> <?xml version="1.0" encoding="utf-8"?>
> <js:Application xmlns:js="library://ns.apache.org/flexjs/basic">
>
>     <js:valuesImpl>
>         <js:SimpleCSSValuesImpl />
>     </js:valuesImpl>
>
>     <js:initialView>
>         <js:View>
>             <js:Panel x="100" y="137" width="428" height="282"
> title="Login">
>                 <js:Label x="80" y="70" text="User Name"/>
>                 <js:Label x="88" y="114" text="Password"/>
>                 <js:TextInput x="171" y="64"/>
>                 <js:TextInput x="171" y="107"/>
>                 <js:TextButton x="165" y="162" text="Login"/>
>                 <js:TextButton x="246" y="162" text="Cancel"/>
>             </js:Panel>
>         </js:View>
>     </js:initialView>
> </js:Application>
>
>
>
> --
> Sent from: http://apache-flex-development.2333347.n4.nabble.com/
>



--

Piotr Zarzycki

mobile: +48 880 859 557
skype: zarzycki10

LinkedIn: http://www.linkedin.com/piotrzarzycki
<https://pl.linkedin.com/in/piotr-zarzycki-92a53552>
Reply | Threaded
Open this post in threaded view
|

Re: [Flex JS] Adobe <s:panel> substitute

m_awais
In reply to this post by m_awais
Thank you All for help.

Regards



--
Sent from: http://apache-flex-development.2333347.n4.nabble.com/