Reusable UI components in Tiki

View: New views
10 Messages — Rating Filter:   Alert me  

Reusable UI components in Tiki

by Desilets, Alain :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

One of the disadvantages of the Smarty approach it seems, is that it
makes it hard to create  reusable UI components.

For example, it would be nice to encapsulate what we have learned about
the proper way to create a toggle icon, in some sort of object. When you
build the object, you would give it:

- the icon for the ON state
- the icon for the OFF state
- the messages to be displayed in the help popup (yellow box) when the
state is ON or OFF.
- Whether or not clicking on the icon opens a popup menu or not (and if
so, what are the captions for the ON and OFF actions).

How would I go about doing this?

Another example of something that would be good to encapsulate in a
clean UI component, is a component to allow user to choose several items
from a list, and possibly deactivate them later. We have several
examples of this, which use completely different approaches. For
example:

*Specifying what languages the user can read*

This is implemented through a combination of a picklist and a text
field. You select a language from the picklist, and this adds it to the
text field. The different languages are separated by a space in the text
field (ex: "en f res"). To remove a language from the list, you erase it
in the text field.

*Specifying what languages a site supports*

Implemented as a long list, from which you choose multiple items by
doing Ctrl + mouse click. Here, it's hard to see what languages are
selected cause the list tends to be long, and you can't see all the ones
that are highlighted as selected. Also, if you inadvertently click on an
element without holding the ctrl key, all your previous selections are
undone.

* Specifying what groups a user is a member of*

All groups are displayed, those which the user is in have a red X beside
them, others have a green +. I have noticed that users are confused
about this in the same way as for watches, i.e. does red X mean user is
NOT member of this group, or does it mean click here to eliminate user
from this group?
Etc...


Besides the fact that we are not being consistent, all of these ways
suffer from important usability issues. I'm sure there is a better way
that we could use consistently across the system.

Alain

------------------------------------------------------------------------------
Let Crystal Reports handle the reporting - Free Crystal Reports 2008 30-Day
trial. Simplify your report design, integration and deployment - and focus on
what you do best, core application coding. Discover what's new with
Crystal Reports now.  http://p.sf.net/sfu/bobj-july
_______________________________________________
Tikiwiki-devel mailing list
Tikiwiki-devel@...
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Re: Reusable UI components in Tiki

by Stephane Casset :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Le Thu, Nov 05, 2009 at 06:20:45AM -0500, Desilets, Alain écrivait :
> One of the disadvantages of the Smarty approach it seems, is that it
> makes it hard to create  reusable UI components.

Well it is the only way to have reusable UI components, like {icon}
{tab} etc... Smarty make that way more easier than not having Smarty !

>
> For example, it would be nice to encapsulate what we have learned about
> the proper way to create a toggle icon, in some sort of object. When you
> build the object, you would give it:
>
> - the icon for the ON state
> - the icon for the OFF state
> - the messages to be displayed in the help popup (yellow box) when the
> state is ON or OFF.
> - Whether or not clicking on the icon opens a popup menu or not (and if
> so, what are the captions for the ON and OFF actions).
>
> How would I go about doing this?

{button _selected="condition"  _selected_class="class"}
And add something in the CSS to have a background image...
We can add this kind of mecanism in {icon} if needed...

> Another example of something that would be good to encapsulate in a
> clean UI component, is a component to allow user to choose several items
> from a list, and possibly deactivate them later. We have several
> examples of this, which use completely different approaches. For
> example:
>
> *Specifying what languages the user can read*
>
> This is implemented through a combination of a picklist and a text
> field. You select a language from the picklist, and this adds it to the
> text field. The different languages are separated by a space in the text
> field (ex: "en f res"). To remove a language from the list, you erase it
> in the text field.
>
> *Specifying what languages a site supports*
>
> Implemented as a long list, from which you choose multiple items by
> doing Ctrl + mouse click. Here, it's hard to see what languages are
> selected cause the list tends to be long, and you can't see all the ones
> that are highlighted as selected. Also, if you inadvertently click on an
> element without holding the ctrl key, all your previous selections are
> undone.
>
> * Specifying what groups a user is a member of*
>
> All groups are displayed, those which the user is in have a red X beside
> them, others have a green +. I have noticed that users are confused
> about this in the same way as for watches, i.e. does red X mean user is
> NOT member of this group, or does it mean click here to eliminate user
> from this group?
> Etc...

