UI Components Reference

Overview

The MySQL SQL Editor uses Java Swing components with a custom color scheme and styling. This reference documents all UI components across the login and editor views.

Color Scheme

The application uses a consistent color palette across all views:

Primary Color

COLOR_PRIMARIO: #0078D7 (RGB: 0, 120, 215)Used for primary buttons, titles, and borders

Secondary Color

COLOR_SECUNDARIO: #64B4FF (RGB: 100, 180, 255)Used for secondary buttons and accents

Background Color

COLOR_FONDO: #F5F5F5 (RGB: 245, 245, 245)Used for panel backgrounds

Text Color

COLOR_TEXTO: #3C3C3C (RGB: 60, 60, 60)Used for general text

Additional colors: COLOR_ERROR: #DC3232 (RGB: 220, 50, 50) for error messages, and COLOR_BORDE: #C8C8C8 (RGB: 200, 200, 200) for borders.

The login view (View.java) provides the initial connection interface to MySQL databases.

Text Input Fields

txtUsuario - Username Field

Type: JTextFieldLocation: View.java:14, View.java:83-86Properties:

Font: Segoe UI, Plain, 12pt
Background: White (disabled: #F0F0F0)
Width: 20 columns
Trimmed on retrieval via getUsuario()

Usage:

String username = loginView.getUsuario();

txtPassword - Password Field

Type: JPasswordFieldLocation: View.java:15, View.java:96-99Properties:

Font: Segoe UI, Plain, 12pt
Background: White (disabled: #F0F0F0)
Width: 20 columns
Characters masked for security
Trimmed on retrieval via getPassword()

Usage:

String password = loginView.getPassword();

Combo Boxes

cmbServidores - Server Selector

Type: JComboBox<String>Location: View.java:16, View.java:70-73Properties:

Font: Segoe UI, Plain, 12pt
Background: White
Default options: ["localhost", "127.0.0.1"]

Usage:

String server = loginView.getServidor();

cbBasesDatos - Database Selector

Type: JComboBox<String>Location: View.java:17, View.java:111-114Properties:

Font: Segoe UI, Plain, 12pt
Background: White
Dynamically populated via setBasesDatos(List<String>)
Filters out system databases

Usage:

// Set databases
loginView.setBasesDatos(Arrays.asList("mydb", "testdb"));

// Get selection
String database = loginView.getBaseDatosSeleccionada();

Buttons

btnConectar - Connect Button

Type: JButtonLocation: View.java:18, View.java:138-139Style: Primary buttonProperties:

Background: #0078D7
Foreground: White
Font: Segoe UI, Bold, 12pt
Size: 120×35 pixels
Hover effect: Darker shade of primary color

Behavior: Validates inputs and initiates database connection

btnSalir - Exit Button

Type: JButtonLocation: View.java:19, View.java:141-142Style: Secondary buttonProperties:

Background: #64B4FF
Foreground: #3C3C3C
Font: Segoe UI, Bold, 12pt
Size: 100×35 pixels
Hover effect: Darker shade of secondary color

Behavior: Exits the application

btnActualizarBases - Refresh Databases Button

Type: JButtonLocation: View.java:20, View.java:116-118Style: Secondary buttonProperties:

Label: “Actualizar”
Background: #64B4FF
Positioned to the right of database selector

Behavior: Fetches available databases from server without connecting

Labels

lblTitulo - Title Label

Type: JLabelLocation: View.java:22, View.java:55-58Properties:

Text: “CONEXIÓN A MYSQL”
Font: Segoe UI, Bold, 18pt
Foreground: #0078D7 (primary color)
Alignment: Center

lblEstado - Status Label

Type: JLabelLocation: View.java:21, View.java:125-128Properties:

Font: Segoe UI, Plain, 12pt
Foreground: #DC3232 (error color)
Alignment: Center
Used for displaying error messages

Methods:

mostrarError(String mensaje) - Display error message
limpiarEstado() - Clear status message

Editor View Components

The editor view (SqlEditorView.java) provides the SQL query interface after successful connection.

Text Areas

txtConsulta - SQL Query Editor

Type: JTextAreaLocation: SqlEditorView.java:18, SqlEditorView.java:70-78Properties:

Font: Consolas, Plain, 14pt (monospace)
Size: 10 rows × 60 columns
Tab size: 2 spaces
Line wrap: Enabled
Word wrap: Enabled
Border: Empty padding (5px)

Usage:

String query = editorView.getConsulta();

Double-click a table name in listaTablas to auto-generate a SELECT query in this field.

Tables

tblResultados - Results Table

Type: JTableLocation: SqlEditorView.java:19, SqlEditorView.java:181-189Properties:

Font: Segoe UI, Plain, 12pt
Row height: 22 pixels
Grid: Hidden
Column width: 150 pixels (default)
Fills viewport height

Usage:

DefaultTableModel model = new DefaultTableModel();
// ... populate model ...
editorView.setResultados(model);

Displays query results with dynamic columns based on the result set metadata.

Lists

listaTablas - Tables List

Type: JList<String>Location: SqlEditorView.java:24, SqlEditorView.java:139-156Properties:

Font: Segoe UI, Plain, 12pt
Background: White
Selection mode: Single selection
Model: DefaultListModel<String>
Titled border: “Tablas disponibles”
Size: 220×200 pixels

Behavior:

Double-click generates SELECT * FROM <table> LIMIT 100 query
Tooltip: “Doble clic para generar SELECT”

Usage:

List<String> tables = Arrays.asList("users", "products", "orders");
editorView.actualizarListaTablas(tables);

Buttons

btnEjecutar - Execute Query Button

Type: JButtonLocation: SqlEditorView.java:20, SqlEditorView.java:118-120Style: Primary buttonProperties:

Label: “Ejecutar”
Background: #0078D7
Foreground: White
Font: Segoe UI, Bold, 12pt
Cursor: Hand cursor
Hover effect: Darker primary color

Behavior: Executes SQL query from txtConsulta

btnLimpiar - Clear Button

Type: JButtonLocation: SqlEditorView.java:21, SqlEditorView.java:122-124Style: Secondary buttonProperties:

Label: “Limpiar”
Background: #64B4FF
Foreground: #3C3C3C

Behavior: Clears query text, results table, and system message

btnRefrescarTablas - Refresh Tables Button

Type: JButtonLocation: SqlEditorView.java:22, SqlEditorView.java:126-128Style: Secondary buttonProperties:

Label: “Refrescar tablas”
Background: #64B4FF

Behavior: Reloads table list from current database

btnCambiarBD - Change Database Button

Type: JButtonLocation: SqlEditorView.java:27, SqlEditorView.java:106-108Style: Secondary buttonProperties:

Label: “Cambiar BD”
Background: #64B4FF
Layout: Grid layout (1×2 with 5px gap)

Behavior: Shows confirmation dialog, then disconnects and returns to login view

Text Fields

txtBaseDeDatos - Database Status Field

Type: JTextFieldLocation: SqlEditorView.java:23, SqlEditorView.java:87-97Properties:

Editable: False (read-only)
Font: Segoe UI, Plain, 12pt
Background: #E6F0FF (light blue)
Border: 1px line with 5-8px padding
Height: 35 pixels

Display States:

Connected: “Conectado a: ”
Disconnected: “Estado: No conectado”

Usage:

editorView.setBaseDeDatos("my_database");
editorView.setBaseDeDatos(null); // Show disconnected

Labels

lblMensajeSistema - System Message Label

Type: JLabelLocation: SqlEditorView.java:26, SqlEditorView.java:191-194Properties:

Font: Segoe UI, Plain, 12pt
Foreground: Dark gray
Border: Empty padding (5px top/bottom)
Position: Top of results panel

Usage:

editorView.setMensajeSistema("Consulta ejecutada correctamente");
editorView.setMensajeSistema("Error: " + exception.getMessage());

Displays execution status, row counts, or error messages.

Button Styling

Both views use a consistent button styling method:

Primary Buttons

Source: View.java:157-183, SqlEditorView.java:206-227

private void estilizarBoton(JButton boton, boolean primario)

Primary Button Style:

Background: #0078D7
Foreground: White
Font: Segoe UI, Bold
No focus painting or border painting
Hover: Darker shade of primary color

Secondary Button Style:

Background: #64B4FF
Foreground: #3C3C3C
Font: Segoe UI, Bold
Hover: Darker shade of secondary color

All buttons have setFocusPainted(false) and setBorderPainted(false) for a modern flat design.

UI State Management

bloquearInterfaz - Interface Locking

Method: View.bloquearInterfaz(boolean bloquear)Location: View.java:239-252Purpose: Disables/enables all input components during async operationsAffected Components:

cmbServidores
txtUsuario
txtPassword
cbBasesDatos
btnActualizarBases
btnConectar

Visual Changes:

Background changes to #F0F0F0 when locked
Background returns to White when unlocked

Usage:

loginView.bloquearInterfaz(true);  // Lock during operation
// ... perform async operation ...
loginView.bloquearInterfaz(false); // Unlock after completion

This prevents users from modifying inputs during database connection or query execution.

Layout Details

Layout Manager: GridBagLayout Panel Configuration:

Border: EmptyBorder(15, 20, 15, 20)
Insets: 8px on all sides
Fill: Horizontal
Weight X: 1

Editor View Layout

Layout Manager: BorderLayout with JSplitPane Split Configuration:

Orientation: Vertical
Resize weight: 0.35 (35% top, 65% bottom)
Divider size: 3 pixels

Fonts Used:

Normal: Segoe UI, Plain, 12pt
Monospace: Consolas, Plain, 14pt
Title: Segoe UI, Bold, 14pt

Getting Started

User Guide

Architecture

Development

Reference

Overview

Color Scheme

Primary Color

Secondary Color

Background Color

Text Color

Text Input Fields

Combo Boxes

Buttons

Labels

Editor View Components

Text Areas

Tables

Lists

Buttons

Text Fields

Labels

Button Styling

Primary Buttons

UI State Management

Layout Details

Editor View Layout

Build docs developers (and LLMs) love

Getting Started

User Guide

Architecture

Development

Reference

​Overview

​Color Scheme

Primary Color

Secondary Color

Background Color

Text Color

​Login View Components

​Text Input Fields

​Combo Boxes

​Buttons

​Labels

​Editor View Components

​Text Areas

​Tables

​Lists

​Buttons

​Text Fields

​Labels

​Button Styling

​Primary Buttons

​UI State Management

​Layout Details

​Login View Layout

​Editor View Layout

Build docs developers (and LLMs) love

Overview

Color Scheme

Login View Components

Text Input Fields

Combo Boxes

Buttons

Labels

Editor View Components

Text Areas

Tables

Lists

Buttons

Text Fields

Labels

Button Styling

Primary Buttons

UI State Management

Layout Details

Login View Layout

Editor View Layout