Standardization of UI elements

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Standardization of UI elements
« on September 19th, 2011, 12:00 PM »
Pretty sure this has been discussed in various places before, so I thought I'd create a centralized topic.

Currently Wedge/SMF 2.0 has a few UI elements that have been standardized, but they are limited to mostly area menus and lists(Won't count pagination since it is same for everybody), but honestly it has the scope to have more elements. Some from the top of my head are :

1) Different types of lists (BoardIndex and MessageIndex are more or less lists but they have a much different approach), sub-lists etc.
2) Forms - I'd say this is quite important, so as not every other add on has to do it's own form creation and validation.
3) Controls(?) Stuff like quote, hide, on post displays and topic controls etc.

The idea being to unify the different areas of UI, so that some thing doesn't look out of place or doesn't leave out some important part of functionality/security(Form validation, for example). The UI elements can always be extended to allow custom handlers in case some add on wants to add something that is not already present.
The way it's meant to be

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Standardization of UI elements
« Reply #1, on September 19th, 2011, 12:07 PM »
Not going to get into the others just yet but form handling is quite important to do and get right; there has been mention before of a centralised form handler that can do both rendering and validation, and that would be good to implement (essentially like what the prepareDBSettingsContext bit does in the admin area, as far as creating and validating the general settings forms.

Part of the reason why it's not gone any further is because we've been busy elsewhere, and partly because I don't think we can really agree on a structure for it to follow. Part of me wants to follow the general model that Zend_Form does, but the rest of me wants to run the hell away from it...


As far as lists go, there's the generic list subsystem that's used for simpler lists, whereas the message index and board index don't really fit into that category; and pushing them through a generic handler reduces the ease and range of customisation that occurs - remember that most custom themes that do use their own templates invariably hit BoardIndex, MessageIndex and Display in that order. I see that being just as much of an issue in Wedge, and forcing them to be standardised (as opposed to unique but stylistically consistent) would make it worse, not better.

As for controls, other than the topic display, where are they even used?
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Re: Standardization of UI elements
« Reply #2, on September 19th, 2011, 12:14 PM »
Forms is one of my biggest quirks, I don't know how Zend_Form does it but any way is better than coding those form tables again and again and then validating them.
Quote
As for controls, other than the topic display, where are they even used?
That was something I put in from top of my head, but, search, report viewing, comment section of many mods etc.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Standardization of UI elements
« Reply #3, on September 19th, 2011, 12:21 PM »
Quote
Forms is one of my biggest quirks, I don't know how Zend_Form does it but any way is better than coding those form tables again and again and then validating them.
Zend_Form is a scary if methodical beast. Have a read of http://framework.zend.com/manual/en/zend.form.quickstart.html and see what you think of it.
Quote
That was something I put in from top of my head, but, search, report viewing, comment section of many mods etc.
Oh, I see what you mean. Some method by which to create the list of buttons/dropdown, then.

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Re: Standardization of UI elements
« Reply #4, on September 19th, 2011, 12:30 PM »
Quote from Arantor on September 19th, 2011, 12:21 PM
Quote
Forms is one of my biggest quirks, I don't know how Zend_Form does it but any way is better than coding those form tables again and again and then validating them.
Zend_Form is a scary if methodical beast. Have a read of http://framework.zend.com/manual/en/zend.form.quickstart.html and see what you think of it.
I like that, it's quite straight forward and individual elements make sense. It's much better than what I currently have.
Quote from Arantor on September 19th, 2011, 12:21 PM
Quote
That was something I put in from top of my head, but, search, report viewing, comment section of many mods etc.
Oh, I see what you mean. Some method by which to create the list of buttons/dropdown, then.
Yeah.
Quote
As far as lists go, there's the generic list subsystem that's used for simpler lists, whereas the message index and board index don't really fit into that category; and pushing them through a generic handler reduces the ease and range of customisation that occurs - remember that most custom themes that do use their own templates invariably hit BoardIndex, MessageIndex and Display in that order. I see that being just as much of an issue in Wedge, and forcing them to be standardised (as opposed to unique but stylistically consistent) would make it worse, not better.
I see what you mean, since the ability to customise is required in BoardIndex and MessageIndex. But what about post-like elements? There are a ton of them, and all of them follow the same layout more or less. There can be 2 UI elements to cover almost all of the content lists(One with a minimalistic view where author is at top, and one with detailed view where author is at side).

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Standardization of UI elements
« Reply #5, on September 19th, 2011, 12:32 PM »
Quote
I like that, it's quite straight forward and individual elements make sense. It's much better than what I currently have.
Creating the form content in terms of what should be in it and what validation rules there are is easy enough. Implementing the decorators is a bit more taxing and time consuming, though - at least in Zend_Form. I want something that has most of the power of that but without the tedium involved in setting up decorators.
Quote
But what about post-like elements? There are a ton of them, and all of them follow the same layout more or less.
I'm not sure there is that many of them. Where are you thinking of, since every UI I can think of that has 'post like' elements has different content for good reason.

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Re: Standardization of UI elements
« Reply #6, on September 19th, 2011, 12:37 PM »
Quote from Arantor on September 19th, 2011, 12:32 PM
Quote
I like that, it's quite straight forward and individual elements make sense. It's much better than what I currently have.
Creating the form content in terms of what should be in it and what validation rules there are is easy enough. Implementing the decorators is a bit more taxing and time consuming, though - at least in Zend_Form. I want something that has most of the power of that but without the tedium involved in setting up decorators.
Decorators can be tricky, yes, but the rest of it is nice. Plus, shouldn't setting up decorators be the job of the theme in most cases anyway? That way, one wouldn't need to set them up again and again.
Quote from Arantor on September 19th, 2011, 12:32 PM
Quote
But what about post-like elements? There are a ton of them, and all of them follow the same layout more or less.
I'm not sure there is that many of them. Where are you thinking of, since every UI I can think of that has 'post like' elements has different content for good reason.
The content's different but the general layout is same. For example, in comment section of AeMe(Or many other mods, even SimpleDesk), the layout is very similar to posts. Search results, reports, PMs, because of the simple fact that most of them have the HTML copied from Display.
Re: Standardization of UI elements
« Reply #7, on September 26th, 2011, 03:55 PM »
Been thinking on how to go about the forms, and it seems something similar to Zend(Not Zend itself) but without such complex decorators would be the best option. We don't need such complex decorators because most of it would be handled by theme, plus most of the forms contain more or less the same dt/dd combination of fields surrounded in a fieldset(Which can most likely be modified since one should be able to change the template functions of the form in order to maintain extensibility). Most of the UI customizations seem to be a result of change in CSS rather than HTML so that's even better.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Standardization of UI elements
« Reply #8, on September 26th, 2011, 04:25 PM »
Yup.

There's two routes in my head. Firstly, you create each possible form element as a class (wefrm_checkbox for example), and have the default rendering in that, or you create a GenericForm template that has a function for each type of element, for its default rendering.

I don't really see many themes actually changing that but if it's done appropriately with CSS it shouldn't be a problem - and it's not as if a page expressly has to use that (cf Post page, Display's quick reply, quick moderation, these are all forms I might validate with the generic handler but not use it for rendering)

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Re: Standardization of UI elements
« Reply #9, on September 26th, 2011, 04:31 PM »
I'd go with each element with different class option, it is more fitting plus having one function for all is a bloody mess. The classes will only be responsible for rendering the element's HTML, the main form class would be responsible for taking the rendered HTML and placing it inside it's containers/calling templates.
Quote
I don't really see many themes actually changing that but if it's done appropriately with CSS it shouldn't be a problem - and it's not as if a page expressly has to use that (cf Post page, Display's quick reply, quick moderation, these are all forms I might validate with the generic handler but not use it for rendering)
More than themes I'm concerned about mods that might need to do something. As far as post page goes, I don't think it's that out of the form's league since I did most of my thinking keeping it in mind. The HTML can be rendered with form class along with the javascript outputted via Post.template.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Standardization of UI elements
« Reply #10, on September 26th, 2011, 05:30 PM »
The post page is not the most extreme example I had in mind and it should be possible to do fairly easily - I'm just thinking of other examples that are less obvious, like the quick moderation ones that are designed to be subtle and out of the way that I see as being a problem.

But yes, per class would be nicer and more extensible in the long run. It is something I gave thought to but have had greater priorities of recent times :(

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841