Building a Complete CRUD App in C++ with SavvyUI — A Real Project Example

Why Use SavvyUI for Desktop Applications?

SavvyUI is a feature-rich Windows C++ component library designed for building complex desktop applications. It provides a large collection of built-in UI components with a consistent design and easy-to-use APIs. :contentReference[oaicite:3]{index=3}

Key advantages include:

• Modern UI components
• Simple event-driven architecture
• Built-in layout managers
• Database-friendly architecture
• Clean C++ syntax

Components such as Grid, TextField, ListBox, ButtonMenu, Calendar, CheckList, and TreeView can be combined to build powerful enterprise tools and data management systems. :contentReference[oaicite:4]{index=4}

Project Overview: Employee Manager

Our sample application will contain three major UI areas:

• Employee Form – for entering employee details
• Employee Grid – displays employees in a table
• Action Buttons – create, update, and delete records

The data will be stored in a simple SQL table:

CREATE TABLE employees (
	id INTEGER PRIMARY KEY AUTOINCREMENT,
	name TEXT,
	position TEXT,
	salary REAL
);
							

Step 1 — Creating the Main UI Layout

SavvyUI provides flexible layout managers like GridPanel and FluidPanel to arrange components easily.

class EmployeeManager : public GridPanel
{
	TextField _nameField;
	TextField _salaryField;
	ComboBox _positionBox;

	Button _addButton;
	Button _updateButton;
	Button _deleteButton;

	Grid _employeeGrid;

public:

	EmployeeManager()
	{
		setMargin(10);

		setLayout({-1,-1}, {80,80,-1});

		addComponent(&_nameField,0,0);
		addComponent(&_positionBox,1,0);
		addComponent(&_salaryField,2,0);

		addComponent(&_addButton,0,1);
		addComponent(&_updateButton,1,1);
		addComponent(&_deleteButton,2,1);

		addComponent(&_employeeGrid,0,2,3,1);
	}
};
							

This layout creates a simple form at the top and a grid below for displaying employee records.

Step 2 — Configuring the Employee Grid

SavvyUI’s Grid component is perfect for displaying tabular data. It supports editable cells, paging, and column configuration. :contentReference[oaicite:5]{index=5}

_employeeGrid.addColumn(L"ID", L"ID", FALSE, 5);
_employeeGrid.addColumn(L"Name", L"Name", TRUE, 25);
_employeeGrid.addColumn(L"Position", L"Position", TRUE, 25);
_employeeGrid.addColumn(L"Salary", L"Salary", TRUE, 15);
							

Once configured, the grid can be populated dynamically from a database query.

Step 3 — Connecting to the Database

SavvyUI provides a convenient Database class that allows you to execute SQL queries and retrieve results.

Database db;

db.open(L"employees.db");

auto result = db.query(L"SELECT id,name,position,salary FROM employees");

while(result.next())
{
	int id = result.getInt(L"id");
	wstring name = result.getString(L"name");
	wstring position = result.getString(L"position");
	double salary = result.getDouble(L"salary");

	_employeeGrid.addRow({
		to_wstring(id),
		name,
		position,
		to_wstring(salary)
	});
}
							

Step 4 — Creating Employee Records

The Create operation inserts a new employee into the database using the values from the form fields.

void addEmployee()
{
	wstring name = _nameField.getText();
	wstring position = _positionBox.getSelectedValue();
	wstring salary = _salaryField.getText();

	wstring sql =
		L"INSERT INTO employees(name,position,salary) VALUES(?,?,?)";

	db.execute(sql,{name,position,salary});

	loadEmployees();
}
							

Step 5 — Updating Records

void updateEmployee(int id)
{
	wstring name = _nameField.getText();
	wstring position = _positionBox.getSelectedValue();
	wstring salary = _salaryField.getText();

	db.execute(
		L"UPDATE employees SET name=?, position=?, salary=? WHERE id=?",
		{name, position, salary, to_wstring(id)}
	);

	loadEmployees();
}
							

Step 6 — Deleting Employees

void deleteEmployee(int id)
{
	db.execute(
		L"DELETE FROM employees WHERE id=?",
		{to_wstring(id)}
	);

	loadEmployees();
}
							

Step 7 — User Feedback with DialogFactory

SavvyUI also includes utility components like DialogFactory for alerts and confirmations. :contentReference[oaicite:6]{index=6}

DialogFactory::showConfirm(
	this,
	L"Are you sure you want to delete this employee?",
	L"Confirm Delete"
);
							

Final Result

After implementing these steps, your Employee Manager application will provide:

• Employee data entry form
• Grid-based employee list
• Create, update, and delete operations
• Database persistence
• User-friendly dialogs

This structure can easily be extended to build systems like:

• Customer management systems
• Inventory systems
• POS software
• Internal business tools

Conclusion

SavvyUI dramatically simplifies the process of building modern desktop applications in C++. By combining powerful UI components with a clean event-driven architecture, developers can rapidly build full-featured applications like the Employee Manager demonstrated in this tutorial.

If you're building professional Windows software with C++, SavvyUI provides an excellent toolkit that bridges the gap between traditional C++ development and modern UI frameworks.

Explore the official documentation and components here: SavvyUI Official Website