Hello World (C++)

Hello World in C++ for full framework control.

Understanding the C++ Structure

When you created the project using the Reflex Project Creator these C++ files were generated in helloreflex/code/:

File	Purpose
entry.cpp	Application entry point
instance.cpp	Business logic layer
view.cpp	UI layer

Step 1: Open the Project

Windows:

Navigate to helloreflex/project/win/
Open helloreflex.sln in Visual Studio 2022

macOS:

Navigate to helloreflex/project/macos/
Open helloreflex.xcodeproj in Xcode

Step 2: Define the View Layer

Open view.cpp in your IDE. The View layer creates and manages the UI:

#include "view.h"
//
//view
REFLEX_BEGIN_INTERNAL(helloreflex)
class ViewImpl : public View
{
public:
    //lifetime
    ViewImpl(Instance& instance);
private:
    static constexpr UInt16 kChunkVersion = 0;
    //Bootstrap::View state-persistence callbacks
    virtual void OnResetState(Key32 context) override;
    virtual void OnRestoreState(Data::Archive::View& stream, Key32 context) override;
    virtual void OnStoreState(Data::Archive& stream) const override;
    //GLX::Object callbacks
    virtual bool OnEvent(GLX::Object& source, GLX::Event& e) override;
    virtual void OnSetStyle(const GLX::Style& style) override;
    virtual void OnUpdate() override;
    const TRef<Instance> instance;
    GLX::Object m_hello_box;
};
ViewImpl::ViewImpl(Instance& instance)
    : View(instance, kChunkVersion, L":res:helloreflex/styles.txt")
    , instance(instance)
{
    GLX::AddFloat(SELF, m_hello_box, GLX::kAlignmentCenter);
}
void ViewImpl::OnResetState(Key32 context)
{
}
void ViewImpl::OnRestoreState(Data::Archive::View& stream, Key32 context)
{
}
void ViewImpl::OnStoreState(Data::Archive& stream) const
{
}
bool ViewImpl::OnEvent(GLX::Object& src, GLX::Event& e)
{
    return Bootstrap::View::OnEvent(src, e);
}
void ViewImpl::OnSetStyle(const GLX::Style& style)
{
    m_hello_box.SetStyle(style["HelloBox"]);
}
void ViewImpl::OnUpdate()
{
}
REFLEX_END_INTERNAL
TRef<helloreflex::View> helloreflex::View::Create(Instance& instance)
{
    return New<ViewImpl>(instance);
}

Step 3: Edit styles.txt

In the Editor window, open styles.txt and replace its contents with:

@Font Medium:
{
	path: ":res:IDE/font";
	size: 36;
};
size: 256,384;
bg_colour: 205;
HelloBox: {
    size: 280, 120;
    margin: 20;
    bg: 
        Fill(colour:49, 24, 116; corner: 12),
        Border(colour: 200; width: 1; corner: 12),
        Text(
            font: Medium; 
            value: "Hello, Reflex!"; 
            colour: 255; 
            justify: center
        );
};

Click Save (or press Ctrl+S / ⌘S). You should see "Hello, Reflex!" appear in the app window.

Step 4: Build and Run

Build the project (F7 in Visual Studio, ⌘B in Xcode)
Run the application

You should see a purple box with "Hello, Reflex!" text in the center.

Step 5: Add Interactivity

Let's make the box interactive by adding a selected state. First, update styles.txt to add a selected state:

@Font Medium:
{
	path: ":res:IDE/font";
	size: 36;
};
size: 256,384;
bg_colour: 205;
HelloBox: {
    size: 280, 120;
    margin: 20;
    bg: 
        Fill(colour:49, 24, 116; corner: 12),
        Border(colour: 200; width: 1; corner: 12),
        Text(
            font: Medium; 
            value: "Hello, Reflex!"; 
            colour: 255; 
            justify: center
        );
	@State selected: {
	        bg: 
	            Fill(colour: 0, 245, 160; corner: 12),
	            Border(colour: 200; width: 1; corner: 12),
	            Text(
	                font: Medium; 
	                value: "Hello, Reflex!"; 
	                colour: 255; 
	                justify: center
	            );
	    };
};

Save the file and watch the change appear instantly. Now update view.cpp to handle click events:

#include "view.h"
//
//view
REFLEX_BEGIN_INTERNAL(helloreflex)
class ViewImpl : public View
{
public:
    //lifetime
    ViewImpl(Instance& instance);
private:
    static constexpr UInt16 kChunkVersion = 0;
    //Bootstrap::View state-persistence callbacks
    virtual void OnResetState(Key32 context) override;
    virtual void OnRestoreState(Data::Archive::View& stream, Key32 context) override;
    virtual void OnStoreState(Data::Archive& stream) const override;
    //GLX::Object callbacks
    virtual bool OnEvent(GLX::Object& source, GLX::Event& e) override;
    virtual void OnSetStyle(const GLX::Style& style) override;
    virtual void OnUpdate() override;
    const TRef<Instance> instance;
    GLX::Object m_hello_box;
    bool m_clicked = false;
};
ViewImpl::ViewImpl(Instance& instance)
    : View(instance, kChunkVersion, L":res:helloreflex/styles.txt")
    , instance(instance)
{
    GLX::AddFloat(SELF, m_hello_box, GLX::kAlignmentCenter);
}
void ViewImpl::OnResetState(Key32 context)
{
}
void ViewImpl::OnRestoreState(Data::Archive::View& stream, Key32 context)
{
}
void ViewImpl::OnStoreState(Data::Archive& stream) const
{
}
bool ViewImpl::OnEvent(GLX::Object& src, GLX::Event& e)
{
    if (e.id == GLX::kMouseDown)
    {
        if (src == m_hello_box)
        {
            m_clicked = !m_clicked;
            GLX::Select(m_hello_box, m_clicked);
            return true;
        }
    }
    return Bootstrap::View::OnEvent(src, e);
}
void ViewImpl::OnSetStyle(const GLX::Style& style)
{
    m_hello_box.SetStyle(style["HelloBox"]);
}
void ViewImpl::OnUpdate()
{
}
REFLEX_END_INTERNAL
TRef<helloreflex::View> helloreflex::View::Create(Instance& instance)
{
    return New<ViewImpl>(instance);
}

Rebuild and run. Now clicking the box toggles between purple and bright green.

Learn how to effectively use Reflex's two-window system for rapid UI iteration.

Edit your UI →