Yes we currently lack {list} for example...
But if it is needed, then the need must be expressed so we can code
this...

> Besides the fact that we are not being consistent, all of these ways
> suffer from important usability issues. I'm sure there is a better way
> that we could use consistently across the system.

Agreed a smarty UI component will avoid code duplication, introduce
consistency across all the application, much like {tab} {icon} {button}
{title} {pagination_link} {query} {self_link} etc, have done.

A+
--
Stéphane Casset            LOGIDÉE sàrl       Se faire plaisir d'apprendre
1a, rue Pasteur        Tel : +33 388 23 69 77           casset@...
F-67540 OSTWALD        Fax : +33 388 23 69 77           http://logidee.com

------------------------------------------------------------------------------
Let Crystal Reports handle the reporting - Free Crystal Reports 2008 30-Day
trial. Simplify your report design, integration and deployment - and focus on
what you do best, core application coding. Discover what's new with
Crystal Reports now.  http://p.sf.net/sfu/bobj-july
_______________________________________________
Tikiwiki-devel mailing list
Tikiwiki-devel@...
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Re: Reusable UI components in Tiki

by Desilets, Alain :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

> > For example, it would be nice to encapsulate what we have learned
about
> > the proper way to create a toggle icon, in some sort of object. When
you
> > build the object, you would give it:
> >
> > - the icon for the ON state
> > - the icon for the OFF state
> > - the messages to be displayed in the help popup (yellow box) when
the
> > state is ON or OFF.
> > - Whether or not clicking on the icon opens a popup menu or not (and
if
> > so, what are the captions for the ON and OFF actions).
> >
> > How would I go about doing this?
>
> {button _selected="condition"  _selected_class="class"}
> And add something in the CSS to have a background image...
> We can add this kind of mecanism in {icon} if needed...

While Smarty makes it easy to encapsulate standard LOOK of widgets, it
doesn't seem as good at encapsulating standard BEHAVIOR. In the case of
the toggle button, we want an icon which:

- Looks different depending on whether the state is ON or OFF.
- Has different content in the yellow info-box depending on whether
state is on or off
- Opens up a 2-item pop-up menu when clicked, and this pop-up menu has a
check mark in front of one or the other of the items, depending on the
state.

We want all of this to be encapsulated in one object. Not two different
icons, one for each state (as it is done now).

Is this possible with Smarty, and if so, how?

> Yes we currently lack {list} for example...
> But if it is needed, then the need must be expressed so we can code
> this...

I think this would be a good think to have. I don't know enough about
Smarty to be able to create such a widget, but I would certainly use it
if someone else did it (in particular, I would use it for the lists of
languages in i18n).

Note that in this case, the widget will probably involve more than just
a button or icon. For example, you could make it look something like the
To: fields in an email client, i.e.

- Add button (with a little configurable icon in front or after it to
convey what type of "thing" you are adding)
- A text field beside the Add button, where the list of things will be
displayed.
- Clicking on Add button opens un a list of choices. Choosing one adds
it to the text field.
- The items is the text field are clickable. Click on it and press
delete removes the item. Can also right click and delete.

That would be one way of doing it. Dunno if it can be done in smarty.

Alain

------------------------------------------------------------------------------
Let Crystal Reports handle the reporting - Free Crystal Reports 2008 30-Day
trial. Simplify your report design, integration and deployment - and focus on
what you do best, core application coding. Discover what's new with
Crystal Reports now.  http://p.sf.net/sfu/bobj-july
_______________________________________________
Tikiwiki-devel mailing list
Tikiwiki-devel@...
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Re: Reusable UI components in Tiki

by Marc Laporte-3 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Hi Alain!

I agree with the need to be more consistent.

Let's find a jQuery way of doing this, with a sensible fall back if JS is off.

I like the way Jason Diceman had modified the category picker in the
past (two select boxes with some arrows to move from unselected to
selected). It takes more screen space but it's very clear.  Could also
be drag & drop.

Here is an article that talks about this issue:
http://www.ryancramer.com/journal/entries/select_multiple/

As explained, the best choice depends on various factors. How many
items on the list? is there a hierarchy? etc.

For the language list, 35-50 checkboxes could also work.

When number of groups is small, checkboxes could also work. But since
groups can be included in groups, it's nice to show the user what
group they are a direct member of, and which is by inclusion.

Best regards,

M ;-)


