DEV Community

Cover image for Day 10 of #100DaysOfCode: Learn Monkey C- create a menu for CIQ application
Jen-Hsuan Hsieh
Jen-Hsuan Hsieh

Posted on

Day 10 of #100DaysOfCode: Learn Monkey C- create a menu for CIQ application

Introduction

We can use Monkey C and Connect IQ SDK to customize the appearance of Garmin devices. The article is the note for learning Monkey C.

Overview

It's a simple example for a Connect IQ application with simple menu. There are a few kind of objects in this example.

  • App.AppBase: entry point
  • Ui.View: menu or other views
  • Ui.MenuInputDelegate: the actions when the menu item is selected
  • module: stores static variables

Alt Text

Steps

1.Prepare the development environment

2.Prepare the manifest.xml and resources/menus/menu.xml

  • manifest.xml: specify the entry ```

entry="ExampleApp"

* resources/menus/menu.xml

```xml


<menu id="ExampleMenu">
    <menu-item id="room_1" label="Item 1" />
    <menu-item id="room_2" label="Item 2" />
</menu>


Enter fullscreen mode Exit fullscreen mode

3.Prepare main files

  • Module (Example) ```java

using Toybox.System as Sys;
using Toybox.Communications as Comm;
using Toybox.Application;
using Toybox.WatchUi as Ui;
using Toybox.Timer as Timer;
using Toybox.UserProfile;

module Example {
var roomId = -1;
}


* Entry point (ExampleApp)
```java


using Toybox.Application as App;
using Toybox.WatchUi as Ui;

class ExampleApp extends App.AppBase {

    function initialize() {
        AppBase.initialize();
    }

    // Return the initial view of your application here
    function getInitialView() {
        return [new ExampleAppMenu()];
    }

}


Enter fullscreen mode Exit fullscreen mode
  • Menu (ExampleAppMenu) ```java

using Toybox.WatchUi as Ui;
using Toybox.System as Sys;
using Toybox.Timer as Timer;

class ExampleAppMenu extends Ui.View {

function initialize() {
}

function selectRoomMenu() {
    Ui.pushView(new Rez.Menus.ExampleMenu(), new ExampleAppMenuDelegate(), Ui.SLIDE_IMMEDIATE);
}
Enter fullscreen mode Exit fullscreen mode

}



  • Actions (ExampleAppMenuDelegate) ```java

using Toybox.WatchUi as Ui;
using Toybox.System as Sys;

class ExampleAppMenuDelegate extends Ui.MenuInputDelegate {
function initialize() {
MenuInputDelegate.initialize();
}

function onMenuItem(item) {
    if (item == :room_1) {
        Example.roomId = 1;
    } else {
        Example.roomId = 2;
    }

    Ui.popView(Ui.SLIDE_IMMEDIATE);
    Ui.pushView(new ExampleAppView(), new ExampleAppDelegate(), Ui.SLIDE_IMMEDIATE);
Enter fullscreen mode Exit fullscreen mode

}
}

Enter fullscreen mode Exit fullscreen mode




4.Compile and run on the simulator

  • That's it!

Alt Text

Articles

There are some of my articles. Feel free to check if you like!

Top comments (2)

Collapse
 
laiti profile image
Antti Laiti

This seems to be indeed missing at least implementation of ExampleAppView() and ExampleAppDelegate()

Collapse
 
ikif profile image
Ikif

The example doesn't work . You missed to share something...