Tutorial: Connect IQ string resources 1

Prerequisites

a working development environment, see how to set this up here.
a finished solution of Tutorial Create a Connect IQ Data Field With Direct dc.draw() calls (you can download my solution file here)

Why?

For people it’s usually more enjoyable if they can use a program in their mother tongue.

Create the main resource

Edit the main resources of the application by navigating to resources -> strings -> strings.xml. Right click and choose Open With -> Text Editor and provde the resource names and resource values:

<strings>
    <string id="AppName">Steps Carousel</string>
    <string id="TotalSteps">Total</string>
    <string id="ActiveSteps">Steps</string>
    <string id="StepsToDo">To Go</string>
    <string id="GoalPercentage">Goal (%)</string>
</strings>

<string id="AppName">Steps Carousel</string>

<string id="TotalSteps">Total</string>

<string id="ActiveSteps">Steps</string>

</strings>

Create the translated resources

For each language that we will support we now have to create values in the corresponding resources group.
In this tutorial we’re going to provide resources for the dutch language.

Copy the strings folder from the main resources to the language specific folder (resources-dut in our example) (CTRL+Click&Drag – Choose Copy Files and Folders)
Edit the strings.xml file (Right Click. Open With -> Text Editor) and provide the translations:

<strings>
    <string id="AppName">Steps Carousel</string>
    <string id="TotalSteps">Totaal</string>
    <string id="ActiveSteps">Stappen</string>
    <string id="StepsToDo">Te Gaan</string>
    <string id="GoalPercentage">Doel (%)</string>
</strings>

<string id="AppName">Steps Carousel</string>

<string id="TotalSteps">Totaal</string>

<string id="ActiveSteps">Stappen</string>

</strings>

Alter the code to use the resources

The resources internal representation is a number (and not the actual text).
To show the actual text from the resource (in the current language) an extra function call is necessary.
We change the variable name from label to labelResource and initialize it with the resource value for the TotalSteps. We also change the variable name mValue to just be named as value:

    hidden var value = 0.0f;
    hidden var labelResource = Rez.Strings.TotalSteps;

1 2	hidden var value = 0.0f; hidden var labelResource = Rez.Strings.TotalSteps;

In the compute function we do a similar replace and change all the label statements to their resource equivalence, the final result of your replace will be that your compute function looks as follows:

    // The given info object contains all the current workout
    // information. Calculate a value and save it locally in this method.
    function compute(info) {
        var activityMonitorInfo = Toybox.ActivityMonitor.getInfo();
        if (timerRunning) {
            stepsRecorded = activityMonitorInfo.steps - stepsNonActive;
             ticker++;
        }

        var timerSlot = (ticker % 20);  // modulo the number of fields (4) * number of seconds to show the field (5)

        if (timerSlot <= 4) {  // first slot?
			labelResource = Rez.Strings.TotalSteps;
            value = activityMonitorInfo.steps;
        } else if (timerSlot <= 9) {
            labelResource = Rez.Strings.ActiveSteps;
            value = stepsRecorded;
        } else if (timerSlot <= 14) {
            labelResource = Rez.Strings.StepsToDo;
            value = (activityMonitorInfo.stepGoal - activityMonitorInfo.steps);
            if (value < 0) {
                value = 0;
            }
        } else if (timerSlot <= 19) {
            labelResource = Rez.Strings.GoalPercentage;
            value = (activityMonitorInfo.steps * 100.0) / activityMonitorInfo.stepGoal;
        } else {
            value = 0;
        }
    }

// The given info object contains all the current workout

// information. Calculate a value and save it locally in this method.

function compute(info) {

var activityMonitorInfo = Toybox.ActivityMonitor.getInfo();

if (timerRunning) {

stepsRecorded = activityMonitorInfo.steps - stepsNonActive;

ticker++;

}

var timerSlot = (ticker % 20); // modulo the number of fields (4) * number of seconds to show the field (5)

if (timerSlot <= 4) { // first slot?

labelResource = Rez.Strings.TotalSteps;

value = activityMonitorInfo.steps;

} else if (timerSlot <= 9) {

labelResource = Rez.Strings.ActiveSteps;

value = stepsRecorded;

} else if (timerSlot <= 14) {

labelResource = Rez.Strings.StepsToDo;

value = (activityMonitorInfo.stepGoal - activityMonitorInfo.steps);

if (value < 0) {

value = 0;

}

} else if (timerSlot <= 19) {

labelResource = Rez.Strings.GoalPercentage;

value = (activityMonitorInfo.steps * 100.0) / activityMonitorInfo.stepGoal;

} else {

value = 0;

}

To display the actual label text, we call the Ui.loadResource() function on the labelResource in the onUpdate function, after your modifications the function will look as:

    // Display the value you computed here. This will be called
    // once a second when the data field is visible.
    function onUpdate(dc) {
        var width = dc.getWidth();
        var height = dc.getHeight();
        var textCenter = Gfx.TEXT_JUSTIFY_CENTER | Gfx.TEXT_JUSTIFY_VCENTER;
        var backgroundColor = getBackgroundColor();
        // set background color
        dc.setColor(backgroundColor, Graphics.COLOR_TRANSPARENT);
        dc.fillRectangle (0, 0, width, height);
        // set foreground color
        dc.setColor((backgroundColor == Gfx.COLOR_BLACK) ? Gfx.COLOR_WHITE : Gfx.COLOR_BLACK, Graphics.COLOR_TRANSPARENT);

        // do layout
        if (isSingleFieldLayout()) {
            dc.drawText(width / 2, height / 2 - 40, Gfx.FONT_TINY, Ui.loadResource(labelResource), textCenter);
            dc.drawText(width / 2, height / 2 + 7, Gfx.FONT_NUMBER_THAI_HOT, value.format(valueFormat), textCenter);
        } else {
            dc.drawText(width / 2, 5 + (height - 55) / 2, Gfx.FONT_TINY, Ui.loadResource(labelResource), textCenter);
            dc.drawText(width / 2, (height - 23) - (height - 55) / 2 - 1, Gfx.FONT_NUMBER_HOT, value.format(valueFormat), textCenter);
        }
    }

// Display the value you computed here. This will be called

// once a second when the data field is visible.

function onUpdate(dc) {

var width = dc.getWidth();

var height = dc.getHeight();

var textCenter = Gfx.TEXT_JUSTIFY_CENTER | Gfx.TEXT_JUSTIFY_VCENTER;

var backgroundColor = getBackgroundColor();

// set background color

dc.setColor(backgroundColor, Graphics.COLOR_TRANSPARENT);

dc.fillRectangle (0, 0, width, height);

// set foreground color

dc.setColor((backgroundColor == Gfx.COLOR_BLACK) ? Gfx.COLOR_WHITE : Gfx.COLOR_BLACK, Graphics.COLOR_TRANSPARENT);

// do layout

if (isSingleFieldLayout()) {

dc.drawText(width / 2, height / 2 - 40, Gfx.FONT_TINY, Ui.loadResource(labelResource), textCenter);

dc.drawText(width / 2, height / 2 + 7, Gfx.FONT_NUMBER_THAI_HOT, value.format(valueFormat), textCenter);

} else {

dc.drawText(width / 2, 5 + (height - 55) / 2, Gfx.FONT_TINY, Ui.loadResource(labelResource), textCenter);

dc.drawText(width / 2, (height - 23) - (height - 55) / 2 - 1, Gfx.FONT_NUMBER_HOT, value.format(valueFormat), textCenter);

}

Test your data field

In the simulator:

Start the timer (Data Fields -> Timer -> Start Activity)
Change the language (Settings -> Language ->)

Source Code

You can download the full source code from github or download a local copy here

In the next tutorial we’ll learn how to create a unit test project

Feedback

Did you like this article?

Share the article with your friends on Facebook and Twitter

Questions?

Post in the comments section below!

One comment on “Tutorial: Connect IQ string resources”

Reply privatkredit Aug 27,2017 01:57

Du har vÃ¤l vad de kallar honom: Ljugholt. Det tycks stÃ¤mma in pÃ¥ honom nu nÃ¤r det framkommit att han visste om reglerna fÃ¶r ett Ã¥r sen men struntade i dom.

Start To Run