> Another example of something that would be good to encapsulate in a
> clean UI component, is a component to allow user to choose several items
> from a list, and possibly deactivate them later. We have several
> examples of this, which use completely different approaches. For
> example:
>
> *Specifying what languages the user can read*
>
> *Specifying what languages a site supports*
>
> * Specifying what groups a user is a member of*
>

------------------------------------------------------------------------------
Let Crystal Reports handle the reporting - Free Crystal Reports 2008 30-Day
trial. Simplify your report design, integration and deployment - and focus on
what you do best, core application coding. Discover what's new with
Crystal Reports now.  http://p.sf.net/sfu/bobj-july
_______________________________________________
Tikiwiki-devel mailing list
Tikiwiki-devel@...
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Re: Reusable UI components in Tiki

by Desilets, Alain :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message


> Here is an article that talks about this issue:
> http://www.ryancramer.com/journal/entries/select_multiple/

Excellent article Marc! Looking at the various options, I would say that
asmSelect is the best option overall. The "Two select multiples" option
is also ok, but in my experience, users find it more confusing, and it
takes twice the amount of real-estate.

> For the language list, 35-50 checkboxes could also work.

I don't like scrollable check lists, because they make it hard to
quickly know what items you selected. You have to scroll, PLUS you have
to keep your eyes peeled for Xes, and remember in your mind which Xes
you saw earlier in your scrolling.

> When number of groups is small, checkboxes could also work. But since
> groups can be included in groups, it's nice to show the user what
> group they are a direct member of, and which is by inclusion.

You could organize the check boxes hierarchichally no? And make it so
that if you check a group, the check box of all its ancestors are
automatically checked? I can't imagine a situation where there would be
more than 12 groups or so.

Alain


------------------------------------------------------------------------------
Let Crystal Reports handle the reporting - Free Crystal Reports 2008 30-Day
trial. Simplify your report design, integration and deployment - and focus on
what you do best, core application coding. Discover what's new with
Crystal Reports now.  http://p.sf.net/sfu/bobj-july
_______________________________________________
Tikiwiki-devel mailing list
Tikiwiki-devel@...
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Re: Reusable UI components in Tiki

by Stephane Casset :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Le Thu, Nov 05, 2009 at 08:40:02AM -0500, Desilets, Alain écrivait :

> > > For example, it would be nice to encapsulate what we have learned
> about
> > > the proper way to create a toggle icon, in some sort of object. When
> you
> > > build the object, you would give it:
> > >
> > > - the icon for the ON state
> > > - the icon for the OFF state
> > > - the messages to be displayed in the help popup (yellow box) when
> the
> > > state is ON or OFF.
> > > - Whether or not clicking on the icon opens a popup menu or not (and
> if
> > > so, what are the captions for the ON and OFF actions).
> > >
> > > How would I go about doing this?
> >
> > {button _selected="condition"  _selected_class="class"}
> > And add something in the CSS to have a background image...
> > We can add this kind of mecanism in {icon} if needed...
>
> While Smarty makes it easy to encapsulate standard LOOK of widgets, it
> doesn't seem as good at encapsulating standard BEHAVIOR. In the case of
> the toggle button, we want an icon which:
>
> - Looks different depending on whether the state is ON or OFF.
> - Has different content in the yellow info-box depending on whether
> state is on or off
> - Opens up a 2-item pop-up menu when clicked, and this pop-up menu has a
> check mark in front of one or the other of the items, depending on the
> state.
>
> We want all of this to be encapsulated in one object. Not two different
> icons, one for each state (as it is done now).
>
> Is this possible with Smarty, and if so, how?

It is easy to do it either (ab)use {button} and _selected and
_selected_class, with the help of CSS

Or we can add a
{toggle_icon _condition _false_icon="icon_id" _true_icon="icon_id" _false_text="text for false" _true_text="text for true" }

Or we can extend the {button} component which IMHO is probabily the best
because you want to generate an action by clicking on the icon...

Normally, if I remember well you can already have a toggle {button}

if you do {button my_argument="yes|no"} it will générate a toggle for
the argument my_argument with two values yes,no,yes,no,etc...
my_argument should be in auto_query_args of the PHP script or added in
the _auto_args of the {button}...

As for _selected example look in tiki-calendar_nav.tpl for example :
{button href="?viewmode=day" _title="{tr}Day{/tr}" _text="{tr}Day{/tr}"
_selected_class="buttonon" _selected="'$viewmode' == 'day'"}

then you can have something like :
{button view="y|n" _title="{tr}toggle watch{/tr}" _text="{tr}toggle
watch{/tr}" _class="nowatch" _selected_class="watch"
_selected="'$view' == 'y'"}

you just need to have two CSS classes watch, nowatch with proper
settings for the icons...

as {button} can already display icons, we can extend {button} with a
_selected_text, _select_icon, _selected_title (same for _disabled), this
could be easily done in lib/smarty_tiki/function.button.php by modifying
the block :

         if ($selected) {
          if (! empty($params['_selected_class']) ) {
            $params['_class'] = $params['_selected_class'];
          } else {
            $params['_class'] = 'selected';
          }
        }

by

        if ($selected) {
          if (! empty($params['_selected_class']) ) {
            $params['_class'] = $params['_selected_class'];
          } else {
            $params['_class'] = 'selected';
          }
          if (! empty($params['_selected_title']) ) {
            $params['_title'] = $params['_selected_title'];
          }
          if (! empty($params['_selected_text']) ) {
            $params['_text'] = $params['_selected_text'];
          }
          if (! empty($params['_selected_icon']) ) {
            $params['_icon'] = $params['_selected_icon'];
          }
        }

Same with $disabled some line below
The exercice is left to the reader as usual :D

> > Yes we currently lack {list} for example...
> > But if it is needed, then the need must be expressed so we can code
> > this...
>
> I think this would be a good think to have. I don't know enough about
> Smarty to be able to create such a widget, but I would certainly use it
> if someone else did it (in particular, I would use it for the lists of
> languages in i18n).
>
> Note that in this case, the widget will probably involve more than just
> a button or icon. For example, you could make it look something like the
> To: fields in an email client, i.e.
>
> - Add button (with a little configurable icon in front or after it to
> convey what type of "thing" you are adding)
> - A text field beside the Add button, where the list of things will be
> displayed.
> - Clicking on Add button opens un a list of choices. Choosing one adds
> it to the text field.
> - The items is the text field are clickable. Click on it and press
> delete removes the item. Can also right click and delete.

something like this ?
  http://quasipartikel.at/multiselect/

> That would be one way of doing it. Dunno if it can be done in smarty.

Well smarty is just a macro language were you can mix php, html,
javascript and css... So you can do a lot of things...

A+
--
Stéphane Casset            LOGIDÉE sàrl       Se faire plaisir d'apprendre
1a, rue Pasteur        Tel : +33 388 23 69 77           casset@...
F-67540 OSTWALD        Fax : +33 388 23 69 77           http://logidee.com

------------------------------------------------------------------------------
Let Crystal Reports handle the reporting - Free Crystal Reports 2008 30-Day
trial. Simplify your report design, integration and deployment - and focus on
what you do best, core application coding. Discover what's new with
Crystal Reports now.  http://p.sf.net/sfu/bobj-july
_______________________________________________
Tikiwiki-devel mailing list
Tikiwiki-devel@...
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Re: Reusable UI components in Tiki

by Stephane Casset :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Le Thu, Nov 05, 2009 at 03:50:03PM +0100, Stephane Casset écrivait :

> Le Thu, Nov 05, 2009 at 08:40:02AM -0500, Desilets, Alain écrivait :
> > > > For example, it would be nice to encapsulate what we have learned
> > about
> > > > the proper way to create a toggle icon, in some sort of object. When
> > you
> > > > build the object, you would give it:
> > > >
> > > > - the icon for the ON state
> > > > - the icon for the OFF state
> > > > - the messages to be displayed in the help popup (yellow box) when
> > the
> > > > state is ON or OFF.
> > > > - Whether or not clicking on the icon opens a popup menu or not (and
> > if
> > > > so, what are the captions for the ON and OFF actions).
> > > >
> > > > How would I go about doing this?
> > >
> > > {button _selected="condition"  _selected_class="class"}
> > > And add something in the CSS to have a background image...
> > > We can add this kind of mecanism in {icon} if needed...
> >
> > While Smarty makes it easy to encapsulate standard LOOK of widgets, it
> > doesn't seem as good at encapsulating standard BEHAVIOR. In the case of
> > the toggle button, we want an icon which:
> >
> > - Looks different depending on whether the state is ON or OFF.
> > - Has different content in the yellow info-box depending on whether
> > state is on or off
> > - Opens up a 2-item pop-up menu when clicked, and this pop-up menu has a
> > check mark in front of one or the other of the items, depending on the
> > state.
> >
> > We want all of this to be encapsulated in one object. Not two different
> > icons, one for each state (as it is done now).
> >
> > Is this possible with Smarty, and if so, how?
>
> It is easy to do it either (ab)use {button} and _selected and
> _selected_class, with the help of CSS
>
> Or we can add a
> {toggle_icon _condition _false_icon="icon_id" _true_icon="icon_id" _false_text="text for false" _true_text="text for true" }
>
> Or we can extend the {button} component which IMHO is probabily the best
> because you want to generate an action by clicking on the icon...
>
> Normally, if I remember well you can already have a toggle {button}
>
> if you do {button my_argument="yes|no"} it will générate a toggle for
> the argument my_argument with two values yes,no,yes,no,etc...
> my_argument should be in auto_query_args of the PHP script or added in
> the _auto_args of the {button}...
>
> As for _selected example look in tiki-calendar_nav.tpl for example :
> {button href="?viewmode=day" _title="{tr}Day{/tr}" _text="{tr}Day{/tr}"
> _selected_class="buttonon" _selected="'$viewmode' == 'day'"}
>
> then you can have something like :
> {button view="y|n" _title="{tr}toggle watch{/tr}" _text="{tr}toggle
> watch{/tr}" _class="nowatch" _selected_class="watch"
> _selected="'$view' == 'y'"}
>
> you just need to have two CSS classes watch, nowatch with proper
> settings for the icons...
>
> as {button} can already display icons, we can extend {button} with a
> _selected_text, _select_icon, _selected_title (same for _disabled), this
> could be easily done in lib/smarty_tiki/function.button.php by modifying
> the block :
>
>          if ($selected) {
>           if (! empty($params['_selected_class']) ) {
>             $params['_class'] = $params['_selected_class'];
>           } else {
>             $params['_class'] = 'selected';
>           }
>         }
>
> by
>
>         if ($selected) {
>           if (! empty($params['_selected_class']) ) {
>             $params['_class'] = $params['_selected_class'];
>           } else {
>             $params['_class'] = 'selected';
>           }
>           if (! empty($params['_selected_title']) ) {
>             $params['_title'] = $params['_selected_title'];
>           }
>           if (! empty($params['_selected_text']) ) {
>             $params['_text'] = $params['_selected_text'];
>           }
>           if (! empty($params['_selected_icon']) ) {
>             $params['_icon'] = $params['_selected_icon'];
>           }
>         }
>
> Same with $disabled some line below
> The exercice is left to the reader as usual :D

Ok, I lied here it is in trunk commit 22907
Of course totally untested, only syntax check, but there is no reason it
wont work as expected ! ;p

So for you pb of toggle button :
{button watch="y|n"
        _title="{tr}watch the page{/tr}" _text="{tr}watch the page{/tr}"
        _selected="'$watch' == 'y'"
        _icon="nowatch"
        _selected_text="{tr}stop watching the page{/tr}"
        _selected_title="{tr}stop watching the page{/tr}"
        _selected_icon="watch"}

Assuming "watch" is the url argument to toggle the watch and that $watch
is the smarty variable that holds the state of watch/no watch.

So if watch=n, we print "watch the page" in the tooltip adn we show the
icon "nowatch", by clicking on it we change the URL watch argument from
"n" to "y".
If watch=y we print "stop watching the page" in the tooltip and we show
the icon "watch", by clicking on it we change the URL watch argument
from "y" to "n".

Et voila ! ;p

Again, untested fully but should work ! ;p

A+
--
Stéphane Casset            LOGIDÉE sàrl       Se faire plaisir d'apprendre
1a, rue Pasteur        Tel : +33 388 23 69 77           casset@...
F-67540 OSTWALD        Fax : +33 388 23 69 77           http://logidee.com

------------------------------------------------------------------------------
Let Crystal Reports handle the reporting - Free Crystal Reports 2008 30-Day
trial. Simplify your report design, integration and deployment - and focus on
what you do best, core application coding. Discover what's new with
Crystal Reports now.  http://p.sf.net/sfu/bobj-july
_______________________________________________
Tikiwiki-devel mailing list
Tikiwiki-devel@...
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Re: Reusable UI components in Tiki

