However, the EMF Client Platform UI did not yet support multi attributes, for example an Integer attribute with a multiplicity of 3. During the implementation of a multi attribute widget we had to make several decisions. The solution for multi-attribute is not as intuitive as it was for single attributes. We came up with several inital propsals and combined the best parts of each of them. The most important questions were the following, which are addressed by the proposals shown afterwards.
What kind of manipulation operation is required (besides add/change/delete)?
- Change order --> proposal 2,3
- Sorting --> proposal 2
- List view --> proposal 2,3
- Single-Control-Composite-View --> proposal 1
- Implicit (no buttons) --> proposal 1
- Explicit (buttons / keystrokes) --> proposal 2
- Combination --> proposal 3
- Text Buttons --> proposal 2
- Image Links --> proposal 3
- new entries are created when you start typing in the bottom one (another empty field appears)
- changes are saved whenever a field is edited
- entries are deleted by deleting a field's content
+ intuitive usage
+ simple style that fits into every editor window
- no multiselection in order to delete/move several entries at once
- there has to be one "empty" value (here: "") that is not stored
- no change order functionality
- can become pretty big because of missing scrollbars (but they could be implemented)
=> disadvantages led to idea 3
Proposal 2: the widget works with a list - so let's create one in the GUI
- new entries are created by clicking the "+" Button (Pop-Up appears)
- changes can be made by selecting an entry and clicking "..." (Pop-Up appears)
- entries are deleted by selecting them and pressing Del
- entries are moved up and down with the corresponding buttons (not visible in the screenshot)
- Sort funtionality by clicking the button
- windows are automatically resizeable according to content
+ intuitive representation and manipulation of the list
+ easy implementation of global listeners (for keystrokes) because there aren't individual
buttons for each entry (as in idea 3)
- much clicking because of pop-ups
Proposal 3 and Final Solution: combine look and feel of proposal 1 with more functionality
- new entries are created when you start typing in the bottom one (another empty field appears)
- you can add an "empty" new entry by clicking the plus button
- changes are saved whenever a field is edited
- entries are deleted by clicking the red cross
- entries are moved up and down with the corresponding buttons
+ style still quite simple, the buttons don't "jump out" - fits into every editor window
(the button design could be changed easily if necessary)
+ each single-element-control can be designed without any restrictions (see difference between
String and integer) depending on its type
- no multiselection in order to delete/move several entries at once
Facebook has a very simple user interface to deal with multi attributes: each one acts like an image with "character" anchor type in Microsoft Word.
ReplyDeleteAs a result you can move it with drag&drop or cut&paste, edit it with the Enter key, select it with shift+arrows and delete it with Suppr or the cross next to it.
It also take much less screen-space than any of your proposals.
Two suggestions:
ReplyDelete1. Create a renderer or a UI factory for this so that users can switch the implementation. For example a comma-separated list might be more simple in many cases.
2. As for multi-select in your preferred solution: just add some space to the left where the user can click to select the whole line. the same area can then be used to drag the selected lines.
@del65: Where exactly is this widget used in facebook?
ReplyDelete@blog: 1. The EMF Client Platform offers such a factory per default. Every widget is registered for a specific type or even a specific attribute. Therefore you can replace or refine the widget.
2. Good idea!
To show the widget on Facebook, go to "Confidentiality parameters" on the "account" menu then choose "custom" and try to restrict the visibility of something to some of your friends.
ReplyDeleteThe multi-attributes widget is uqed to edit the list of groups or persons you explicitely want to share personal information with.
This widget is not available on smartphones.
I will post a screenshot link tomorow.
Here is the screenshot (French) :
ReplyDeletehttp://tof.canardpc.com/view/56dc0e95-eba6-4e1c-958f-61efef69f44b.jpg
I had some success yesterday with making a similar widget in SWT based on an StyledText widget.
The source code of this experiment is not stable yet, but here is a page where I found a usefull trick to reach my goal :
http://www.java2s.com/Tutorial/Java/0280__SWT/StyledTextembedcontrols.htm