You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by dhwanishah85 <dh...@gmail.com> on 2016/05/03 01:35:21 UTC

Re: [FlexJS] extending VerticalColumnLayout

Hi Alex,

Do you mean , I need to make changes into FlexJS BrowserResizeListener.as
file?

IUIBase(_strand).topMostEventDispatcher.addEventListener("sizeChanged",
resizeHandler);

Is there any example of such class which I can follow?

Thanks
Dhwani




--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-extending-VerticalColumnLayout-tp52676p52730.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] extending VerticalColumnLayout

Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex,

Yeah I have first confirmed and they are willing to share progress on FlexJS
for users.
We are into technology to help people solve issues faster. You helped us and
thus we return it back.

I will signup in JIRA and donate it soon.

Thanks
Dhwani



--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-extending-VerticalColumnLayout-tp52676p52859.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] extending VerticalColumnLayout

Posted by Alex Harui <ah...@adobe.com>.

On 5/6/16, 3:51 PM, "dhwanishah85" <dh...@gmail.com> wrote:

>Hi Alex,
>
>I would love to donate it.
>May I know how I can attach it on JIRA issue?
>Do I need to subscribe separately over there?

Yes, you will need a JIRA login id and password.

I would imagine you developed this component as part of your job, so you
should also make sure the company that employs you approves of the
donation as well.

Thanks,
-Alex


Re: [FlexJS] extending VerticalColumnLayout

Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex,

I would love to donate it. 
May I know how I can attach it on JIRA issue?
Do I need to subscribe separately over there?

Thanks
Dhwani



--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-extending-VerticalColumnLayout-tp52676p52856.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] extending VerticalColumnLayout

Posted by Alex Harui <ah...@adobe.com>.
On 5/6/16, 12:50 PM, "dhwanishah85" <dh...@gmail.com> wrote:

>So finally we are able to dispatch and handle event in custom
>verticlecolumn
>Component

Congratulations!  If you would like to donate your code to the Apache Flex
project, please attach it to a JIRA issue or create a pull request.

Thanks,
-Alex



Re: [FlexJS] extending VerticalColumnLayout

Posted by dhwanishah85 <dh...@gmail.com>.
So finally we are able to dispatch and handle event in custom verticlecolumn
component

Here is how our class look like:
Actionscript code:

public class ResponsiveVerticalColumnLayout extends VerticalColumnLayout
	{
		protected var _minColumnWidth:int;
		protected var baseComponent:UIBase;
		
		public function ResponsiveVerticalColumnLayout() {
			// set a default value for numColumns
			super.numColumns = 1;
		}
		
		override public function set strand(value:IStrand):void {
			super.strand = value;
			this.baseComponent = UIBase(value);
			// setup the event handler
			this.baseComponent.addEventListener("sizeChanged", calculateNumColumns);
		}
		
		public function set minColumnWidth(value:int):void {
			this._minColumnWidth=value;
		}
		
		private function calculateNumColumns(e:Event):void {
			var width:int = baseComponent.parent.width;
			this.numColumns = int(width / _minColumnWidth);   // truncate
			
			if (this.numColumns <= 0) {
				// prevent numColumns from being set to an invalid value
				this.numColumns=1;
			}
		}
	}

calling code:

<js:beads>
	<layout:ResponsiveVerticalColumnLayout minColumnWidth="500"/>
</js:beads>

Thanks
Dhwani



--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-extending-VerticalColumnLayout-tp52676p52852.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] extending VerticalColumnLayout

Posted by dhwanishah85 <dh...@gmail.com>.
Yeah that is true. I have added <js:beads> tags and strand setter gets
called. Now I am looking for event to get dispatch. I will do some trials
and will update here.. 
Thanks
dhwani



--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-extending-VerticalColumnLayout-tp52676p52763.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] extending VerticalColumnLayout

Posted by Alex Harui <ah...@adobe.com>.
Hi Dhwani,

If I'm reading that right, the layout is not in the list of beads.  I
guess we should create some way to detect errors like that.

