flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <aha...@adobe.com>
Subject Re: HTML pass through
Date Wed, 26 Oct 2016 00:29:59 GMT
Interesting.  Comments inline...

On 10/25/16, 4:26 PM, "jude" <flexcapacitor@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

Mime
View raw message