SavvyUI C++ Windows Component Library

Getting Started

Create a New Project

NOTE: The following instructions are specific for Visual Studio 2019, but these steps may only differently for other versions of Visual Studio.

  1. Start Visual Studio
  2. Click the "Create a new project" button
  3. Select the "Windows Desktop Application" C++ template and click Next
  4. Enter the name of your new application in the "Project Name" field
  5. Enter or choose the location/folder you want this new project to be saved under
  6. Leave the "Place solution and project in the same directory" option checked, and then click the Create button to create the new project

Update the new Project Settings

NOTE: The following instructions are specific to Visual Studio 2019, but they should be similar for other versions of Visual Studio. Follow these instructions to link the SavvyUI library and header files to your new project.

  1. Right-click the project node under Solution Explorer, select Properties from the context menu, we will create a 64-bit application, so we will configure the x64/Debug and x64/Release configurations.
  2. Under the Project Property Pages dialog, select "Debug" from the Configuration dropdown, and then select "x64" from the Platform dropdown
  3. Expand the "Configuration Properties" node
  4. Click the "VC++ Directories" node, and then click the "Include Directories" value inside the right-side panel, this will shown the dropdown arrow, click it, and then click the "<Edit...>" option under that dropdown.
  5. Add the path of the SavvyUI library folder inside the box at the top of the shown dialog, this will be the parent folder of the include directory of the SavvyUI library distribution, click OK once that folder is selected.
  6. Click the "Library Directories" node inside the left side panel, and then click the value field inside the right-side panel, this will shown the dropdown arrow, click it, and then click the "<Edit...>" option under that dropdown.
  7. Add the path of the SavvyUI library folder inside the box at the top of the shown dialog; i.e. SavvyUI/VC2019, and then click OK.
  8. Next, expand the "Linker" node under Configuration Properties inside the left-side panel.
  9. Click the "Input" node under the Linker node.
  10. Click the "Additional Dependencies" value inside the right-side panel, this will shown the dropdown arrow, click it, and then click the "<Edit...>" selection under that dropdown.
  11. Add the entry "SavvyUI_X64_Debug.lib" without the double-quotes to the box at the top of the shown dialog; i.e. SavvyUI_X64_Debug.lib, and then click OK.
  12. Expand the C/C++ node and click on Code Generation, change the value of the Runtime Library property to /MTd for the Debug configuration, and /MT for the Release configuration.
  13. Repeat these steps for the Release/x64 Configuration, but this time, specify the library name as SavvyUI_X64.lib instead of SavvyUI_Debug.lib. Click OK when done to save the changes you made to these configurations in the Project Property Pages dialog.


Edit the generated application .cpp file and replace its content with the following, make sure to rename the SavvyUIApp_VC2019.h include line with the name of your application's main .h file.

#include <include/Frame.h>
#include <include/CardPanel.h>
#include <include/DialogFactory.h>
#include <include/Icons.h>
#include <include/EventListeners.h>

#include "framework.h"
#include "SavvyUIApp_VC2022.h" // Rename to your application's name

class MainFrame : public Frame, public ActionListener
{
	CardPanel _cardPanel;

public:

	MainFrame(const wstring& title) : Frame(title)
	{
		Theme::GetInstance()->setDarkTheme(); // setSilverTheme()

		setLicense(L"Set Your License String Here!!!");
	}


	void onConstructWindow()
	{
		setWindowCentered();

		// Add the child components
		Bounds clientRect;
		GetClientRect(clientRect);

		GridPanel* contentPane = getContentPane();
		contentPane->setLayout({ 5, -1, 5 }, { 5, -1, 5 });
		contentPane->addComponent(CreateCardPanel(contentPane, clientRect), 1, 1);
        //
        setIcon(IconSource(IconType::CALCULATOR));
        //
        Menu* fileMenu = addMenu(L"File");
        if (fileMenu)
        {
            fileMenu->addTextItem(10, L"New");
            fileMenu->addTextItem(11, L"Open");
            Menu* saveAsMenu = fileMenu->addPopupItem(L"Save As Image");
            if (saveAsMenu)
            {
                saveAsMenu->addTextItem(10291, L"PNG");
                saveAsMenu->addTextItem(10292, L"JPG");
                saveAsMenu->addTextItem(10292, L"GIF");
            }
            fileMenu->addTextItem(12, L"close");
            fileMenu->addSeparatorItem();
            fileMenu->addTextItem(13, L"Exit");
        }
        Menu* editMenu = addMenu(L"Edit");
        if (editMenu)
        {
            editMenu->addTextItem(21, L"Copy");
            editMenu->addTextItem(22, L"Paste");
            editMenu->addTextItem(23, L"Cut");
            editMenu->addTextItem(24, L"Select All");
        }
        setMenuBarListener(this);
    }

    void onAction(const ActionEvent& ev)
    {
        if (ev.actionId == 10)
        {
            DialogFactory::showInfo(this, L"File->New action");
        }
        else if (ev.actionId == 10291)
            DialogFactory::showInfo(this, L"File->Save As PNG");
    }

	Component* CreateCardPanel(Component *parent, Bounds rect)
	{
		_cardPanel.createComponent(parent, rect);

		return &_cardPanel;
	}
};

//============================================= Main Entry Function =========================================

#define MAX_LOADSTRING 100

int APIENTRY wWinMain(_In_ HINSTANCE hInstance,
	_In_opt_ HINSTANCE hPrevInstance,
	_In_ LPWSTR    lpCmdLine,
	_In_ int       nCmdShow)
{
	UNREFERENCED_PARAMETER(hPrevInstance);
	UNREFERENCED_PARAMETER(lpCmdLine);

	long screenWidth, screenHeight;
	UICommonUtils::getScreenSize(screenWidth, screenHeight);

	Bounds rect;
	rect.left = 0;
	rect.top = 0;
	rect.right = screenWidth > 1400 ? 1400 : screenWidth;
	rect.bottom = screenHeight > 800 ? 800 : screenHeight;

	MainFrame frame(L"SavvyUI Sample");
	return frame.show(rect.left, rect.top, rect.width(), rect.height());
}