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 lot 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 each other. When user clicks on a link in source article, the tools column shown 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 known what to do when a word selected. But the source article plugin need not know about the ways to invoke a tools systems method. It simply emit an event-'mw.cx.select.word' with data as the selected word. 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 tool that is interested in word selection. It listens for the event as: mw.hook('mw.cx.select.word').add(wordSelectionHandler); The handler get called with the data passed with the event. And now it is upto 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 subscription is possible.

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