Using eepp as a complete beginner to c++

[emeraldtip]

A thread, mainly for me right now (as I lack much previous experience with cpp) to answer questions related to the library, it's usage etc.

Hopefully will be a useful resource for people, who want to start using the library in the future, but have issues.

All previous discussion in #22

Hopefully this is a good way of structuring resources or something idk

[emeraldtip]

How to get an element from a layout?
For exampĺe if I load a layout from a file, how would I get a button from it (the layout is currently the same as in the ui-hello-world example) and add an onclick event for example?

[SpartanJ]

As in JavaScript DOM manipulation. You can search basically by ID, class or element type, or by doing a query with a CSS selector.
Using as an example the hello world:
uiSceneNode->loadLayoutFromString( layout );

Always returns the root node, so you can use it to filter (otherwise you can use use the scene node):

UIWidget* rootNode = uiSceneNode->loadLayoutFromString( layout );

// Find by id
// Will return a Node (the base class for all the Scene Nodes) or nullptr if nothing was found
rootNode->find( "text_view" );
// If you know the type of the returned node you can cast it during the find
rootNode->find<UITextView>( "text_view" );

// By class
rootNode->findByClass( "class_name" );

// By Type (this are the internal type identification of each element registered)
rootNode->findByType( UI_TYPE_TEXTVIEW );

// By Tag (the tag basically is the lowercase element name in the XML file)
rootNode->findByTAg( "textview" );

// Also if you are trying to locate more than one element you can use
// It will return a vector of nodes
rootNode->findAllByClass( "text_view" );
rootNode->findAllByType( UI_TYPE_TEXTVIEW );

// You can also use a query selector to find your element
// Returns the first element found
rootNode->querySelector( "linearlayout > textview" );

// Returns a vector of all elements found
UIWidget* widget = rootNode->querySelectorAll( "linearlayout > textview" );

// Let's do something with the widget
// Set the background of the widget on click
widget->onClick(
	[widget]( const MouseEvent* ) { widget->setBackgroundColor( Color::Red ); } );

// Set the background color on mouse leave
widget->on( Event::MouseLeave,
			[widget]( const Event* ) { widget->setBackgroundColor( Color::Blue ); } );

[emeraldtip]

I'll state again that I'm a beginner to c++ for the reference

If I understand correctly Node::onClick which is inherited by each widget has 2 arguments:

1. the function, which has to be a void and has to have the MouseEvent as an argument, so the MouseEvent can be accessed inside the actual function and something can be done with it???
2. the MouseButton pressed. But that defaults to left click and you can ignore the second argument? how?

and am I correct that [widget] is inside the square brackets due to it being "captured" by a lambda function?

[SpartanJ]

Sorry for the delay, I forgot about it.

1. Correct, the event in this case the function is defined as a void function with an const MouseEvent* parameter. (std::function<void( const MouseEvent* )>).
2. You can ignore it because it has a default value in its definition, see the header:

	Uint32 onClick( const std::function<void( const MouseEvent* )>& callback,
					const MouseButton& button = MouseButton::EE_BUTTON_LEFT );

3. and am I correct that [widget] is inside the square brackets due to it being "captured" by a lambda function? Yes, you're correct!

[emeraldtip]

How does the Gridlayout function?
How do I set the number of rows/columns?
Is it ElementMode? and what do size and weight mean?
Also how do I implement it in xml?

[SpartanJ]

How does the Gridlayout function?
This is by far my the least used layout in eepp. A GridLayout defines a rectangular grid of elements, as a tile-map.

How do I set the number of rows/columns? Is it ElementMode? and what do size and weight mean?

Depends on how you want it to work, this is defined by the colummn-mode property.
Basically if you want to set a fixed number of columns you'll set the column-mode as weight and set the column-weight as a percentage, for example, if you want to have 4 columns you'll set 0.25 per column (so 25%). Otherwise you can specify a fixed width using column-mode as size and setting its size with column-size.
And for rows it's exacly the same but with row- properies (row-mode, row-weight, etc).

Also how do I implement it in xml?
Just like any other element, example:

<ScrollView id="GridView" layout_width="match_parent" layout_height="match_parent" touchdrag="true">
    <GridLayout column-mode="size" row-mode="size" column-width="64dp" row-height="64dp" layout_width="match_parent" layout_height="wrap_content" id="gridlayout" />
</ScrollView>

I usually use it with a ScrollView (a scroll view automatically adds scrollbars if content doesn't fit to its container).

You can find an working implementation in UITextureViewer.
If you want to see it in action you can open the widget inspector in ecode (F11 or Settings -> Window -> Inspect Widgets) and click the "Texture Viewer" button.

Clarification, in the example you'll see the properties named without dashes - and cammel case, this is because all dashed properties have aliases without dashes and properties are case insensitive, more info here.

[emeraldtip]

How does one style the elements of a dropdownlist?

I want this to not cut the text in half and to display all options and not overlap:

[SpartanJ]

You can check the CSS file to understand how it's styled (it's very easy).

