Tizen Developers

The Documentation says:

Encryption Sets the encryption of application resources (JS, CSS, and HTML files). HTML, JavaScript, and CSS files are stored encrypted.

https://developer.tizen.org/development/training/web-application/application-development-process/setting-project-properties

https://developer.tizen.org/dev-guide/web/2.3.0/org.tizen.mobile.web.appprogramming/html/ide_sdk_tools/web_config_ext.htm#setting

I would suggest you to recheck if the 'src dir' is okay... 

<img src="./images/myImage.png">

Cause I have seen the same behavior (black screen) when the image resource file is not found.

If the 'image is decrypted' is the issue then I doubt it's because the resource file is not found where it should have been (due to encryption). But if the code (js, HTML) can work fine after encryption, the image should also.

If you get some progress, please share in this post here.

Thank you for your response, Armaan!

It makes sense to encrypt only JS, CSS & HTML files, since little advantage could be gained from encrypting images that get displayed anyway.

In my widget, this was in index.html

<img id="image" class="image">

this in style.css

.image {
    width: 256px;
    height: 256px;
    padding: 52px 52px 52px 52px;
}

and this in app.js

document.getElementById('image').setAttribute('src', './image/splash.png');

When I followed your suggestion and moved the src specification into index.html like this

 <img id="image" class="image" src="./image/splash.png">

this image appeared correctly instead of the blank screen that I saw previously. I thought everything was solved, but then the widget would still not respond to a tap. Only when I moved all the code into index.html did it work.

So I have narrowed my problem down to this: When encrypted, it seems the code in app.js is invisible.

Remember that all is well when I do not encrypt.

What could I be doing wrong? I had this reference to the js file in the body (or head) of index.html

<script src="./js/app.js"></script>

The only way I could make it work thus far, was to avoid JavaScript code in a separate file. Here is the test code after moving it to index.html

<script>
  (function() {
    function launcher (appId) {
        window.tizen.application.launch(appId);
    }
    window.onload = function() {
        document.getElementById('container').addEventListener(
                'click', launcher.bind(this, 'xxxxxxxxxx.TestApp'));
    };
  })();
</script>

It simply launches a test app, similar to what the built-in shortcut widget does.

Steps to duplicate:

In Tizen Studio v1.1.1, select on the main menu:
  File -> New -> Tizen Project.
On the pop-up window labeled "Select the type of project",
  select "Template" and click "Next".
On the next window labeled "New Tizen Project", on the first tab labeled "Profile & Version",
  select "Wearable" and in the dropdown list pick "Wearable v2.3.2" and click "Next".
On the second tab labeled "Select the application type",
  select "Web Application" and click "Next".
On the third tab labeled "Select the application template",
  select "Widget" and click "Next".
On the fourth tab labeled "Define the project properties",
  accept the defaults and click "Finish".

A new project is created, and the "config.xml" file opens automatically.
Open the widget JavaScript subdirectory (e.g. Widget/widget/Widget/js), and edit "main.js".
Replace the contents entirely with the following code, and save it.

  function launcher (appId) {
      window.tizen.application.launch(appId);
  }
  window.onload = function() {
      document.getElementById('container').addEventListener(
              'click', launcher.bind(this, 'com.samsung.timer-wc1'));
  };

On the "config.xml" tab labeled "Privileges", select this privilege from the dropdown list:
  "http://tizen.org/privilege/application.launch"
Save the config.xml file, and check on the "Source" tab that the privilege appears as
  <tizen:privilege name="http://tizen.org/privilege/application.launch"/>

Compile, install and run the widget on a Gear S2.
When "Hello Widget" appears (after the loading finished), tap on it.
Observe the "Timer" app launching.

Back in Tizen Studio, scroll down on the "Tizen" tab of "config.xml" to the "Settings" pane.
  Change the "Encryption" value from "Disable" to "Enable".
Save the config.xml file, and check on the "Source" tab that the setting appears with others as
   <tizen:setting background-support="disable" encryption="enable" hwkey-event="enable"/>

Compile, install and run the widget on a Gear S2.
When "Hello Widget" appears (after the loading finished), tap on it.
Observe the "Timer" app *not* launching.

Now add the JavaScript code directly to the <body> element of the file "index.html" of the widget:

  <script type="text/javascript">
    function launcher (appId) {
        window.tizen.application.launch(appId);
    }
    window.onload = function() {
        document.getElementById('container').addEventListener(
                'click', launcher.bind(this, 'com.samsung.timer-wc1'));
    };
  </script>

Compile, install and run the widget on a Gear S2.
When "Hello Widget" appears (after the loading finished), tap on it.
Observe the "Timer" app launching again.

Hope you would be able to carry on for now, But you may report a bug on Tizen bug Tracker. If you like to check, here's guideline on how to report bugs.