Custom input fields

[jmatsushita]

I'm about to give it a shot, but some insights on how to proceed would be great! I'll report back on my progress in this issue.

Here's a vague roadmap of what I want to try:

1. to get me started, a number slider with the number displayed on the side of the slider.
2. maybe I'll try a number slider which can controlled both by a slider and a text input.
3. ~then creating field groups to have some visual cues about which fields go with others. I guess that would be a HOC.~ fieldset already does this.
4. allowing fields to be hidden (also a HOC)

[jmatsushita]

First thought is that without CreateUI and CreateComponent exported it might be tricky to do the first 2...

[jmatsushita]

Ha... Well number 3 already exists with fieldset. Number 2 might be doable with some composition of int and intSlider? Number 4 could be done with the smolder backend and css I guess. Number 1 could be also faked with putting an output next to the control.

Maybe something that would make customising input fields easier generally is to allow manually assigning IDs and classes?

So there are workarounds, and apart from forking I don't know how I would change the components themselves.

[jmatsushita]

Oh right... I think I need to use flareWith and runFlareWith to extend an arbitrary DOM component? I'll give that a try.

[jmatsushita]

Documentation feedback: Example 14 on http://sharkdp.github.io/purescript-flare/ is not the most straightforward intro to runFlareWith :/

[jmatsushita]

Looks like runFlareWith is a dead end. As far as I understand it's to do customised outputs. So it probably would do the trick for 1 and 4, but for 2 maybe there's also a limit in what applicative can do for this?

[sharkdp]

Thanks for looking into this! Concerning your points 1 and 2, do you refer to issue #17 ?

I don't think this can be solved on a high level, using only the public Flare API (the reason is that Flares are just Applicatives and not Monads. Therefore you cannot refer to the value of an input field inside another input component). I'm afraid this has to be solved via FFI Code, just like the other components.

[jmatsushita]

Hi! I'll be sharing the result of the project soon, so this could be another example of purescript-flare usage :)

Concerning your points 1 and 2, do you refer to issue #17 ?

That'd be really close indeed. Although maybe I need something more simple which would be a way to (or instructions on how to) create a simple custom component. Someting like a numberSlider with an added region on the side, so basically a slider with (non-editable) values.

So it would be great to know how I would go the way of the FFI code without having to copy paste a whole lot of boilerplate from the existing code (like CreateUI and CreateComponent). I've never used FFI code yet (I read the doc a while back) so I might be talking nonsense. :)

With regards to the Flare API, although this might be a big change, wouldn't it be possible with Applicative to wrap a flare component in a way that you would specify placeholders for controls inside the output? It would work only with runFlareHTML and might require to have control identifiers.

This would allow to build a slider with a (non-editable) value with something like this:

sliderWithValue value controlSliderPlaceholder = H.div $ do
    text $ value
    div $ controlSliderPlaceholder

ui placeholder = sliderWithValue <$> numberSlider "Value" 1.0 5.0 0.1 1.0
                                 <*> placeholder

main = runFlareWithPlaceholder "output" ui -- no "controls" as they would be injected in the ui via placeholders. 

Of course I have no idea about how to do this or if it's even possible :)

[sharkdp]

Someting like a numberSlider with an added region on the side, so basically a slider with (non-editable) values.

If the value is non-editable, that should be possible, I believe.

So it would be great to know how I would go the way of the FFI code without having to copy paste a whole lot of boilerplate from the existing code (like CreateUI and CreateComponent). I've never used FFI code yet (I read the doc a while back) so I might be talking nonsense. :)

Do you want to create such a component user-side? Or do you want to send a PR to add such an UI component to the library?

As for the former, I'm afraid Flare is rather inflexible in this respect (currently, at least).

With regards to the Flare API, although this might be a big change, wouldn't it be possible with Applicative to wrap a flare component in a way that you would specify placeholders for controls inside the output?

I think this could work, yes. You are on the right track with #23.

[sharkdp]

Closing this as it seems outdated.