Writing Your First App
Ultralight enables you to build your C/C++ app's front-end with HTML/JS/CSS.
This gives you the best of both worlds-- fast, beautiful, modern web UI with the power and performance of native code.
1. Install the prerequisites
Install the prequisites for your platform if you haven't already done so.
2. Clone the Quick Start repo
Clone the code in the ultralight-ux/ultralight-quick-start repository.
git clone [email protected]:ultralight-ux/ultralight-quick-start.git
3. Download the Ultralight SDK and extract it to /SDK
/SDK
Download the Ultralight SDK and extract the contents to ultralight-quick-start/SDK
.
4. Open in VS Code
Building the app
- Open the
ultralight-quick-start
folder in VS Code - Install the recommended extensions when prompted (C/C++ and CMake Tools)
- Select your preferred build preset (Release or Debug) when prompted
- Build the project using one of these methods:
- Click the "Build" button in the CMake status bar
- Run the "Build (Release)" or "Build (Debug)" task from the Terminal menu
- Press F7 to build with the default configuration
Running / debugging the app
After building, you can run and debug the app:
- Open the "Run and Debug" view (Ctrl+Shift+D)
- Select "MyApp" from the dropdown
- Press F5 to start debugging or Ctrl+F5 to run without debugging
5. Understanding the folder layout
The quick start project is organized with the following structure:
ultralight-quick-start/
├── assets/ # HTML resources to bundle with app
├── cmake/ # CMake scripts to automate build
├── src/ # C/C++ source files
└── CMakeLists.txt # CMake project file, edit this to customize your app
Assets Folder
You should place all your web-page resources (eg, HTML files, JS files, CSS files, images, etc.) inside the assets folder. Anything in this directory will be bundled with the application post-build.
You can access these resources via file:///
in your C++ and HTML code, for example:
void MyApp::InitializeView() {
// Load "app.html" from the "assets" directory
myView->LoadURL("file:///app.html");
}
6. Customizing the window title
To change the title of the window, we will need to dive into the C++ source code for our app.
Open up src/MyApp.cpp
and find the following lines:
///
/// Set the title of our window.
///
window_->SetTitle("MyApp");
Change the string to something like "My Awesome App!" and save the file:
///
/// Set the title of our window.
///
window_->SetTitle("My Awesome App!");
After you've done that, rebuild and relaunch MyApp to see your changes.
7. Editing the HTML assets
Let's start editing our HTML assets.
Open up assets/app.html
and find the following lines:
<body>
<h1>Hello World!</h1>
</body>
Change the HTML to display another welcome message, like "Welcome to My App!":
<body>
<h1>Welcome to My App!</h1>
</body>
After you've done that, rebuild and relaunch MyApp to see your changes.
Updated 14 days ago
Now that you've got a simple app working, you can start learning more complex API topics by trying the samples: