On Thursday, October 13, 2016 at 12:23:30 PM UTC+1, Rupert Smith wrote:
>
> Which is ok, but what I really want is for the listbox user to be able to 
> display more than just a string in the listbox, along these lines:
>
> root : Model -> Html Msg
> root model =
>     listbox [ attrForSelect "value", onSelectedChanged SelectChanged ]
>         [ listItem  [ value "1" ] [ text "one" ],
>           listItem  [ value "2" ] [ text "two" ],
>           ...
>         ]
>

I have been having a little experiment with adding events into the UI 
component.

On the consumer side I did this:

            listbox [ items model.roleLookup, onSelectedChanged 
SelectChanged ]
                [ Button.render Mdl
                    [ 0 ]
                    model.mdl
                    [ Button.onClick SomeAction
                    ]
                    [ text "test" ]
                ]
            ] 

When I click the button, the event is received by the consumer application.

On the component side, I did this:

        woodItem
            styleAttrs
            [ text value
            , (Button.render Mdl
                [ 5 ]
                model.mdl
                [ Button.onClick (Select "test") ]
                [ text "test" ]
              )
            ]

Clicking this button triggers the Select "test" event on the consumer Elm 
program. So now I have a UI element owned by the consuming application, 
showing a list of items rendered by the component application. Within it 
there is a button which triggers an event on the consumer, and buttons 
which trigger events on the component!

If I would like the consumer of a component to be able to custom render 
within the component, allowing the consumer to build whatever <content> it 
wants inside the component would be convenient. However, I could still have 
the component render custom content, by simply creating a little DSL for 
building HTML, and passing this down as part of the component config, and 
having the component render it.

So between those two options, I think I can do components that are very 
customizeable from the consumer of the components perspective. But I have 
to chose which side it would be more useful to let the consumer define 
events on?

For example, if the component were a data table, and there was a column 
with 'action' button in it, for example, to take you to a screen to edit an 
item from the table, it makes sense for the consumer to be able to hook 
into the event.

If the component were the video example, with the consumer defining a 
custom control bar, it would be useful for the DSL to allow the consumer to 
say that a button hooks up to the components 'pause' action.

Be nice if I could do both, but I can't see a way to doing that yet.

Also, for the pause action, I could set a property instead of directly 
triggering an event within the component. Then the consumer could hook up 
to the pause button and set property playState = "paused" on the component, 
which will in turn get picked up by the component.

On that basis, I guess it is more useful to allow the consumer of a 
component to render customer <content> within it using the Html library and 
Html.Events.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to