Download Library

Exploring SavvyUI’s Core Components: Buttons, Lists, and Form Controls

Modern desktop applications rely heavily on well-designed user interface components. Libraries like SavvyUI provide developers with a comprehensive collection of ready-to-use widgets that make building Windows desktop applications significantly easier.

SavvyUI is a powerful C++ component library designed for building Windows desktop applications with modern UI patterns and easy-to-use APIs. It includes a wide range of components that simplify interface development while maintaining consistent styling and behavior across applications. These components help developers quickly build feature-rich interfaces without implementing basic widgets from scratch. :contentReference[oaicite:0]{index=0}

In this article, we will explore three of the most essential UI building blocks provided by SavvyUI:

• Buttons
• Lists (ListBox)
• Form Controls

By understanding how these core widgets work, developers can quickly assemble powerful user interfaces with minimal effort.

---

1. SavvyUI Buttons

Buttons are one of the most fundamental UI elements in any application. They allow users to trigger actions such as submitting forms, opening dialogs, or executing commands.

SavvyUI provides a flexible Button component with multiple built-in styles and event handling mechanisms. Buttons can include icons, text, and different visual styles to communicate their purpose clearly. :contentReference[oaicite:1]{index=1}

Basic Button Example

class ButtonDemo : public FluidPanel, public ActionListener
{
	Button _buttonPrimary;

public:

	ButtonDemo()
	{
		_buttonPrimary.setButtonType(ButtonType::PRIMARY);
		_buttonPrimary.setText(L"PRIMARY");
		_buttonPrimary.setImage(IconSource(IconType::ADD));
		_buttonPrimary.addActionListener(this);

		addComponent(&_buttonPrimary, L"Primary Button");
	}

	void onAction(const ActionEvent& ev)
	{
		DialogFactory::showInfo(this, ev.actionName, L"Button Clicked");
	}
};
							

Available Button Styles

Some common button styles available in SavvyUI include:

• DEFAULT
• PRIMARY
• INFO
• DANGER
• SUCCESS
• WARN
• BLUE
• CYAN
• INDIGO
• ORANGE
• RED

These built-in styles allow developers to visually communicate different types of actions such as confirmations, warnings, or destructive operations.

---

2. Working with Lists: ListBox Component

List components are essential when displaying multiple selectable items. SavvyUI provides the ListBox component for displaying scrollable lists of items where users can choose one option.

List boxes are commonly used in forms, configuration panels, and selection dialogs because they allow users to browse and select items quickly. :contentReference[oaicite:2]{index=2}

ListBox Example

class ListBoxDemo : public GridPanel, public SelectionChangeListener
{
	ListBox _listbox;

public:

	ListBoxDemo()
	{
		_listbox.addItem(L"Manager");
		_listbox.addItem(L"Sales Representative");
		_listbox.addItem(L"Cashier");
		_listbox.addItem(L"Security");
		_listbox.addItem(L"Clerk");
		_listbox.addItem(L"Accountant");
		_listbox.addItem(L"CEO");

		_listbox.addSelectionChangedListener(this);

		setLayout({ -1 }, { 100, -1 });
		addComponent(&_listbox, 0, 0);
	}

	void onSelectionChanged(const SelectionChangeEvent& ev)
	{
		DialogFactory::showInfo(this, ev.selectionValue, L"ListBox Selection Change");
	}
};
							

Key Features of ListBox

• Scrollable item list
• Single or multiple selection support
• Keyboard navigation
• Event listeners for selection changes
• Easy integration with forms and dialogs

These capabilities make ListBox an excellent choice for displaying structured options in enterprise applications.

---

3. Form Controls in SavvyUI

Form controls are essential for collecting user input. SavvyUI includes many input components such as:

• Text fields
• Password fields
• Checkboxes
• Radio buttons
• Dropdown lists
• Sliders
• Switches

These elements form the backbone of data entry interfaces in desktop applications. :contentReference[oaicite:3]{index=3}

Checklist Form Control Example

class CheckListDemo : public GridPanel, public SelectionChangeListener
{
	CheckList _checkList;

public:

	CheckListDemo()
	{
		_checkList.setOptions({
			{L"CA", L"California"},
			{L"FL", L"Florida"}
		});

		setLayout({ -1 }, { -1 });
		addComponent(&_checkList, 0, 0);
	}

	void onSelectionChanged(const SelectionChangeEvent& ev)
	{
		DialogFactory::showInfo(this, ev.selectionValue,
		L"CheckList Selection Change");
	}
};
							

Radio Button Group Example

class RadioDemo : public GridPanel, public SelectionChangeListener
{
	Radio _radioGroup;

public:

	RadioDemo()
	{
		_radioGroup.setOptions({
			{L"1", L"Option 1"},
			{L"2", L"Option 2"},
			{L"3", L"Option 3"}
		});

		addComponent(&_radioGroup, 0, 0);
	}
};
							

Radio groups are useful when users must select only one option from a set, while checklists allow multiple selections.

---

Best Practices for Using SavvyUI Components

When designing applications with SavvyUI, consider the following best practices:

• Use consistent button styles for similar actions.
• Keep lists short and organized to improve usability.
• Group related form controls logically.
• Provide visual feedback for user actions.
• Use icons alongside text where appropriate.

Following these practices helps maintain clean and intuitive user interfaces.

---

Conclusion

SavvyUI provides a rich collection of UI components that significantly simplify desktop application development in C++. By using built-in widgets like buttons, lists, and form controls, developers can build professional-grade interfaces quickly and efficiently.

If you're building modern Windows applications and want a powerful yet developer-friendly UI framework, SavvyUI offers the flexibility and performance needed to create robust desktop experiences.

Learn more and explore the full component library at https://www.savvyui.com.