Ultra App Kit - table

mekans · December 28, 2022

Hi there,
How to create table in ultra app kit? I mean table with headers, columns and also selection highlight and hover highlight? From "/learn" i think that i need to create it from CustomWidget, but for newbie like me it's hard. Anyone help?

Dreikblack · December 30, 2022

Hi! I may try to create own Table class on the weekend.

mekans · December 30, 2022

Thank you,
I am waiting! ❤️

Dreikblack · December 30, 2022

Cell.h:

#pragma once
#include "UltraEngine.h"
#include "Table.h"

using namespace UltraEngine;

class Cell : public TextField
{
protected:
	Cell();
public:
	static std::shared_ptr<Cell> create(const int x, const int y, const int width, const int height, shared_ptr<Table> table, bool isHeader = false);
	void MouseEnter(const int x, const int y);
	void MouseLeave(const int x, const int y);
	Vec4 highlightColor = Vec4(0.3f, 0.3f, 0.3f, 1.0f);
	Vec4 backgroundColor = Vec4(0.15f, 0.15f, 0.15f, 1.0f);
};

Cell.cpp:

#include "UltraEngine.h"
#include "Cell.h"

Cell::Cell()
{
}

std::shared_ptr<Cell> Cell::create(const int x, const int y, const int width, const int height, shared_ptr<Table> table, bool isHeader)
{
	struct Struct : public Cell {
	};
	auto instance = std::make_shared<Struct>();
	instance->As<Widget>()->Initialize("", x, y, width, height, table, TEXTFIELD_DEFAULT);
	if (isHeader) {
		instance->backgroundColor = Vec4(0.2f, 0.2f, 0.2f, 1.0f);
		instance->highlightColor = Vec4(0.35f, 0.35f, 0.35f, 1.0f);
		instance->SetColor(instance->backgroundColor, WIDGETCOLOR_SUNKEN);
	}
	return instance;
}

void Cell::MouseEnter(const int x, const int y)
{
	TextField::MouseEnter(x, y);
	SetColor(highlightColor, WIDGETCOLOR_SUNKEN);
}

void Cell::MouseLeave(const int x, const int y)
{
	TextField::MouseEnter(x, y);
	SetColor(backgroundColor, WIDGETCOLOR_SUNKEN);
}

Table.h

#pragma once
#include "UltraEngine.h"

class Cell;

using namespace UltraEngine;

class Table : public Panel
{
protected:
	Table();

public:
	int rowCount = 0;
	int columnCount = 0;
	vector<std::shared_ptr<Cell>> headers;
	static std::shared_ptr<Table> create(const int x, const int y, const int width, const int height, int columnCount, int rowCount, shared_ptr<Widget> parent);
	vector<vector<std::shared_ptr<Cell>>> cells;
};

Table.cpp

#include "UltraEngine.h"
#include "Table.h"
#include "Cell.h"

using namespace UltraEngine;

Table::Table()
{
}

std::shared_ptr<Table> Table::create(const int x, const int y, const int width, const int height, int columnCount, int rowCount, shared_ptr<Widget> parent)
{
	struct Struct : public Table {
	};
	auto instance = std::make_shared<Struct>();
	instance->Initialize("", x, y, width, height, parent, UltraEngine::PanelStyle::PANEL_DEFAULT);
	instance->SetColor(0, 0, 0, 0);
	instance->columnCount = columnCount;
	instance->rowCount = rowCount;
	int cellWidth = Floor (float(width) / float(columnCount));
	int cellHeight = Floor(float(height) / float(rowCount + 1));

	instance->cells.resize(columnCount);
	instance->headers.resize(columnCount);

	for (int i = 0; i < columnCount; i++) {
		instance->cells[i].resize(rowCount);
		instance->headers[i] = Cell::create(cellWidth * i, 0, cellWidth, cellHeight, instance, true);
		instance->headers[i]->SetText(WString("Header ") + WString(i));
	}
	for (int i = 0; i < columnCount; i++) {
		for (int j = 0; j < rowCount; j++) {
			instance->cells[i][j] = (Cell::create(cellWidth * i, cellHeight * (j+1) , cellWidth, cellHeight, instance));
			instance->cells[i][j]->SetText(WString("Cell ") + WString(i) + WString(',') + WString(j));
		}
	}
	return instance;
}

