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 • Edited on

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

#100daysofcode #garmin #connect #watch

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"
Enter fullscreen mode Exit fullscreen mode
  • resources/menus/menu.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) 
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; }
Enter fullscreen mode Exit fullscreen mode
  • Entry point (ExampleApp) 
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) 
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) 
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

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
 
ikif profile image
Ikif •

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

Collapse
 
laiti profile image
Antti Laiti •

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