bringing the

CollaboraOffice

OPENSUSE-LIBREOFFICE CONF’20

Required Magicadvanced technology

Bringing the Notebookbar to Online

By Szymon Kłos

Software Engineer at Collabora Productivity

Collabora Productivity

collabora online . com

● Introduced as an experimental feature (GSoC project) in 2016

● Polished in next editions by Kshitij Pathania (2018) and Sumit Chauhan (2019)

● Most of the conceptual work, design and tweaking the look by Andreas Kainz

● Released in LibreOffice 6.2 in few variants

Notebookbar on the desktop

https://www.collaboraoffice.com/


LIBOCON19

Feature frequently requested by Collabora Office customers.

Bringing the Notebookbar to Online

Notebookbar in CODE 6.4 (Collabora Online Development Edition)



We already had dialogs and the sidebar in Online.

Pixel-based canvas transferred from the

server.

We send mouse events and receive updates.

We can’t do the same, Notebookbar on desktop has many things we don’t need

in Online.

Re-using UI bits from desktop so far




HTML based, better integrated with the

rest of UI.

Re-layouted for better user experience.

My next talk with technical details

about re-using sidebar on mobile

phones will take place on 17 October.

Native controls – sidebar on mobile phones




How native controls are built

JSON(UI description)

Interface builder

SERVER CLIENT




Reaction on user input

● When user performs any action send control type and event

data eg. selected position 3 in the listbox with id ‘X’

● Sever does the same change and renders the new JSON which

is sent back to the client




Welding in vcl

● Way to use native controls on desktop, implemented by

Caolán McNamara

● Currently gtk3 only implementation

● Adds an abstraction level which is a bridge between

native UI and LibreOffice dialogs code

DialogDialog

Weld::Button

Weld::Combobox Gtk3 Comboobx

Gtk3 Button




Welding in vcl

Advantages of using welded wrappers

● We receive information about every

modification of a control

● We can inform parent dialog about

input performed by user eg. mouse

press

namespace weld{

class VCL_DLLPUBLIC Widget{protected: ... Link<const MouseEvent&, bool> m_aMousePressHdl; ...

public: virtual void set_sensitive(bool sensitive) = 0; virtual bool get_sensitive() const = 0; virtual void show() = 0; virtual void hide() = 0;

… virtual void connect_mouse_press(...)




Welding in vclDialog

Weld::Builder

Weld::Listbox

Native Listbox

<<create>>

<<create>>

weld_listbox

<<create>>

show show

selectedselected

Building

Dialog modifies the control

Asynchronous user input in the native control




Using welding in onlineDialog

Weld::JSBuilder

Weld::JSListbox

HTML Listbox

<<create>>

weld_listbox

<<create>>

show Send JSON

Send event: selected selected

Server Client




Dialogs on mobile using welded widgets

● Code in vcl/jsdialog

● Implemented weld::Builder and control wrappers

● JSInstanceBuilder is injected only for few dialogs

we want in online, only on mobile devices.

● Wrappers send JSON on control change

● vcl/jsdialog/executor.cxx code executes

commands received from a client eg. when

something is selected in a listbox




Introducing Notebookbar in online

Core part:

● NotebookBar control only creates container (vcl/control/notebookbar.cxx)

● Sfx2 part creates WeldedTabbedNotebookbar in the container

● WeldedTabbedNotebookbar creates JSInstanceBuilder and welds the TabControl

● Notebookbar is not fully welded but it is enough to switch tabs

● Code moved to sfx2 where we have more information about current view so we can

manage notebookbar creation per view





Online part:

● First problem: we need only part of

the classic UI

● Big rework of UI initialization

● Split Control.Toolbar.js monster into

smaller pieces

● Created Control.UIManager.js which

builds the UI depending on device

and file type

Control.MobileTopBar.js

Control.FormulaBar.js

Control.SheetsBar.js

Control.MobileBottomBar.js





Online - new files:

● Control.Notebookbar.js contains common container code like: resize handling,

tabs insertion into menubar

● Control.NotebookbarWriter.js, Control.NotebookbarCalc.js

and Control.NotebookbarImpress.js – inherits from Control.Notebookbar.js,

contain list of available tabs, custom tabs definitions

● Control.UIManager.js initializes correct container depending on file opened

● Added switch in the loolwsd.xml config to select classic or notebookbar mode

<user_interface><mode> notebookbar </mode></user_interface>





Online part:

● Based on Control.JSDialogBuilder.js created Control.NotebookbarBuilder.js

● NotebookbarBuilder has redesigned build function which builds the UI horizontally,

also using div elements instead of tables

● Ported few custom widgets already present in the toolbars like: style/font selector,

insert table popup, conditional formatting popup




Custom widgets and popups in Notebookbar

Hamburger menuColor pickers

Line spacing dropdown

Insert table dropdown




Context handling




Styles preview



Thank you!

Checkout the CODE 6.4 with notebookbar!

By Szymon Kł[email protected]

bringing the

Documents