main.cpp

#include "UltraEngine.h"
#include "UI/Table.h"

using namespace UltraEngine;

int main(int argc, const char* argv[])
{
    auto displays = GetDisplays();
    auto window = CreateWindow("Ultra Engine", 0, 0, 800, 600, displays[0], WINDOW_TITLEBAR | WINDOW_RESIZABLE | WINDOW_CENTER);
    auto ui = CreateInterface(window);

    Table::create(0, 0, 500, 500, 3, 7, ui->root);

    while (window->Closed() == false and window->KeyDown(KEY_ESCAPE) == false)
    {
        const Event ev = WaitEvent();
        switch (ev.id)
        {     
            case EVENT_QUIT:
            case EVENT_WINDOWCLOSE:
                return 0;
                break;
            default: break;
        }
    }
    return 0;
}

mekans · December 31, 2022

It works! Thank you, this source helped me to understand how it's created

mekans · June 17, 2023

i adjusted this solution in some way, but i need now table like listview in c#. It should be columns, headers and rows that could be selected. in a picture we can see that Cell0,0 1.0 and 2.0 are separate cells with data - i need them as a full row that are related to one object and displaying this object data.

Tbh i tried to build a custom widget with rows and other stuff but it's too hard for me

Dreikblack · June 18, 2023

Done!

ListViewData.cpp:

#pragma once
#include <UltraEngine.h>

using namespace UltraEngine;

class ListViewData 
{
protected:
	ListViewData() {}
public:
	static std::shared_ptr<ListViewData> create()
	{
		struct Struct : public ListViewData {};
		auto instance = std::make_shared<Struct>();
		return instance;
	}

	static std::shared_ptr<ListViewData> create(vector<WString> fields)
	{
		struct Struct : public ListViewData {};
		auto instance = std::make_shared<Struct>();
		instance->fields = fields;
		return instance;
	}

	vector<WString> fields;

	bool operator==(const ListViewData& other) const
	{
		if (fields.size() != other.fields.size()) return false;
		for (int i = 0; i < fields.size(); i++)
		{
			if (fields[i] != other.fields[i])
			{
				return false;
			}
		}
		return true;
	}
};

ListView.h

#pragma once
#include <UltraEngine.h>
#include "ListViewData.cpp"

using namespace UltraEngine;

class ListView : public Widget
{
protected:
	ListView();
	virtual bool Initialize(const int x, const int y, const int width, const int height, shared_ptr<Widget> parent, shared_ptr<ListViewData> header, int columnCount);
	iVec2 itemSize = iVec2(100, 20);
	//Called each time the widget is redrawn
	virtual void Draw(const int x, const int y, const int width, const int height);
	//Called when the mouse button is pressed
	virtual void MouseDown(const MouseButton button, const int x, const int y);
	//Called when the mouse moves if this widget has the focus
	virtual void MouseMove(const int x, const int y);
	std::function<bool(Event)> pickItemListener;
	int initBlockCount = 4;
	int selectedItemId = -1;
	int highlightItemId = -1;
	int columnCount = 1;
	int textAlignment = TEXT_CENTER | TEXT_MIDDLE;
	vector <shared_ptr<ListViewData>> items;
	shared_ptr<ListViewData> header;
public:
	static std::shared_ptr<ListView> create(const int x, const int y, const int width, const int height, shared_ptr<Widget> parent, shared_ptr<ListViewData> header, int columnCount = 1);
	virtual void Show();
	int getItemHeight();
	void setListener(std::function<bool(Event)> listener);
	void addItem(shared_ptr<ListViewData> item);
	void addItems(vector<shared_ptr<ListViewData>> items);
	void selectItem(shared_ptr<ListViewData> item);
	void removeSelectedItem();
	void clearItems();
	vector <shared_ptr<ListViewData>> getItems();
	shared_ptr<ListViewData> getSelectedItem();
	int getItemCount();
	int getHeight();
	void resize();
};

ListView.cpp:

#include "UltraEngine.h"
#include "ListView.h"

