Looking for subcomponent example to learn from

85 views
Skip to first unread message

Brian Marick

unread,
Oct 22, 2016, 6:43:43 PM10/22/16
to elm-d...@googlegroups.com
My app currently has three logically/visually distinct components:


The IV drip apparatus (upper left) is something that will be used in more than one page. I’ve been trying to find a way to make it a component that I can reuse, and I’ve been having a good deal of trouble (mostly, I’m embarrassed to confess, due to the type checker slapping me down). I’d much appreciate pointers to projects I can mine for ideas, patterns, templates. 

Nick H

unread,
Oct 22, 2016, 8:56:57 PM10/22/16
to elm-d...@googlegroups.com
Which of these elements can fire events? Is the text at the bottom the only place where the user can interact?

If so, then the graphical elements up top can just be functions that take whatever data is needed to draw them.

ivDrip : IvData -> Html a

clock : Time -> Html a



--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Brian Marick

unread,
Oct 23, 2016, 2:57:35 PM10/23/16
to elm-d...@googlegroups.com

On Oct 22, 2016, at 7:56 PM, Nick H <falling...@gmail.com> wrote:

Which of these elements can fire events? Is the text at the bottom the only place where the user can interact?

If so, then the graphical elements up top can just be functions that take whatever data is needed to draw them.


All of them. The two graphical events are animated using elm-style-animation, and some of the animated effects generate `Cmd Msg`. For example, if the bag runs out of fluid, it generates a message that will cause the droplets to stop falling.

Mark Hamburg

unread,
Oct 23, 2016, 3:44:35 PM10/23/16
to elm-d...@googlegroups.com
You may want to think in terms of "shared" data — e.g., the time or the fluid level — and "private" data — e.g., the animation data — and possibly some additional configuration data that doesn't change. Then you end up with type signatures like the following:

view : Config -> SharedData -> PrivateData -> Html Msg

update : Config -> Msg -> SharedData -> PrivateData -> (SharedData, PrivateData, Cmd Msg)

And feel free to drop parameters or results that aren't needed since type checking will catch things if you later change your mind.

Mark

--

Nick H

unread,
Oct 23, 2016, 7:53:52 PM10/23/16
to elm-d...@googlegroups.com
Hmm, I haven't used that library, so I won't be of much help.

On Sun, Oct 23, 2016 at 11:57 AM, Brian Marick <mar...@roundingpegs.com> wrote:

--
Reply all
Reply to author
Forward
0 new messages