Dynamically setting the content of a LayoutPanel in OOUI

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Dynamically setting the content of a LayoutPanel in OOUI

Huji Lee
In the script I am working on,[1] I have a PanelLayout that is defined like
this:

        this.previewResult = new OO.ui.PanelLayout({
          expanded: true,
          padded: true,
          framed: true,
          $content: ''
        });

Later on, I would like to modify the content of this; specifically, I want
to use MW API to retrieve the parsed output of some short wikitext. For
now, however, I just want to try out the concept by replacing the content
with a simple <p> tag.

Evidently, this line of code does not do the trick:

        dialog.previewResult.$content = '<p>Something</p>';


That is, it does update the value of the $content property for the OOUI
object, but that does not result in the object getting re-rendered. None of
the setter functions for OO.ui.PanelLayout seem to do the trick either.

What is the correct way to do this? If PanelLayout is not the right object
type for this purpose, what is?
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Dynamically setting the content of a LayoutPanel in OOUI

Alex Monk
I haven't dealt with OOUI for a couple of years but maybe you could pass a
jQuery object to the $content parameter, store it yourself, then modify
that later?

On Sun, 24 Mar 2019 at 14:14, Huji Lee <[hidden email]> wrote:

> In the script I am working on,[1] I have a PanelLayout that is defined like
> this:
>
>         this.previewResult = new OO.ui.PanelLayout({
>           expanded: true,
>           padded: true,
>           framed: true,
>           $content: ''
>         });
>
> Later on, I would like to modify the content of this; specifically, I want
> to use MW API to retrieve the parsed output of some short wikitext. For
> now, however, I just want to try out the concept by replacing the content
> with a simple <p> tag.
>
> Evidently, this line of code does not do the trick:
>
>         dialog.previewResult.$content = '<p>Something</p>';
>
>
> That is, it does update the value of the $content property for the OOUI
> object, but that does not result in the object getting re-rendered. None of
> the setter functions for OO.ui.PanelLayout seem to do the trick either.
>
> What is the correct way to do this? If PanelLayout is not the right object
> type for this purpose, what is?
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Dynamically setting the content of a LayoutPanel in OOUI

Moriel Schottlender-2
You absolutely can attach a jQuery element into your $content parameter.
That will work, and probably give you what you want.

However, one of the more powerful things about OOUI is its ability to
encapsulate this type of work. In this case, what I would recommend, is
creating your own custom widget that manages itself.

I imagine that your $content changes, but it probably has similar structure
through its changes. For example, it might have an error box at the top
that only appears when necessary, or it can have some regular inputs
alongside inputs that maybe change, and it probably has some area where you
display a text or an image or anything else.

You could create all of those in jQuery, but OOUI also offers you an
ability to encapuslate this better.

I tried to explain this in an email and got a bit long, so I created a
gist: https://gist.github.com/mooeypoo/a9082a5a5828dcec53be28ed3c538e22

The main idea I am trying to show is how you can create your own widget
that extends OO.ui.Widget, construct its base structure in the constructor
with either other OOUI widgets or with some custom jQuery elements, add
classes and event listeners, and then manage the state of this widget when
some other code calls its methods.

I tried to also show how you can have your custom widget emit some custom
event so that other pieces of your code (say, the dialog in general?) can
listen to some event (I used "success" but you can define whatever you
want) and respond, like change to another panel, or close the dialog, or
enable some other action.

