You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Harbs <ha...@gmail.com> on 2017/03/26 10:36:05 UTC
[FlexJS] Struggling with custom HTML
I want to use a Topcoat checkbox in an app. That requires some HTML like this:
<label class="topcoat-checkbox">
<input type="checkbox">
<div class="topcoat-checkbox__checkmark"></div>
Checkbox Label
</label>
I cannot think of a normal way of including something like this in my app without creating a whole new framework component. Conditional compiles do not seem to work. I don’t know why. I also considered using an InnerHTML bead, but that does not allow handling the checkbox clicks.
The fact that FlexJS abstracts the HTML and JS most of the time is great, but I think there needs to be an easy way to use bog-standard HTML when the need comes up.
Thoughts?
Harbs
Re: [FlexJS] Struggling with custom HTML
Posted by Alex Harui <ah...@adobe.com>.
On 3/27/17, 12:03 AM, "Harbs" <ha...@gmail.com> wrote:
>
>My specific problem was caused by the CheckBox component. The way
>CheckBox was made, it’s not styleable. Styleable checkboxes require CSS
>which hides the default checkbox and creates a pseudo-element which is
>styled by CSS to have the desired look.
>
>I’m working on a panel for InDesign. Generally I’m using Topcoat CSS
>because that matches the general styling of InDesign components pretty
>closely. This works for most FlexJS components pretty well. Because
>FlexJS checkboxes are not styleable, checkboxes are not usable with the
>Topcoat CSS. The CSS hides the default checkbox, but the Topcoat one does
>not appear because the expected HTML structure is not there.
>
>I am considering changing Checkbox to have the expected structure or
>creating a new “CSSCheckBox” component which has the structure. The
>problem I see that there seems to be more than one method of creating CSS
>styled checkbox.
>
>Ultimately, I don’t think using HTML checkboxes is the “FlexJS” way of
>making checkboxes. That’s because any styling of checkboxes are hacks.
>I’d really like to see our skinning story improve. Flex 3 and Flex 4 had
>very good methods for skinning components, and I wish we had a better
>platform agnostic skinning story for FlexJS.
In the Flat.swc, there is a RadioButton that has a different HTML
structure that the Flat theme expects. I don't know what we did for MDL,
but I'm pretty sure some of those components have different HTML
structures than the Basic versions. IMO, if you want to support TopCoat,
start a TopCoat.swc and get the HTML structure you want in there. Basic's
CheckBox is meant to be just a thin wrapper over the single HTMLElement.
Someday, I hope the Flat set grows into the Bootstrap set and can handle
all Bootstrap themes.
Again, we are in the business of encapsulating patterns. There is a cost
to make a one-size-fits-all or in the case,
one-checkbox-that-can-be-styled-any-way-you-want. We should eventually
get around to creating such a component set for those who need it, but I
think the "optimized" versions will be specific to their main themes.
IOW, it will be more efficient to use the MDL set for MDL than have an MDL
skin for the skinnable set.
So, in my vision of the future there will be a Checkbox in Basic,
Flat/Bootstrap, MDL, Topcoat, Jquery, CreateJS and others.
Of course, I could be wrong.
-Alex
Re: [FlexJS] Struggling with custom HTML
Posted by Harbs <ha...@gmail.com>.
> On Mar 27, 2017, at 7:03 AM, Alex Harui <ah...@adobe.com> wrote:
>
>
>
> On 3/26/17, 5:59 AM, "Harbs" <ha...@gmail.com> wrote:
>
>> I have been successful using compc with conditional compiles outside the
>> framework, but I was not successful using mxmlc.
>
> The "dual" branch should have better support for conditional compilation
> in the application source.
Good to know. I will have to try that.
> But I'd like to understand which problem you want to solve. As you
> mentioned, the snippet you provided did not have any code in it and should
> be ok to use as innerHTML. But as soon as you add an event handler, the
> questions start to arise about the scope of the code. Our compilers are
> probably not ready to be JS compilers and if you want to access the code
> from your AS code, I don't think we've defined how that should work.
>
> There are other options where you promise that the AS code will not touch
> the JS code. That's closer to what externs/typedefs are.
My specific problem was caused by the CheckBox component. The way CheckBox was made, it’s not styleable. Styleable checkboxes require CSS which hides the default checkbox and creates a pseudo-element which is styled by CSS to have the desired look.
I’m working on a panel for InDesign. Generally I’m using Topcoat CSS because that matches the general styling of InDesign components pretty closely. This works for most FlexJS components pretty well. Because FlexJS checkboxes are not styleable, checkboxes are not usable with the Topcoat CSS. The CSS hides the default checkbox, but the Topcoat one does not appear because the expected HTML structure is not there.
I am considering changing Checkbox to have the expected structure or creating a new “CSSCheckBox” component which has the structure. The problem I see that there seems to be more than one method of creating CSS styled checkbox.
Ultimately, I don’t think using HTML checkboxes is the “FlexJS” way of making checkboxes. That’s because any styling of checkboxes are hacks. I’d really like to see our skinning story improve. Flex 3 and Flex 4 had very good methods for skinning components, and I wish we had a better platform agnostic skinning story for FlexJS.
> You should be able to create library projects just like you did with
> regular Flex and thus create SWCs with components that aren't "framework"
> components. I don't think we've had anybody actually try that, but I
> would think we want that to work.
Yes. I’ve already done this, and it works.
> Thoughts?
> -Alex
>
>>
>>> On Mar 26, 2017, at 3:20 PM, Peter Ent <pe...@adobe.com> wrote:
>>>
>>> The way it stands now, you do need to create a new component in the
>>> framework somewhere. In the long run, developers will want to make their
>>> own component sets that make use of conditional compilation, so now
>>> would
>>> be a good time to come up with that. You should be able to do this
>>> outside
>>> of the framework, IMO.
>>>
>>> You could even imagine a company that has a bunch of JavaScript
>>> "components" that they'd like to use. We have the extern mechanism, and
>>> maybe that's appropriate when there is a lot of JavaScript to reference,
>>> but perhaps a developer will just want to copy a component's JavaScript
>>> code into their project - even temporarily - and I think we should be
>>> able
>>> to provide for that.
>>>
>>> ‹peter
>>>
>>> On 3/26/17, 6:36 AM, "Harbs" <ha...@gmail.com> wrote:
>>>
>>>> I want to use a Topcoat checkbox in an app. That requires some HTML
>>>> like
>>>> this:
>>>>
>>>> <label class="topcoat-checkbox">
>>>> <input type="checkbox">
>>>> <div class="topcoat-checkbox__checkmark"></div>
>>>> Checkbox Label
>>>> </label>
>>>>
>>>> I cannot think of a normal way of including something like this in my
>>>> app
>>>> without creating a whole new framework component. Conditional compiles
>>>> do
>>>> not seem to work. I don¹t know why. I also considered using an
>>>> InnerHTML
>>>> bead, but that does not allow handling the checkbox clicks.
>>>>
>>>> The fact that FlexJS abstracts the HTML and JS most of the time is
>>>> great,
>>>> but I think there needs to be an easy way to use bog-standard HTML when
>>>> the need comes up.
>>>>
>>>> Thoughts?
>>>>
>>>> Harbs
>>>
>>
>
Re: [FlexJS] Struggling with custom HTML
Posted by Alex Harui <ah...@adobe.com>.
On 3/26/17, 5:59 AM, "Harbs" <ha...@gmail.com> wrote:
>I have been successful using compc with conditional compiles outside the
>framework, but I was not successful using mxmlc.
The "dual" branch should have better support for conditional compilation
in the application source.
But I'd like to understand which problem you want to solve. As you
mentioned, the snippet you provided did not have any code in it and should
be ok to use as innerHTML. But as soon as you add an event handler, the
questions start to arise about the scope of the code. Our compilers are
probably not ready to be JS compilers and if you want to access the code
from your AS code, I don't think we've defined how that should work.
There are other options where you promise that the AS code will not touch
the JS code. That's closer to what externs/typedefs are.
You should be able to create library projects just like you did with
regular Flex and thus create SWCs with components that aren't "framework"
components. I don't think we've had anybody actually try that, but I
would think we want that to work.
Thoughts?
-Alex
>
>> On Mar 26, 2017, at 3:20 PM, Peter Ent <pe...@adobe.com> wrote:
>>
>> The way it stands now, you do need to create a new component in the
>> framework somewhere. In the long run, developers will want to make their
>> own component sets that make use of conditional compilation, so now
>>would
>> be a good time to come up with that. You should be able to do this
>>outside
>> of the framework, IMO.
>>
>> You could even imagine a company that has a bunch of JavaScript
>> "components" that they'd like to use. We have the extern mechanism, and
>> maybe that's appropriate when there is a lot of JavaScript to reference,
>> but perhaps a developer will just want to copy a component's JavaScript
>> code into their project - even temporarily - and I think we should be
>>able
>> to provide for that.
>>
>> ‹peter
>>
>> On 3/26/17, 6:36 AM, "Harbs" <ha...@gmail.com> wrote:
>>
>>> I want to use a Topcoat checkbox in an app. That requires some HTML
>>>like
>>> this:
>>>
>>> <label class="topcoat-checkbox">
>>> <input type="checkbox">
>>> <div class="topcoat-checkbox__checkmark"></div>
>>> Checkbox Label
>>> </label>
>>>
>>> I cannot think of a normal way of including something like this in my
>>>app
>>> without creating a whole new framework component. Conditional compiles
>>>do
>>> not seem to work. I don¹t know why. I also considered using an
>>>InnerHTML
>>> bead, but that does not allow handling the checkbox clicks.
>>>
>>> The fact that FlexJS abstracts the HTML and JS most of the time is
>>>great,
>>> but I think there needs to be an easy way to use bog-standard HTML when
>>> the need comes up.
>>>
>>> Thoughts?
>>>
>>> Harbs
>>
>
Re: [FlexJS] Struggling with custom HTML
Posted by Harbs <ha...@gmail.com>.
I have been successful using compc with conditional compiles outside the framework, but I was not successful using mxmlc.
> On Mar 26, 2017, at 3:20 PM, Peter Ent <pe...@adobe.com> wrote:
>
> The way it stands now, you do need to create a new component in the
> framework somewhere. In the long run, developers will want to make their
> own component sets that make use of conditional compilation, so now would
> be a good time to come up with that. You should be able to do this outside
> of the framework, IMO.
>
> You could even imagine a company that has a bunch of JavaScript
> "components" that they'd like to use. We have the extern mechanism, and
> maybe that's appropriate when there is a lot of JavaScript to reference,
> but perhaps a developer will just want to copy a component's JavaScript
> code into their project - even temporarily - and I think we should be able
> to provide for that.
>
> ‹peter
>
> On 3/26/17, 6:36 AM, "Harbs" <ha...@gmail.com> wrote:
>
>> I want to use a Topcoat checkbox in an app. That requires some HTML like
>> this:
>>
>> <label class="topcoat-checkbox">
>> <input type="checkbox">
>> <div class="topcoat-checkbox__checkmark"></div>
>> Checkbox Label
>> </label>
>>
>> I cannot think of a normal way of including something like this in my app
>> without creating a whole new framework component. Conditional compiles do
>> not seem to work. I don¹t know why. I also considered using an InnerHTML
>> bead, but that does not allow handling the checkbox clicks.
>>
>> The fact that FlexJS abstracts the HTML and JS most of the time is great,
>> but I think there needs to be an easy way to use bog-standard HTML when
>> the need comes up.
>>
>> Thoughts?
>>
>> Harbs
>
Re: [FlexJS] Struggling with custom HTML
Posted by Peter Ent <pe...@adobe.com>.
The way it stands now, you do need to create a new component in the
framework somewhere. In the long run, developers will want to make their
own component sets that make use of conditional compilation, so now would
be a good time to come up with that. You should be able to do this outside
of the framework, IMO.
You could even imagine a company that has a bunch of JavaScript
"components" that they'd like to use. We have the extern mechanism, and
maybe that's appropriate when there is a lot of JavaScript to reference,
but perhaps a developer will just want to copy a component's JavaScript
code into their project - even temporarily - and I think we should be able
to provide for that.
‹peter
On 3/26/17, 6:36 AM, "Harbs" <ha...@gmail.com> wrote:
>I want to use a Topcoat checkbox in an app. That requires some HTML like
>this:
>
><label class="topcoat-checkbox">
> <input type="checkbox">
> <div class="topcoat-checkbox__checkmark"></div>
> Checkbox Label
></label>
>
>I cannot think of a normal way of including something like this in my app
>without creating a whole new framework component. Conditional compiles do
>not seem to work. I don¹t know why. I also considered using an InnerHTML
>bead, but that does not allow handling the checkbox clicks.
>
>The fact that FlexJS abstracts the HTML and JS most of the time is great,
>but I think there needs to be an easy way to use bog-standard HTML when
>the need comes up.
>
>Thoughts?
>
>Harbs