# The main window of XenCenter: the menu bar, the toolbar, the resource tree on the left, the tabs of the selected object on the # right, the status bar. The code behind it: src/Form/MainForm.php. The custom widgets (tree, tabs, tables, graphs, console) are in src/Gui. form: title: 'XenCenter' theme: light accent: '#2f6fd6' fontSize: 13 radius: 5 controlHeight: 30 layout: column padding: 0 gap: 0 scroll: false background: '#eef1f5' children: - {class: App\Gui\MenuBar, id: menu, menus: [File, View, Pool, Server, VM, Storage, Templates, Tools, Help]} - type: row id: toolbar gap: 2 padding: 6 wrap: true background: '#f8f9fb' children: - {type: button, id: paneBack, text: '‹ Servers', style: flat, visible: false, tooltip: 'Back to the tree of servers', events: {click: onPaneBackClick}} - {class: App\Gui\ToolButton, id: back, text: Back, icon: back, enabled: false, events: {click: onToolClick}} - {class: App\Gui\ToolButton, id: forward, text: Forward, icon: forward, enabled: false, events: {click: onToolClick}} - {class: App\Gui\ToolSeparator} - {class: App\Gui\ToolButton, id: addServer, text: 'Add New Server', icon: add-server, events: {click: onToolClick}} - {class: App\Gui\ToolButton, id: newVm, text: 'New VM', icon: new-vm, enabled: false, events: {click: onToolClick}} - {class: App\Gui\ToolButton, id: newStorage, text: 'New Storage', icon: new-sr, enabled: false, events: {click: onToolClick}} - {class: App\Gui\ToolSeparator} - {class: App\Gui\ToolButton, id: shutDown, text: 'Shut Down', icon: power-off, enabled: false, events: {click: onToolClick}} - {class: App\Gui\ToolButton, id: reboot, text: Reboot, icon: reboot, enabled: false, events: {click: onToolClick}} - {class: App\Gui\ToolButton, id: startResume, text: Start, icon: power-on, enabled: false, events: {click: onToolClick}} - {class: App\Gui\ToolButton, id: suspend, text: Suspend, icon: suspend, enabled: false, events: {click: onToolClick}} - {type: spacer} - {class: JumPHP\Runtime\RuntimeBadge, id: runtime, width: 330} - {class: App\Gui\Rule} - type: row height: fill gap: 0 items: stretch children: - type: column id: left width: 300 height: fill gap: 10 padding: 10 background: '#f3f5f8' children: - {type: textbox, id: search, placeholder: 'Search…', events: {change: onSearchChange}} - {class: App\Gui\TreeView, id: tree, events: {change: onTreeChange, activate: onTreeActivate, contextmenu: onTreeMenu, pick: onTreePick}} - type: column gap: 3 children: - {class: App\Gui\ToolButton, id: navInfrastructure, text: Infrastructure, icon: pool, block: true, events: {click: onNavClick}} - {class: App\Gui\ToolButton, id: navObjects, text: Objects, icon: folder, block: true, events: {click: onNavClick}} - {class: App\Gui\ToolButton, id: navFolders, text: Folders, icon: folder, block: true, events: {click: onNavClick}} - {class: App\Gui\ToolButton, id: navTags, text: Tags, icon: tag, block: true, events: {click: onNavClick}} - {class: App\Gui\ToolButton, id: navNotifications, text: Notifications, icon: info, block: true, events: {click: onNavClick}} - {class: App\Gui\Rule, id: split, vertical: true} - type: column id: right grow: 1 height: fill gap: 0 background: '#ffffff' children: - {class: App\Gui\Banner, id: banner, text: XenCenter, icon: xencenter} - {class: App\Gui\TabStrip, id: tabs, tabs: [Home, Search], events: {change: onTabChange}} - type: row id: actions gap: 8 padding: 10 wrap: true visible: false background: '#fafbfc' children: [] - type: column id: body height: fill padding: 14 gap: 0 background: '#ffffff' children: - {class: App\Gui\PropertySheet, id: sheet} - {class: App\Gui\DashboardView, id: dashboard, visible: false, events: {select: onDashboardSelect, connect: onDashboardConnect}} - {class: App\Gui\DataGrid, id: grid, visible: false, events: {change: onGridChange, activate: onGridActivate, contextmenu: onGridMenu}} - type: column id: charts visible: false height: fill scroll: true gap: 14 children: - {class: App\Gui\LineChart, id: chart0} - {class: App\Gui\LineChart, id: chart1} - {class: App\Gui\LineChart, id: chart2} - {class: App\Gui\LineChart, id: chart3} - type: column id: console visible: false height: fill gap: 10 children: - type: row gap: 8 children: - {type: button, id: consoleCad, text: 'Send Ctrl+Alt+Del', events: {click: onConsoleCadClick}} - {type: button, id: consoleReconnect, text: Reconnect, style: flat, events: {click: onConsoleReconnectClick}} - {type: checkbox, id: consoleScale, text: 'Scale to fit', checked: true, events: {change: onConsoleScaleChange}} - {type: button, id: consoleFull, text: Fullscreen, style: flat, tooltip: 'The console over the whole window (Ctrl+Alt+F; Escape goes to the VM)', events: {click: onConsoleFullClick}} - {type: spacer} - {type: label, id: consoleStatus, text: '', style: muted, size: 12} - {class: App\Gui\VncView, id: vnc, events: {fullscreen: onVncFullscreen}} - type: column id: note visible: false height: fill padding: 24 gap: 12 children: - {type: label, id: noteText, text: '', wrap: true} - type: column id: home visible: false height: fill padding: 26 gap: 16 children: - type: row gap: 16 children: - {class: App\Gui\IconBox, kind: xencenter, width: 48, height: 48} - type: column gap: 2 children: - {type: label, text: 'XenCenter', style: title, color: '#1d3c6e'} - {type: label, text: 'Manage your XCP-ng and XenServer pools: servers, virtual machines, storage, networks, consoles and performance, from your computer or a browser.', style: muted, wrap: true} - type: panel title: 'Get started' padding: 18 gap: 14 children: - type: row gap: 10 children: - {type: button, id: homeAdd, text: 'Add a server…', style: primary, events: {click: onHomeAddClick}} - {type: button, id: homeDemo, text: 'Open the demo pool', events: {click: onHomeDemoClick}} - {type: label, id: homeHelp, text: 'XenCenter talks to XAPI, the toolstack of the pool master, over HTTP (port 80), HTTPS (443, desktop) or through an SSH tunnel to the server. In a browser the connection leaves from your own network when the JumPHP runtime is installed, else through the JumPHP server.', style: muted, wrap: true} - type: panel title: 'Overview' padding: 18 children: - {type: label, id: homeStats, text: '', wrap: true} - {class: App\Gui\Rule} - type: row id: statusBar gap: 12 padding: 6 background: '#f3f5f8' children: - {type: spacer, size: 4} - {type: label, id: status, text: Ready, grow: 1, size: 12} - {type: label, id: transport, text: '', size: 12, style: muted} - {type: spacer, size: 4}