I hope the gist helps, I tried to make it self explanatory, but please let
me know if you encounter any issues with it (I wrote it relatively quickly,
I hope there aren't any bugs ;)

Moriel

On Sun, Mar 24, 2019 at 7:19 AM Alex Monk <[hidden email]> wrote:

> I haven't dealt with OOUI for a couple of years but maybe you could pass a
> jQuery object to the $content parameter, store it yourself, then modify
> that later?
>
> On Sun, 24 Mar 2019 at 14:14, Huji Lee <[hidden email]> wrote:
>
> > In the script I am working on,[1] I have a PanelLayout that is defined
> like
> > this:
> >
> >         this.previewResult = new OO.ui.PanelLayout({
> >           expanded: true,
> >           padded: true,
> >           framed: true,
> >           $content: ''
> >         });
> >
> > Later on, I would like to modify the content of this; specifically, I
> want
> > to use MW API to retrieve the parsed output of some short wikitext. For
> > now, however, I just want to try out the concept by replacing the content
> > with a simple <p> tag.
> >
> > Evidently, this line of code does not do the trick:
> >
> >         dialog.previewResult.$content = '<p>Something</p>';
> >
> >
> > That is, it does update the value of the $content property for the OOUI
> > object, but that does not result in the object getting re-rendered. None
> of
> > the setter functions for OO.ui.PanelLayout seem to do the trick either.
> >
> > What is the correct way to do this? If PanelLayout is not the right
> object
> > type for this purpose, what is?
> > _______________________________________________
> > Wikitech-l mailing list
> > [hidden email]
> > https://lists.wikimedia.org/mailman/listinfo/wikitech-l
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l



--
Moriel Schottlender (she/her)
Senior Software Engineer
Tech Lead | Community Tech and Anti Harassment Tools
Wikimedia Foundation https://wikimediafoundation.org/
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Dynamically setting the content of a LayoutPanel in OOUI

Huji Lee
Thanks a lot! The gist certainly helped a lot.

I think the key line in your code, and what Alex was referring to, was this
one:     this.$content.empty().append( $content );

But I like the idea of formalizing the process into an object. I will
likely take a slightly different approach, in which I will create a class
that inherits PanelLayout but has the additional setContent() method you
had in your gist.



On Sun, Mar 24, 2019 at 3:01 PM Moriel Schottlender <
[hidden email]> wrote:

> You absolutely can attach a jQuery element into your $content parameter.
> That will work, and probably give you what you want.
>
> However, one of the more powerful things about OOUI is its ability to
> encapsulate this type of work. In this case, what I would recommend, is
> creating your own custom widget that manages itself.
>
> I imagine that your $content changes, but it probably has similar structure
> through its changes. For example, it might have an error box at the top
> that only appears when necessary, or it can have some regular inputs
> alongside inputs that maybe change, and it probably has some area where you
> display a text or an image or anything else.
>
> You could create all of those in jQuery, but OOUI also offers you an
> ability to encapuslate this better.
>
> I tried to explain this in an email and got a bit long, so I created a
> gist: https://gist.github.com/mooeypoo/a9082a5a5828dcec53be28ed3c538e22
>
> The main idea I am trying to show is how you can create your own widget
> that extends OO.ui.Widget, construct its base structure in the constructor
> with either other OOUI widgets or with some custom jQuery elements, add
> classes and event listeners, and then manage the state of this widget when
> some other code calls its methods.
>
> I tried to also show how you can have your custom widget emit some custom
> event so that other pieces of your code (say, the dialog in general?) can
> listen to some event (I used "success" but you can define whatever you
> want) and respond, like change to another panel, or close the dialog, or
> enable some other action.
>
> I hope the gist helps, I tried to make it self explanatory, but please let
> me know if you encounter any issues with it (I wrote it relatively quickly,
> I hope there aren't any bugs ;)
>
> Moriel
>
> On Sun, Mar 24, 2019 at 7:19 AM Alex Monk <[hidden email]> wrote:
>
> > I haven't dealt with OOUI for a couple of years but maybe you could pass
> a
> > jQuery object to the $content parameter, store it yourself, then modify
> > that later?
> >
> > On Sun, 24 Mar 2019 at 14:14, Huji Lee <[hidden email]> wrote:
> >
> > > In the script I am working on,[1] I have a PanelLayout that is defined
> > like
> > > this:
> > >
> > >         this.previewResult = new OO.ui.PanelLayout({
> > >           expanded: true,
> > >           padded: true,
> > >           framed: true,
> > >           $content: ''
> > >         });
> > >
> > > Later on, I would like to modify the content of this; specifically, I
> > want
> > > to use MW API to retrieve the parsed output of some short wikitext. For
> > > now, however, I just want to try out the concept by replacing the
> content
> > > with a simple <p> tag.
> > >
> > > Evidently, this line of code does not do the trick:
> > >
> > >         dialog.previewResult.$content = '<p>Something</p>';
> > >
> > >
> > > That is, it does update the value of the $content property for the OOUI
> > > object, but that does not result in the object getting re-rendered.
> None
> > of
> > > the setter functions for OO.ui.PanelLayout seem to do the trick either.
> > >
> > > What is the correct way to do this? If PanelLayout is not the right
> > object
> > > type for this purpose, what is?
> > > _______________________________________________
> > > Wikitech-l mailing list
> > > [hidden email]
> > > https://lists.wikimedia.org/mailman/listinfo/wikitech-l
> > _______________________________________________
> > Wikitech-l mailing list
> > [hidden email]
> > https://lists.wikimedia.org/mailman/listinfo/wikitech-l
>
>
>
> --
> Moriel Schottlender (she/her)
> Senior Software Engineer
> Tech Lead | Community Tech and Anti Harassment Tools
> Wikimedia Foundation https://wikimediafoundation.org/
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Dynamically setting the content of a LayoutPanel in OOUI

Huji Lee
I watched your talk, [1] which happened 3 days after this exchange, and I
found it very informative! Posting here so more people can see it along
with the same thread.

[1] https://www.youtube.com/watch?v=T_CUN2o4faw

On Sun, Mar 24, 2019 at 10:11 PM Huji Lee <[hidden email]> wrote:

> Thanks a lot! The gist certainly helped a lot.
>
> I think the key line in your code, and what Alex was referring to, was
> this one:     this.$content.empty().append( $content );
>
> But I like the idea of formalizing the process into an object. I will
> likely take a slightly different approach, in which I will create a class
> that inherits PanelLayout but has the additional setContent() method you
> had in your gist.
>
>
>
> On Sun, Mar 24, 2019 at 3:01 PM Moriel Schottlender <
> [hidden email]> wrote:
>
>> You absolutely can attach a jQuery element into your $content parameter.
>> That will work, and probably give you what you want.
>>
>> However, one of the more powerful things about OOUI is its ability to
>> encapsulate this type of work. In this case, what I would recommend, is
>> creating your own custom widget that manages itself.
>>
>> I imagine that your $content changes, but it probably has similar
>> structure
>> through its changes. For example, it might have an error box at the top
>> that only appears when necessary, or it can have some regular inputs
>> alongside inputs that maybe change, and it probably has some area where
>> you
>> display a text or an image or anything else.
>>
>> You could create all of those in jQuery, but OOUI also offers you an
>> ability to encapuslate this better.
>>
>> I tried to explain this in an email and got a bit long, so I created a
>> gist: https://gist.github.com/mooeypoo/a9082a5a5828dcec53be28ed3c538e22
>>
>> The main idea I am trying to show is how you can create your own widget
>> that extends OO.ui.Widget, construct its base structure in the constructor
>> with either other OOUI widgets or with some custom jQuery elements, add
>> classes and event listeners, and then manage the state of this widget when
>> some other code calls its methods.
>>
>> I tried to also show how you can have your custom widget emit some custom
>> event so that other pieces of your code (say, the dialog in general?) can
>> listen to some event (I used "success" but you can define whatever you
>> want) and respond, like change to another panel, or close the dialog, or
>> enable some other action.
>>
>> I hope the gist helps, I tried to make it self explanatory, but please let
>> me know if you encounter any issues with it (I wrote it relatively
>> quickly,
>> I hope there aren't any bugs ;)
>>
>> Moriel
>>
>> On Sun, Mar 24, 2019 at 7:19 AM Alex Monk <[hidden email]> wrote:
>>
>> > I haven't dealt with OOUI for a couple of years but maybe you could
>> pass a
>> > jQuery object to the $content parameter, store it yourself, then modify
>> > that later?
>> >
>> > On Sun, 24 Mar 2019 at 14:14, Huji Lee <[hidden email]> wrote:
>> >
>> > > In the script I am working on,[1] I have a PanelLayout that is defined
>> > like
>> > > this:
>> > >
>> > >         this.previewResult = new OO.ui.PanelLayout({
>> > >           expanded: true,
>> > >           padded: true,
>> > >           framed: true,
>> > >           $content: ''
>> > >         });
>> > >
>> > > Later on, I would like to modify the content of this; specifically, I
>> > want
>> > > to use MW API to retrieve the parsed output of some short wikitext.
>> For
>> > > now, however, I just want to try out the concept by replacing the
>> content
>> > > with a simple <p> tag.
>> > >
>> > > Evidently, this line of code does not do the trick:
>> > >
>> > >         dialog.previewResult.$content = '<p>Something</p>';
>> > >
>> > >
>> > > That is, it does update the value of the $content property for the
>> OOUI
>> > > object, but that does not result in the object getting re-rendered.
>> None
>> > of
>> > > the setter functions for OO.ui.PanelLayout seem to do the trick
>> either.
>> > >
>> > > What is the correct way to do this? If PanelLayout is not the right
>> > object
>> > > type for this purpose, what is?
>> > > _______________________________________________
>> > > Wikitech-l mailing list
>> > > [hidden email]
>> > > https://lists.wikimedia.org/mailman/listinfo/wikitech-l
>> > _______________________________________________
>> > Wikitech-l mailing list
>> > [hidden email]
>> > https://lists.wikimedia.org/mailman/listinfo/wikitech-l
>>
>>
>>
>> --
>> Moriel Schottlender (she/her)
>> Senior Software Engineer
>> Tech Lead | Community Tech and Anti Harassment Tools
>> Wikimedia Foundation https://wikimediafoundation.org/
>> _______________________________________________
>> Wikitech-l mailing list
>> [hidden email]
>> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
>
>
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l