ListView::ListView()
{
	blocks.resize(initBlockCount);//background, border, highlight background for selected item, highlight under cursor
	textAlignment = TEXT_MIDDLE;
}

std::shared_ptr<ListView> ListView::create(const int x, const int y, const int width, const int height, shared_ptr<Widget> parent, shared_ptr<ListViewData> header, int columnCount)
{
	struct Struct : public ListView {};
	auto instance = std::make_shared<Struct>();
	instance->Initialize(x, y, width, height, parent, header, columnCount);
	return instance;
}

bool ListView::Initialize(const int x, const int y, const int width, const int height, shared_ptr<Widget> parent, shared_ptr<ListViewData> header, int columnCount)
{
	bool isInit = Widget::Initialize("", x, y, width, height, parent, 0);
	itemSize = iVec2(width, getItemHeight());
	ListView::columnCount = columnCount;
	initBlockCount += (columnCount * 2);
	ListView::header = header;
	return isInit;
}

int ListView::getItemHeight()
{
	return Round(float(GetInterface()->GetFontHeight(font, fontscale, fontweight)));
}

void ListView::Draw(const int x, const int y, const int width, const int height)
{
	for (auto& block : blocks)
	{
		block.hidden = true;
	}
	//Background
	blocks[0].color = color[WIDGETCOLOR_SUNKEN];
	blocks[0].wireframe = false;
	blocks[0].position = iVec2(0);
	blocks[0].size = size;
	blocks[0].hidden = false;
	//Border
	blocks[1].hidden = false;
	blocks[1].color = color[WIDGETCOLOR_BORDER];
	blocks[1].wireframe = true;
	blocks[1].position = iVec2(0);
	blocks[1].size = size;
	blocks[1].radius = 0;
	
	//Highlight for selected
	if (selectedItemId >= 0) {
		blocks[2].color = color[WIDGETCOLOR_SUNKEN] * 0.6f;
		blocks[2].wireframe = false;
		blocks[2].position = iVec2(0, itemSize.height * (selectedItemId + 1));
		blocks[2].size = itemSize;
		blocks[2].hidden = false;
	}
	//Highlight under cursor
	if (highlightItemId >= 0 && highlightItemId != selectedItemId) {
		blocks[3].color = color[WIDGETCOLOR_SUNKEN] * 0.85f;
		blocks[3].wireframe = false;
		blocks[3].position = iVec2(0, itemSize.height * (highlightItemId + 1));
		blocks[3].size = itemSize;
		blocks[3].hidden = false;
	}

	int fieldWidth = itemSize.width / columnCount;
	//headers
	for (int column = 0; column < columnCount; column++)
	{
		blocks[4 + column].hidden = false;
		blocks[4 + column].position = iVec2(fieldWidth * column, 0);
		blocks[4 + column].size = iVec2(fieldWidth, itemSize.height);
		blocks[4 + column].SetText(header->fields[column]);
		blocks[4 + column].textalignment = textAlignment;
		blocks[4 + column].color = 1;

		blocks[4 + column + columnCount].hidden = false;
		blocks[4 + column + columnCount].position = iVec2(fieldWidth * column, 0);
		blocks[4 + column + columnCount].size = iVec2(fieldWidth, itemSize.height);
		blocks[4 + column + columnCount].wireframe = true;
		blocks[4 + column + columnCount].color = Vec4(0.6f, 0.6f, 0.6f, 1);
	}
	// items
	int blockSize = initBlockCount + items.size();
	for (int column = 0; column < columnCount; column++)
	{
		int extraFiledI = items.size() * column;
		auto iterItem = items.begin();
		for (int i = initBlockCount; i < blockSize; i++)
		{
			blocks[i + extraFiledI].hidden = false;
			blocks[i + extraFiledI].position = iVec2(fieldWidth * column, itemSize.height * (i - initBlockCount + 1));
			blocks[i + extraFiledI].size = iVec2(fieldWidth, itemSize.height);
			blocks[i + extraFiledI].SetText(iterItem->get()->fields[column]);
			blocks[i + extraFiledI].textalignment = textAlignment;
			blocks[i + extraFiledI].color = 1;
			iterItem++;
		}
		for (int i = initBlockCount; i < blockSize; i++)
		{
			blocks[items.size() * columnCount + i + extraFiledI].hidden = false;
			blocks[items.size() * columnCount + i + extraFiledI].position = iVec2(fieldWidth * column, itemSize.height * (i - initBlockCount + 1));
			blocks[items.size() * columnCount + i + extraFiledI].size = iVec2(fieldWidth, itemSize.height);
			blocks[items.size() * columnCount + i + extraFiledI].wireframe = true;
			blocks[items.size() * columnCount + i + extraFiledI].color = color[WIDGETCOLOR_BORDER];
		}
	}
}

