0

hello world

where can i find steps to create a 'hello world' widget ?

thanks
Michael

by
21 Replies
  • 1) Install WDK via available instructions

    2) Create a directory named HelloWorld.widget inside /devwidgets

    3) inside that directory, create a Contents directory

    4) Create a file named widget.xml in the Contents directory with the following code:

    CODE
    <?xml version="1.0" encoding="utf-8"?>
    <metadata>
    <name>Hello World</name>
    <version>0.0.1</version>
    <identifier>com.helloworld</identifier>
    <author name="Jeremy Johnstone" organization="Yahoo! Inc." href="http://connectedtv.yahoo.com" />
    <copyright>2009</copyright>
    <description>Hello World widget</description>
    <platform minVersion="4.6.1" />
    <security>
    <filesystem>full</filesystem>
    <command>true</command>
    <http>all</http>
    </security>
    </metadata>


    5) Create a main.TV file in the same dir with the following code:

    CODE
    <?xml version="1.0" encoding="UTF-8"?>
    <widget>
    <script src="Javascript/widget.js" />
    </widget>


    6) Create a directory named Javascript in the Contents directory

    7) Create a file named widget.js in the Javascript directory with the following code:

    CODE
    include("Framework/kontx/1.1/src/all.js");

    var StaticSnippetView = new KONtx.Class({
    ClassName: 'StaticSnippetView',

    Extends: KONtx.system.AnchorSnippetView,

    createView: function() {
    this.controls.text = new KONtx.element.Text({
    label: "Hello World",
    styles: {
    fontSize: KONtx.utility.scale(20),
    vAlign: "center",
    hAlign: "center",
    color: "#FFFFFF"
    },
    }).appendTo(this);
    },
    });

    var MainView = new KONtx.Class({
    ClassName: 'MainView',

    Extends: KONtx.system.SidebarView,

    createView: function() {
    this.controls.button1 = new KONtx.control.TextButton({
    label: "Push Me",
    guid: "button1",
    events: {
    onSelect: function(event) {
    log("you pushed the button!");
    }
    },
    styles: {
    width: Theme.viewSpecs.SIDE_BAR.width,
    height: KONtx.utility.scale(35),
    vOffset: 0,
    }
    }).appendTo(this);
    }
    });

    KONtx.application.init({
    views: [
    { id: 'view-Main', viewClass: MainView },
    { id: 'view-Settings', viewClass: KONtx.views.AboutBox },
    { id: 'snippet-main', viewClass: StaticSnippetView },
    ],
    defaultViewId: 'view-Main',
    settingsViewId: 'view-Settings',
    });


    8) Reset your simulator and start it
    0
  • Great little quick tutorial..however, the push button function isn't working for my build
    0
  • QUOTE (jvalal @ Jan 9 2010, 04:53 PM) <{POST_SNAPBACK}>
    Great little quick tutorial..however, the push button function isn't working for my build


    More details needed. Not working how?
    0
  • Oh yeah, and how do you edit the title that appears after you click the widget? It still says hello world. I can get the widget one to change, but not the one when I am in the widget.
    thanks
    0
  • QUOTE (jvalal @ Jan 9 2010, 04:54 PM) <{POST_SNAPBACK}>
    Oh yeah, and how do you edit the title that appears after you click the widget? It still says hello world. I can get the widget one to change, but not the one when I am in the widget.
    thanks


    Again, I need you to use proper terminology before I can understand where you are referring to. Please take a look at the quick start docs and the developer guide and familiarize yourself with the terminology so we can better assist you.
    0
  • QUOTE (Jeremy Johnstone @ Jan 10 2010, 10:42 AM) <{POST_SNAPBACK}>
    Again, I need you to use proper terminology before I can understand where you are referring to. Please take a look at the quick start docs and the developer guide and familiarize yourself with the terminology so we can better assist you.



    Try "Yahoo! Connected TV Quick Start":

    http://developer.yahoo.com/connectedtv/quickstart/index.html

    Try "Yahoo! Connected TV Developer Guide":

    http://developer.yahoo.com/connectedtv/devguide/

    Hope this helps,
    Kelly
    0
  • Hi guys. I'm a new developer.
    I did everything u specified here, but when i restart my sdk i cannot find any hello world widget. what's wrong?
    0
  • QUOTE (Francesco @ Mar 16 2010, 08:03 AM) <{POST_SNAPBACK}>
    Hi guys. I'm a new developer.
    I did everything u specified here, but when i restart my sdk i cannot find any hello world widget. what's wrong?

    I found it.
    Do NOT zip the main folder. just unzip everything and it works.

    Thanks a lot the same.

    CIAO!
    0
  • Better yet I'll just show you a video.
    http://screencast.com/t/NmExNDlkOTE

    I'm sure a lot of these questions will be answered when the other tutorials come out.
    thanks
    0
  • QUOTE (jvalal @ Jan 10 2010, 03:28 PM) <{POST_SNAPBACK}>
    Better yet I'll just show you a video.
    http://screencast.com/t/NmExNDlkOTE

    I'm sure a lot of these questions will be answered when the other tutorials come out.


    Very useful, thank you! To change the second "Hello World" string you would need to edit the widget.xml. When an application logo isn't provided in the widget.xml, then it falls back on the widget name from the same file.

    Also, there are only about 50 lines total in this example and very few spots where "Hello World" appears at all, so please don't hesitate to experiment and try things out.

    -Jeremy
    0
  • I followed the steps outlined but it doesn't work for me.

    What happens is that it appear on the dock with the Hello World message but underneath it says "loading....".
    It never finishes loading and trying to open it doesn't work.

    Any ideas?
    0
  • ok, I found the problem.
    I named the Javascript directory in lowercase
    0
  • Hi, Jeremy.

    I had the same problem as "jvalal" (button press not doing anything) until I realized that it was simply logging the event to the Terminal window.

    I tried adding an Alert event so I can begin drawing some test messages to the screen instead of the Terminal. However, it doesn't display. Button press still logs everything, but displays nothing on screen.

    Can you tell me what I'm doing wrong? I must be missing something.

    I'm running version 1.0 of the framework and simulating within the "540 Latest Production Simulator".

    Thanks.



    CODEBOX
    include("Framework/kontx/1.1/src/all.js");

    var StaticSnippetView = new KONtx.Class({
    ClassName: 'StaticSnippetView',

    Extends: KONtx.system.AnchorSnippetView,

    createView: function() {
    this.controls.text = new KONtx.element.Text({
    label: "Test Yahoo TV Widget",
    styles: {
    fontSize: KONtx.utility.scale(20),
    vAlign: "center",
    hAlign: "center",
    color: "#FFFFFF"
    },
    }).appendTo(this);
    },
    });

    var MainView = new KONtx.Class({
    ClassName: 'MainView',

    Extends: KONtx.system.SidebarView,

    createView: function() {
    this.controls.button1 = new KONtx.control.TextButton({
    label: "Push Me",
    guid: "button1",
    events: {
    onSelect: function(event) {
    log("you pushed the button!");




    var dialog = new KONtx.dialogs.Alert({
    title: "Seth Dialog Title",
    message: "Seth Dialog Message",
    //focusOnCompletion: this.element.focusedView,
    buttons: [
    { label: "TEST OK" },
    { label: "TEST CANCEL" }
    ]
    });




    log("dialog showing...");

    dialog.show();

    log("dialog shown.");





    }
    },
    styles: {
    width: Theme.viewSpecs.SIDE_BAR.width,
    height: KONtx.utility.scale(35),
    vOffset: 0,
    }
    }).appendTo(this);
    }
    });

    KONtx.application.init({
    views: [
    { id: 'view-Main', viewClass: MainView },
    { id: 'view-Settings', viewClass: KONtx.views.AboutBox },
    { id: 'snippet-main', viewClass: StaticSnippetView },
    ],
    defaultViewId: 'view-Main',
    settingsViewId: 'view-Settings',
    });
    0
  • Looks fine to me. Do you receive any error?
    0
  • QUOTE (Steve @ Mar 25 2010, 09:49 AM) <{POST_SNAPBACK}>
    Looks fine to me. Do you receive any error?



    None. It just sits there like nothing happened.

    This is what I see in the log for the button's event.....


    WM 00:00:16:109: [T:16091] ** Keys.handleKey() @key code 13 @target sb @current sb @phase 2
    WM 00:00:16:110: [T:16091] ** main._handleKeyEvent() @eat event false @key 13 @type keydown @scroll false @q 0 @in anim false @handlers onActivate,onEnter
    WM 00:00:16:112: [T:16091] you pushed the button!
    WM 00:00:16:123: [T:16091] this._key 1c852256a64d81626877594ad92d1ca6
    WM 00:00:16:125: [T:16091] [KONtx/Test Yahoo TV Widget] {HostEventManager} :: Sent HostEvent: showDialog
    WM 00:00:16:127: [T:16091] ** AppManager.createDialogConf() @Data [object Object]
    WM 00:00:16:128: [T:16091] ** AppManager.createDialogConf() @App ID com.test.yahootvwidget
    WM 00:00:16:128: [T:16091] ** main._handleShowDialog() not handled @conf [object Object]
    WM 00:00:16:128: [T:16091] ** AppManager.handleChildEvent() Handled @event [object HostEvent]
    WM 00:00:16:130: [T:16091] [KONtx/Test Yahoo TV Widget] {HostEventManager} :: Got HostEvent response: showDialog
    WM 00:00:16:132: [T:16091] this._key cf6b8a832690c90c2198d0145da162c2
    WM 00:00:16:133: [T:16091] dialog showing...
    WM 00:00:16:136: [T:16091] [KONtx/Test Yahoo TV Widget] {HostEventManager} :: Sent HostEvent: showDialog
    WM 00:00:16:138: [T:16091] ** AppManager.createDialogConf() @Data [object Object]
    WM 00:00:16:138: [T:16091] ** AppManager.createDialogConf() @App ID com.test.yahootvwidget
    WM 00:00:16:142: [T:16091] ** main._handleShowDialog() not handled @conf [object Object]
    WM 00:00:16:143: [T:16091] ** AppManager.handleChildEvent() Handled @event [object HostEvent]
    WM 00:00:16:144: [T:16091] [KONtx/Test Yahoo TV Widget] {HostEventManager} :: Got HostEvent response: showDialog
    WM 00:00:16:148: [T:16091] dialog shown.
    0
  • Do you get the same result with the Samsung 1.2 Simulator?
    0
  • QUOTE (Steve @ Mar 25 2010, 10:04 AM) <{POST_SNAPBACK}>
    Do you get the same result with the Samsung 1.2 Simulator?



    Interestingly, no. It works on both the Samsung 1.1 and 1.2 as well as the LG. It doesn't work on the Vizio.

    Any ideas why? What's the difference between them?
    0
  • QUOTE (Seth @ Mar 25 2010, 12:26 PM) <{POST_SNAPBACK}>
    Interestingly, no. It works on both the Samsung 1.1 and 1.2 as well as the LG. It doesn't work on the Vizio.

    Any ideas why? What's the difference between them?

    No idea. Your code looks fine to me. Maybe try re-installing the SDK. &l
    0
  • QUOTE (Steve @ Mar 26 2010, 05:39 AM) <{POST_SNAPBACK}>
    No idea. Your code looks fine to me. Maybe try re-installing the SDK. &lIf not, can anyone else reproduce this so I know I'm not crazy?
    0
  • QUOTE (Seth @ Mar 25 2010, 09:58 AM) <{POST_SNAPBACK}>
    None. It just sits there like nothing happened.

    This is what I see in the log for the button's event.....


    WM 00:00:16:109: [T:16091] ** Keys.handleKey() @key code 13 @target sb @current sb @phase 2
    WM 00:00:16:110: [T:16091] ** main._handleKeyEvent() @eat event false @key 13 @type keydown @scroll false @q 0 @in anim false @handlers onActivate,onEnter
    WM 00:00:16:112: [T:16091] you pushed the button!
    WM 00:00:16:123: [T:16091] this._key 1c852256a64d81626877594ad92d1ca6
    WM 00:00:16:125: [T:16091] [KONtx/Test Yahoo TV Widget] {HostEventManager} :: Sent HostEvent: showDialog
    WM 00:00:16:127: [T:16091] ** AppManager.createDialogConf() @Data [object Object]
    WM 00:00:16:128: [T:16091] ** AppManager.createDialogConf() @App ID com.test.yahootvwidget
    WM 00:00:16:128: [T:16091] ** main._handleShowDialog() not handled @conf [object Object]
    WM 00:00:16:128: [T:16091] ** AppManager.handleChildEvent() Handled @event [object HostEvent]
    WM 00:00:16:130: [T:16091] [KONtx/Test Yahoo TV Widget] {HostEventManager} :: Got HostEvent response: showDialog
    WM 00:00:16:132: [T:16091] this._key cf6b8a832690c90c2198d0145da162c2
    WM 00:00:16:133: [T:16091] dialog showing...
    WM 00:00:16:136: [T:16091] [KONtx/Test Yahoo TV Widget] {HostEventManager} :: Sent HostEvent: showDialog
    WM 00:00:16:138: [T:16091] ** AppManager.createDialogConf() @Data [object Object]
    WM 00:00:16:138: [T:16091] ** AppManager.createDialogConf() @App ID com.test.yahootvwidget
    WM 00:00:16:142: [T:16091] ** main._handleShowDialog() not handled @conf [object Object]
    WM 00:00:16:143: [T:16091] ** AppManager.handleChildEvent() Handled @event [object HostEvent]
    WM 00:00:16:144: [T:16091] [KONtx/Test Yahoo TV Widget] {HostEventManager} :: Got HostEvent response: showDialog
    WM 00:00:16:148: [T:16091] dialog shown.


    I get also this result in all types of simulators also in the samsung 1.2
    0
  • Hello!!

    I need your help please!
    I have done this example and work it ! Even with post by terminal!.

    After this, I have tried to do a News Widget downloading xml files from www.marca.com. I done it in Hello World Example and I got the XML file by terminal.
    Well, now, I tried to use the Widget structure in separate files, in other words, separate SidebarView in one file and AnchorSnippetView in other file.

    I have followed the steps from TV Widget Developers Guide, but nothing is displayed on the terminal now.

    Mi code is:

    NoticiasSnippetView.js :

    var StaticSnippetView = new KONtx.Class({
    ClassName: 'StaticSnippetView',
    Extends: KONtx.system.AnchorSnippetView,
    createView: function() {
    var applicationTitle = new KONtx.element.Text({
    label: 'Noticias Marca',
    styles: {
    hOffset: KONtx.utility.scale(10),
    vOffset: KONtx.utility.scale(16),
    fontSize: KONtx.utility.scale(12),
    color: '#AAAAAA'
    }
    }).appendTo(this);
    this.controls.text = new KONtx.element.Text({
    label: "Noticias RSS",
    styles: {
    fontSize: KONtx.utility.scale(20),
    vAlign: "center",
    hAlign: "center",
    color: "#FFFFFF"
    },
    }).appendTo(this);
    },
    });


    NoticiasView.js :

    var peticion_http = new XMLHttpRequest();
    var MainView = new KONtx.Class({
    ClassName: 'MainView',
    Extends: KONtx.system.SidebarView,
    createView: function() {
    this.controls.button1 = new KONtx.control.TextButton({
    label: "Push Me",
    guid: "button1",
    events: {
    onSelect: function(event) {
    log("you pushed the button!");
    new KONtx.dialogs.Alert({
    title: "Confirme peticion",
    message: "¿Quiere realmente hacer peticion?",
    buttons: [{label: "Ok", callback: function() {
    hazPeticion();}},
    {label: "Cancel", callback: function(){} }],
    }).show();
    }
    },
    styles: {
    width: Theme.viewSpecs.SIDE_BAR.width,
    height: KONtx.utility.scale(35),
    vOffset: 0,
    }
    }).appendTo(this);
    }
    });

    function hazPeticion() {
    peticion_http.onreadystatechange = MuestraContenidoCall;
    var url_pruebas_call="http://estaticos.marca.com/rss/futbol_1adivision.xml";
    log(url_pruebas_call);
    peticion_http.open('GET', url_pruebas_call, true);
    peticion_http.send(null);
    log("ENVIADO CALL");
    }
    function MuestraContenidoCall() {
    var xmlDOC = peticion_http.responseXML;
    log("var xmlDOC");
    print(peticion_http.responseXML.toXML());
    log(peticion_http.status);
    log("JMA: " + "MUESTRA CONTENIDO CALL");
    print(xmlDOC.getElementsByTagName("item").length);
    log("Titular de prensa RSS");
    print(xmlDOC.getElementsByTagName("item").item(1).getElementsByTagName("title").item(0).childNodes.item(0).data);
    log("Descripcion de la noticia");
    print(xmlDOC.getElementsByTagName("item").item(1).getElementsByTagName("description").item(0).childNodes.item(0).data);
    }

    and last, init.js :

    include("Framework/kontx/1.0.0/src/all.js");
    include("Javascript/views/NoticiasView.js");
    include("Javascript/views/NoticiasSnippetView.js");
    include("Javascript/views/NoticiasAboutView.js");

    KONtx.application.init({
    views: [
    { id: 'view-Main', viewClass: MainView },
    { id: 'view-NoticiasAbout', viewClass: NoticiasAboutView },
    { id: 'snippet-main', viewClass: StaticSnippetView,
    data: { destinationId: 'view-Main', name: "Noticias"}},
    ],
    defaultViewId: 'view-Main',
    settingsViewId: 'view-NoticiasAbout',
    });

    I hope someone can help me. I would greatly appreciate.
    0

Recent Posts

in Getting Started / Beginners - Yahoo! TV Widgets