You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by m_awais <mr...@gmail.com> on 2017/09/11 10:59:04 UTC
[Flex JS] Adobe substitute
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/
Re: [Flex JS] Adobe substitute
Posted by m_awais <mr...@gmail.com>.
Thank you All for help.
Regards
--
Sent from: http://apache-flex-development.2333347.n4.nabble.com/
Re: [Flex JS] Adobe substitute
Posted by Piotr Zarzycki <pi...@gmail.com>.
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 <ma...@olafkrueger.net>:
> 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>
Re: [Flex JS] Adobe substitute
Posted by Olaf Krueger <ma...@olafkrueger.net>.
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/
Re: [Flex JS] Adobe substitute
Posted by Piotr Zarzycki <pi...@gmail.com>.
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 <mr...@gmail.com>:
> 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>