flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Harbs <harbs.li...@gmail.com>
Subject Re: [FlexJS] Struggling with custom HTML
Date Mon, 27 Mar 2017 07:03:14 GMT

> On Mar 27, 2017, at 7:03 AM, Alex Harui <aharui@adobe.com> wrote:
> On 3/26/17, 5:59 AM, "Harbs" <harbs.lists@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 <pent@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" <harbs.lists@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

View raw message