First Hello World Project

Your first Swift Cross Platform Android and iOS app

This HelloWorld example serves two purposes

  • it introduces the basics of developing with SCADE
  • it provides a quick way of checking if the installation was successful and all settings are configured correctly

Create project

  1. In the IDE, choose File | New | New Project

  2. Choose SCADE Project from Template

Project Category

Product Type

SCADE Project

Cross Platform Native Mobile App
(SPM executable type with extensions)

Swift Project

Library
Executable
Empty
Manifest
System-Module

  1. Enter the name, device format and layout manager
  • Name of the project - Make sure not to use naming convention you would apply to Swift classes
  • Layout - Choose the base layout manager you want to use. For beginners, use AutoLayout
  • Device - Choose you base device size. We recommend iPhone6
  1. Expand the HelloWorld project folder

The most important files are

  • main.page - the page file. It is the visual representation of you mobile page
  • main.page.swift - The Swift file containing the code for the main page

Create Hello World page

  1. Open the main.page file by doubleclicking it.

  2. Bring up the component dialog

    • Option 1 : Use key shortcut Command + Shift + L
    • Option 2 : Click the + Button on the upper right hand side of the IDE
  3. Drag a label into the page, set Hello World as the text

  4. Center it in the middle of the screen

    • Select the label
    • Use Constraint button to specify an AutoLayout option
    • Check the horizontal alignment checkbox

πŸ‘

Command + Shift + L

is the key shortcut for bringing up the control dialog. Quickly select a component and drag and drop it onto the page canvas.

  1. Repeat this action to add a button

Add the button logic

  1. Double-click on main.page.swift to open it
  2. Specify the code that is executed when the button is clicked
import ScadeKit
  
class MainPageAdapter: SCDLatticePageAdapter {
  
  // page adapter initialization
  override func load(_ path: String) {
    super.load(path)
    
    // Set label to Hello World when button1 is clicked
    self.button1.onClick{ _ in self.label1.text = "Hello World"}
    
  }
}

πŸ“˜

Autocompletion

SCADE is using the Apple Language Server Protocol LSP server to display autocompletion options. Sometimes, this components need a little time to provide latest code changes.

If button1 doesn't show up, press Command + B to build the project and trigger the LSP to display the autocompletion option.

Run the project

This minimum project can be started and run. The running options are

  • the powerful, superfast SCADE Simulator
  • the original Android Simulator
  • the original iOS Simulator
  • as an Android app
  • as an iOS App

Let's start with the SCADE simulator. It is very productive and easy to use for fast development purposes.

  1. Click on the large rectangle button, the project launch selector button
  1. Select the Scade Simulator as the runtime for launching

  2. Press the Play button to run the app
    Alternatively, use Command + R.

  3. The app should launch successfully with a HelloWorld page being displayed.

πŸ‘

Shortcut tips : Command + B and Command + R

Remember to use the shortcut to build and run the project

Compile and run in Android Simulator

So now that we have a minimal app, lets compile them to iOS and Android

Please go through this checklist before compiling to Android:

Checkpoint

Description

Instructions

Android Studio installed

You installed Android Studio

Install Android Studio / SDK

Android NDK installed

You installed Android NDK

Install Android NDK

Android Simulator installed

You installed Android Simulator

Install Android Simulator

SCADE Android settings were made

You provided the correct location of Android SDK and NDK in the SCADE settings file

SCADE Android settings

  1. Select Android x86 as the target
    Select the Android simulator you previously installed
  1. Press the Play button to compile to run it in Android simulator
  • The project is now compiled to Android & the simulator is started
  • The first time you compile, it takes > 120 seconds to finish compilation and start the simulator
  • After the first time, compilation speed is much faster as only the changed binaries are recreated and the android simulator doesn't need to be started

Compile and run in iOS Simulator

  1. Choose iOS Simulator as your target
  1. Build and run the project
    Use Command + R to run the project against the iOS Simulator

  2. The iOS Simulator should startup and show the app

Common gotchas and troubleshooting

  1. You forgot to save the code/page and the changes did not show up. Use Command + s to save. Autosaving mode also ask you if you want to save if you didn't.