Trying to show a list of items.

edited April 2015 in UC Berkeley CS160

We want to show a list of items. At first we were thinking of using a column and then with in that column, add lines, containers or what not. And then we came across the List example and it looks like what we want. But the code for it is a little too complicated, is there an easier example or some documentations about where we can research a little more about Lists in Kinoma? And what is a screen object?

Also, can we add buttons into each of the listed item?


  • If the "List" example looks like what you want, than a "Scroller" is probably what you need. I'll try and put together a stripped down and documented sample in the next day or so. I'll post a link to it back in this thread and we can see how closely that fits your needs.

    Yes, you'll be able to add buttons just about anywhere you want to.


  • That sound's awesome, thank you!

  • Answer ✓

    I've got a demo for you, but it's going to be one more day on the write-up to go with. If you're in a hurry, please feel free to take a look now; it is simplified quite a bit from the "List" example. Otherwise, I'll get this all documented sometime tomorrow and post back here again.

  • This is extremely helpful. I'm not the OP, but I was wondering why this info all needs to be included in the onTouch portion of the scroller's behavior:

    "function(container, id, x, y, ticks)"

    Having touch functions for containers has been causing me problems but I only have "function(content)" which works for buttons.

  • Alex,

    Running down the list of arguments to the "onTouch" events:

     container <- Object that was touched
     id <- (for multitouch) which finger touched the object (0 = 1st, 1 = 2nd...)
     x/y <- Coordinates of the touch
     ticks <- When the touch happened

    I just tested and, while it isn't technically correct, "function(content)" in place of the full function declaration still works; though you don't get access to the touch details. Can you be more specific about the issues you're having with touch events? That post might go best in a new thread to keep this one (and your new one) clean.

    Good Luck,


  • Alright,

    Anyone who is interested, please revisit my sample code at github ( I have added a bunch of comments to the code to help explain what each part does. Please follow up with any further questions or if something is unclear.


  • edited April 2015

    Sorry to keep this going Will, but I'm trying to use the demo in my own project and something about "SCROLLER.VerticalScroller" keeps breaking it. I don't have this screen as the first one in my app, so instead of this code:

    var model = application.behavior = Object.create(Object.prototype, {

    ....onLaunch: { value: function(application) {





    I have a function that transitions to this screen using the function. Will this not work because it uses a "screen" and not a container? It still calls the list builder.

  • Alex,

    I'm not quite following you - I think some more code might help. If you could post at least the relevant portions of your code (or all of main.js) to and send me the link, I'll review it and post back here with what I can work out.


  • Hi Will, we were trying to do something similar so we followed your code. We got this working in our own project, but when we try to add it to our larger app, we keep getting the following error:

    BREAK: Cannot coerce null to instance! (/Applications/Kinoma Studio/plugins/com.marvell.kinoma.kpr.resources_1.3.37.4/libraries/

    on this line:

    SCROLLER.VerticalScrollbar($, { }),

    Do you have any insight as to why this might happen? We've been trying to figure it out but we are quite baffled.

  • Seems to have something to do with your scrollbar not having a Skin? scroller.xml 573 is var tiles =; in this function:

    <behavior id="VerticalScrollbarBehavior"><![CDATA[
        function onCreate(scrollbar) {
            var tiles =;
            this.minimum = + tiles.bottom;
  • How would we assign a scrollbar a skin? We didn't do that in the other project and it seemed to work just fine...

  • No idea. :) If you want to post some code to gist and send me a link, I'll take a look.

  • edited April 2015

    Sure thing, thank you so much. Here are 3 files. One is schedules.js and one is main.js. Schedules has the scrolling list, main is where we do the application stuff and all of our definitions. I also posted as the third file the original project that worked (a lot of it to is in main.js because it's used by other parts of the app as well, we just copied it over to make a test project). schedules.js:



    The relevant lines in main.js are 236-240, 263-267 and perhaps some definitions at the top but those are mostly just skins.

  • edited April 2015

    Ah ha! Your problem is that you're using the THEME from themes/flat/theme in the Controls library, but that VerticalScrollbar wants THEME.verticalScrollbarSkin to exist. verticalScrollbarSkin is part of a different theme: themes/sample/theme in the mobile framework. See this forum post for info on merging those themes.

  • Thanks! That solved that one but now when I try to instantiate the screen I get:

    BREAK: C: xsError: # content is no KPR.content!! (/Applications/Kinoma Studio/Kinoma

    I will look into it some more, but I'm also kind of stuck on how to go about fixing this. The error doesn't give me much context as to which part of the code is actually causing a problem... I'm assuming it's something in schedules.js but that could be a lot of things.

  • When Kinoma Studio breaks on that error it should be highlighting the line in your js file that's causing it. Make sure you're in debugging perspective.

  • It did, but it just highlighted this line:

    var ScheduleScreen = new ScheduleScreen();

    which doesn't tell me much. There's probably a problem in the way the ScheduleScreen is set up but I don't know what exactly is causing it.

  • Over on the left, did you get the stack frames? You might be able to dig around and sort out where the problem is.

  • Hm, I'll take a look. Thanks for the advice.

  • Are you still fighting the above problem? If so, try passing an empty object in:

      var ScheduleScreen = new ScheduleScreen(new Object());


  • Hi Will! Thanks for your response. Still having the issue but unfortunately that did not fix it.

  • Scratch that! I think that may have made some progress! I had to put it a bit further up, when I called SCHEDULE_SCREEN.ScheduleScreen, and that seemed to make things work (at least more so than they did before)

  • Hi Will, I have a question about your example. When I scroll down the screen the yellow color get stuck, and if I repeat the action then more and more elements of my list start coloring yellow. How can I fix that . I want something more like the example "tabs" or "list" that when you scroll down the elements automatically get its original skin color.

    Thank you in advance

  • Hi there,, Also I'm trying to create a list of post but I need to add the new post at the top ,, how can I do that,, how can I remove the previous items on a List.. please this is the repo of my code: forum.js has the forum I would like to implement.. Thanks in advance

  • The yellow effect happens when you scroll down because the "onTouchEnd()" event is never fired for the element that was originally tapped. If you comment out line 39:

   = yellowSkin;

    the issue should go away.

  • To remove items from the list, you need to call the remove method of the column that holds all the entries (defined on line 96 I believe) and pass the actual entry to it. So the following code would remove the first entry in your list:


    And this next line would remove the touched entry if called in the onTouchEnded() of your entry:


    Finally, do remember that you can define the name attribute of all these objects to save yourself from these chains of firsts. Name can be defined dynamically, just like string so you can name your entires and then refer to them in a sane fashion.

    Hope this helps!


  • Thank you so much Will.. About the yellow skin.. What I want is off course the skin change to other color, in this case yellow, but also that when you scroll the color does not get stick on the item you you press the button to scroll down... For example example "tabs" or "list", they color skin with green but when you scroll the color goes away, so everyone of the items remain white.

  • I got it: onTouchCancelled: { value: function(container, id, x, y, ticks) { = whiteSkin; }},

  • If someone else have the same problem you can use insert to add the new item in the required place you want

  • Is there a way to set the bounds of the scroller so that the list doesn't scroll on top of our buttons?

Sign In or Register to comment.