Content translation/Developers/Front end

CX UI is an event driven UI/X. Since the Special:CX acts as a single page web application with lots of user interaction and tools, we chose this approach. The UI has several modules. source, translation, publishing, progress, tools are examples of modules. These modules are nearly independent and they do not call any methods across modules. Each module is a jQuery plugin binding to screen elements in the special page. Each module is responsible for rendering the UI and responding to user interaction. And they are also responsible for using CXServer APIs to get the required data to render in UI.

For a user, each of the screen fields, such as source article, translation editor, tools, progress, publish – all interact with each other. When user clicks on a link in source article, the tools column shows the link information. Clicking on a source paragraph fills the automatic translation in translation column. But the communication between modules is not by method calls, but by custom events.

To explain this further, let us take the case of a word selection in source column. When user select a word, we show a definition tool card at tools column. That card contains the meaning or translation of that word in target language, obtained through cxserver APIs. When a word is selected, the source module fires/emits an event named 'mw.cx.select.word'. This is done using mw.hooks. To be precise, mw.hook('mw.cx.select.word').fire(word);

mw.hook is a convinient wrapper for jQuery.Callbacks.

The source column or the source article plugin does not know what exactly to do when a word is selected. It is not its responsibility. Tools system knows what to do when a word selected. But the source article plugin doesn't need to know about the ways to invoke a tools systems method. It simply emits an event – 'mw.cx.select.word' passing the selected word as data. The tools system has a number of tools registered, such as dictionary, links, references, machine translation etc. Each of these tools can listen for the events that they are interested. Dictionary tool card is one of the tools that is interested in word selection. It listens for the event as: mw.hook('mw.cx.select.word').add(wordSelectionHandler); The handler gets called with the data passed with the event. And now it is up to the Dictionary tool card to process this event and data.

The links tool is also interested in the same event. It can search whether an article exist in source or target language with the selected word as title and present a link card. So it can also subscribe and consume the event. Similarly any number of subscriptions is possible.

Another example is the progressbar widget. It listens for mw.cx.progress events and paints the progress bar. Translation editor can calculate the progress and emit this event.