I think it should be:

<js:Container style="margin-left:auto;margin-right:auto">
  <js:beads>
				
    <vertLayout:ResponsiveVerticalColumnLayout id="vcl" numColumns="2"/>
				
  </js:beads>
  <renderers:FormTextInput id="txtFirstName" width="500" label="First
Name"/>

HTH,

-Alex

On 5/3/16, 9:12 PM, "dhwanishah85" <dh...@gmail.com> wrote:

>Here are the parent tags:
>
><js:Container id="mainBody" width="100%" >
>		<js:beads>
>			<js:ScrollingViewport id="scrollingView"/>
>		</js:beads>
>		<js:Label text="Who will be the point of contact for this account? "
>className="formHeadMessage" />
>		
>			<js:Container style="margin-left:auto;margin-right:auto">
>				
>					*<vertLayout:ResponsiveVerticalColumnLayout id="vcl" numColumns =
>"2"/>*
>				
>					<renderers:FormTextInput id="txtFirstName"
>							width="500" label="First Name"/>
>
>
>
>--
>View this message in context:
>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-extending-Vert
>icalColumnLayout-tp52676p52761.html
>Sent from the Apache Flex Development mailing list archive at Nabble.com.


Re: [FlexJS] extending VerticalColumnLayout

Posted by dhwanishah85 <dh...@gmail.com>.
Here are the parent tags:

<js:Container id="mainBody" width="100%" >
		<js:beads>
			<js:ScrollingViewport id="scrollingView"/>
		</js:beads>
		<js:Label text="Who will be the point of contact for this account? "
className="formHeadMessage" />
		
			<js:Container style="margin-left:auto;margin-right:auto">
				
					*<vertLayout:ResponsiveVerticalColumnLayout id="vcl" numColumns =
"2"/>*
				
					<renderers:FormTextInput id="txtFirstName"
							width="500" label="First Name"/>



--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-extending-VerticalColumnLayout-tp52676p52761.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] extending VerticalColumnLayout

Posted by Alex Harui <ah...@adobe.com>.

On 5/3/16, 8:25 PM, "dhwanishah85" <dh...@gmail.com> wrote:

>Hi Alex,
>
>It is used in mxml file like this:
>
><vertLayout:ResponsiveVerticalColumnLayout id="vcl" numColumns = "2"/>
>

What are the parent tags?

-Alex


Re: [FlexJS] extending VerticalColumnLayout

Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex,

It is used in mxml file like this:

<vertLayout:ResponsiveVerticalColumnLayout id="vcl" numColumns = "2"/>



--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-extending-VerticalColumnLayout-tp52676p52759.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] extending VerticalColumnLayout

Posted by Alex Harui <ah...@adobe.com>.
Is your ReponsiveVerticalColumnLayout used in an MXML file or CSS file?

On 5/3/16, 4:33 PM, "dhwanishah85" <dh...@gmail.com> wrote:

>Yeah constructor does get called, I have made test by adding an alert
>inside
>constructor.
>VerticalColumnLayout is from here
>/Users/dhwanishah/Documents/FlexSDKs/FlexJS0.7.0/frameworks/projects/HTML/
>src/main/flex/org/apache/flex/html/beads/layouts
>
>
>
>--
>View this message in context:
>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-extending-Vert
>icalColumnLayout-tp52676p52756.html
>Sent from the Apache Flex Development mailing list archive at Nabble.com.


Re: [FlexJS] extending VerticalColumnLayout

Posted by dhwanishah85 <dh...@gmail.com>.
Yeah constructor does get called, I have made test by adding an alert inside
constructor.
VerticalColumnLayout is from here
/Users/dhwanishah/Documents/FlexSDKs/FlexJS0.7.0/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts



--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-extending-VerticalColumnLayout-tp52676p52756.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] extending VerticalColumnLayout

Posted by Alex Harui <ah...@adobe.com>.
Hmm, and the strand setter never gets called?  Does the constructor get
called?  Is the VerticalColumnLayout on the list of beads in some MXML
file or specified via CSS?

