You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by jude <fl...@gmail.com> on 2016/10/25 23:26:47 UTC
HTML pass through
Alex,
I've been encountering two situations that don't quite fit into the FlexJS
paradigm but may fit somewhere.
*Use Case 1:*
I'm a web developer who likes to write all my HTML by hand or I already
have a project in HTML and the markup and CSS cannot be changed. But I've
heard about FlexJS and AS3 and how it will benefit my project. Is there a
way I can place or pull in my own HTML/CSS with FlexJS?
My FlexJS finished application may look something like this (
http://pastebin.com/ga0Gq8C6):
<js:Application>
<fx:Declarations>
<js:HTTPService id="stocks"/>
<!-- so we can reference it in our code. we some how bind this
to the hand typed one -->
<js:HTMLElement id="myButton" click="buttonHandler()"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
public function buttonHandler():void {
alert("hello world");
myButton.label = "My Button";
}
]]>
</fx:Script>
<!-- Placed inside body tag -->
<js:HTMLPassthrough>
<![CDATA[
<div>
<button id="myButton"/>
</div>
]]>
</js:HTMLPassthrough>
<!-- Placed inside body tag. An ad, custom code or other. -->
<js:HTMLPassthrough>
<![CDATA[
<div id="google_analytics"></div>
<script src="google.js">
]]>
</js:HTMLPassthrough>
</js:Application>
In this scenario I would be responsible for managing all my HTML markup and
CSS styling. FlexJS would handle the rest.
*Use Case 2: *
I'm a web developer who likes to write my own native HTML Elements in the
body tag but I would like to write it in XML. Is there a way I write type
safe HTML markup? My FlexJS application may look something like this (
http://pastebin.com/e0WybNXc):
<js:Application>
<fx:Declarations>
<js:HTTPService id="stocks"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
public function buttonHandler():void {
var output:String = "hello world";
myButton.label = "hello world";
alert("hello world");
}
]]>
</fx:Script>
<!-- these classes mirror their HTML counterparts -->
<js:Body style="width:100%;height:100%">
<js:Button id="myButton" click="buttonHandler()"/>
<js:Div style="display:display-inline;bottom:20px:right:20px">
<js:Label text="Made in FlexJS"/>
</js:Div>
<js:HTMLElement type="input" >text</js:HTMLElement>
</js:Body>
</js:Application>
How hard would it be for FlexJS be made to fit these two cases? I think I
know how to do the second case if it's not done already but would have
questions.
Re: HTML pass through
Posted by Alex Harui <ah...@adobe.com>.
For FlexJS, MXML is converted to a data array (in ActionScript). We don't
have an emitter that generates HTML.
HTMLDivElement and HTMLButtonElement are defined in JS.swc. It might be
possible and not too hard to create an HTMLApplication that uses a
different MXMLDataInterpreter to translate the data array into a different
code flow. The current org.apache.flex.utils.MXMLDataInterpreter knows
about the UIBase API and lifecycle. It is going to run code that looks
like:
var c:Class = data[i];
var comp:IUIBase = new c();
And later:
parent.addElement(comp);
As you can see that's a different API and lifecycle than HTMLElement
supports. I chose the UIBase API to have a more object-oriented Flex-like
API.
So, if you write a new MXMLDataInterpreter that works for raw
HTMLElements, it might have to run code that looks more like:
var c:Class = data[i];
var s:String = mapClassToString(c); // return "button", "input", "div"
var e:HTMLElement = document.createElement(s);
And later:
parent.appendChild(e);
A different MXMLEmitter could output the "button", "input", "div" instead
of the class.
HTH,
-Alex
On 10/25/16, 8:20 PM, "jude" <fl...@gmail.com> wrote:
>First question. This is sort of a third use case. John is a developer at
>Mozilla and he doesn't like using <div> or <button> tags (case 1) and
>doesn't want to use wrapper components (case 2). He wants to use the fully
>qualified class names in MXML with auto complete and syntax checking.
>Everything else is the same as the first two cases.
>
>Could he declare the HTML markup in MXML like so:
>
><js:HTMLDivElement>
> <js:HTMLButtonElement click="doSomething()/>
></js:HTMLDivElement>
>
>Then in his event handler he would have type checking:
>
>public function doSomething(event:Event):void {
> var myButton:HTMLButtonElement = event.currentTarget as
>HTMLButtonElement;
> window.alert("hello world. button clicked"); // window being a new
>app
>level property
>}
>
>Wasn't there a core HTML swc that we use to get type checking in FlexJS?
>Or
>was that another project?
>
>Currently the compiler converts MXML to AS3 when you use -keep. But what
>if
>that MXML would be converted straight out to markup:
>
>This:
>
><js:HTMLDivElement>
> <js:HTMLButtonElement click="doSomething()/>
></js:HTMLDivElement>
>
>Becomes this:
>
><div>
> <button click="doSomething()"/>
></div>
>
>
>
>On Tue, Oct 25, 2016 at 7:29 PM, Alex Harui <ah...@adobe.com> wrote:
>
>> Interesting. Comments inline...
>>
>> On 10/25/16, 4:26 PM, "jude" <fl...@gmail.com> wrote:
>>
>> >Alex,
>> >
>> >I've been encountering two situations that don't quite fit into the
>>FlexJS
>> >paradigm but may fit somewhere.
>> >
>> >*Use Case 1:*
>> >I'm a web developer who likes to write all my HTML by hand or I already
>> >have a project in HTML and the markup and CSS cannot be changed. But
>>I've
>> >heard about FlexJS and AS3 and how it will benefit my project. Is
>>there a
>> >way I can place or pull in my own HTML/CSS with FlexJS?
>>
>> If you want to create a component called HTMLPassthrough, it shouldn't
>>be
>> that hard. It should just be a subclass of UIBase with an "html"
>>property
>> that sets the innerHTML property on a div. We just recently made it
>> possible to put arbitrary HTML as the content of the "html" property of
>> any component. You have to use the XHTML namespace for now though.
>>
>> >
>> >My FlexJS finished application may look something like this (
>> >http://pastebin.com/ga0Gq8C6):
>> >
>> ><js:Application>
>> >
>> > <fx:Declarations>
>> > <js:HTTPService id="stocks"/>
>> >
>> > <!-- so we can reference it in our code. we some how bind this
>> >to the hand typed one -->
>> > <js:HTMLElement id="myButton" click="buttonHandler()"/>
>>
>> In regular HTML/JS/CSS, I believe the id does not become a property like
>> it does in MXML. Instead, I think you use document.getElementById. And
>> that should "just work". I suppose we could have the compiler scan
>> embedded HTML for ids and make slots. Any runtime injection of HTML
>> probably "shouldn't" make slots in a sealed-class model like
>>ActionScript
>> has by default, but I suppose you could declare your class as dynamic.
>> Sort of defeats the point of AS though.
>>
>> > </fx:Declarations>
>> >
>> > <fx:Script>
>> > <![CDATA[
>> > public function buttonHandler():void {
>> > alert("hello world");
>> > myButton.label = "My Button";
>> > }
>> > ]]>
>> > </fx:Script>
>> >
>> > <!-- Placed inside body tag -->
>> > <js:HTMLPassthrough>
>> > <![CDATA[
>> > <div>
>> > <button id="myButton"/>
>> > </div>
>> > ]]>
>> > </js:HTMLPassthrough>
>>
>> CDATA shouldn't be needed for XHTML tags. It should be possible just to
>> write:
>>
>> <js:HTMLPassthrough>
>> <div>
>> <button id="myButton"/>
>> </div>
>> </js:HTMLPassthrough>
>>
>> Again, up on the top tag, you have to add:
>> xmlns="http://www.w3.org/1999/xhtml"
>>
>>
>> IMO, the most interesting part wasn't in your example, which is having
>> event handlers in the HTML call out to AS in the rest of your app.
>>Right
>> now, we wouldn't pull out handlers and put them in the instance scope.
>>I
>> think they'd all be in the global scope, which is different than other
>> event handlers in other MXML tags.
>>
>> >
>> >*Use Case 2: *
>> >
>> >I'm a web developer who likes to write my own native HTML Elements in
>>the
>> >body tag but I would like to write it in XML. Is there a way I write
>>type
>> >safe HTML markup? My FlexJS application may look something like this (
>> >http://pastebin.com/e0WybNXc):
>>
>> It should be possible to create a set of components that simply expose
>>the
>> HTMLElements, except for maybe <body> since Application is currently
>> assigned to <body>. UIBase supports the style-as-string syntax already.
>>
>> >
>> ><js:Application>
>> >
>> > <fx:Declarations>
>> > <js:HTTPService id="stocks"/>
>> > </fx:Declarations>
>> >
>> > <fx:Script>
>> > <![CDATA[
>> > public function buttonHandler():void {
>> > var output:String = "hello world";
>> > myButton.label = "hello world";
>> > alert("hello world");
>> > }
>> > ]]>
>> > </fx:Script>
>> >
>> > <!-- these classes mirror their HTML counterparts -->
>> > <js:Body style="width:100%;height:100%">
>> >
>> > <js:Button id="myButton" click="buttonHandler()"/>
>> >
>> > <js:Div style="display:display-inline;
>> bottom:20px:right:20px">
>> > <js:Label text="Made in FlexJS"/>
>> > </js:Div>
>> >
>> > <js:HTMLElement type="input" >text</js:HTMLElement>
>> >
>> > </js:Body>
>> >
>> >
>> ></js:Application>
>> >
>>
>> This example would have all event handlers in the instance scope, but
>>the
>> trade off is that way more code would run to set up the same DOM as
>> setting the innerHTML directly in the first example.
>>
>> IMO, there is no right way. I have no problem with providing people
>>with
>> both options.
>>
>> >
>> >How hard would it be for FlexJS be made to fit these two cases? I
>>think I
>> >know how to do the second case if it's not done already but would have
>> >questions.
>>
>> Shouldn't be that hard. I encourage you to try to make it happen.
>>We'll
>> try to answer questions and fix compiler issues as they come up.
>>
>> -Alex
>>
>>
Re: HTML pass through
Posted by jude <fl...@gmail.com>.
FYI I don't know if it's common knowledge but the HTMLLoader /
FlexHTMLLoader has the HTML core class types listed at runtime. Here is the
window property (http://pasteboard.co/jseULM6lS.png).
At runtime the window property is of type __HTMLScriptObject. At compile
time it's Object. I couldn't find __HTMLScriptObject class anywhere.
On Tue, Oct 25, 2016 at 10:20 PM, jude <fl...@gmail.com> wrote:
> First question. This is sort of a third use case. John is a developer at
> Mozilla and he doesn't like using <div> or <button> tags (case 1) and
> doesn't want to use wrapper components (case 2). He wants to use the fully
> qualified class names in MXML with auto complete and syntax checking.
> Everything else is the same as the first two cases.
>
> Could he declare the HTML markup in MXML like so:
>
> <js:HTMLDivElement>
> <js:HTMLButtonElement click="doSomething()/>
> </js:HTMLDivElement>
>
> Then in his event handler he would have type checking:
>
> public function doSomething(event:Event):void {
> var myButton:HTMLButtonElement = event.currentTarget as
> HTMLButtonElement;
> window.alert("hello world. button clicked"); // window being a new
> app level property
> }
>
> Wasn't there a core HTML swc that we use to get type checking in FlexJS?
> Or was that another project?
>
> Currently the compiler converts MXML to AS3 when you use -keep. But what
> if that MXML would be converted straight out to markup:
>
> This:
>
> <js:HTMLDivElement>
> <js:HTMLButtonElement click="doSomething()/>
> </js:HTMLDivElement>
>
> Becomes this:
>
> <div>
> <button click="doSomething()"/>
> </div>
>
>
>
> On Tue, Oct 25, 2016 at 7:29 PM, Alex Harui <ah...@adobe.com> wrote:
>
>> Interesting. Comments inline...
>>
>> On 10/25/16, 4:26 PM, "jude" <fl...@gmail.com> wrote:
>>
>> >Alex,
>> >
>> >I've been encountering two situations that don't quite fit into the
>> FlexJS
>> >paradigm but may fit somewhere.
>> >
>> >*Use Case 1:*
>> >I'm a web developer who likes to write all my HTML by hand or I already
>> >have a project in HTML and the markup and CSS cannot be changed. But I've
>> >heard about FlexJS and AS3 and how it will benefit my project. Is there a
>> >way I can place or pull in my own HTML/CSS with FlexJS?
>>
>> If you want to create a component called HTMLPassthrough, it shouldn't be
>> that hard. It should just be a subclass of UIBase with an "html" property
>> that sets the innerHTML property on a div. We just recently made it
>> possible to put arbitrary HTML as the content of the "html" property of
>> any component. You have to use the XHTML namespace for now though.
>>
>> >
>> >My FlexJS finished application may look something like this (
>> >http://pastebin.com/ga0Gq8C6):
>> >
>> ><js:Application>
>> >
>> > <fx:Declarations>
>> > <js:HTTPService id="stocks"/>
>> >
>> > <!-- so we can reference it in our code. we some how bind this
>> >to the hand typed one -->
>> > <js:HTMLElement id="myButton" click="buttonHandler()"/>
>>
>> In regular HTML/JS/CSS, I believe the id does not become a property like
>> it does in MXML. Instead, I think you use document.getElementById. And
>> that should "just work". I suppose we could have the compiler scan
>> embedded HTML for ids and make slots. Any runtime injection of HTML
>> probably "shouldn't" make slots in a sealed-class model like ActionScript
>> has by default, but I suppose you could declare your class as dynamic.
>> Sort of defeats the point of AS though.
>>
>> > </fx:Declarations>
>> >
>> > <fx:Script>
>> > <![CDATA[
>> > public function buttonHandler():void {
>> > alert("hello world");
>> > myButton.label = "My Button";
>> > }
>> > ]]>
>> > </fx:Script>
>> >
>> > <!-- Placed inside body tag -->
>> > <js:HTMLPassthrough>
>> > <![CDATA[
>> > <div>
>> > <button id="myButton"/>
>> > </div>
>> > ]]>
>> > </js:HTMLPassthrough>
>>
>> CDATA shouldn't be needed for XHTML tags. It should be possible just to
>> write:
>>
>> <js:HTMLPassthrough>
>> <div>
>> <button id="myButton"/>
>> </div>
>> </js:HTMLPassthrough>
>>
>> Again, up on the top tag, you have to add:
>> xmlns="http://www.w3.org/1999/xhtml"
>>
>>
>> IMO, the most interesting part wasn't in your example, which is having
>> event handlers in the HTML call out to AS in the rest of your app. Right
>> now, we wouldn't pull out handlers and put them in the instance scope. I
>> think they'd all be in the global scope, which is different than other
>> event handlers in other MXML tags.
>>
>> >
>> >*Use Case 2: *
>> >
>> >I'm a web developer who likes to write my own native HTML Elements in the
>> >body tag but I would like to write it in XML. Is there a way I write type
>> >safe HTML markup? My FlexJS application may look something like this (
>> >http://pastebin.com/e0WybNXc):
>>
>> It should be possible to create a set of components that simply expose the
>> HTMLElements, except for maybe <body> since Application is currently
>> assigned to <body>. UIBase supports the style-as-string syntax already.
>>
>> >
>> ><js:Application>
>> >
>> > <fx:Declarations>
>> > <js:HTTPService id="stocks"/>
>> > </fx:Declarations>
>> >
>> > <fx:Script>
>> > <![CDATA[
>> > public function buttonHandler():void {
>> > var output:String = "hello world";
>> > myButton.label = "hello world";
>> > alert("hello world");
>> > }
>> > ]]>
>> > </fx:Script>
>> >
>> > <!-- these classes mirror their HTML counterparts -->
>> > <js:Body style="width:100%;height:100%">
>> >
>> > <js:Button id="myButton" click="buttonHandler()"/>
>> >
>> > <js:Div style="display:display-inline;
>> bottom:20px:right:20px">
>> > <js:Label text="Made in FlexJS"/>
>> > </js:Div>
>> >
>> > <js:HTMLElement type="input" >text</js:HTMLElement>
>> >
>> > </js:Body>
>> >
>> >
>> ></js:Application>
>> >
>>
>> This example would have all event handlers in the instance scope, but the
>> trade off is that way more code would run to set up the same DOM as
>> setting the innerHTML directly in the first example.
>>
>> IMO, there is no right way. I have no problem with providing people with
>> both options.
>>
>> >
>> >How hard would it be for FlexJS be made to fit these two cases? I think I
>> >know how to do the second case if it's not done already but would have
>> >questions.
>>
>> Shouldn't be that hard. I encourage you to try to make it happen. We'll
>> try to answer questions and fix compiler issues as they come up.
>>
>> -Alex
>>
>>
>
Re: HTML pass through
Posted by jude <fl...@gmail.com>.
First question. This is sort of a third use case. John is a developer at
Mozilla and he doesn't like using <div> or <button> tags (case 1) and
doesn't want to use wrapper components (case 2). He wants to use the fully
qualified class names in MXML with auto complete and syntax checking.
Everything else is the same as the first two cases.
Could he declare the HTML markup in MXML like so:
<js:HTMLDivElement>
<js:HTMLButtonElement click="doSomething()/>
</js:HTMLDivElement>
Then in his event handler he would have type checking:
public function doSomething(event:Event):void {
var myButton:HTMLButtonElement = event.currentTarget as
HTMLButtonElement;
window.alert("hello world. button clicked"); // window being a new app
level property
}
Wasn't there a core HTML swc that we use to get type checking in FlexJS? Or
was that another project?
Currently the compiler converts MXML to AS3 when you use -keep. But what if
that MXML would be converted straight out to markup:
This:
<js:HTMLDivElement>
<js:HTMLButtonElement click="doSomething()/>
</js:HTMLDivElement>
Becomes this:
<div>
<button click="doSomething()"/>
</div>
On Tue, Oct 25, 2016 at 7:29 PM, Alex Harui <ah...@adobe.com> wrote:
> Interesting. Comments inline...
>
> On 10/25/16, 4:26 PM, "jude" <fl...@gmail.com> wrote:
>
> >Alex,
> >
> >I've been encountering two situations that don't quite fit into the FlexJS
> >paradigm but may fit somewhere.
> >
> >*Use Case 1:*
> >I'm a web developer who likes to write all my HTML by hand or I already
> >have a project in HTML and the markup and CSS cannot be changed. But I've
> >heard about FlexJS and AS3 and how it will benefit my project. Is there a
> >way I can place or pull in my own HTML/CSS with FlexJS?
>
> If you want to create a component called HTMLPassthrough, it shouldn't be
> that hard. It should just be a subclass of UIBase with an "html" property
> that sets the innerHTML property on a div. We just recently made it
> possible to put arbitrary HTML as the content of the "html" property of
> any component. You have to use the XHTML namespace for now though.
>
> >
> >My FlexJS finished application may look something like this (
> >http://pastebin.com/ga0Gq8C6):
> >
> ><js:Application>
> >
> > <fx:Declarations>
> > <js:HTTPService id="stocks"/>
> >
> > <!-- so we can reference it in our code. we some how bind this
> >to the hand typed one -->
> > <js:HTMLElement id="myButton" click="buttonHandler()"/>
>
> In regular HTML/JS/CSS, I believe the id does not become a property like
> it does in MXML. Instead, I think you use document.getElementById. And
> that should "just work". I suppose we could have the compiler scan
> embedded HTML for ids and make slots. Any runtime injection of HTML
> probably "shouldn't" make slots in a sealed-class model like ActionScript
> has by default, but I suppose you could declare your class as dynamic.
> Sort of defeats the point of AS though.
>
> > </fx:Declarations>
> >
> > <fx:Script>
> > <![CDATA[
> > public function buttonHandler():void {
> > alert("hello world");
> > myButton.label = "My Button";
> > }
> > ]]>
> > </fx:Script>
> >
> > <!-- Placed inside body tag -->
> > <js:HTMLPassthrough>
> > <![CDATA[
> > <div>
> > <button id="myButton"/>
> > </div>
> > ]]>
> > </js:HTMLPassthrough>
>
> CDATA shouldn't be needed for XHTML tags. It should be possible just to
> write:
>
> <js:HTMLPassthrough>
> <div>
> <button id="myButton"/>
> </div>
> </js:HTMLPassthrough>
>
> Again, up on the top tag, you have to add:
> xmlns="http://www.w3.org/1999/xhtml"
>
>
> IMO, the most interesting part wasn't in your example, which is having
> event handlers in the HTML call out to AS in the rest of your app. Right
> now, we wouldn't pull out handlers and put them in the instance scope. I
> think they'd all be in the global scope, which is different than other
> event handlers in other MXML tags.
>
> >
> >*Use Case 2: *
> >
> >I'm a web developer who likes to write my own native HTML Elements in the
> >body tag but I would like to write it in XML. Is there a way I write type
> >safe HTML markup? My FlexJS application may look something like this (
> >http://pastebin.com/e0WybNXc):
>
> It should be possible to create a set of components that simply expose the
> HTMLElements, except for maybe <body> since Application is currently
> assigned to <body>. UIBase supports the style-as-string syntax already.
>
> >
> ><js:Application>
> >
> > <fx:Declarations>
> > <js:HTTPService id="stocks"/>
> > </fx:Declarations>
> >
> > <fx:Script>
> > <![CDATA[
> > public function buttonHandler():void {
> > var output:String = "hello world";
> > myButton.label = "hello world";
> > alert("hello world");
> > }
> > ]]>
> > </fx:Script>
> >
> > <!-- these classes mirror their HTML counterparts -->
> > <js:Body style="width:100%;height:100%">
> >
> > <js:Button id="myButton" click="buttonHandler()"/>
> >
> > <js:Div style="display:display-inline;
> bottom:20px:right:20px">
> > <js:Label text="Made in FlexJS"/>
> > </js:Div>
> >
> > <js:HTMLElement type="input" >text</js:HTMLElement>
> >
> > </js:Body>
> >
> >
> ></js:Application>
> >
>
> This example would have all event handlers in the instance scope, but the
> trade off is that way more code would run to set up the same DOM as
> setting the innerHTML directly in the first example.
>
> IMO, there is no right way. I have no problem with providing people with
> both options.
>
> >
> >How hard would it be for FlexJS be made to fit these two cases? I think I
> >know how to do the second case if it's not done already but would have
> >questions.
>
> Shouldn't be that hard. I encourage you to try to make it happen. We'll
> try to answer questions and fix compiler issues as they come up.
>
> -Alex
>
>
Re: HTML pass through
Posted by Alex Harui <ah...@adobe.com>.
Interesting. Comments inline...
On 10/25/16, 4:26 PM, "jude" <fl...@gmail.com> wrote:
>Alex,
>
>I've been encountering two situations that don't quite fit into the FlexJS
>paradigm but may fit somewhere.
>
>*Use Case 1:*
>I'm a web developer who likes to write all my HTML by hand or I already
>have a project in HTML and the markup and CSS cannot be changed. But I've
>heard about FlexJS and AS3 and how it will benefit my project. Is there a
>way I can place or pull in my own HTML/CSS with FlexJS?
If you want to create a component called HTMLPassthrough, it shouldn't be
that hard. It should just be a subclass of UIBase with an "html" property
that sets the innerHTML property on a div. We just recently made it
possible to put arbitrary HTML as the content of the "html" property of
any component. You have to use the XHTML namespace for now though.
>
>My FlexJS finished application may look something like this (
>http://pastebin.com/ga0Gq8C6):
>
><js:Application>
>
> <fx:Declarations>
> <js:HTTPService id="stocks"/>
>
> <!-- so we can reference it in our code. we some how bind this
>to the hand typed one -->
> <js:HTMLElement id="myButton" click="buttonHandler()"/>
In regular HTML/JS/CSS, I believe the id does not become a property like
it does in MXML. Instead, I think you use document.getElementById. And
that should "just work". I suppose we could have the compiler scan
embedded HTML for ids and make slots. Any runtime injection of HTML
probably "shouldn't" make slots in a sealed-class model like ActionScript
has by default, but I suppose you could declare your class as dynamic.
Sort of defeats the point of AS though.
> </fx:Declarations>
>
> <fx:Script>
> <![CDATA[
> public function buttonHandler():void {
> alert("hello world");
> myButton.label = "My Button";
> }
> ]]>
> </fx:Script>
>
> <!-- Placed inside body tag -->
> <js:HTMLPassthrough>
> <![CDATA[
> <div>
> <button id="myButton"/>
> </div>
> ]]>
> </js:HTMLPassthrough>
CDATA shouldn't be needed for XHTML tags. It should be possible just to
write:
<js:HTMLPassthrough>
<div>
<button id="myButton"/>
</div>
</js:HTMLPassthrough>
Again, up on the top tag, you have to add:
xmlns="http://www.w3.org/1999/xhtml"
IMO, the most interesting part wasn't in your example, which is having
event handlers in the HTML call out to AS in the rest of your app. Right
now, we wouldn't pull out handlers and put them in the instance scope. I
think they'd all be in the global scope, which is different than other
event handlers in other MXML tags.
>
>*Use Case 2: *
>
>I'm a web developer who likes to write my own native HTML Elements in the
>body tag but I would like to write it in XML. Is there a way I write type
>safe HTML markup? My FlexJS application may look something like this (
>http://pastebin.com/e0WybNXc):
It should be possible to create a set of components that simply expose the
HTMLElements, except for maybe <body> since Application is currently
assigned to <body>. UIBase supports the style-as-string syntax already.
>
><js:Application>
>
> <fx:Declarations>
> <js:HTTPService id="stocks"/>
> </fx:Declarations>
>
> <fx:Script>
> <![CDATA[
> public function buttonHandler():void {
> var output:String = "hello world";
> myButton.label = "hello world";
> alert("hello world");
> }
> ]]>
> </fx:Script>
>
> <!-- these classes mirror their HTML counterparts -->
> <js:Body style="width:100%;height:100%">
>
> <js:Button id="myButton" click="buttonHandler()"/>
>
> <js:Div style="display:display-inline;bottom:20px:right:20px">
> <js:Label text="Made in FlexJS"/>
> </js:Div>
>
> <js:HTMLElement type="input" >text</js:HTMLElement>
>
> </js:Body>
>
>
></js:Application>
>
This example would have all event handlers in the instance scope, but the
trade off is that way more code would run to set up the same DOM as
setting the innerHTML directly in the first example.
IMO, there is no right way. I have no problem with providing people with
both options.
>
>How hard would it be for FlexJS be made to fit these two cases? I think I
>know how to do the second case if it's not done already but would have
>questions.
Shouldn't be that hard. I encourage you to try to make it happen. We'll
try to answer questions and fix compiler issues as they come up.
-Alex