[emeraldtip]

I managed to get styling working, but I still can't figure out how to make the text not cut off - I've tried padding, using layout-height, margins, but it still looks like:

Here's the css I have for the dropdownlist things:

DropdownList::ListBox::item {
	background-color:#323232;
	padding:50dp;
}
DropdownList::ListBox::item:hover {
	background-color:#646464;
	padding:50dp;
}
DropDownList {
	background-color:#646464;
	border: none;
	layout-height:wc;
}

font size is 40dp globally

[SpartanJ]

For the DropDownList you'll have to do it by code because it's a fixed row height for the listbox, the code would be something like:

uiSceneNode->find<UIDropDownList>("mydropdownid")->getListBox()->setRowHeight(PixelDensity::dpToPxI(48));

PixelDensity::dpToPxI is to use device-pixel independent pixels, you can skip it.

[emeraldtip]

Thanks!

[SpartanJ]

BTW you can do it from CSS but I forgot about it haha: https://eepp.ensoft.dev/page_cssspecification.html#row-height
Usually all properties are exposed to CSS except for UITreeView and UITableView that are pending.

[emeraldtip]

How would I build for windows if I am on Linux?
Also is doing this correct?

#if EE_PLATFORM == EE_PLATFORM_LINUX
    //something linux specific here
#endif

#if EE_PLATFORM == EE_PLATFORM_WINDOWS
    //something windows specific here
#endif

[SpartanJ]

How would I build for windows if I am on Linux?

You'll need to install mingw32/mingw64 and mingw64 libSDL2 package (I can't tell you exactly how it's called because I don't know what distro you're using). It's not always trivial if you're not experienced but it's doable. eepp provides a script to build it for mingw (I actually distribute eepp built from Linux). You'll find the script at: projects/mingw32/make.sh. Usually you would like to build for 64bits so you'll need to call bash ./make.sh config=x86_64. I recommend you asking ChatGPT to guide you on how to compile with minw64, but it's basically very similar, you need to install the mingw64 cross compilation package and instead of using g++ and make you'll end up using some binary called like x86_64-w64-mingw32-g++ and mingw64-make.

Also is doing this correct?

Yes, it is.

[SpartanJ]

I think it's because your headers are different than your build. I very recently changed runMainLoop parameters, so your headers must be updated with the new change (runMainLoop now expects std::function<void()>). The fix would be: use same headers as your built version or build eepp again.

[emeraldtip]

Updated the headers and it now compiled.
I tried to run it on windows, found that the dll files libstdc++-6.dll and eepp-debug.dll were missing.
How would I go about obtaining these?

[SpartanJ]

The requirement of libstdc++-6.dll is weird because eepp is compiled with static libstdc, but you can get the file from your mingw installation, you can probably do a simple file search and you'll find it. It's also weird that ecode-debug.dll did not create a symlink in the bin folder haha. ecode-debug.dll will be located in libs/windows/x86_64/ecode-debug.dll if built with premake5, otherwise it will be at libs/windows/ecode-debug.dll. Those two files must be copied or symlinked alongside the exe file you want to run.
You're cross-building from Linux or using Windows? Can you give me a little bit information of your context? Also if you're using Linux please tell me your distro.

[emeraldtip]

I'm cross-building from Linux (Arch 6.7.9).
In the libs/windows/x86_64 folder there are only .lib files no .dll files.
The only dll files in the whole repo for me are the ones for SDL2, that are in the src folder.

Also on Linux if I wanted to distribute the eepp-debug shared library files alongside the executable how would I tell the executable to get them from some folder relative to it?

[SpartanJ]

ecode Windows build is distributed from the cross-compiled build from my Linux so this must work. I don't have any Arch VM currently but I might install one just to see how the environment differs from my openSUSE. Having said that, the repository provides some scripts to build eepp and ecode.
Please take a look at the script located at projects/mingw32/make.sh. This script will build eepp dynamic library (dll), also there's a script that builds and zips the ecode package, this is what I use to distribute ecode (with the dlls and assets), so you can look at that too, it's located at projects/mingw32/ecode/build.app.sh. The make.sh script should be called like:
make.sh -e config=release_x86_64 -j$(nproc) to build the whole project in release mode, and for debug with: make.sh -e config=debug_x86_64 -j$(nproc) (the -j is to build with all your available cores, you can remove that if you don't want it).
Check that the make.sh is doing some not so obvious stuffs with the premake5 call:
premake5 --file=../../premake5.lua --os=windows --cc=mingw --windows-mingw-build gmake2.
I hope this helps.