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 <aha...@adobe.com> wrote:
> Interesting. Comments inline...
>
> On 10/25/16, 4:26 PM, "jude" <flexcapaci...@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
>
>
