0

Using XML Views

Hi all,

after a couple of days deeply concentrating an playing around I feel like I got already a good overview and already some practice in creating Javascript-Views for the sidebar and fullscreen and getting along with their lifetime cycles and the KONTx framework.

I built the snippet, some sidebar view with several options like logon to my own webservice, get some xml-file, parse it, build a simple model structure with URLs and short description, display them using an image grid...

Now I actually want to deal with that images (something like a "slideshow"), load them dynamically and and animate them.
As I saw in the documentation, that does not work with KONtx.element.Image, but with the Image, specified in XML (YWE_Developer_Guide on page 311).
Unfortunately I just don't get how to use that.
I can not find a sample implementation for that case and no entry here in the ConnectedTV forums, so it seems I'm the only person who deals with that problem worldwide wink.gif

It would be nice, if someone of you could give me a hint where to look for it or just paste some sample code with explanation here as response.

Thanks in advance & best regards
Hermann

by
17 Replies
  • Can you post some sample code for what you are trying to do?

    It is going to be hard to help with out seeing exactly what you are doing. Look forward to helping you out.
    0
  • I thought I described it already preety good.
    There is no sample code existing yet, because I have no idea about how to use it...

    I am just looking for a sample implementation of the Image - and I don't mean KONTx.element.Image - i mean the second possibility of Image, specified in XML in the up-to-date YWE_Developer_Guide on page 311.
    In the end, I want to realize something like picture slideshow by dynamically loading images and using animation (what offers this Image object already by fade(), moveTo() and slide().

    All I'd like to know, how to use it - so please, can YOU show some sample code? ;)Hermann
    0
  • CODE
    var img = new Image(object to append it too);
    img.width()


    You should really be looking at the Elements implementation. Keep in mind animation performance is very spotty and the elements.Image() is the same as the Image(), but already inserted inside a Container.

    Hope this helps YOU.
    0
  • Hello again,

    thanks for the hint, but it didn't help me until now...
    I feared that animations couldn't be used extensively yet, but that's not the worst problem at the moment. I'll test around and find out, what will fit my need.
    Back to the image.
    What do you mean exactly with "Elements implementation"? Do you mean the KONTx.element.* section? That one I already got to work - but without the features I am requesting here. So here are my code-samples:

    Works - but is not what I want (regarding to what I described in my previous posts in this thread):
    CODE
    /*
    * returns a URL to an image, located in some kind of model
    */
    function fetchNextImage() {
    return JSON.parse(currentAppData.get("archiveModel"))[iterator++].src;
    }

    var tmpImg = new KONtx.element.Image({
    src: fetchNextImage(),
    styles: {
    vAlign: "center",
    hAlign: "center"
    }
    }).appendTo(this);


    Both trys to implement it with the Image JavaScript/XML implementation - do not work:
    First try > just use the image-URL
    CODE
    /*
    * returns a URL to an image, located in some kind of model
    */
    function fetchNextImage() {
    return JSON.parse(currentAppData.get("archiveModel"))[iterator++].src;
    }

    var tmpImg = new Image(fetchNextImage());
    img.width = 800;
    img.height = 600;


    Second try > take some xml-structure, as I understood the explanation in the YWE_Developer_Guide
    CODE
    /*
    * returns a URL to an image, located in some kind of model
    */
    function fetchNextImage() {
    return JSON.parse(currentAppData.get("archiveModel"))[iterator++].src;
    }

    var tmpImg = new Image('<image src="'+fetchNextImage()+'" name="sun1" hOffset="250" vOffset="250" height="600" width="800" hAlign="center"/>');


    I think we are almost there to solve my problem ;)Hermann
    0
  • QUOTE (hschroefl @ Feb 22 2010, 02:04 AM) <{POST_SNAPBACK}>
    Hello again,

    thanks for the hint, but it didn't help me until now...
    I feared that animations couldn't be used extensively yet, but that's not the worst problem at the moment. I'll test around and find out, what will fit my need.
    Back to the image.
    What do you mean exactly with "Elements implementation"? Do you mean the KONTx.element.* section? That one I already got to work - but without the features I am requesting here. So here are my code-samples:

    Works - but is not what I want (regarding to what I described in my previous posts in this thread):
    CODE
    /*
    * returns a URL to an image, located in some kind of model
    */
    function fetchNextImage() {
    return JSON.parse(currentAppData.get("archiveModel"))[iterator++].src;
    }

    var tmpImg = new KONtx.element.Image({
    src: fetchNextImage(),
    styles: {
    vAlign: "center",
    hAlign: "center"
    }
    }).appendTo(this);


    Both trys to implement it with the Image JavaScript/XML implementation - do not work:
    First try > just use the image-URL
    CODE
    /*
    * returns a URL to an image, located in some kind of model
    */
    function fetchNextImage() {
    return JSON.parse(currentAppData.get("archiveModel"))[iterator++].src;
    }

    var tmpImg = new Image(fetchNextImage());
    img.width = 800;
    img.height = 600;


    Second try > take some xml-structure, as I understood the explanation in the YWE_Developer_Guide
    CODE
    /*
    * returns a URL to an image, located in some kind of model
    */
    function fetchNextImage() {
    return JSON.parse(currentAppData.get("archiveModel"))[iterator++].src;
    }

    var tmpImg = new Image('<image src="'+fetchNextImage()+'" name="sun1" hOffset="250" vOffset="250" height="600" width="800" hAlign="center"/>');


    I think we are almost there to solve my problem ;)Is this what your looking for?
    0
  • QUOTE (Steve @ Feb 22 2010, 03:03 AM) <{POST_SNAPBACK}>
    If your just trying to set an image src dynamically, then just call setSource() on the KONtx.element.Image object.

    var tmpImg = new KONtx.element.Image({...});
    tmpImage.setSource("some location");

    For your slideshow you probably have a timer, so make a request for the new image when the timer fires, and in the callback set the source of the image.

    Is this what your looking for?


    Hi Steve,

    thanks for your response - but no, this is not what I am looking for - this implementation typ I already found out :)Hermann
    0
  • QUOTE (hschroefl @ Feb 22 2010, 03:15 AM) <{POST_SNAPBACK}>
    Hi Steve,

    thanks for your response - but no, this is not what I am looking for - this implementation typ I already found out :)In regards to 1, I don't believe a pure XML approach will work for separating the views from their logic. I believe ONLY the underlying core objects such as frame, image, text are available through XML. All the KONtx components, and additional custom components you create will not be. Personally, our view contain very little view creation code, as we separate the styles from the view. Plus the parsing of XML to create the views is probably not the most efficient way to do things in a limited embedded environment.
    0
  • QUOTE (Steve @ Feb 22 2010, 03:38 AM) <{POST_SNAPBACK}>
    I'm not sure what extra methods you are looking for specifically, but in regards to 2, you can find some examples in ~/TVWidgets/Konfabulator-Latest-540/data/Overlay/Script/Framework/Themes/theme.js. The underlying Image object that the KONtx.element object acts as a wrapper for, is used within themes.

    In regards to 1, I don't believe a pure XML approach will work for separating the views from their logic. I believe ONLY the underlying core objects such as frame, image, text are available through XML. All the KONtx components, and additional custom components you create will not be. Personally, our view contain very little view creation code, as we separate the styles from the view. Plus the parsing of XML to create the views is probably not the most efficient way to do things in a limited embedded environment.

    Also, look in element.grids.js for examples of using animation. You do not need to use the underlying Image object. There is an animation framework built in. Search for FadeAnimation, MoveAnimation, etc.
    0
  • Hi all,

    first of all, my basic question is solved now :)H.
    0
  • QUOTE (hschroefl @ Feb 22 2010, 07:29 AM) <{POST_SNAPBACK}>
    Hi all,

    first of all, my basic question is solved now :)To be honest, I don't see your point in all this. I understand separating view code from logic, but by sticking to your approach you are limiting yourself to only using the core components. How are you going to use xml to create a Grid, or a button, or your own custom component?
    0
  • QUOTE (Steve @ Feb 22 2010, 07:38 AM) <{POST_SNAPBACK}>
    To be honest, I don't see your point in all this. I understand separating view code from logic, but by sticking to your approach you are limiting yourself to only using the core components. How are you going to use xml to create a Grid, or a button, or your own custom component?


    I agree with you - but I want to stay aware to generate everything in Javascript.
    And as soon I have the possibility to seperate it, I'll do it due to better readableness.
    If we could use a programming language instead of Javascript, a lot of stuff would be easier. But this would be a discussion on the base, which I dont want to start...
    And of course I would use the given JS-Class for certain components - as I used the Grid already for a certain purpose ;)
    0
  • Oh, sorry - i forgot.
    The onImageLoaded handler seems not to work as well (or I register it in a wrong way? See code above in my last post). So I called fadeOver(img1, img2) manually, because the log showed just an error.
    CODE
    WE 00:00:31:876: [T:17651] !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    WE 00:00:31:876: [T:17651] ERROR!ERROR!ERROR!ERROR!ERROR!
    WE 00:00:31:876: [T:17651] !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    WE 00:00:31:876: [T:17651] femory media viewer [de.femory.tvviewer]
    WE 00:00:31:876: [T:17651] '' is not a valid handler for 'onImageLoaded'
    WE 00:00:31:876: [T:17651] !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


    imageloaded seems not to be documented. As soon I register it like the onImageLoaded handler, just nothing happens....
    0
  • Hey collegas,

    I got basically what I wanted - only the FadeAnimation is not working yet and the MoveAnimation seems to be not very fast (as already adviced in other threads several times ;) loadImg(firstPicture);
    0
  • I have to agree with Steve here.

    I understand what you are trying to do in-fact we just built a slideshow view and we used the KONtx.element.Image() to do everything. It might make sense to take a deeper dive into the documentation and run from there. I will see if we can get a general version pulled out for sharing.

    I just don't want to continue to help you code yourself into a hole when a more platform friendly approach would be the best approach. :)Also, I am not sure what Yahoo!'s feedback on your approach would be and whether it would pass the QA process. Yahoo!?
    0
  • Hi WidgetRealm,

    thanks for your hints, I'm looking forward to consider your hints.
    Of course, I hope I'll create a widget which will get through the QA process without bigger problems. On the other hand - this is the "beginners" forum, right? ;)Hermann
    0
  • Absolutely! :DWe are working on some tools to help expedite the Ah-Ha moment - should be available soon... If you want, fire an email to developers[at]widgetrealm[dot]com and we will make sure you are notified as soon the tools are available.
    0
  • Hi,

    I'm trying to do similar stuff.. can you please share the code.


    thanks in advance.
    Abhi

    QUOTE(Hermann @ 22 Feb 2010 9:44 AM)
    Hey collegas,

    I got basically what I wanted - only the FadeAnimation is not working yet and the MoveAnimation seems to be not very fast (as already adviced in other threads several times ;) loadImg(firstPicture);
    0
  • Recent Posts

    in Getting Started / Beginners - Yahoo! TV Widgets