Elementor

How to get started

1. Install XMake

2. Clone the project

   git clone https://github.com/noartem/elementor.git
   cd elementor

3. Fetch project dependencies

   xmake

4. Optional Set build mode (release/debug/check)

   xmake f -m release -y

5. Build the project for your system

   xmake build

6. Generate CMake config file

   xmake project -k cmakelists

7. Check out examples

   xmake run example-todo

Project structure

src/library - contains library code
src/library/*.(cpp|h) - library core
src/library/platforms - standard primitive elements library, most of them can be replaced by self-made elements
src/platforms - OS interaction layer
src/platforms/gl - OS interaction layer made with GLFW
src/components - ready-to-use UI components made by standard elements composition, also can be replaced by user elements
src/examples - example applications used to verify that the library works correctly
tests - various library tests
tests/screenshots - standard examples screenshots used for testing
tests/screenshots_new - newly generated examples screenshots
tests/screenshots_diff - difference between standard and new screenshots

Run Tests

Run screenshot tests. Screenshots are created by tests/make_screenshots.cpp and compared by tests/compare_screenshots.py

python test.py

Examples

Elementor provides a list of various examples. They are also used for performing screenshot tests.

1. Basic

• Rich text rendering
• FPS counter
• Buttons and text field
• Hover and focus support
  • Click on a button and then press Tab - your focus will be moved to the next focusable element (button, text, ...)

xmake run example-basic

2. Button

• Clickable buttons of different types

xmake run example-button

3. Counter

• Clickable button
• Updating state

xmake run example-counter

4. CRUD (readonly)

• Template for a generic CRUD application
• For now, read-only

xmake run example-crud

5. Flexbox Layout

• Layout
• Nested layout

xmake run example-flex

6. Temperature Converter

• Text input
• State
• Transforming state

xmake run example-tempconv

7. Text

• Rich text rendering

xmake run example-text

8. TODO

• Complex demo application with all previous features combined
• Sync with markdown file examples/assets/todo.md

xmake run example-todo

All combined

There is also an example application providing all of the previous examples in one window.

xmake run examples