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 <flexcapaci...@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 <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
>>
>>
>
