how to do that Vimeo style "next >>" link?

if you go into Staff picks on Vimeo and go all the way to the right end of staff picks, you get a “Next >>” link that will take you to the next set of more staff picks.

In my case the next set of 10 media items will be retrieved by incrementing an offset variable.

  • Joel

Just add a faux “Next >>” content item to your content list, and trigger a new lookup when it’s selected.

TheEndless is right. The paging feature is very handy for displaying large data sets or data from an API that returns results in pages. Paging is something I think a lot of channels could benefit from, so here’s a more detailed explanation of how to do it.

To show the “next” item on your roPosterScreen, you need to add an extra content-meta-data item onto the end of your content list. That item might look something like this:

{
  shortDescriptionLine1: "Next Page"
  sdPosterURL: "pkg:/images/next_sd.png"
  hdPosterURL: "pkg:/images/next_hd.png"
  action: "next"
}

You might also want to have a “previous” item on the front end of your content list to let users go the other direction:

{
  shortDescriptionLine1: "Previous Page"
  sdPosterURL: "pkg:/images/previous_sd.png"
  hdPosterURL: "pkg:/images/previous_hd.png"
  action: "previous"
}

And then you would need to add some logic to your event loop to handle the case when a user selects your navigation items:

while true
  msg = wait(0, screen.GetMessagePort())
  if msg <> invalid
    if msg.isListItemSelected()
      item = content[msg.GetIndex()]
      if item.action = "next"
        ' load and display the next page of data
      else if item.action = "previous"
        ' load and display the previous page of data
      else
        ' handle the selection of other poster items
      end if
    end if
  end if
end while

My app too could benefit from this navigation pattern.

This handles list view but how should this be handled when the user is in detail view?

Going to have to conditionally handle all the button visible properties and build a hybrid item for Next & Prev I think???

When performing a page query should we just load the 2nd page on the stack? I don’t think so. This could get tricky real quick.

“EngoTom” wrote:
My app too could benefit from this navigation pattern.

This handles list view but how should this be handled when the user is in detail view?

Going to have to conditionally handle all the button visible properties and build a hybrid item for Next & Prev I think???

When performing a page query should we just load the 2nd page on the stack? I don’t think so. This could get tricky real quick.

I wouldn’t display springboards for the next/previous items at all. When navigating left or right from springboard to springboard, just skip over them and either cycle around to the other end of the current result set or dynamically load up the appropriate new set.

One more question on this: if you don’t want to display the “previous” link when you are on the first set of retrieved items, but on all subsequent sets of items? In the app I’m working on there are probably actually millions of items, so cycling to the end doesn’t make sense and the API doesn’t give me a count.

-Joel

“jbrave” wrote:
One more question on this: if you don’t want to display the “previous” link when you are on the first set of retrieved items, but on all subsequent sets of items? In the app I’m working on there are probably actually millions of items, so cycling to the end doesn’t make sense and the API doesn’t give me a count.

-Joel
I’m not sure I understand the question. If you’re controlling the paging, then you should know what page you’re on. If you’re on the first, just don’t add the “Previous” content item…?

Yeah, that makes sense, base it on the offset from the top.

  • Joel

I been trying this with the video player example and its giving me all sort of issues

I added this

conn = InitShowFeedConnection(category.kids[item])
showList = conn.LoadShowFeed(conn)

showList.Push( { action: "next", ShortDescriptionLine1: "Next", HDPosterUrl: "pkg:/images/forward.png", SDPosterUrl: "pkg:/images/forward.png" })

so far so good…

So i try to ad a "if " statement in the “msg.ListItemSelected” and all i am getting are errors


else if msg.isListItemSelected() then

      if showList.action ="next"
          print " get next 10 videos"

else if showList.action ="previous"
          print " Go Back 10 videos"

else
          m.curShow = msg.GetIndex()
          m.curShow = displayShowDetailScreen(category, m.curShow)
          screen.SetFocusedListItem(m.curShow)
    end if
end if

what am I doing wrong here? i have tried several combos in the “showList.action” area but i cant figure out how to get the action.

action isn’t a attribute on the showList array, it’s an attribute on the item you added to the array. Try this instead:

if showList[msg.GetIndex()].action = "next" then...

I tried that and got this error

122: End Function
/tmp/plugin/MNAAAAvBlem8/pkg:/source/appPosterScreen.brs(106): runtime error e7:
 Array operation attempted on variable not DIM'd.

106:              if showList[msg.GetIndex()].action = "next" then

Backtrace:
Function showposterscreen(screen As Object, category As Object) As Integer
Function displaycategoryposterscreen(category As Object) As Untyped
Function showhomescreen(screen As Untyped) As Integer
Function main() As Void

I have to say that is a new error i have never seen

Sorry.. should be:

showList = m.Screen.GetContentList()
if showList[msg.GetIndex()].action = "next" then

Thanks endless after going crazy over where a “end if” goes i finally got to it but i had to change it to:

showList = screen.GetContentList()
if showList[msg.GetIndex()].action = "next" then

But Not sure this is even feasible the more i look at the logic of it, at least with the video player example

Most of the logic of my app does not use that encapsulation stuff that theEndless does, it mostly relies on integer variables and roarrays to determine where it is at in the program. For implementing this aspect, what I did was to add to each poster object, whether dynamically created from xml or created manually, and do this:

posterobj=CreateObject(“roassociativearray”)
posterobj.Title=object.GetnamedElements(“blah”).GetText()
posterobj…
posterobj.action=“Previous”
return {poster:posterobj}

then in my main loop when figuring out which action to perform in my if then:

itemindex=msg.getindex()
if poster[itemindex].action=“previous”
then
blah blah
end if

hope that helps
don’t know if that helps

ps, really want to understand how to build my apps using object encapsulation, will ask some questions when I have time.

I don’t think i’m following you Jbrave :disappointed_face:

can you do the " << >> " pagination style using the xml feed?

When I’m parsing the xml feed, of which I only grab 20 items at a time, I add one more value that is not in the feed to each posteritem, which is

action=“play”

I have a calculation I do to see if any paging has been done. If it has not I add an “empty” item that pretty much just contains an image and action=“next” (in TheEndless way of doing it, he would probably have {action:“next”}
If there has been any paging, I have an index variable that controls the offset from the top of the xmllist, if it is greater than 0 then I also add an action=“previous” on the beginning of the posterlist.

in my if/then statements I check all my indexes and also the action - action=“play” means it is a media item, action=“none” means there was a server error and there is a bad item, action=“previous” or “next” means add 20 or subtract 20 from the offset and get the next batch of poster items from the server.

  • Hope that helps.

  • Joel

“TheEndless” wrote:
Sorry.. should be:

showList = m.Screen.GetContentList()
if showList[msg.GetIndex()].action = "next" then

ok so what is this error anyways i just found i am getting it again

Which error is that? The “variable not DIM’d” error? That means you’re attempting to use a variable that was never declared previously.

ok thanks i never saw it before…