subject:"Re\: \[FlexJS\] BarChart component added \- render issue"

On Mon, Feb 3, 2014 at 6:37 AM, Peter Ent p...@adobe.com wrote:

Hi Om,

Sorry for the delayed response. BarChartLayout.changeHandler is the place.
You might need to look at the BarChartView bead as well.

Thanks so much!
Peter

Just checked in a fix. Please take a look.

App works fine even though I am getting a warning during the JS compilation
part:

WARNING - Bad type annotation. Unknown type
org.apache.flex.charts.beads.layouts.BarChartLayout
[java] var /** @type
{org.apache.flex.charts.beads.layouts.BarChartLayout} */ barChartLayout =
org.apache.flex.utils.Language.as(this._strand.getBeadByType(org.apache.flex.core.IBeadLayout),
org.apache.flex.charts.beads.layouts.BarChartLayout);

What am I doing wrong?

Thanks,
Om

On 1/31/14 7:17 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

On Fri, Jan 31, 2014 at 11:31 AM, Peter Ent p...@adobe.com wrote:

Had a chat with Alex. For this particular issue, we were thinking that
Flex's scrollPolicy should be carried over to FlexJS, but enhanced:

scrollPolicy: on | off | auto | hidden

which map as follows -

on: overflow:scroll, but scrollbars visible always
off:overflow:visible
auto: overflow:scroll, but scrollbars visible when necessary
hidden: overflow:hidden

or something like that. For BarChart, scrollPolicy:off would be the
default.

For BarChart, the real issue is that the area for the chart isn't really
big enough. I don't think it should use a trick like overflow:visible.

You are right. Setting overflow:visible is more of a hack. Once we place
another visual component below the chart, it will start clipping each
other.

The
size that's calculated is big enough for the series, but then the axis
is
added to that same div, forcing the scroll. I believe the area for the
chart should shrink to account for the XAxisBead because an explicit
width
and height are set for the chart and you don't want to increase that on
the developer.

There are couple of things to do: add scrollPolicy and fix BarChart.

I will take a shot a fixing the BarChart rendering, if you are not already
working on it? I am looking at the logic in
BarChartLayout.changeHandler()
method. Is that what you would do as well?

Thanks,
Om

Regards,
Peter

On 1/31/14 12:45 PM, Alex Harui aha...@adobe.com wrote:

On 1/31/14 7:03 AM, Peter Ent p...@adobe.com wrote:

Hi,

First, I can confirm that Om's suggestion of *adding* the
createElement
override to the cross-compiled/generated BarChart.js does fix the
problem.

Secondly - how do we make it possible to allow customization of the
JavaScript that gets cross-compiled? This is bound to be necessary and
clearly solves this problem.
Well, the current rule is that if you need custom JS, then that class
is
not available for cross-compilation and needs its own parallel JS file
in
the repo.

A bunch of things popped into my head:

1. We add createElement to UIBase.as so there is parity with the
JavaScript code. We might actually make good use of this on the AS
side,
but I haven't given that any thought. Having it though, would allow
the
AS
BarChart to override the method and introduce AS code that would get
cross-compiled into JavaScript.
We could do that, but it would mess up code coverage tooling. We could
add compiler directive so certain code isn't seen by the code coverage
tooling or even allow JS instead of AS inside comments in the AS file
that
get output to the JS file as well. But either way, at some point,
someone
may have to create a parallel JS file. These various ideas just reduce
the probability.

2. We need to be able to programmatically set style properties that
get
cross-compiled correctly. The key to the BarChart issue is
this.element.style.overflow = 'visible'; or setting the overflow
style
to visible. Perhaps something like: this.style = overflow; on the
ActionScript side would coax the compiler to generate the
this.element.style.overflow = 'visible'; on the JavaScript side.
That's what the CSS file and media query is for.

3. Allow JavaScript-specific code to be placed in the ActionScript
code,
maybe using metadata:

override public function createElement()
{
[JavaScript]
this.element = document.createElement('div');
this.element.style.overflow = 'visible';
this.positioner = this.element;
[JavaScript]
[ActionScript]
// code within these [ActionScript] tags does not get
cross-compiled
[ActionScript]
}
And an option 4 is to examine the lifecycle in both AS and JS and try
to
make them more similar. The problem is that on the AS side, the
components are the display elements but on the JS side they wrap the
display elements.

We really do need to have some way to tweak the JavaScript code,
whether
it be styling or something else.
Well, it would reduce the number of

Re: [FlexJS] BarChart component added - render issue



On 2/6/14 6:04 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

App works fine even though I am getting a warning during the JS
compilation
part:

WARNING - Bad type  annotation. Unknown type
org.apache.flex.charts.beads.layouts.BarChartLayout
 [java]   var /** @type
{org.apache.flex.charts.beads.layouts.BarChartLayout} */ barChartLayout =
org.apache.flex.utils.Language.as(this._strand.getBeadByType(org.apache.fl
ex.core.IBeadLayout),
org.apache.flex.charts.beads.layouts.BarChartLayout);
I think this means that BarChartLayout doesn't have a goog.require in the
.js file, which should be output by the cross-compiler if in the .as file
there is an import and the class is referenced.

HTH,
-Alex

Re: [FlexJS] BarChart component added - render issue

On Feb 6, 2014 8:24 PM, Alex Harui aha...@adobe.com wrote:



 On 2/6/14 6:04 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

 App works fine even though I am getting a warning during the JS
 compilation
 part:
 
 WARNING - Bad type  annotation. Unknown type
 org.apache.flex.charts.beads.layouts.BarChartLayout
  [java]   var /** @type
 {org.apache.flex.charts.beads.layouts.BarChartLayout} */ barChartLayout =
 org.apache.flex.utils.Language.as
(this._strand.getBeadByType(org.apache.fl
 ex.core.IBeadLayout),
 org.apache.flex.charts.beads.layouts.BarChartLayout);
 I think this means that BarChartLayout doesn't have a goog.require in the
 .js file, which should be output by the cross-compiler if in the .as file
 there is an import and the class is referenced.

Is it because I am unable to run gslint on my machine?


 HTH,
 -Alex

Re: [FlexJS] BarChart component added - render issue



On 2/6/14 9:38 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

On Feb 6, 2014 8:24 PM, Alex Harui aha...@adobe.com wrote:



 On 2/6/14 6:04 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

 App works fine even though I am getting a warning during the JS
 compilation
 part:
 
 WARNING - Bad type  annotation. Unknown type
 org.apache.flex.charts.beads.layouts.BarChartLayout
  [java]   var /** @type
 {org.apache.flex.charts.beads.layouts.BarChartLayout} */
barChartLayout =
 org.apache.flex.utils.Language.as
(this._strand.getBeadByType(org.apache.fl
 ex.core.IBeadLayout),
 org.apache.flex.charts.beads.layouts.BarChartLayout);
 I think this means that BarChartLayout doesn't have a goog.require in
the
 .js file, which should be output by the cross-compiler if in the .as
file
 there is an import and the class is referenced.

Is it because I am unable to run gslint on my machine?

I don't think so.  Is BarChartLayout.as in FlexJSJX?  Then the
BarChartLayout.js should be generated by the compiler and those files
don't get run through the linter.

Have you changed BarChartLayout.as?  Otherwise I'll try to see if I have
the same problem on my end.

-Alex

Re: [FlexJS] BarChart component added - render issue