by Desilets, Alain :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Thx Stéphane. I will look at all the info below and try to figure something out. I'm now convinced that it can be done, and have good leads for doing it.

Alain

-----Original Message-----
From: Stephane Casset [mailto:sept@...]
Sent: Thursday, November 05, 2009 9:50 AM
To: Tikiwiki developers
Subject: Re: [Tikiwiki-devel] Reusable UI components in Tiki

Le Thu, Nov 05, 2009 at 08:40:02AM -0500, Desilets, Alain écrivait :

> > > For example, it would be nice to encapsulate what we have learned
> about
> > > the proper way to create a toggle icon, in some sort of object.
> > > When
> you
> > > build the object, you would give it:
> > >
> > > - the icon for the ON state
> > > - the icon for the OFF state
> > > - the messages to be displayed in the help popup (yellow box) when
> the
> > > state is ON or OFF.
> > > - Whether or not clicking on the icon opens a popup menu or not
> > > (and
> if
> > > so, what are the captions for the ON and OFF actions).
> > >
> > > How would I go about doing this?
> >
> > {button _selected="condition"  _selected_class="class"} And add
> > something in the CSS to have a background image...
> > We can add this kind of mecanism in {icon} if needed...
>
> While Smarty makes it easy to encapsulate standard LOOK of widgets, it
> doesn't seem as good at encapsulating standard BEHAVIOR. In the case
> of the toggle button, we want an icon which:
>
> - Looks different depending on whether the state is ON or OFF.
> - Has different content in the yellow info-box depending on whether
> state is on or off
> - Opens up a 2-item pop-up menu when clicked, and this pop-up menu has
> a check mark in front of one or the other of the items, depending on
> the state.
>
> We want all of this to be encapsulated in one object. Not two
> different icons, one for each state (as it is done now).
>
> Is this possible with Smarty, and if so, how?

It is easy to do it either (ab)use {button} and _selected and _selected_class, with the help of CSS

Or we can add a
{toggle_icon _condition _false_icon="icon_id" _true_icon="icon_id" _false_text="text for false" _true_text="text for true" }

Or we can extend the {button} component which IMHO is probabily the best because you want to generate an action by clicking on the icon...

Normally, if I remember well you can already have a toggle {button}

if you do {button my_argument="yes|no"} it will générate a toggle for the argument my_argument with two values yes,no,yes,no,etc...
my_argument should be in auto_query_args of the PHP script or added in the _auto_args of the {button}...

As for _selected example look in tiki-calendar_nav.tpl for example :
{button href="?viewmode=day" _title="{tr}Day{/tr}" _text="{tr}Day{/tr}"
_selected_class="buttonon" _selected="'$viewmode' == 'day'"}

then you can have something like :
{button view="y|n" _title="{tr}toggle watch{/tr}" _text="{tr}toggle watch{/tr}" _class="nowatch" _selected_class="watch"
_selected="'$view' == 'y'"}

you just need to have two CSS classes watch, nowatch with proper settings for the icons...

as {button} can already display icons, we can extend {button} with a _selected_text, _select_icon, _selected_title (same for _disabled), this could be easily done in lib/smarty_tiki/function.button.php by modifying the block :

         if ($selected) {
          if (! empty($params['_selected_class']) ) {
            $params['_class'] = $params['_selected_class'];
          } else {
            $params['_class'] = 'selected';
          }
        }

by

        if ($selected) {
          if (! empty($params['_selected_class']) ) {
            $params['_class'] = $params['_selected_class'];
          } else {
            $params['_class'] = 'selected';
          }
          if (! empty($params['_selected_title']) ) {
            $params['_title'] = $params['_selected_title'];
          }
          if (! empty($params['_selected_text']) ) {
            $params['_text'] = $params['_selected_text'];
          }
          if (! empty($params['_selected_icon']) ) {
            $params['_icon'] = $params['_selected_icon'];
          }
        }

Same with $disabled some line below
The exercice is left to the reader as usual :D

> > Yes we currently lack {list} for example...
> > But if it is needed, then the need must be expressed so we can code
> > this...
>
> I think this would be a good think to have. I don't know enough about
> Smarty to be able to create such a widget, but I would certainly use
> it if someone else did it (in particular, I would use it for the lists
> of languages in i18n).
>
> Note that in this case, the widget will probably involve more than
> just a button or icon. For example, you could make it look something
> like the
> To: fields in an email client, i.e.
>
> - Add button (with a little configurable icon in front or after it to
> convey what type of "thing" you are adding)
> - A text field beside the Add button, where the list of things will be
> displayed.
> - Clicking on Add button opens un a list of choices. Choosing one adds
> it to the text field.
> - The items is the text field are clickable. Click on it and press
> delete removes the item. Can also right click and delete.

something like this ?
  http://quasipartikel.at/multiselect/

> That would be one way of doing it. Dunno if it can be done in smarty.

Well smarty is just a macro language were you can mix php, html, javascript and css... So you can do a lot of things...

A+
--
Stéphane Casset            LOGIDÉE sàrl       Se faire plaisir d'apprendre
1a, rue Pasteur        Tel : +33 388 23 69 77           casset@...
F-67540 OSTWALD        Fax : +33 388 23 69 77           http://logidee.com

------------------------------------------------------------------------------
Let Crystal Reports handle the reporting - Free Crystal Reports 2008 30-Day trial. Simplify your report design, integration and deployment - and focus on what you do best, core application coding. Discover what's new with Crystal Reports now.  http://p.sf.net/sfu/bobj-july _______________________________________________
Tikiwiki-devel mailing list
Tikiwiki-devel@...
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

------------------------------------------------------------------------------
Let Crystal Reports handle the reporting - Free Crystal Reports 2008 30-Day
trial. Simplify your report design, integration and deployment - and focus on
what you do best, core application coding. Discover what's new with
Crystal Reports now.  http://p.sf.net/sfu/bobj-july
_______________________________________________
Tikiwiki-devel mailing list
Tikiwiki-devel@...
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Re: Reusable UI components in Tiki

by Stephane Casset :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Le Thu, Nov 05, 2009 at 10:22:04AM -0500, Desilets, Alain écrivait :

> > Ok, I lied here it is in trunk commit 22907
> > Of course totally untested, only syntax check, but there is no reason it
> > wont work as expected ! ;p
> >
> > So for you pb of toggle button :
> > {button watch="y|n"
> >         _title="{tr}watch the page{/tr}" _text="{tr}watch the page{/tr}"
> >         _selected="'$watch' == 'y'"
> >         _icon="nowatch"
> >         _selected_text="{tr}stop watching the page{/tr}"
> >         _selected_title="{tr}stop watching the page{/tr}"
> >         _selected_icon="watch"}
>
> Thx again Stéphane! If I want to use this in 4.x I would have to do
> some sort of merge? Never done that with SVN, so I'm a bit scared...

just copy lib/smarty_tiky/function.button.php from trunk to tiki4.x and
commit or do a merge...

A+
--
Stéphane Casset            LOGIDÉE sàrl       Se faire plaisir d'apprendre
1a, rue Pasteur        Tel : +33 388 23 69 77           casset@...
F-67540 OSTWALD        Fax : +33 388 23 69 77           http://logidee.com

------------------------------------------------------------------------------
Let Crystal Reports handle the reporting - Free Crystal Reports 2008 30-Day
trial. Simplify your report design, integration and deployment - and focus on
what you do best, core application coding. Discover what's new with
Crystal Reports now.  http://p.sf.net/sfu/bobj-july
_______________________________________________
Tikiwiki-devel mailing list
Tikiwiki-devel@...
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Re: Reusable UI components in Tiki

by Desilets, Alain :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

> Ok, I lied here it is in trunk commit 22907
> Of course totally untested, only syntax check, but there is no reason it
> wont work as expected ! ;p
>
> So for you pb of toggle button :
> {button watch="y|n"
>         _title="{tr}watch the page{/tr}" _text="{tr}watch the page{/tr}"
>         _selected="'$watch' == 'y'"
>         _icon="nowatch"
>         _selected_text="{tr}stop watching the page{/tr}"
>         _selected_title="{tr}stop watching the page{/tr}"
>         _selected_icon="watch"}

Thx again Stéphane! If I want to use this in 4.x I would have to do some sort of merge? Never done that with SVN, so I'm a bit scared...

Alain

------------------------------------------------------------------------------
Let Crystal Reports handle the reporting - Free Crystal Reports 2008 30-Day
trial. Simplify your report design, integration and deployment - and focus on
what you do best, core application coding. Discover what's new with
Crystal Reports now.  http://p.sf.net/sfu/bobj-july
_______________________________________________
Tikiwiki-devel mailing list
Tikiwiki-devel@...
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel