makepad-7guis

Building the 7 GUIS with Rust Makepad UI framework

This is an attempt to build some simple programs using the Makepad Framework

It follows the 7 GUIs model to create simple to moderate UI applications

As Makepad is in active development, some features may not be available and full UI support may not be complete. We will work around any issues we may find.

Status

This project is currently a work-in-progress:

• Counter
• Temperature Converter
• Flight Booker
• Timer
• CRUD
• Circle Drawer
• Cells

Build Instructions

Since there will be multiple applications, each in its own directory, the instructions below will be for the first app, counter. The same instructions applies to all so just replace counter with the other app names below.

1. Setup Makepad

Clone the Makepad repository

git clone git@github.com:makepad/makepad.git

Change to latest 'rik' branch

git branch rik

2. Get Project

Clone the makepad-7guis repo

git clone https://github.com/project-robius/makepad-7guis.git

3. MacOS Desktop Build

cd ~/makepad-7guis
cargo run --bin makepad-7guis-counter

or

cargo run --bin makepad-7guis-temp-conv

4. Android Build

Install Android toolchain (First time)

rustup toolchain install nightly
cargo makepad android install-toolchain

Install app on Android devivce or Android emulator

Open either the Android emulator or connect to a real Android device use adb command to make sure there's a device connected properly

cd ~/makepad-7guis-counter
cargo makepad android run -p makepad-7guis-counter --release

5. iOS Setup & Install

Install IOS toolchain (First time)

rustup toolchain install nightly
cargo makepad ios install-toolchain

Install app on Apple devivce or iOS simulator

iOS Setup

For iOS, the process is slightly more complicated. The steps involved are:

1. Enable your iPhone's Developer Mode, please see instructions here: Enable Developer Mode
2. Setup an Apple Developer account
3. Setup an empty skeleton project in XCode
   1. File -> New -> Project to create a new "App"
   2. Set the Product Name as SevenGuis (used in --org later)
   3. Set the Organization Identifier to a value of your choice, for this example we will use rs.robius. (used in --app later)
   4. Setup the Project Signing & Capabilities to select the proper team account
4. In XCode, Build/Run this project to install and run the app on the simulator and device
5. Once the simulator and device has the "skeleton" app installed and running properly, then it is ready for Makepad to install its application.

Makepad Install

We will run the cargo makepad ios command, similar to Android build above, but there are some 3 to 4 additional parameters that need to be filled in:

--org-id

This is the value of the ApplicationIdentifierPrefix in the **.mobileprovision file located in the ~/Library/MobileDevice/Provisioning Profiles directory. It should be a 10 digit alphanumeric value.

--org

First few parts of the organization identifier (which makes up the Bundle Identifier). Usually in the form of com.somecompany or org.someorg This is the same value used to setup the initial skeleton app above. For this example:

rs.robius

--app

The name of the application or the project. This is the same as the Product Name used to setup the initial skeleton app above. In this case:

SevenGuis

--ios-version (optional)

defaults to 17. Set it to 16 or other values if the device is not running iOS 17.

Example

For this example, we have the Bundle Identifier of rs.robius.SevenGuis

Install app on IOS simulator

cd ~/makepad-7guis-counter
cargo makepad ios --org=rs.robius --app=SevenGuis run-sim -p makepad-7guis-counter --release

Install app on IOS device

cd ~/makepad-7guis-counter
cargo makepad ios --ios-version=16 --org-id=<ORGIDVALUE> --org=rs.robius --app=SevenGuis run-device -p makepad-7guis-counter --release

5. WASM Build

Coming Soon