The Official RIPL Company Blog

Often enough, you’ll want to present multiple lists on a page. However, you may not want to show all of the content at once.

In this case, an accordion construct (http://en.wikipedia.org/wiki/Accordion_%28GUI%29) may be the way to go. The RIPL JavaScript library has an accordion built-in, which allows you to easily and unobtrusively add a number of RIPL display containers to a single page.

Here’s the demo:

Is it hard? Nope… utilizing RIPL’s scriptless rendering, it is simply a matter of hooking up a number of specially classed items. Here is the structure of the accordion:
* div – this serves as the container for the entire object
|* div – this serves as the header
|* div – this serves as the content for the previous header, and can be defined as a standard RIPL content display object.
||* div – this is the default text that the container holds, before it is overwritten with content.
|* div – Another header header
|* div – Another standard RIPL content display object.
||* div – Another bit of default text
|* footer

There re a couple of ‘new’ concepts in here. First, you’ll notice the ‘ripl:deferred’ attribute set on these items. Deferred tells the RIPL engine that it is not to pull the content down until the user ‘asks’ for it by clicking into a tab. This saves loading time and bandwidth… and is honestly easier on our own servers if it is a ‘best practice’ to not ask for information that you won’t necessarily be using.

You’ll also note that in our demo, we’re showcasing the ability for the RIPL JavaScript library to render multiple kinds of lists. Specifically, we’re showing the ‘cards’ view, the default (or ‘grid’) view, and the text view.

Cool People's Stuff
Juanune's Content


                Contacting server...
             

Bill's Content


                Contacting server...
             

Adam's Content


                Contacting server...
             

The RIPL library is designed to be easily extensible to a variety of presentation types. Today, I’m going to show how to update the library to show content in an alternative presentation.

Building on our previous example, we’re going to add a few new parameters. We’ll change the target rendering style and add a new handler for the onclick event…. plus we’ll add a little CSS to change things up.

So, we’ve added a few new attributes:

• ripl:display_targetstyle – There are predefined styles for rendering content and users, plus you can add your own. We’re going to use the preset ‘contentlist_cards’ rendering style for this list.
• ripl:display_itemsperpage – Because the contentlist_cards view takes up more space, we’ll actually be showing fewer items, though we’ll be showing more information about each one.
• ripl:event_onclick – Now we get to use the new RIPL PopUp display.

So we get:

Great, but we want to really change up the look, so let’s lay some CSS on top:

#demo2 .ripl_contentitem_render_card {background-color:#80a020; border-top:1px solid #D9DB56;border-bottom:1px solid #757116;border-left:1px solid #757116;border-right:1px solid #757116; width:100%}
#demo2 .ripl_contentitem_render_card:hover {background-color:#AEBC21}
#demo2 .ripl_colors_normal {color:#f0f25e}
#demo2 .ripl_colors_deemphasis {color:#D9DB56}
#demo2 .ripl_colors_link {color:#ffffff}

And voila:

We’ve been hard at work making it easier for 3rd party developers to access RIPL features.  Our API set is pretty extensive, but we wanted to ease the burden of implementation, and have created the RIPL JavaScript Library to that end.

Usage is pretty simple… just add the RIPL JavaScript library to your Web site by including the appropriate script tag:

<script type="text/javascript" src="http://www.ripl.com/api/1/jslib/ripllib.js"></script>

From there, all you need to do is add a new DIV to a Web page like this:

The structure is pretty simple. It is a div. Its CSS class is ‘ripl_renderer’, which is important because the RIPL library will look through the page to determine which items it needs add RIPL content to.

From there, we add a few display properties:

• target_login – This is the user login of the appropriate user.  In this case, we’re using my login (juanune).
• method – This is the RIPL API we’re going to use to get data for.  ‘ripl.user.getOwnedContent’ will retreive all of my content.

Add a couple of specific rendering things (background color, etc), and voila… we get this:

Cool huh? …and all created with developers only needing to add a single HTML element.

I’ll be posting another article soon on how you can go in and change the appearance of the list.