You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Marcus Fritze <ma...@googlemail.com> on 2015/12/11 15:35:40 UTC
[FlexJS] How can I set css values for and of the generated html file?
When I set the height of ViewBase to 100% , this height isn’t actually 100% (visible) in the generated HTML file.
It generates:
<div id="viewBase" style="display: block; position: relative; width: 100%; height: 100%; padding: 10px; background-color: rgb(255, 0, 0);“>
I recognized, that the 100% height is only working, when <html> and <body> has also "height:100%“ in style.
So how can I set this style in my mxml file? I tried with
@namespace html5 "library://ns.apache.org/flexjs/html5";
html5|html, html5|body{
height: 100%;
}
But this produces some compiler error. It looks like this namespace isn’t working in my IntelliJ. I don’t know why.
Thanks
Marcus
Re: [FlexJS] How can I set css values for and of the
generated html file?
Posted by Alex Harui <ah...@adobe.com>.
On 12/14/15, 9:01 AM, "Marcus Fritze" <ma...@googlemail.com> wrote:
>Yes, this works. Currently, it’s a little bit confusing for me to code in
>flexJS.
>Coding flexJS feels actually a little bit like HTML try and error.
>
>Maybe, I am using FlexSDK too long, but I don’t know exactly what
>height=„100%“ in flexJS means.
>
>Correct me if I am wrong, but in FlexSDK / Flash it means the component
>which has the
>height=„100%“ property, takes the full height which is available in the
>parent.
>
>
>Why doesn’t work this in flexJS? Here I have to set the top / bottom /
>margin and so on?
>In my personal opinion this is a little step backwards in terms of „easy
>coding“.
>
>Is it planned to fix this some day, or is this one of the disadvantages
>we have to live with?
A goal of FlexJS is to allow developers a choice of component sets. The
most complete component set right now is the Basic component set. I chose
to focus on that first because I wanted to create a component set that
will be the smallest and fastest. So, it tries to do simple
encapsulations of browser behavior. And thus in the Basic set, 100% width
does what it would do in the browser which is different than what it does
in the regular Flex SDK.
Another reason I focused on this kind of component set was because some
folks had said that the main value of their code base was in the
ActionScript business logic and their Flex UIs were several years old and
it might be time to upgrade the UI anyway.
More recent feedback has led me to want to try to build out a more
Spark-like component set, so folks don't have to spend as much time
porting the UI and so that there are fewer behavior differences from the
Flex SDK. So I will probably start on that in a week or two and
volunteers are welcome to help. I predict that this component set will be
bigger and slower. It almost has to be, because instead of just telling
the browser to add a div with 100%, we'll have to write code to override
browser behavior and loop through all the children twice, once to measure
to see how much room is left over, and another to layout at final sizes.
And then you'll be able to choose between doing more porting work to get a
smaller faster app, or doing less and paying the price.
Anyway, thanks for continuing to try out FlexJS. We appreciate the
feedback, and if you can help by contributing patches that's even better.
Thanks,
-Alex
Re: [FlexJS] How can I set css values for and of the generated html file?
Posted by Marcus Fritze <ma...@googlemail.com>.
Yes, this works. Currently, it’s a little bit confusing for me to code in flexJS.
Coding flexJS feels actually a little bit like HTML try and error.
Maybe, I am using FlexSDK too long, but I don’t know exactly what height=„100%“ in flexJS means.
Correct me if I am wrong, but in FlexSDK / Flash it means the component which has the
height=„100%“ property, takes the full height which is available in the parent.
code for better visualization (actually this is not correct flexJS code):
<Container id=„TOP“ height=„100%“>
<Container id=„SUB1“ height=„25px“>
</Container>
<Container id=„SUB2“ height=„100%“>
</Container>
</Container>
Without setting any top, bottom, margin, etc. I would assume, that TOP height is 100% of my
ViewBase. Let’s say 1000px. (This works without any problems.) So the SUB2 would be
1000px - 25px = 975px. But in real life, the SUB2 is also 1000px. This confuses me a lot.
Why doesn’t work this in flexJS? Here I have to set the top / bottom / margin and so on?
In my personal opinion this is a little step backwards in terms of „easy coding“.
Is it planned to fix this some day, or is this one of the disadvantages we have to live with?
Ok, this are my first 2 days with flexJS, I really hope it’s getting better.
It took me 2 days to code a horizontal centered page structure.
2 days with this easy stuff, which would be coded in FlexSDK in 15 minutes. Oh god….
I really hope this is a logarithmic learning curve. ;-) I don’t even have any data in my application.
I want to start with the layout and will add the data later.
Maybe, it's getting a little bit better later.
Actually, this reminds me a little bit of my HTML-fight with my Internet Explorer 6, I had years ago.
But you guys doing a great job with flexJS, it’s the HTML which is the problem here. :-)
Thanks
Marcus
> Am 11.12.2015 um 18:46 schrieb Alex Harui <ah...@adobe.com>:
>
> Are you trying to get the app to resize as the browser changes size?
>
> If so, try adding the BrowserResizeListener bead to the Application's beads.
>
> -Alex
>
> From: Marcus Fritze <ma...@googlemail.com>>
> Reply-To: "dev@flex.apache.org<ma...@flex.apache.org>" <de...@flex.apache.org>>
> Date: Friday, December 11, 2015 at 6:35 AM
> To: "dev@flex.apache.org<ma...@flex.apache.org>" <de...@flex.apache.org>>
> Subject: [FlexJS] How can I set css values for <html> and <body> of the generated html file?
>
> When I set the height of ViewBase to 100% , this height isn’t actually 100% (visible) in the generated HTML file.
>
> It generates:
>
> <div id="viewBase" style="display: block; position: relative; width: 100%; height: 100%; padding: 10px; background-color: rgb(255, 0, 0);“>
>
> I recognized, that the 100% height is only working, when <html> and <body> has also "height:100%“ in style.
>
> So how can I set this style in my mxml file? I tried with
>
>
> @namespace html5 "library://ns.apache.org/flexjs/html5";
>
> html5|html, html5|body{
>
> height: 100%;
>
> }
>
> But this produces some compiler error. It looks like this namespace isn’t working in my IntelliJ. I don’t know why.
>
>
> Thanks
>
> Marcus
Re: [FlexJS] How can I set css values for and of the
generated html file?
Posted by Alex Harui <ah...@adobe.com>.
On 12/14/15, 9:11 AM, "Marcus Fritze" <ma...@googlemail.com> wrote:
>Oh, I have forgot. Is there a possibility to get the device-with in my
>js:Application? So that I can set the layout specific for the device
>which is using my page?
We don't have that today. If you can code it up for us, that would be
great.
>
>I found something like this:
>
><meta name="viewport" content="width=device-width, initial-scale=1.0,
>user-scalable=no“>
>
>or this
>
>var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
>
>Bit it seems that, window or screen is not a valid variable in flexJS or
>can I even set meta tag
>from the js:Application preinitialize function?
FlexJS works on the principle of replaceable abstractions. The Flash
equivalent of this meta tag is some properties on Stage. Very different
implementations between the browser vs Flash, but you could create a class
called something like "ApplicationWindow" and write both implementations.
Right now, that involves writing both an .AS file and a .JS file, but I
think we are going to merge in the branch that lets you do all of this in
one file, so if you are interested, you might want to wait until after the
merge.
-Alex
Re: [FlexJS] How can I set css values for and of the generated html file?
Posted by Marcus Fritze <ma...@googlemail.com>.
Oh, I have forgot. Is there a possibility to get the device-with in my
js:Application? So that I can set the layout specific for the device which is using my page?
I found something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no“>
or this
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
Bit it seems that, window or screen is not a valid variable in flexJS or can I even set meta tag
from the js:Application preinitialize function?
Sorry for so many questions, but I really want create a perfect working web-page which is created with flexJS.
Thanks
Marcus
> Am 11.12.2015 um 18:46 schrieb Alex Harui <ah...@adobe.com>:
>
> Are you trying to get the app to resize as the browser changes size?
>
> If so, try adding the BrowserResizeListener bead to the Application's beads.
>
> -Alex
>
> From: Marcus Fritze <ma...@googlemail.com>>
> Reply-To: "dev@flex.apache.org<ma...@flex.apache.org>" <de...@flex.apache.org>>
> Date: Friday, December 11, 2015 at 6:35 AM
> To: "dev@flex.apache.org<ma...@flex.apache.org>" <de...@flex.apache.org>>
> Subject: [FlexJS] How can I set css values for <html> and <body> of the generated html file?
>
> When I set the height of ViewBase to 100% , this height isn’t actually 100% (visible) in the generated HTML file.
>
> It generates:
>
> <div id="viewBase" style="display: block; position: relative; width: 100%; height: 100%; padding: 10px; background-color: rgb(255, 0, 0);“>
>
> I recognized, that the 100% height is only working, when <html> and <body> has also "height:100%“ in style.
>
> So how can I set this style in my mxml file? I tried with
>
>
> @namespace html5 "library://ns.apache.org/flexjs/html5";
>
> html5|html, html5|body{
>
> height: 100%;
>
> }
>
> But this produces some compiler error. It looks like this namespace isn’t working in my IntelliJ. I don’t know why.
>
>
> Thanks
>
> Marcus
Re: [FlexJS] How can I set css values for and of the
generated html file?
Posted by Alex Harui <ah...@adobe.com>.
Are you trying to get the app to resize as the browser changes size?
If so, try adding the BrowserResizeListener bead to the Application's beads.
-Alex
From: Marcus Fritze <ma...@googlemail.com>>
Reply-To: "dev@flex.apache.org<ma...@flex.apache.org>" <de...@flex.apache.org>>
Date: Friday, December 11, 2015 at 6:35 AM
To: "dev@flex.apache.org<ma...@flex.apache.org>" <de...@flex.apache.org>>
Subject: [FlexJS] How can I set css values for <html> and <body> of the generated html file?
When I set the height of ViewBase to 100% , this height isn’t actually 100% (visible) in the generated HTML file.
It generates:
<div id="viewBase" style="display: block; position: relative; width: 100%; height: 100%; padding: 10px; background-color: rgb(255, 0, 0);“>
I recognized, that the 100% height is only working, when <html> and <body> has also "height:100%“ in style.
So how can I set this style in my mxml file? I tried with
@namespace html5 "library://ns.apache.org/flexjs/html5";
html5|html, html5|body{
height: 100%;
}
But this produces some compiler error. It looks like this namespace isn’t working in my IntelliJ. I don’t know why.
Thanks
Marcus