void ListView::MouseDown(const MouseButton button, const int x, const int y)
{
	if (button == MOUSE_LEFT)
	{
		if (x >= 0 and y >= getItemHeight() and x < size.x and y < size.y)
		{
			int itemId = y / getItemHeight() - 1;
			if (itemId >= 0 and itemId < items.size())
			{
				selectedItemId = itemId;
				Redraw();
				if (pickItemListener)
				{
					pickItemListener(Event(EVENT_WIDGETACTION, Self(), selectedItemId));
				}
			}
		}
	}
}

void ListView::MouseMove(const int x, const int y)
{
	int oldValue = highlightItemId;
	if (x >= 0 and y >= getItemHeight() and x < size.x and y < size.y)
	{
		int itemId = y / getItemHeight() - 1;
		if (itemId >= 0 and itemId < items.size())
		{
			highlightItemId = itemId;
		}
		else {
			highlightItemId = -1;
		}
	}
	else
	{
		highlightItemId = -1;
	}
	if (oldValue != highlightItemId)
	{
		Redraw();
	}
}

void ListView::Show()
{
	highlightItemId = -1;
}

void ListView::addItem(shared_ptr<ListViewData> item)
{
	items.push_back(item);
	resize();
	Redraw();
}

void ListView::addItems(vector<shared_ptr<ListViewData>> newItems)
{
	items.insert(items.end(), newItems.begin(), newItems.end());
	resize();
	Redraw();
}

void ListView::selectItem(shared_ptr<ListViewData> item)
{
	int i = 0;
	for (shared_ptr<ListViewData>& currentItem : items) {
		if (currentItem == item)
		{
			selectedItemId = i;
			break;
		}
		i++;
	}
}

void ListView::removeSelectedItem()
{
	if (selectedItemId == -1) return;
	items.erase(items.begin() + selectedItemId);
	//for some reason without readding items with just erase + Redraw() some fields has visual glitches
	auto newItems = items;
	clearItems();
	addItems(newItems);
}

void ListView::clearItems()
{
	selectedItemId = -1;
	highlightItemId = -1;
	items.clear();
	blocks.resize(initBlockCount);
	Redraw();
}

vector<shared_ptr<ListViewData>> ListView::getItems()
{
	return items;
}

shared_ptr<ListViewData> ListView::getSelectedItem()
{
	if (selectedItemId >= 0 && selectedItemId < getItemCount())
	{
		return items[selectedItemId];
	}
	return nullptr;
}

int ListView::getItemCount()
{
	return items.size();
}

int ListView::getHeight()
{
	return GetSize().height;
}

void ListView::resize()
{
	blocks.resize(initBlockCount + items.size() * 2 * columnCount);
}

void ListView::setListener(std::function<bool(Event)> listener)
{
	pickItemListener = listener;
}

main.cpp:

#include "UltraEngine.h"
#include "ListView.h"

using namespace UltraEngine;

int main(int argc, const char* argv[])
{
	//Get the displays
	auto displays = GetDisplays();

	//Create a window
	auto window = CreateWindow("Ultra Engine", 0, 0, 800, 600, displays[0], WINDOW_TITLEBAR | WINDOW_RESIZABLE | WINDOW_CENTER);

	//Create User Interface
	auto ui = CreateInterface(window);

	//Create widget
	auto sz = ui->root->GetSize();

	auto listView = ListView::create(10, 10, 600, 300, ui->root, ListViewData::create({ WString("header0 "), WString("header1") }), 2);
	for (int i = 0; i < 2; i++)
	{
		listView->addItem(ListViewData::create({ WString("filed0 ") + WString(i), WString("filed1 ") + WString(i) }));
	}


	auto textField0 = CreateTextField(10, 320, 100, 20, ui->root);
	textField0->SetText("filed0");
	auto textField1 = CreateTextField(110, 320, 100, 20, ui->root);
	textField1->SetText("filed1");
	auto addBtn = CreateButton("Add", 10, 340, 100, 20, ui->root);
	auto removeBtn = CreateButton("Remove", 110, 340, 100, 20, ui->root);

	listView->setListener(
		[textField0, textField1, listView](Event event)
		{
			auto data = listView->getSelectedItem();
			textField0->SetText(data->fields[0]);
			textField0->Redraw();
			textField1->SetText(data->fields[1]);
			textField1->Redraw();

			return true;
		});
	while (true)
	{
		const Event ev = WaitEvent();
		switch (ev.id)
		{
		case EVENT_WIDGETACTION:
			if (ev.source == addBtn)
			{
				listView->addItem(ListViewData::create({ WString(textField0->GetText()), WString(textField1->GetText()) }));
			}
			if (ev.source == removeBtn)
			{
				listView->removeSelectedItem();
			}
			break;
		case EVENT_QUIT:
		case EVENT_WINDOWCLOSE:
			return 0;
			break;
		default: break;
		}
	}
	return 0;
}

mekans · June 18, 2023

Exacly what i wanted! I am missing only context menu and also scrollbar, could you help in therms of that topic too?

Josh · June 18, 2023

The scrollpanel widget here might help;

https://github.com/UltraEngine/Extras/tree/main/Code/C%2B%2B/CustomWidgets

mekans · June 18, 2023

what about context menu? can this be done?

Josh · June 18, 2023

In Ultra Engine, there is a new command that has not been documented yet called PopupMenu().

mekans · June 18, 2023

I bought UAK and to get this function i need to buy another framework? Just need to create gui for desktop apps not games

Dreikblack · June 18, 2023

I may try to make something like that for UAK a bit later.

Dreikblack · June 18, 2023

Edit button just for having 2 buttons in a menu:

add shared_ptr<Panel> contextMenu; to ListView.h

In ListView.cpp update Initialize method:

bool ListView::Initialize(const int x, const int y, const int width, const int height, shared_ptr<Widget> parent, shared_ptr<ListViewData> header, int columnCount)
{
	bool isInit = Widget::Initialize("", x, y, width, height, parent, 0);
	itemSize = iVec2(width, getItemHeight());
	ListView::columnCount = columnCount;
	initBlockCount += (columnCount * 2);
	ListView::header = header;
	contextMenu = CreatePanel(0, 0, 100, 40, gui->root);
	contextMenu->Hide();
	auto editButton = CreateButton("Edit", 0, 0, 100, 20, contextMenu);//just for an example, no function
	auto removeButton = CreateButton("Remove", 0, 20, 100, 20, contextMenu);
	ListenEvent(EVENT_WIDGETACTION, removeButton, RemoveCallback, Self()->As<ListView>());
	return isInit;
}

and MouseDown method:

void ListView::MouseDown(const MouseButton button, const int x, const int y)
{
	contextMenu->Hide();
	if (x >= 0 and y >= getItemHeight() and x < size.x and y < size.y)
	{
		int itemId = y / getItemHeight() - 1;
		if (itemId >= 0 and itemId < items.size())
		{
			selectedItemId = itemId;
			Redraw();
			if (button == MOUSE_LEFT)
			{
				if (pickItemListener)
				{
					pickItemListener(Event(EVENT_WIDGETACTION, Self(), selectedItemId));
				}
			}
			else if (button == MOUSE_RIGHT)
			{
				contextMenu->Show();
				contextMenu->SetShape(iVec2(x, y), contextMenu->GetSize());
			}
		}
	}
}

Also add this function to same class:

bool RemoveCallback(const Event& ev, shared_ptr<Object> extra)
{
	auto listView = extra->As<ListView>();
	listView->removeSelectedItem();
	listView->contextMenu->Hide();
	return true;
}

Sign In

Ultra App Kit - table

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation