Talk:OOUI/Archive 1

Sandbox

Is there a sandbox with sample code, widget drag&drop etc. ?

As an unrelated note, I am a bit confused as to why we now have a) jquery ui buttons b) agora c) oo js ui buttons. They all look different. I even don't dare to ask what I should use as I can imagine everyone will tell me a different story. -- Rillke (talk) 08:35, 5 July 2014 (UTC)

There's a suite of demos in the repository, yes.

You should not use jQuery UI; that has been deprecated for years.

Agora styling (or whatever the styling of the day is) will eventually get applied to OOUI buttons, which you should use.

Jdforrester (WMF) (talk) 16:45, 7 July 2014 (UTC)

Cool.

Oh, I never saw it was deprecated. How portable is OOjs UI compared to jQuery UI? For example, I just have to add a snippet for embedding jQuery UI from Google to my site and bam! the code runs. Are there similar options for OOjs UI? -- Rillke (talk) 16:44, 8 July 2014 (UTC)

@Rillke: We don't currently provide code CDN in the way that Google does for jQuery (and frankly I'd imagine that security hole isn't really something we'd generally want to encourage), but Krinkle may have some ideas about options for OOjs, OOUI and other frameworks we publish. Jdforrester (WMF) (talk) 18:23, 8 July 2014 (UTC)

Documentation

Hi Jdforrester,

I understand that you've been working on visual editor for years and came up with this wonderful library. Would you please allocate people resources to document it, with a small working example for each widget and toolbar? I see how PopupButtonWidget works, but not PopupTool, and the VE code didn't give me useful hints...

I'd also like to suggest that you provide infrastructure for translation of the complete OOjs UI documentation to other languages, as I imagine many people would like to use OOjs UI in their future gadgets.

--Gryllida 05:29, 4 September 2014 (UTC)

The credit goes to Trevor, Roan, Timo, Ed and others, but thanks. However, I don't allocate people to anything; my job is to focus on what's important for end users of VisualEditor and other editing tools. Translation of code documentation is not something I think Wikimedia has ever done – can you show some examples of how this works, so we could copy it? Also, OOUI is not stable enough to encourage people to use it full-tilt (we make breaking changes every week or so), so this feels very premature. Jdforrester (WMF) (talk) 17:47, 4 September 2014 (UTC)

Yeah, (this was a plural you); they didn't exactly translate generated documentation before, I'm not sure how to do it and I'll ask around.

Could you write concrete examples and document the breaking changes with a note that this is in alpha, please, though? This toolkit is very useful to those who'd like to script this software to suit their needs, I believe, including scripts to add extra toolbar buttons to VE for my own convenience. :-) --Gryllida (Please don't ping me, I have Echo turned off.) 04:37, 5 September 2014 (UTC)

Every breaking change is marked as such in git ("[BREAKING CHANGE]") and when we pull them into MediaWiki we normally send a note to wikitech-l. The note at the top of the OOUI block in Resources.php explicitly warns against depending on it in as it may not work in some browsers (amongst other issues). Jdforrester (WMF) (talk) 21:57, 5 September 2014 (UTC)

Oh yeah, doc.wikimedia.org doesn't do examples either. Being lazy to document things by hand is probably justified here, in long-term. --Gryllida (Please don't ping me, I have Echo turned off.) 06:57, 6 September 2014 (UTC)

OO.ui.LookupInputWidget vs jQuery autocomplete

Could you provide a tutorial to show how to use OO.ui.LookupInputWidget ? It would be good to replace jQuery autocomplete with something but I don't know where to start with this widget.. this is the incomplete code I wrote before I got confused.

var inputWidget = new OO.ui.TextInputWidget( {} );
inputWidget.$element.appendTo( this );
new OO.ui.LookupInputWidget( inputWidget );

Jdlrobson (talk) 20:26, 31 October 2014 (UTC)

I wrote an example here: https://phabricator.wikimedia.org/T85467#975078. Matma Rex (talk) 02:06, 14 January 2015 (UTC)

TextInputWidget validation

"OO.ui.TextInputWidget" comes with a "validate" config setting where you can choose from prefdefined RegExes or enter a custom one.

Unfortunately I'm not sure how to use it. In my tests it seemed to me that I have to call "isValid" manually. And if the RegEx results in an invalig state there is just a CSS class added to the DOM element. There seems to be no highlighting or any kind of information shown to the user. I can not specify a message that gets displayed when the user enters a invalid text. Is there any good example of validation I can look at? What about complex validation that can not be written as a RegEx?

--Osnard (talk) 12:37, 17 December 2014 (UTC)

Would OOUI support creating UIs using markup?

Looking at the examples I got the impression that UI elements are defined and composed using Javascript. Web component standards are supporting the creation of custom elements that could help to make markup more meaningful (semantic if you will) and provide better separation between layout and behaviour (e.g., templates that get automatically when data changes, and logic only modifies the data model).

As a designer, an approach such as the one described would help me to propose a change (e.g., switch the order of two elements of a form) without having to understand the whole application logic, and also simplify the creation of prototypes using the framework. I was wondering if that there are any plans to support the components as custom elements, and whether it is possible to support with the current model (which I'm not familiar with beyond a quick glance to the documentation).

--Pginer-WMF (talk) 14:01, 16 January 2015 (UTC)

Technically, separating concerns with web components is IMHO a very promising and maybe the single, right approach for the future.
Currently though browser support isn't good enough and standards specs are still evolving/not fully settled even in its basics (it's a W3C working draft by the time I'm writing this) that our scarce time is probably better spent on other things right now.

There has been a somewhat related task raised under T101666, which targets at providing custom parser tags rendering OOUI widgets like a button or a more complex one in a MediaWiki article.

--VEckl (WMF) (talk) 05:51, 15 April 2016 (UTC)

Input in dialog

How do I make an input box that appears in the middle of the screen, not appended to the bottom? Nirmos (talk) 21:47, 30 August 2016 (UTC)

Matma Rex, do you know the code for making an input box inside a dialog? Nirmos (talk) 10:53, 16 September 2016 (UTC)

@Nirmos: The second example on OOjs UI/Windows/Process Dialogs seems to do exactly this. :) Matma Rex (talk) 12:12, 17 September 2016 (UTC)

Matma Rex, this is hard for me to understand. I can't insert arbitrary HTML with this? Nirmos (talk) 13:50, 18 September 2016 (UTC)

@Nirmos: You can. But you asked about input boxes rather than arbitrary HTML? The first example on that page just has some HTML inside a dialog. Matma Rex (talk) 17:53, 18 September 2016 (UTC)

Matma Rex, how do I know if there's a dialog currently showing on the screen? Nirmos (talk) 16:23, 26 September 2016 (UTC)

Nevermind, I got it.

if ( $( '.oo-ui-window-active' ).length ) {
	//code when there is a dialog showing
}

Thanks anyway. Nirmos (talk) 16:32, 26 September 2016 (UTC)

More questions:

1. Where is "title" supposed to be shown using the example code at OOjs UI/Windows/Dialogs? I can't see that it is used as a HTML attribute, or as a jquery.ui.dialog title.
2. Is there any way to add a cross in the upper right corner like jquery.ui.dialog?
3. How do I remove the maximum height for a dialog?
4. How do I add an HTML class for a dialog, like I can do with jquery.ui.dialog?
5. Why can't I focus on something within the dialog after the dialog has been opened? More specifically, why doesn't

// Set up the initial mode of the window. 
MyDialog.prototype.getSetupProcess = function ( data ) {
	return MyDialog.super.prototype.getSetupProcess.call( this, data )
	.next( function () {
		$( '#gadget-rcchat-input' ).focus();
	}, this );
};

in sv:MediaWiki:Gadget-RecentChangesChat.js work? Nirmos (talk) 03:06, 27 September 2016 (UTC)

Matma Rex, if you have time to look at any of the above questions, that would be much appreciated =) Nirmos (talk) 14:33, 12 October 2016 (UTC)

1. I think that's a mistake in the documentation. Title is only shown when using a ProcessDialog or MessageDialog, but not plain Dialog.
2. If you use a ProcessDialog, you can easily add a "Close" or "Cancel" action.
3. Dialogs automatically adjust to the height of their contents. The problem here is that you change the contents dynamically after the dialog is opened. Call myDialog.updateSize(); after inserting the posts in the getPosts() function, or get and insert the posts as far of the setup process.
4. You can pass classes: [ 'myclass' ] in configuration options, same as for any OOjs UI element.
5. .focus() doesn't work because the window is not visible yet at that point. It should work in getReadyProcess, which is executed after showing the window.

Matma Rex (talk) 14:59, 14 October 2016 (UTC)

Get form input data from a ProcessDialog

My idea is that in a ProcessDialog, I have a form consisting of 3 input boxes (constructed using FieldsetLayout, FieldLayout, and TextInputWidget). After I clicked save, I would like to get the data of those three input boxes. How can I achieve that? My initial codes are available at id:Pengguna:Kenrick95/idwp-gpu.js.

        ProcessDialog.prototype.getActionProcess = function ( action ) {
        	
	        var dialog = this;
	        if ( action ) {
	            return new OO.ui.Process( function () {
        			console.log(dialog); // the whole dialog object, I couldn't find my form data
        			console.log(action); // "save"
        			console.log(form.getData()); // undefined ?
	            	dialog.close( { action: action } );
	            } );
	        }
	        // Fallback to parent handler.
	        return ProcessDialog.super.prototype.getActionProcess.call( this, action );
        };

I think I am missing something simple in this block of codes. Any help would be appreciated. Thank you very much. Kenrick95 (talk) 16:00, 5 December 2016 (UTC)

@Kenrick95: You need to call #getValue on each of the TextInputWidget. console.log( input[0].getValue() ); etc. Matma Rex (talk) 22:34, 6 December 2016 (UTC)

@Matma Rex: Thanks a lot :) Kenrick95 (talk) 15:19, 12 December 2016 (UTC)