On Feb 6, 2014 10:08 PM, Alex Harui aha...@adobe.com wrote:



 On 2/6/14 9:38 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

 On Feb 6, 2014 8:24 PM, Alex Harui aha...@adobe.com wrote:
 
 
 
  On 2/6/14 6:04 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:
 
  App works fine even though I am getting a warning during the JS
  compilation
  part:
  
  WARNING - Bad type  annotation. Unknown type
  org.apache.flex.charts.beads.layouts.BarChartLayout
   [java]   var /** @type
  {org.apache.flex.charts.beads.layouts.BarChartLayout} */
 barChartLayout =
  org.apache.flex.utils.Language.as
 (this._strand.getBeadByType(org.apache.fl
  ex.core.IBeadLayout),
  org.apache.flex.charts.beads.layouts.BarChartLayout);
  I think this means that BarChartLayout doesn't have a goog.require in
 the
  .js file, which should be output by the cross-compiler if in the .as
 file
  there is an import and the class is referenced.
 
 Is it because I am unable to run gslint on my machine?

 I don't think so.  Is BarChartLayout.as in FlexJSJX?  Then the
 BarChartLayout.js should be generated by the compiler and those files
 don't get run through the linter.

 Have you changed BarChartLayout.as?  Otherwise I'll try to see if I have
 the same problem on my end.


I did change BarChartLayout.as and XAxisBead.as

Thanks,
Om

 -Alex

Re: [FlexJS] BarChart component added - render issue

Ack.  Read the error incorrectly.  It may not be BarChartLayout that is
incorrect.  Do you know which .js file is actually complaining?


On 2/6/14 10:29 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

On Feb 6, 2014 10:08 PM, Alex Harui aha...@adobe.com wrote:



 On 2/6/14 9:38 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

 On Feb 6, 2014 8:24 PM, Alex Harui aha...@adobe.com wrote:
 
 
 
  On 2/6/14 6:04 PM, OmPrakash Muppirala bigosma...@gmail.com
wrote:
 
  App works fine even though I am getting a warning during the JS
  compilation
  part:
  
  WARNING - Bad type  annotation. Unknown type
  org.apache.flex.charts.beads.layouts.BarChartLayout
   [java]   var /** @type
  {org.apache.flex.charts.beads.layouts.BarChartLayout} */
 barChartLayout =
  org.apache.flex.utils.Language.as
 (this._strand.getBeadByType(org.apache.fl
  ex.core.IBeadLayout),
  org.apache.flex.charts.beads.layouts.BarChartLayout);
  I think this means that BarChartLayout doesn't have a goog.require in
 the
  .js file, which should be output by the cross-compiler if in the .as
 file
  there is an import and the class is referenced.
 
 Is it because I am unable to run gslint on my machine?

 I don't think so.  Is BarChartLayout.as in FlexJSJX?  Then the
 BarChartLayout.js should be generated by the compiler and those files
 don't get run through the linter.

 Have you changed BarChartLayout.as?  Otherwise I'll try to see if I have
 the same problem on my end.


I did change BarChartLayout.as and XAxisBead.as

Thanks,
Om

 -Alex

Re: [FlexJS] BarChart component added - render issue

On Feb 6, 2014 10:42 PM, Alex Harui aha...@adobe.com wrote:

 Ack.  Read the error incorrectly.  It may not be BarChartLayout that is
 incorrect.  Do you know which .js file is actually complaining?


Yes, it is from XAxisBead.js


 On 2/6/14 10:29 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

 On Feb 6, 2014 10:08 PM, Alex Harui aha...@adobe.com wrote:
 
 
 
  On 2/6/14 9:38 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:
 
  On Feb 6, 2014 8:24 PM, Alex Harui aha...@adobe.com wrote:
  
  
  
   On 2/6/14 6:04 PM, OmPrakash Muppirala bigosma...@gmail.com
 wrote:
  
   App works fine even though I am getting a warning during the JS
   compilation
   part:
   
   WARNING - Bad type  annotation. Unknown type
   org.apache.flex.charts.beads.layouts.BarChartLayout
[java]   var /** @type
   {org.apache.flex.charts.beads.layouts.BarChartLayout} */
  barChartLayout =
   org.apache.flex.utils.Language.as
  (this._strand.getBeadByType(org.apache.fl
   ex.core.IBeadLayout),
   org.apache.flex.charts.beads.layouts.BarChartLayout);
   I think this means that BarChartLayout doesn't have a goog.require
in
  the
   .js file, which should be output by the cross-compiler if in the .as
  file
   there is an import and the class is referenced.
  
  Is it because I am unable to run gslint on my machine?
 
  I don't think so.  Is BarChartLayout.as in FlexJSJX?  Then the
  BarChartLayout.js should be generated by the compiler and those files
  don't get run through the linter.
 
  Have you changed BarChartLayout.as?  Otherwise I'll try to see if I
have
  the same problem on my end.
 
 
 I did change BarChartLayout.as and XAxisBead.as
 
 Thanks,
 Om
 
  -Alex

Re: [FlexJS] BarChart component added - render issue



On 2/6/14 10:49 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

On Feb 6, 2014 10:42 PM, Alex Harui aha...@adobe.com wrote:

 Ack.  Read the error incorrectly.  It may not be BarChartLayout that is
 incorrect.  Do you know which .js file is actually complaining?


Yes, it is from XAxisBead.js
Hmm.  Are you all synced up?  I got an error cross-compiling FlexJSJX.  I
just checked in a fix for that.  Maybe that is the root of the problem?

My copy of XAxisBead.js does have a goog.require for BarChartLayout.  Does
yours?

-Alex

Re: [FlexJS] BarChart component added - render issue

2014-02-03 Thread Peter Ent

Hi Om,

Sorry for the delayed response. BarChartLayout.changeHandler is the place.
You might need to look at the BarChartView bead as well.

Thanks so much!
Peter

On 1/31/14 7:17 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

On Fri, Jan 31, 2014 at 11:31 AM, Peter Ent p...@adobe.com wrote:

 Had a chat with Alex. For this particular issue, we were thinking that
 Flex's scrollPolicy should be carried over to FlexJS, but enhanced:

 scrollPolicy: on | off | auto | hidden

 which map as follows -

 on: overflow:scroll, but scrollbars visible always
 off:overflow:visible
 auto:   overflow:scroll, but scrollbars visible when necessary
 hidden: overflow:hidden

 or something like that. For BarChart, scrollPolicy:off would be the
 default.

 For BarChart, the real issue is that the area for the chart isn't really
 big enough. I don't think it should use a trick like overflow:visible.


You are right.  Setting overflow:visible is more of a hack.  Once we place
another visual component below the chart, it will start clipping each
other.


 The
 size that's calculated is big enough for the series, but then the axis
is
 added to that same div, forcing the scroll. I believe the area for the
 chart should shrink to account for the XAxisBead because an explicit
width
 and height are set for the chart and you don't want to increase that on
 the developer.

 There are couple of things to do: add scrollPolicy and fix BarChart.


I will take a shot a fixing the BarChart rendering, if you are not already
working on it?  I am looking at the logic in
BarChartLayout.changeHandler()
method.  Is that what you would do as well?

Thanks,
Om



 Regards,
 Peter

 On 1/31/14 12:45 PM, Alex Harui aha...@adobe.com wrote:

 
 
 On 1/31/14 7:03 AM, Peter Ent p...@adobe.com wrote:
 
 Hi,
 
 First, I can confirm that Om's suggestion of *adding* the
createElement
 override to the cross-compiled/generated BarChart.js does fix the
 problem.
 
 Secondly - how do we make it possible to allow customization of the
 JavaScript that gets cross-compiled? This is bound to be necessary and
 clearly solves this problem.
 Well, the current rule is that if you need custom JS, then that class
is
 not available for cross-compilation and needs its own parallel JS file
in
 the repo.
 
 
 A bunch of things popped into my head:
 
 1. We add createElement to UIBase.as so there is parity with the
 JavaScript code. We might actually make good use of this on the AS
side,
 but I haven't given that any thought. Having it though, would allow
the
 AS
 BarChart to override the method and introduce AS code that would get
 cross-compiled into JavaScript.
 We could do that, but it would mess up code coverage tooling.  We could
 add compiler directive so certain code isn't seen by the code coverage
 tooling or even allow JS instead of AS inside comments in the AS file
that
 get output to the JS file as well.  But either way, at some point,
someone
 may have to create a parallel JS file.  These various ideas just reduce
 the probability.
 
 2. We need to be able to programmatically set style properties that
get
 cross-compiled correctly. The key to the BarChart issue is
 this.element.style.overflow = 'visible'; or setting the overflow
style
 to visible. Perhaps something like:  this.style = overflow; on the
 ActionScript side would coax the compiler to generate the
 this.element.style.overflow = 'visible'; on the JavaScript side.
 That's what the CSS file and media query is for.
 
 3. Allow JavaScript-specific code to be placed in the ActionScript
code,
 maybe using metadata:
 
 override public function createElement()
 {
 [JavaScript]
   this.element = document.createElement('div');
   this.element.style.overflow = 'visible';
   this.positioner = this.element;
 [JavaScript]
 [ActionScript]
// code within these [ActionScript] tags does not get
cross-compiled
 [ActionScript]
 }
 And an option 4 is to examine the lifecycle in both AS and JS and try
to
 make them more similar.  The problem is that on the AS side, the
 components are the display elements but on the JS side they wrap the
 display elements.
 
 
 We really do need to have some way to tweak the JavaScript code,
whether
 it be styling or something else.
 Well, it would reduce the number of parallel JS files, but really, we
 don't have to have a way to tweak the JS code from the AS side.  I'd
like
 to see if this case can be solved by modifying the CSS file.  Then
we'll
 see how often we hit the need to do this sort of thing again and decide
 what to do.
 
 -Alex

Re: [FlexJS] BarChart component added - render issue

2014-01-31 Thread OmPrakash Muppirala

On Jan 30, 2014 11:32 PM, Alex Harui aha...@adobe.com wrote:



 On 1/30/14 11:07 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

 On Jan 30, 2014 10:18 PM, Alex Harui aha...@adobe.com wrote:
 
 
 
  On 1/30/14 9:11 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:
 
  On Thu, Jan 30, 2014 at 8:30 PM, Alex Harui aha...@adobe.com wrote:
  
   Om, something is still not configured right.  BarChart.js should be
  coming
   from frameworks/js/FlexJS/libs.
  
  
  I dont see the libs folder here:
  
 
https://git-wip-us.apache.org/repos/asf?p=flex-asjs.git;a=tree;f=framework
  s/js/FlexJS;h=868b43d18106fcb21b8b598ae60b96ddaf447d67;hb=develop
  
  Correct.  The libs folder is not in the repo as it contains the output
  from cross-compiling the as files in the
frameworks/as/projects/FlexJSJX
  folder.
 
  But it should get created if you run ant in the repo, and it should be
 in
  the release package in the nightly builds.
 
  -Alex
 
 Well, that is what I am seeing here as well.  Which brings me back to my
 original question: how do I get my required change into BarChart.js?
 
 Maybe you need to explain like I'm 5 :-)
 The confusing part to me is that my copy of BarChart.js does not have a
 createElement method in it.  I'm wondering if you're building
 BarChartExample with out-of-date launch configs that are picking up an
 older hand-written BarChart.js.

It does not in my copy as well.  I want to add this method to BarChart.js.

I just added that method to the BarChart.js file in the bin/js-debug
folder, which seems to fix the issue.

We on the same page now?

Om


 -Alex

Re: [FlexJS] BarChart component added - render issue

2014-01-31 Thread Peter Ent

Hi,

First, I can confirm that Om's suggestion of *adding* the createElement
override to the cross-compiled/generated BarChart.js does fix the problem.

Secondly - how do we make it possible to allow customization of the
JavaScript that gets cross-compiled? This is bound to be necessary and
clearly solves this problem.

A bunch of things popped into my head:

1. We add createElement to UIBase.as so there is parity with the
JavaScript code. We might actually make good use of this on the AS side,
but I haven't given that any thought. Having it though, would allow the AS
BarChart to override the method and introduce AS code that would get
cross-compiled into JavaScript.

2. We need to be able to programmatically set style properties that get
cross-compiled correctly. The key to the BarChart issue is
this.element.style.overflow = 'visible'; or setting the overflow style
to visible. Perhaps something like:  this.style = overflow; on the
ActionScript side would coax the compiler to generate the
this.element.style.overflow = 'visible'; on the JavaScript side.

3. Allow JavaScript-specific code to be placed in the ActionScript code,
maybe using metadata:

override public function createElement()
{
[JavaScript]
  this.element = document.createElement('div');
  this.element.style.overflow = 'visible';
  this.positioner = this.element;
[JavaScript]
[ActionScript]
   // code within these [ActionScript] tags does not get cross-compiled
[ActionScript]
}

We really do need to have some way to tweak the JavaScript code, whether
it be styling or something else.

--peter

On 1/31/14 3:24 AM, OmPrakash Muppirala bigosma...@gmail.com wrote:

On Jan 30, 2014 11:32 PM, Alex Harui aha...@adobe.com wrote:



 On 1/30/14 11:07 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

 On Jan 30, 2014 10:18 PM, Alex Harui aha...@adobe.com wrote:
 
 
 
  On 1/30/14 9:11 PM, OmPrakash Muppirala bigosma...@gmail.com
wrote:
 
  On Thu, Jan 30, 2014 at 8:30 PM, Alex Harui aha...@adobe.com
wrote:
  
   Om, something is still not configured right.  BarChart.js should
be
  coming
   from frameworks/js/FlexJS/libs.
  
  
  I dont see the libs folder here:
  
 
https://git-wip-us.apache.org/repos/asf?p=flex-asjs.git;a=tree;f=framework
  s/js/FlexJS;h=868b43d18106fcb21b8b598ae60b96ddaf447d67;hb=develop
  
  Correct.  The libs folder is not in the repo as it contains the
output
  from cross-compiling the as files in the
frameworks/as/projects/FlexJSJX
  folder.
 
  But it should get created if you run ant in the repo, and it should
be
 in
  the release package in the nightly builds.
 
  -Alex
 
 Well, that is what I am seeing here as well.  Which brings me back to
my
 original question: how do I get my required change into BarChart.js?
 
 Maybe you need to explain like I'm 5 :-)
 The confusing part to me is that my copy of BarChart.js does not have a
 createElement method in it.  I'm wondering if you're building
 BarChartExample with out-of-date launch configs that are picking up an
 older hand-written BarChart.js.

It does not in my copy as well.  I want to add this method to BarChart.js.

I just added that method to the BarChart.js file in the bin/js-debug
folder, which seems to fix the issue.

We on the same page now?

Om


 -Alex

Re: [FlexJS] BarChart component added - render issue

2014-01-31 Thread Alex Harui

Ah, sorry.  Somehow I thought you were only adding one line to an existing
createElement method.

So, in FlexJS, if you have to modify the cross-compiled JS for a class in
the FlexJSJX project, that will usually mean that that class can't be in
FlexJSJX and has to be moved back to FlexJSUI and have a hand-coded .js
file.  Often this will mean moving other dependencies out of FlexJSJX as
well.

But in this case, doesn't the base class do just about everything you need
to do except set a style?  If that's true, then you can just modify the
defaults.css file.  And if modifying the defaults.css affects the AS side,
you can correct for that in the @media -flex-flash portion of the
defaults.css.

HTH,
-Alex

On 1/31/14 12:24 AM, OmPrakash Muppirala bigosma...@gmail.com wrote:

On Jan 30, 2014 11:32 PM, Alex Harui aha...@adobe.com wrote:



 On 1/30/14 11:07 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

 On Jan 30, 2014 10:18 PM, Alex Harui aha...@adobe.com wrote:
 
 
 
  On 1/30/14 9:11 PM, OmPrakash Muppirala bigosma...@gmail.com
wrote:
 
  On Thu, Jan 30, 2014 at 8:30 PM, Alex Harui aha...@adobe.com
wrote:
  
   Om, something is still not configured right.  BarChart.js should
be
  coming
   from frameworks/js/FlexJS/libs.
  
  
  I dont see the libs folder here:
  
 
https://git-wip-us.apache.org/repos/asf?p=flex-asjs.git;a=tree;f=framework
  s/js/FlexJS;h=868b43d18106fcb21b8b598ae60b96ddaf447d67;hb=develop
  
  Correct.  The libs folder is not in the repo as it contains the
output
  from cross-compiling the as files in the
frameworks/as/projects/FlexJSJX
  folder.
 
  But it should get created if you run ant in the repo, and it should
be
 in
  the release package in the nightly builds.
 
  -Alex
 
 Well, that is what I am seeing here as well.  Which brings me back to
my
 original question: how do I get my required change into BarChart.js?
 
 Maybe you need to explain like I'm 5 :-)
 The confusing part to me is that my copy of BarChart.js does not have a
 createElement method in it.  I'm wondering if you're building
 BarChartExample with out-of-date launch configs that are picking up an
 older hand-written BarChart.js.

It does not in my copy as well.  I want to add this method to BarChart.js.

I just added that method to the BarChart.js file in the bin/js-debug
folder, which seems to fix the issue.

We on the same page now?

Om


 -Alex

Re: [FlexJS] BarChart component added - render issue

2014-01-31 Thread Alex Harui



On 1/31/14 7:03 AM, Peter Ent p...@adobe.com wrote:

Hi,

First, I can confirm that Om's suggestion of *adding* the createElement
override to the cross-compiled/generated BarChart.js does fix the problem.

Secondly - how do we make it possible to allow customization of the
JavaScript that gets cross-compiled? This is bound to be necessary and
clearly solves this problem.
Well, the current rule is that if you need custom JS, then that class is
not available for cross-compilation and needs its own parallel JS file in
the repo.


A bunch of things popped into my head:

1. We add createElement to UIBase.as so there is parity with the
JavaScript code. We might actually make good use of this on the AS side,
but I haven't given that any thought. Having it though, would allow the AS
BarChart to override the method and introduce AS code that would get
cross-compiled into JavaScript.
We could do that, but it would mess up code coverage tooling.  We could
add compiler directive so certain code isn't seen by the code coverage
tooling or even allow JS instead of AS inside comments in the AS file that
get output to the JS file as well.  But either way, at some point, someone
may have to create a parallel JS file.  These various ideas just reduce
the probability.  

2. We need to be able to programmatically set style properties that get
cross-compiled correctly. The key to the BarChart issue is
this.element.style.overflow = 'visible'; or setting the overflow style
to visible. Perhaps something like:  this.style = overflow; on the
ActionScript side would coax the compiler to generate the
this.element.style.overflow = 'visible'; on the JavaScript side.
That's what the CSS file and media query is for.

3. Allow JavaScript-specific code to be placed in the ActionScript code,
maybe using metadata:

override public function createElement()
{
[JavaScript]
  this.element = document.createElement('div');
  this.element.style.overflow = 'visible';
  this.positioner = this.element;
[JavaScript]
[ActionScript]
   // code within these [ActionScript] tags does not get cross-compiled
[ActionScript]
}
And an option 4 is to examine the lifecycle in both AS and JS and try to
make them more similar.  The problem is that on the AS side, the
components are the display elements but on the JS side they wrap the
display elements.


We really do need to have some way to tweak the JavaScript code, whether
it be styling or something else.
Well, it would reduce the number of parallel JS files, but really, we
don't have to have a way to tweak the JS code from the AS side.  I'd like
to see if this case can be solved by modifying the CSS file.  Then we'll
see how often we hit the need to do this sort of thing again and decide
what to do.

-Alex

Re: [FlexJS] BarChart component added - render issue

2014-01-31 Thread Peter Ent

Had a chat with Alex. For this particular issue, we were thinking that
Flex's scrollPolicy should be carried over to FlexJS, but enhanced:

scrollPolicy: on | off | auto | hidden

which map as follows -

on: overflow:scroll, but scrollbars visible always
off:overflow:visible
auto:   overflow:scroll, but scrollbars visible when necessary
hidden: overflow:hidden

or something like that. For BarChart, scrollPolicy:off would be the
default. 

For BarChart, the real issue is that the area for the chart isn't really
big enough. I don't think it should use a trick like overflow:visible. The
size that's calculated is big enough for the series, but then the axis is
added to that same div, forcing the scroll. I believe the area for the
chart should shrink to account for the XAxisBead because an explicit width
and height are set for the chart and you don't want to increase that on
the developer.

There are couple of things to do: add scrollPolicy and fix BarChart.

Regards,
Peter

On 1/31/14 12:45 PM, Alex Harui aha...@adobe.com wrote:



On 1/31/14 7:03 AM, Peter Ent p...@adobe.com wrote:

Hi,

First, I can confirm that Om's suggestion of *adding* the createElement
override to the cross-compiled/generated BarChart.js does fix the
problem.

Secondly - how do we make it possible to allow customization of the
JavaScript that gets cross-compiled? This is bound to be necessary and
clearly solves this problem.
Well, the current rule is that if you need custom JS, then that class is
not available for cross-compilation and needs its own parallel JS file in
the repo.


A bunch of things popped into my head:

1. We add createElement to UIBase.as so there is parity with the
JavaScript code. We might actually make good use of this on the AS side,
but I haven't given that any thought. Having it though, would allow the
AS
BarChart to override the method and introduce AS code that would get
cross-compiled into JavaScript.
We could do that, but it would mess up code coverage tooling.  We could
add compiler directive so certain code isn't seen by the code coverage
tooling or even allow JS instead of AS inside comments in the AS file that
get output to the JS file as well.  But either way, at some point, someone
may have to create a parallel JS file.  These various ideas just reduce
the probability.  

2. We need to be able to programmatically set style properties that get
cross-compiled correctly. The key to the BarChart issue is
this.element.style.overflow = 'visible'; or setting the overflow style
to visible. Perhaps something like:  this.style = overflow; on the
ActionScript side would coax the compiler to generate the
this.element.style.overflow = 'visible'; on the JavaScript side.
That's what the CSS file and media query is for.

3. Allow JavaScript-specific code to be placed in the ActionScript code,
maybe using metadata:

override public function createElement()
{
[JavaScript]
  this.element = document.createElement('div');
  this.element.style.overflow = 'visible';
  this.positioner = this.element;
[JavaScript]
[ActionScript]
   // code within these [ActionScript] tags does not get cross-compiled
[ActionScript]
}
And an option 4 is to examine the lifecycle in both AS and JS and try to
make them more similar.  The problem is that on the AS side, the
components are the display elements but on the JS side they wrap the
display elements.


We really do need to have some way to tweak the JavaScript code, whether
it be styling or something else.
Well, it would reduce the number of parallel JS files, but really, we
don't have to have a way to tweak the JS code from the AS side.  I'd like
to see if this case can be solved by modifying the CSS file.  Then we'll
see how often we hit the need to do this sort of thing again and decide
what to do.

-Alex

Re: [FlexJS] BarChart component added - render issue

2014-01-31 Thread OmPrakash Muppirala

On Fri, Jan 31, 2014 at 11:31 AM, Peter Ent p...@adobe.com wrote:

 Had a chat with Alex. For this particular issue, we were thinking that
 Flex's scrollPolicy should be carried over to FlexJS, but enhanced:

 scrollPolicy: on | off | auto | hidden

 which map as follows -

 on: overflow:scroll, but scrollbars visible always
 off:overflow:visible
 auto:   overflow:scroll, but scrollbars visible when necessary
 hidden: overflow:hidden

 or something like that. For BarChart, scrollPolicy:off would be the
 default.

 For BarChart, the real issue is that the area for the chart isn't really
 big enough. I don't think it should use a trick like overflow:visible.


You are right.  Setting overflow:visible is more of a hack.  Once we place
another visual component below the chart, it will start clipping each
other.


 The
 size that's calculated is big enough for the series, but then the axis is
 added to that same div, forcing the scroll. I believe the area for the
 chart should shrink to account for the XAxisBead because an explicit width
 and height are set for the chart and you don't want to increase that on
 the developer.

 There are couple of things to do: add scrollPolicy and fix BarChart.


I will take a shot a fixing the BarChart rendering, if you are not already
working on it?  I am looking at the logic in BarChartLayout.changeHandler()
method.  Is that what you would do as well?

Thanks,
Om



 Regards,
 Peter

 On 1/31/14 12:45 PM, Alex Harui aha...@adobe.com wrote:

 
 
 On 1/31/14 7:03 AM, Peter Ent p...@adobe.com wrote:
 
 Hi,
 
 First, I can confirm that Om's suggestion of *adding* the createElement
 override to the cross-compiled/generated BarChart.js does fix the
 problem.
 
 Secondly - how do we make it possible to allow customization of the
 JavaScript that gets cross-compiled? This is bound to be necessary and
 clearly solves this problem.
 Well, the current rule is that if you need custom JS, then that class is
 not available for cross-compilation and needs its own parallel JS file in
 the repo.
 
 
 A bunch of things popped into my head:
 
 1. We add createElement to UIBase.as so there is parity with the
 JavaScript code. We might actually make good use of this on the AS side,
 but I haven't given that any thought. Having it though, would allow the
 AS
 BarChart to override the method and introduce AS code that would get
 cross-compiled into JavaScript.
 We could do that, but it would mess up code coverage tooling.  We could
 add compiler directive so certain code isn't seen by the code coverage
 tooling or even allow JS instead of AS inside comments in the AS file that
 get output to the JS file as well.  But either way, at some point, someone
 may have to create a parallel JS file.  These various ideas just reduce
 the probability.
 
 2. We need to be able to programmatically set style properties that get
 cross-compiled correctly. The key to the BarChart issue is
 this.element.style.overflow = 'visible'; or setting the overflow style
 to visible. Perhaps something like:  this.style = overflow; on the
 ActionScript side would coax the compiler to generate the
 this.element.style.overflow = 'visible'; on the JavaScript side.
 That's what the CSS file and media query is for.
 
 3. Allow JavaScript-specific code to be placed in the ActionScript code,
 maybe using metadata:
 
 override public function createElement()
 {
 [JavaScript]
   this.element = document.createElement('div');
   this.element.style.overflow = 'visible';
   this.positioner = this.element;
 [JavaScript]
 [ActionScript]
// code within these [ActionScript] tags does not get cross-compiled
 [ActionScript]
 }
 And an option 4 is to examine the lifecycle in both AS and JS and try to
 make them more similar.  The problem is that on the AS side, the
 components are the display elements but on the JS side they wrap the
 display elements.
 
 
 We really do need to have some way to tweak the JavaScript code, whether
 it be styling or something else.
 Well, it would reduce the number of parallel JS files, but really, we
 don't have to have a way to tweak the JS code from the AS side.  I'd like
 to see if this case can be solved by modifying the CSS file.  Then we'll
 see how often we hit the need to do this sort of thing again and decide
 what to do.
 
 -Alex

Re: [FlexJS] BarChart component added - render issue

2014-01-30 Thread Peter Ent

I have the BarChart example working in both AS and JS. The AS worked right
away but I discovered an issue with sizing the NonVirtualDataGroup in
JavaScript. Or rather, the lack of sizing it. I am tracking that down now.
There are places in FlexJS where I don't have the size calculation quite
right or the function to calculate sizes isn't being called at the right
time, so I have some work to do on smoothing that out and making it
consistent.

I want to get the dataGroup size calculation in the right place for the
charts and then I'll check in the changed files.

--peter

On 1/29/14 6:29 PM, Alex Harui aha...@adobe.com wrote:

OK, things appear to be compiling and running again on the AS side.  Make
sure the BarChartExample works and you think it should.

Thanks
-Alex

On 1/29/14 2:12 PM, Alex Harui aha...@adobe.com wrote:

It is stale because it was using the custom bar chart and not the one I
moved to FLexJSJX.  I have it updated locally but there is a problem now
because we're trying to use the Ifactory code gen in the compiler and it
isn't working right.

-Alex

On 1/29/14 1:49 PM, Peter Ent p...@adobe.com wrote:

I wonder why it is stale? I'll take a look as well since it will help me
remember and help with any JS issues.

-peter

On 1/29/14 4:07 PM, Alex Harui aha...@adobe.com wrote:

I just discovered that the BarChartExample is stale.  It isn't using
the
BarChart now checked into FlexJSJX.  I'm going to try to get it to
compile
and run in AS and then maybe Peter will have time to look at the JS
side.

-Alex

On 1/29/14 11:59 AM, Peter Ent p...@adobe.com wrote:

Please feel free to make adjustments. I have to admit that the
particulars
of CSS escape me sometimes.

Thanks for your help and checking this out.

Peter

On 1/29/14 2:40 PM, OmPrakash Muppirala bigosma...@gmail.com
wrote:

When I compile and run the BarChartExample, in the JS version, this
is
what
I am seeing (swf works fine)

http://jsfiddle.net/cvLqE/

Once I tweak the output html like this

http://jsfiddle.net/52uaL/2/

i.e. remove the position: absolute style attribute of 'barChart' div,
the
bars show up, but are off a bit to the left and top.

Before I continue to investigate this, Peter, is this a known issue
that
you are planning on fixing?  I am seeing this issue on both Firefox
and
Chrome on Windows.

Thanks,
Om


On Tue, Dec 17, 2013 at 12:49 PM, Peter Ent p...@adobe.com wrote:

 Hi,

 I've added a simple BarChart component to the ActionScript FlexJS
SDK;
it
 is modeled on the MX Charts package. I also included an example of
using
 it, located in the FlexJS examples directory.

 I developed the BarChart in ActionScript but it can be
cross-compiled
into
 JavaScript and produces the same chart. The BarChartExample has the
sources
 in the project so that you can compile it for either ActionScript
or
 JavaScript.  I've included a README  in that project with more
information.

 The intent, as with the DataGrid, is to develop more complex
components
in
 ActionScript and cross-compile them into JavaScript, saving a lot
of
time.
 While doing this project I had to hand-craft a JavaScript component
to
 display the bars since the ActionScript version relies on the Flash
 Player's Shape class and that is not available in HTML. I think
this
really
 illustrates the potential of FlexJS where you can have a good set
of
 fundamental components that are environment specific (e.g., Button,
Label,
 and TextInput) which must be crafted for all environments, but
complex
 components can be written in ActionScript and just cross-compiled
into
 JavaScript.

 My next task is add some simple axis labeling.

 Regards,
 Peter Ent
 Adobe Systems

Re: [FlexJS] BarChart component added - render issue

2014-01-30 Thread Peter Ent

I've pushed changes that should have the BarChart example working for both
AS and JS. There is an issue with the axis appearing below the chart that
causes the chart area (the dataGroup) to be larger than the chart space.
This is an issue with getting the HTML/CSS right and any help/advice or
changes are welcome.

--peter

On 1/30/14 1:43 PM, Peter Ent p...@adobe.com wrote:

I have the BarChart example working in both AS and JS. The AS worked right
away but I discovered an issue with sizing the NonVirtualDataGroup in
JavaScript. Or rather, the lack of sizing it. I am tracking that down now.
There are places in FlexJS where I don't have the size calculation quite
right or the function to calculate sizes isn't being called at the right
time, so I have some work to do on smoothing that out and making it
consistent.

I want to get the dataGroup size calculation in the right place for the
charts and then I'll check in the changed files.

--peter

On 1/29/14 6:29 PM, Alex Harui aha...@adobe.com wrote:

OK, things appear to be compiling and running again on the AS side.  Make
sure the BarChartExample works and you think it should.

Thanks
-Alex

On 1/29/14 2:12 PM, Alex Harui aha...@adobe.com wrote:

It is stale because it was using the custom bar chart and not the one I
moved to FLexJSJX.  I have it updated locally but there is a problem now
because we're trying to use the Ifactory code gen in the compiler and it
isn't working right.

-Alex

On 1/29/14 1:49 PM, Peter Ent p...@adobe.com wrote:

I wonder why it is stale? I'll take a look as well since it will help
me
remember and help with any JS issues.

-peter

On 1/29/14 4:07 PM, Alex Harui aha...@adobe.com wrote:

I just discovered that the BarChartExample is stale.  It isn't using
the
BarChart now checked into FlexJSJX.  I'm going to try to get it to
compile
and run in AS and then maybe Peter will have time to look at the JS
side.

-Alex

On 1/29/14 11:59 AM, Peter Ent p...@adobe.com wrote:

Please feel free to make adjustments. I have to admit that the
particulars
of CSS escape me sometimes.

Thanks for your help and checking this out.

Peter

On 1/29/14 2:40 PM, OmPrakash Muppirala bigosma...@gmail.com
wrote:

When I compile and run the BarChartExample, in the JS version, this
is
what
I am seeing (swf works fine)

http://jsfiddle.net/cvLqE/

Once I tweak the output html like this

http://jsfiddle.net/52uaL/2/

i.e. remove the position: absolute style attribute of 'barChart'
div,
the
bars show up, but are off a bit to the left and top.

Before I continue to investigate this, Peter, is this a known issue
that
you are planning on fixing?  I am seeing this issue on both Firefox
and
Chrome on Windows.

Thanks,
Om


On Tue, Dec 17, 2013 at 12:49 PM, Peter Ent p...@adobe.com wrote:

 Hi,

 I've added a simple BarChart component to the ActionScript FlexJS
SDK;
it
 is modeled on the MX Charts package. I also included an example of
using
 it, located in the FlexJS examples directory.

 I developed the BarChart in ActionScript but it can be
cross-compiled
into
 JavaScript and produces the same chart. The BarChartExample has
the
sources
 in the project so that you can compile it for either ActionScript
or
 JavaScript.  I've included a README  in that project with more
information.

 The intent, as with the DataGrid, is to develop more complex
components
in
 ActionScript and cross-compile them into JavaScript, saving a lot
of
time.
 While doing this project I had to hand-craft a JavaScript
component
to
 display the bars since the ActionScript version relies on the
Flash
 Player's Shape class and that is not available in HTML. I think
this
really
 illustrates the potential of FlexJS where you can have a good set
of
 fundamental components that are environment specific (e.g.,
Button,
Label,
 and TextInput) which must be crafted for all environments, but
complex
 components can be written in ActionScript and just cross-compiled
into
 JavaScript.

 My next task is add some simple axis labeling.

 Regards,
 Peter Ent
 Adobe Systems

Re: [FlexJS] BarChart component added - render issue

On Thu, Jan 30, 2014 at 1:43 PM, Peter Ent p...@adobe.com wrote:

 I've pushed changes that should have the BarChart example working for both
 AS and JS. There is an issue with the axis appearing below the chart that
 causes the chart area (the dataGroup) to be larger than the chart space.
 This is an issue with getting the HTML/CSS right and any help/advice or
 changes are welcome.


I figured out a fix by modifying the css in BarChart.js from the
bin/js-debug.  But this class gets cross-compiled from BarChart.as.  How
would I BarChart's css styles from the AS code?

My fix involves adding this to BarChart.js:

/**
 * @override
 */
org.apache.flex.core.ListBase.prototype.createElement = function() {
  this.element = document.createElement('div');
  this.element.style.overflow = 'visible';
  this.positioner = this.element;

  return this.element;
};

Is this possible?


  --peter

 On 1/30/14 1:43 PM, Peter Ent p...@adobe.com wrote:

 I have the BarChart example working in both AS and JS. The AS worked right
 away but I discovered an issue with sizing the NonVirtualDataGroup in
 JavaScript. Or rather, the lack of sizing it. I am tracking that down now.
 There are places in FlexJS where I don't have the size calculation quite
 right or the function to calculate sizes isn't being called at the right
 time, so I have some work to do on smoothing that out and making it
 consistent.
 
 I want to get the dataGroup size calculation in the right place for the
 charts and then I'll check in the changed files.
 
 --peter
 
 On 1/29/14 6:29 PM, Alex Harui aha...@adobe.com wrote:
 
 OK, things appear to be compiling and running again on the AS side.  Make
 sure the BarChartExample works and you think it should.
 
 Thanks
 -Alex
 
 On 1/29/14 2:12 PM, Alex Harui aha...@adobe.com wrote:
 
 It is stale because it was using the custom bar chart and not the one I
 moved to FLexJSJX.  I have it updated locally but there is a problem now
 because we're trying to use the Ifactory code gen in the compiler and it
 isn't working right.
 
 -Alex
 
 On 1/29/14 1:49 PM, Peter Ent p...@adobe.com wrote:
 
 I wonder why it is stale? I'll take a look as well since it will help
 me
 remember and help with any JS issues.
 
 -peter
 
 On 1/29/14 4:07 PM, Alex Harui aha...@adobe.com wrote:
 
 I just discovered that the BarChartExample is stale.  It isn't using
 the
 BarChart now checked into FlexJSJX.  I'm going to try to get it to
 compile
 and run in AS and then maybe Peter will have time to look at the JS
 side.
 
 -Alex
 
 On 1/29/14 11:59 AM, Peter Ent p...@adobe.com wrote:
 
 Please feel free to make adjustments. I have to admit that the
 particulars
 of CSS escape me sometimes.
 
 Thanks for your help and checking this out.
 
 Peter
 
 On 1/29/14 2:40 PM, OmPrakash Muppirala bigosma...@gmail.com
 wrote:
 
 When I compile and run the BarChartExample, in the JS version, this
 is
 what
 I am seeing (swf works fine)
 
 http://jsfiddle.net/cvLqE/
 
 Once I tweak the output html like this
 
 http://jsfiddle.net/52uaL/2/
 
 i.e. remove the position: absolute style attribute of 'barChart'
 div,
 the
 bars show up, but are off a bit to the left and top.
 
 Before I continue to investigate this, Peter, is this a known issue
 that
 you are planning on fixing?  I am seeing this issue on both Firefox
 and
 Chrome on Windows.
 
 Thanks,
 Om
 
 
 On Tue, Dec 17, 2013 at 12:49 PM, Peter Ent p...@adobe.com wrote:
 
  Hi,
 
  I've added a simple BarChart component to the ActionScript FlexJS
 SDK;
 it
  is modeled on the MX Charts package. I also included an example of
 using
  it, located in the FlexJS examples directory.
 
  I developed the BarChart in ActionScript but it can be
 cross-compiled
 into
  JavaScript and produces the same chart. The BarChartExample has
 the
 sources
  in the project so that you can compile it for either ActionScript
 or
  JavaScript.  I've included a README  in that project with more
 information.
 
  The intent, as with the DataGrid, is to develop more complex
 components
 in
  ActionScript and cross-compile them into JavaScript, saving a lot
 of
 time.
  While doing this project I had to hand-craft a JavaScript
 component
 to
  display the bars since the ActionScript version relies on the
 Flash
  Player's Shape class and that is not available in HTML. I think
 this
 really
  illustrates the potential of FlexJS where you can have a good set
 of
  fundamental components that are environment specific (e.g.,
 Button,
 Label,
  and TextInput) which must be crafted for all environments, but
 complex
  components can be written in ActionScript and just cross-compiled
 into
  JavaScript.
 
  My next task is add some simple axis labeling.
 
  Regards,
  Peter Ent
  Adobe Systems

Re: [FlexJS] BarChart component added - render issue

On Jan 30, 2014 5:36 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

 On Thu, Jan 30, 2014 at 1:43 PM, Peter Ent p...@adobe.com wrote:

 I've pushed changes that should have the BarChart example working for
both
 AS and JS. There is an issue with the axis appearing below the chart that
 causes the chart area (the dataGroup) to be larger than the chart space.
 This is an issue with getting the HTML/CSS right and any help/advice or
 changes are welcome.


 I figured out a fix by modifying the css in BarChart.js from the
bin/js-debug.  But this class gets cross-compiled from BarChart.as.  How
would I BarChart's css styles from the AS code?

 My fix involves adding this to BarChart.js:

 /**
  * @override
  */


It should rather be:
org.apache.flex.charts.BarChart.prototype.createElement

org.apache.flex.core.ListBase.prototype.createElement = function() {
   this.element = document.createElement('div');
   this.element.style.overflow = 'visible';
   this.positioner = this.element;

   return this.element;
 };

 Is this possible?


 --peter

 On 1/30/14 1:43 PM, Peter Ent p...@adobe.com wrote:

 I have the BarChart example working in both AS and JS. The AS worked
right
 away but I discovered an issue with sizing the NonVirtualDataGroup in
 JavaScript. Or rather, the lack of sizing it. I am tracking that down
now.
 There are places in FlexJS where I don't have the size calculation quite
 right or the function to calculate sizes isn't being called at the right
 time, so I have some work to do on smoothing that out and making it
 consistent.
 
 I want to get the dataGroup size calculation in the right place for the
 charts and then I'll check in the changed files.
 
 --peter
 
 On 1/29/14 6:29 PM, Alex Harui aha...@adobe.com wrote:
 
 OK, things appear to be compiling and running again on the AS side.
 Make
 sure the BarChartExample works and you think it should.
 
 Thanks
 -Alex
 
 On 1/29/14 2:12 PM, Alex Harui aha...@adobe.com wrote:
 
 It is stale because it was using the custom bar chart and not the one
I
 moved to FLexJSJX.  I have it updated locally but there is a problem
now
 because we're trying to use the Ifactory code gen in the compiler and
it
 isn't working right.
 
 -Alex
 
 On 1/29/14 1:49 PM, Peter Ent p...@adobe.com wrote:
 
 I wonder why it is stale? I'll take a look as well since it will help
 me
 remember and help with any JS issues.
 
 -peter
 
 On 1/29/14 4:07 PM, Alex Harui aha...@adobe.com wrote:
 
 I just discovered that the BarChartExample is stale.  It isn't using
 the
 BarChart now checked into FlexJSJX.  I'm going to try to get it to
 compile
 and run in AS and then maybe Peter will have time to look at the JS
 side.
 
 -Alex
 
 On 1/29/14 11:59 AM, Peter Ent p...@adobe.com wrote:
 
 Please feel free to make adjustments. I have to admit that the
 particulars
 of CSS escape me sometimes.
 
 Thanks for your help and checking this out.
 
 Peter
 
 On 1/29/14 2:40 PM, OmPrakash Muppirala bigosma...@gmail.com
 wrote:
 
 When I compile and run the BarChartExample, in the JS version,
this
 is
 what
 I am seeing (swf works fine)
 
 http://jsfiddle.net/cvLqE/
 
 Once I tweak the output html like this
 
 http://jsfiddle.net/52uaL/2/
 
 i.e. remove the position: absolute style attribute of 'barChart'
 div,
 the
 bars show up, but are off a bit to the left and top.
 
 Before I continue to investigate this, Peter, is this a known
issue
 that
 you are planning on fixing?  I am seeing this issue on both
Firefox
 and
 Chrome on Windows.
 
 Thanks,
 Om
 
 
 On Tue, Dec 17, 2013 at 12:49 PM, Peter Ent p...@adobe.com
wrote:
 
  Hi,
 
  I've added a simple BarChart component to the ActionScript
FlexJS
 SDK;
 it
  is modeled on the MX Charts package. I also included an example
of
 using
  it, located in the FlexJS examples directory.
 
  I developed the BarChart in ActionScript but it can be
 cross-compiled
 into
  JavaScript and produces the same chart. The BarChartExample has
 the
 sources
  in the project so that you can compile it for either
ActionScript
 or
  JavaScript.  I've included a README  in that project with more
 information.
 
  The intent, as with the DataGrid, is to develop more complex
 components
 in
  ActionScript and cross-compile them into JavaScript, saving a
lot
 of
 time.
  While doing this project I had to hand-craft a JavaScript
 component
 to
  display the bars since the ActionScript version relies on the
 Flash
  Player's Shape class and that is not available in HTML. I think
 this
 really
  illustrates the potential of FlexJS where you can have a good
set
 of
  fundamental components that are environment specific (e.g.,
 Button,
 Label,
  and TextInput) which must be crafted for all environments, but
 complex
  components can be written in ActionScript and just
cross-compiled
 into
  JavaScript.
 
  My next task is add some simple axis labeling.
 
  Regards,
  Peter Ent
  Adobe Systems

Re: [FlexJS] BarChart component added - render issue

2014-01-30 Thread Alex Harui

Om, something is still not configured right.  BarChart.js should be coming
from frameworks/js/FlexJS/libs.  There is no createElement call in my copy.

-Alex

On 1/30/14 8:18 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

On Jan 30, 2014 5:36 PM, OmPrakash Muppirala bigosma...@gmail.com
wrote:

 On Thu, Jan 30, 2014 at 1:43 PM, Peter Ent p...@adobe.com wrote:

 I've pushed changes that should have the BarChart example working for
both
 AS and JS. There is an issue with the axis appearing below the chart
that
 causes the chart area (the dataGroup) to be larger than the chart
space.
 This is an issue with getting the HTML/CSS right and any help/advice or
 changes are welcome.


 I figured out a fix by modifying the css in BarChart.js from the
bin/js-debug.  But this class gets cross-compiled from BarChart.as.  How
would I BarChart's css styles from the AS code?

 My fix involves adding this to BarChart.js:

 /**
  * @override
  */


It should rather be:
org.apache.flex.charts.BarChart.prototype.createElement

org.apache.flex.core.ListBase.prototype.createElement = function() {
   this.element = document.createElement('div');
   this.element.style.overflow = 'visible';
   this.positioner = this.element;

   return this.element;
 };

 Is this possible?


 --peter

 On 1/30/14 1:43 PM, Peter Ent p...@adobe.com wrote:

 I have the BarChart example working in both AS and JS. The AS worked
right
 away but I discovered an issue with sizing the NonVirtualDataGroup in
 JavaScript. Or rather, the lack of sizing it. I am tracking that down
now.
 There are places in FlexJS where I don't have the size calculation
quite
 right or the function to calculate sizes isn't being called at the
right
 time, so I have some work to do on smoothing that out and making it
 consistent.
 
 I want to get the dataGroup size calculation in the right place for
the
 charts and then I'll check in the changed files.
 
 --peter
 
 On 1/29/14 6:29 PM, Alex Harui aha...@adobe.com wrote:
 
 OK, things appear to be compiling and running again on the AS side.
 Make
 sure the BarChartExample works and you think it should.
 
 Thanks
 -Alex
 
 On 1/29/14 2:12 PM, Alex Harui aha...@adobe.com wrote:
 
 It is stale because it was using the custom bar chart and not the
one
I
 moved to FLexJSJX.  I have it updated locally but there is a problem
now
 because we're trying to use the Ifactory code gen in the compiler
and
it
 isn't working right.
 
 -Alex
 
 On 1/29/14 1:49 PM, Peter Ent p...@adobe.com wrote:
 
 I wonder why it is stale? I'll take a look as well since it will
help
 me
 remember and help with any JS issues.
 
 -peter
 
 On 1/29/14 4:07 PM, Alex Harui aha...@adobe.com wrote:
 
 I just discovered that the BarChartExample is stale.  It isn't
using
 the
 BarChart now checked into FlexJSJX.  I'm going to try to get it to
 compile
 and run in AS and then maybe Peter will have time to look at the
JS
 side.
 
 -Alex
 
 On 1/29/14 11:59 AM, Peter Ent p...@adobe.com wrote:
 
 Please feel free to make adjustments. I have to admit that the
 particulars
 of CSS escape me sometimes.
 
 Thanks for your help and checking this out.
 
 Peter
 
 On 1/29/14 2:40 PM, OmPrakash Muppirala bigosma...@gmail.com
 wrote:
 
 When I compile and run the BarChartExample, in the JS version,
this
 is
 what
 I am seeing (swf works fine)
 
 http://jsfiddle.net/cvLqE/
 
 Once I tweak the output html like this
 
 http://jsfiddle.net/52uaL/2/
 
 i.e. remove the position: absolute style attribute of 'barChart'
 div,
 the
 bars show up, but are off a bit to the left and top.
 
 Before I continue to investigate this, Peter, is this a known
issue
 that
 you are planning on fixing?  I am seeing this issue on both
Firefox
 and
 Chrome on Windows.
 
 Thanks,
 Om
 
 
 On Tue, Dec 17, 2013 at 12:49 PM, Peter Ent p...@adobe.com
wrote:
 
  Hi,
 
  I've added a simple BarChart component to the ActionScript
FlexJS
 SDK;
 it
  is modeled on the MX Charts package. I also included an
example
of
 using
  it, located in the FlexJS examples directory.
 
  I developed the BarChart in ActionScript but it can be
 cross-compiled
 into
  JavaScript and produces the same chart. The BarChartExample
has
 the
 sources
  in the project so that you can compile it for either
ActionScript
 or
  JavaScript.  I've included a README  in that project with more
 information.
 
  The intent, as with the DataGrid, is to develop more complex
 components
 in
  ActionScript and cross-compile them into JavaScript, saving a
lot
 of
 time.
  While doing this project I had to hand-craft a JavaScript
 component
 to
  display the bars since the ActionScript version relies on the
 Flash
  Player's Shape class and that is not available in HTML. I
think
 this
 really
  illustrates the potential of FlexJS where you can have a good
set
 of
  fundamental components that are environment specific (e.g.,
 Button,
 Label,
  and TextInput) which must be crafted for all environments, but
 complex
  components can be written in

Re: [FlexJS] BarChart component added - render issue

On Thu, Jan 30, 2014 at 8:30 PM, Alex Harui aha...@adobe.com wrote:

Om, something is still not configured right. BarChart.js should be coming
from frameworks/js/FlexJS/libs.

I dont see the libs folder here:
https://git-wip-us.apache.org/repos/asf?p=flex-asjs.git;a=tree;f=frameworks/js/FlexJS;h=868b43d18106fcb21b8b598ae60b96ddaf447d67;hb=develop

There is no createElement call in my copy.

That is correct. I am planning on adding an override of createElement in
BarChart.js

Thanks,
Om

-Alex

On 1/30/14 8:18 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

On Jan 30, 2014 5:36 PM, OmPrakash Muppirala bigosma...@gmail.com
wrote:

On Thu, Jan 30, 2014 at 1:43 PM, Peter Ent p...@adobe.com wrote:

I've pushed changes that should have the BarChart example working for
both
AS and JS. There is an issue with the axis appearing below the chart
that
causes the chart area (the dataGroup) to be larger than the chart
space.
This is an issue with getting the HTML/CSS right and any help/advice or
changes are welcome.

I figured out a fix by modifying the css in BarChart.js from the
bin/js-debug. But this class gets cross-compiled from BarChart.as. How
would I BarChart's css styles from the AS code?

My fix involves adding this to BarChart.js:

/**
* @override
*/

It should rather be:
org.apache.flex.charts.BarChart.prototype.createElement

org.apache.flex.core.ListBase.prototype.createElement = function() {
this.element = document.createElement('div');
this.element.style.overflow = 'visible';
this.positioner = this.element;

return this.element;
};

Is this possible?

--peter

On 1/30/14 1:43 PM, Peter Ent p...@adobe.com wrote:

I have the BarChart example working in both AS and JS. The AS worked
right
away but I discovered an issue with sizing the NonVirtualDataGroup in
JavaScript. Or rather, the lack of sizing it. I am tracking that down
now.
There are places in FlexJS where I don't have the size calculation
quite
right or the function to calculate sizes isn't being called at the
right
time, so I have some work to do on smoothing that out and making it
consistent.

I want to get the dataGroup size calculation in the right place for
the
charts and then I'll check in the changed files.

--peter

On 1/29/14 6:29 PM, Alex Harui aha...@adobe.com wrote:

OK, things appear to be compiling and running again on the AS side.
Make
sure the BarChartExample works and you think it should.

Thanks
-Alex

On 1/29/14 2:12 PM, Alex Harui aha...@adobe.com wrote:

It is stale because it was using the custom bar chart and not the
one
I
moved to FLexJSJX. I have it updated locally but there is a problem
now
because we're trying to use the Ifactory code gen in the compiler
and
it
isn't working right.

-Alex

On 1/29/14 1:49 PM, Peter Ent p...@adobe.com wrote:

I wonder why it is stale? I'll take a look as well since it will
help
me
remember and help with any JS issues.

-peter

On 1/29/14 4:07 PM, Alex Harui aha...@adobe.com wrote:

I just discovered that the BarChartExample is stale. It isn't
using
the
BarChart now checked into FlexJSJX. I'm going to try to get it to
compile
and run in AS and then maybe Peter will have time to look at the
JS
side.

-Alex

On 1/29/14 11:59 AM, Peter Ent p...@adobe.com wrote:

Please feel free to make adjustments. I have to admit that the
particulars
of CSS escape me sometimes.

Thanks for your help and checking this out.

Peter

On 1/29/14 2:40 PM, OmPrakash Muppirala bigosma...@gmail.com
wrote:

When I compile and run the BarChartExample, in the JS version,
this
is
what
I am seeing (swf works fine)

http://jsfiddle.net/cvLqE/

Once I tweak the output html like this

http://jsfiddle.net/52uaL/2/

i.e. remove the position: absolute style attribute of 'barChart'
div,
the
bars show up, but are off a bit to the left and top.

Before I continue to investigate this, Peter, is this a known
issue
that
you are planning on fixing? I am seeing this issue on both
Firefox
and
Chrome on Windows.

Thanks,
Om

On Tue, Dec 17, 2013 at 12:49 PM, Peter Ent p...@adobe.com
wrote:

Hi,

I've added a simple BarChart component to the ActionScript
FlexJS
SDK;
it
is modeled on the MX Charts package. I also included an
example
of
using
it, located in the FlexJS examples directory.

I developed the BarChart in ActionScript but it can be
cross-compiled
into
JavaScript and produces the same chart. The BarChartExample
has
the
sources
in the project so that you can compile it for either
ActionScript
or
JavaScript. I've included a README in that project with more
information.

The intent, as with the DataGrid, is to develop more complex
components
in
ActionScript and cross-compile

Re: [FlexJS] BarChart component added - render issue

2014-01-30 Thread Alex Harui



On 1/30/14 9:11 PM, OmPrakash Muppirala bigosma...@gmail.com wrote:

On Thu, Jan 30, 2014 at 8:30 PM, Alex Harui aha...@adobe.com wrote:

 Om, something is still not configured right.  BarChart.js should be
coming
 from frameworks/js/FlexJS/libs.


I dont see the libs folder here:
https://git-wip-us.apache.org/repos/asf?p=flex-asjs.git;a=tree;f=framework
s/js/FlexJS;h=868b43d18106fcb21b8b598ae60b96ddaf447d67;hb=develop

Correct.  The libs folder is not in the repo as it contains the output
from cross-compiling the as files in the frameworks/as/projects/FlexJSJX
folder.

But it should get created if you run ant in the repo, and it should be in
the release package in the nightly builds.

-Alex

Re: [FlexJS] BarChart component added - render issue