-Alex

On 5/3/16, 4:14 PM, "dhwanishah85" <dh...@gmail.com> wrote:

>Hi Alex,
>
>Here is the code of the class:
>
>public class ResponsiveVerticalColumnLayout extends VerticalColumnLayout {
>	
>			
>			public var minColumnWidth:int;
>			//private var _strand:IStrand;
>			
>			public function ResponsiveVerticalColumnLayout(minColumnWidth:int) {
>				
>			}
>			
>			private function calculateNumColumns(e:Event):void {
>				// reevaluate numColumns each time the window is resized.
>				// We'll need to figure out a good way to get the "width" here.
>				this.numColumns = 1;
>			}
>			
>		override public function set strand(value:IStrand):void
>		{
>			super.strand = value;
>			IUIBase(value).topMostEventDispatcher.addEventListener("sizeChanged",
>calculateNumColumns);
>		}
>			
>		}
>
>
>
>--
>View this message in context:
>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-extending-Vert
>icalColumnLayout-tp52676p52754.html
>Sent from the Apache Flex Development mailing list archive at Nabble.com.


Re: [FlexJS] extending VerticalColumnLayout

Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex,

Here is the code of the class:

public class ResponsiveVerticalColumnLayout extends VerticalColumnLayout {
	
			
			public var minColumnWidth:int;
			//private var _strand:IStrand;
			
			public function ResponsiveVerticalColumnLayout(minColumnWidth:int) {
				
			}
			
			private function calculateNumColumns(e:Event):void {
				// reevaluate numColumns each time the window is resized.
				// We'll need to figure out a good way to get the "width" here.
				this.numColumns = 1;
			}
			
		override public function set strand(value:IStrand):void
		{
			super.strand = value;
			IUIBase(value).topMostEventDispatcher.addEventListener("sizeChanged",
calculateNumColumns);
		}
			
		}



--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-extending-VerticalColumnLayout-tp52676p52754.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] extending VerticalColumnLayout

Posted by Alex Harui <ah...@adobe.com>.

On 5/3/16, 3:51 PM, "dhwanishah85" <dh...@gmail.com> wrote:

>Hi Alex,
>
>I have added the code in BrowserResizeListener.
>
>Do I need to make any other settings in other files?
>
>In my custom component I have a function which overrides strand.
>override public function set strand(value:IStrand):void
>		{
>			super.strand = value;
>			IUIBase(value).topMostEventDispatcher.addEventListener("sizeChanged",
>calculateNumColumns);
>		}
>
>This is never get executed. Do you see any obvious issue in above code?
>How
>can I set strand from my custom component?

What does your custom component extend?  The subject says extending
VerticalColumnLayout and layouts are beads so the strand setter should be
called.

HTH,
-Alex


Re: [FlexJS] extending VerticalColumnLayout

Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex,

I have added the code in BrowserResizeListener.

Do I need to make any other settings in other files?

In my custom component I have a function which overrides strand. 
override public function set strand(value:IStrand):void
		{
			super.strand = value;
			IUIBase(value).topMostEventDispatcher.addEventListener("sizeChanged",
calculateNumColumns);
		}

This is never get executed. Do you see any obvious issue in above code? How
can I set strand from my custom component?

Thanks
Dhwani



--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-extending-VerticalColumnLayout-tp52676p52751.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] extending VerticalColumnLayout

Posted by Alex Harui <ah...@adobe.com>.

On 5/2/16, 4:35 PM, "dhwanishah85" <dh...@gmail.com> wrote:

>Hi Alex,
>
>Do you mean , I need to make changes into FlexJS BrowserResizeListener.as
>file?
>
>IUIBase(_strand).topMostEventDispatcher.addEventListener("sizeChanged",
>resizeHandler);

That looks worth trying.

>
>Is there any example of such class which I can follow?

I don't think any code already dispatches events off of
topMostEventDispacher.  Mostly it is used for listening for mouse events.

Thanks,
-Alex