widget tizen tizen-wearable-sdk tizen-web-app

How do I package a Tizen Web Widget with a Tizen Web Application for my smartwatch?

I created a Web Widget that I want to push to my watch. The Tizen Documenation says a widget cannot be deployed standalone. So, I am trying to bundle my Widget with a Web Application. I have successfully pushed the Web Application to my watch, but I can't get the widget to go with it. I tried following the steps here: https://developer.tizen.org/development/getting-started/web-application/application-development-process#multi

My Web Widget is called JohnDoeWidget. The Web Application I bundled it with is called BuddyUI (It's the sample app). In the Tizen IDE, in the Project Explorer, it says "JohnDoeWidget [With BuddyUI] wearable-2.3.2". So I think I did that part correctly. When I push BuddyUI to my phone, there is no widget with it, though.

In the BuddyUI config.xml, in the Tizen (or advanced) menu, the Web Widget section has nothing in it. Surely this is the problem! However, I cannot figure out how to add the JohnDoeWidget to this. I tried manually editing the config.xml file, but then when it builds, it says "JohnDoeWidget exists with a different web widget project.". The BuddyUI config.xml looks like this

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="(removing link)" xmlns:tizen="(removing link)" id="(removing link)" version="1.0.0" viewmodes="maximized">
    <tizen:application id="yUnJzQvDKJ.BuddyUI" package="yUnJzQvDKJ" required_version="2.3"/>
    <content src="index.html"/>
    <feature name="(removing link)/feature/screen.size.normal"/>
    <icon src="icon.png"/>
    <name>BuddyUI</name>
    <tizen:privilege name=(removing link)/privilege/application.launch"/>
    <tizen:profile name="wearable"/>
    <tizen:setting hwkey-event="enable"/>
</widget>

What I tried to do was change it to this, with no luck.

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="(removing link)" xmlns:tizen="(removing link)" id="(removing link)" version="1.0.0" viewmodes="maximized">
    <tizen:application id="yUnJzQvDKJ.BuddyUI" package="yUnJzQvDKJ" required_version="2.3"/>
    <content src="index.html"/>
    <feature name="(removing link)/feature/screen.size.normal"/>
    <icon src="icon.png"/>
    <name>BuddyUI</name>
    <tizen:privilege name="(removing link)/privilege/application.launch"/>
    <tizen:profile name="wearable"/>
    <tizen:setting hwkey-event="enable"/>
    <tizen:app-widget id="Fttrlmw6YQ.JohnDoeWidget.JohnDoeWidget" primary="true">
        <tizen:widget-label>Hello Web Widget!</tizen:widget-label>
        <tizen:widget-content src="index.html">
            <tizen:widget-size preview="preview.png">2x2</tizen:widget-size>
        </tizen:widget-content>
    </tizen:app-widget>
</widget>

I also tried changing the app-widget id to yUnJzQvDKJ.BuddyUI.JohnDoeWidget but that gives the error "JohnDoeWidget exists with a different web widget project.".

How do I add a widget to an existing web application?

-- Edit: I also tried the following:

I created a new Web Application
Bundled a new web widget with it
Pushed it to my watch. The app showed up on my watch, but the widget did not.

Solution

Web widget is not support under Gear S2. (I can't be sure about S3.)
Look at this document.

Web widget is supported from 2.3.2. but but gear s2 is 2.3.1.

I don't know what is your smartwatch but I know every samsung smart watchs have OS under tizen 2.3.1.

I check my solution in 2.3.2 emulator on Tizen Studio latest version. and make sure it is works on the emulator.
But it is not works on my samsung gear s2.

So it is right operation "web widget" is not working on real targets in current time.

Don't edit config.xml to add a widget.

After you check the widgets for adding a your project in package multi menu in link, Tizen Studio change your config.xml to add widget.
You can see it in unzipped BuddyUI.wgt

Your error seems to be happened because the duplicated widget tag.
I think auto generated config.xml after you build that may have two same app-widget tag.

Just do following process and build UI project.

In the Web UI application project context menu, select Properties > Tizen Studio > Package > Multi.
Select the check box for the web widget applications, and click OK.

You can check and see how Tizen studio make it. just unzip wgt file.

I create basic UI and TestWidget1 and merge it one wgt file with upper process. it show following tree of files after unzip.

├── author-signature.xml
├── config.xml
├── css
│   └── style.css
├── icon.png
├── index.html
├── js
│   └── main.js
├── signature1.xml
└── widget
    └── TestWidget1
        ├── css
        │   └── style.css
        ├── icon.png
        ├── index.html
        ├── js
        │   └── main.js
        └── preview.png

And also has following config.xml

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/BasicUI2" version="1.0.0" viewmodes="maximized">
    <tizen:app-widget id="LRVQWwNeO1.BasicUI2.TestWidget1" primary="true">
        <tizen:widget-label>Hello Web Widget!</tizen:widget-label>
        <tizen:widget-content src="widget/TestWidget1/index.html">
            <tizen:widget-size preview="widget/TestWidget1/preview.png">2x2</tizen:widget-size>
        </tizen:widget-content>
    </tizen:app-widget>
    <tizen:application id="LRVQWwNeO1.BasicUI2" package="LRVQWwNeO1" required_version="2.3.2"/>
    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.all"/>
    <icon src="icon.png"/>
    <name>BasicUI2</name>
    <tizen:profile name="wearable"/>
</widget>