# The main window, made with the IDE's visual editor (open this file there: Design). The code behind it is# src/Form/MainForm.php: `events` name its methods. Left: the connections, their databases and tables; right: three# pages (the rows of a table, its structure, a SQL editor) chosen by the tab buttons.form: title: jumphpsql theme: light layout: column padding: 10 gap: 8 scroll: false children: - type: row gap: 6 items: center children: - {type: image, id: logo, src: assets/images/logo.png, width: 28, height: 28} - {type: label, id: heading, text: jumphpsql, bold: true, wrap: false} - {type: separator, width: 8} - {type: button, id: newConnection, text: 'New connection', style: primary, events: {click: onNewConnectionClick}} - {type: button, id: editConnection, text: Edit, enabled: false, events: {click: onEditConnectionClick}} - {type: button, id: connect, text: Connect, enabled: false, events: {click: onConnectClick}} - {type: button, id: refresh, text: Refresh, enabled: false, events: {click: onRefreshClick}} - {type: spacer} - {type: button, id: dump, text: 'Dump…', enabled: false, tooltip: 'Save the database (or the table) as a .sql file', events: {click: onDumpClick}} - {type: button, id: import, text: 'Import…', enabled: false, tooltip: 'Run a .sql file in the database', events: {click: onImportClick}} - {type: checkbox, id: dark, text: Dark, events: {change: onDarkChange}} - type: row gap: 8 height: fill children: - {type: container, class: App\Gui\TreeView, id: tree, width: 280, height: fill, events: {select: onTreeSelect, toggle: onTreeToggle, activate: onTreeActivate}} - type: column gap: 6 grow: 1 height: fill children: - type: row gap: 4 items: center children: - {type: button, id: tabData, text: Data, style: primary, events: {click: onTabDataClick}} - {type: button, id: tabStructure, text: Structure, style: flat, events: {click: onTabStructureClick}} - {type: button, id: tabSql, text: SQL, style: flat, events: {click: onTabSqlClick}} - {type: spacer} - {type: label, id: where, text: 'No table open', style: muted, wrap: false} - type: column id: dataPage gap: 6 height: fill children: - type: row gap: 4 items: center children: - {type: textbox, id: filter, placeholder: "WHERE … (e.g. id > 10 AND name LIKE 'a%')", grow: 1, events: {submit: onFilterSubmit}} - {type: button, id: applyFilter, text: Filter, events: {click: onApplyFilterClick}} - {type: button, id: prevPage, text: '<', enabled: false, tooltip: 'Previous page', events: {click: onPrevPageClick}} - {type: label, id: pageInfo, text: '', style: muted, wrap: false} - {type: button, id: nextPage, text: '>', enabled: false, tooltip: 'Next page', events: {click: onNextPageClick}} - {type: container, class: App\Gui\DataGrid, id: grid, editable: true, height: fill, emptyText: 'Choose a table on the left', events: {sort: onGridSort, edit: onGridEdit}} - type: row gap: 4 items: center children: - {type: button, id: addRow, text: 'Add row', enabled: false, events: {click: onAddRowClick}} - {type: button, id: deleteRow, text: 'Delete row', enabled: false, tooltip: 'Marks the selected row (again: unmarks it)', events: {click: onDeleteRowClick}} - {type: spacer} - {type: label, id: changesInfo, text: '', style: muted, wrap: false} - {type: button, id: discard, text: Discard, style: flat, enabled: false, events: {click: onDiscardClick}} - {type: button, id: save, text: 'Save changes', style: primary, enabled: false, events: {click: onSaveClick}} - type: column id: structurePage gap: 6 height: fill visible: false children: - {type: container, class: App\Gui\DataGrid, id: columnsGrid, height: fill, emptyText: 'Choose a table on the left'} - {type: container, class: App\Gui\SqlEditor, id: createSql, readonly: true, height: fill} - type: column id: sqlPage gap: 6 height: fill visible: false children: - {type: container, class: App\Gui\SqlEditor, id: editor, height: fill, placeholder: 'SELECT … — Ctrl+Return runs the statement under the cursor, F5 runs everything', events: {run: onEditorRun, runAll: onEditorRunAll}} - type: row gap: 4 items: center children: - {type: button, id: run, text: 'Run statement', style: primary, tooltip: Ctrl+Return, events: {click: onRunClick}} - {type: button, id: runAll, text: 'Run all', tooltip: F5, events: {click: onRunAllClick}} - {type: combobox, id: results, width: 260, visible: false, events: {change: onResultsChange}} - {type: label, id: resultInfo, text: '', style: muted, grow: 1} - {type: container, class: App\Gui\DataGrid, id: resultGrid, height: fill, emptyText: 'The rows of the query show here'} - {type: label, id: status, text: 'Add a connection to a MySQL or MariaDB server', style: muted, wrap: false}