Show/Hide a chunk of text

A pretty common task that I do a lot is provide the user the ability to show and hide a chunk of text. For example, say I have a page containing a list of songs and I want to allow the user the ability to see and hide the lyrics of the song. The format could potentially be the song title with a "show lyric" link beside it that when clicked will reveal the lyrics below it in a "Ajaxed" slidedown. The 'Show lyrics' text could then change to 'hide lyrics' which when clicked does the opposite effect.

To do this is actually pretty easy. I will be utilizing the scripaculous AJAX libraries.

To get started, you'll need to download the libraries and then include the javascript libraries into your page:



Now this next section gets a little complicated because I am using the Smarty libraries to help me abstract PHP code from my HTML layout. So bear with me:



How it works is we'll have an array of Xataface Records of the songs table. So I will be iterating through this array displaying the title and then displaying the lyrics in the song_item{$item} div id. The reason why I need to use the {$item} variable is because each id has to be unique so that when we click the link to show/hide the lyrics it knows exactly which div element to show. Notice that the onclick handler is to a javascript function called showHideLyrics() with the parameter 'song_item{$item}'. Also important is the id of the anchor link which is 'song_item{$item}_link' This is important so that we can change the anchor link text.

So the showHideLyric() javascript function:



So the first parameter is the div element containing the lyrics. We will check if it is already hidden, and if it is then we want to show it. We will rely on the scriptaculous code to do this for us. And then after that we will use the code:

document.getElementById(element + '_link').firstChild.data = "[Hide Lyrics]";

To change the anchor link text. The use of the firstChild.data properties is proper javascript. We could have used the innerHTML proper, but that is not proper. And the case is nearly the same when the lyrics are shown we just use the scriptaculous code to help us hide it and change the text to "[Show Lyrics]".

Cool hey?

Using smarty tags in a template

This is a tutorial to show how to specify some variables in a php class and then use them in the smarty template. Here is the situation: There is a below_header.html file needs to have a drop down menu which lists a bunch of offering_types as a classification of offerings.

The Dataface_Main_Template.html contains this code:

{block name="before_below_header"}
{define_slot name="below_header"}{/define_slot}
{block name="after_below_header"}

Notice the below_header slot. Since we want this slot to be replaced on every page of Dataface, we will use the function block__below_header() in the ApplicationDelegate.php file to replace this slot.

So the next step is to retrieve the variables that we will use to display in our below_header slot.

ApplicationDelegate.php

function block__below_header(){

//only broker dealers and broker customers should be able to see offerings
if (isBrokerDealer() or isBrokerCustomer()){
$offering_types = df_get_valuelist("offerings", "offering_types");
}

//any users can see the strategy types
$strategy_types = df_get_valuelist("strategies", "strategy_types");

$context = array('offering_types' => $offering_types, 'strategy_types' => $strategy_types);
df_display($context, 'below_header.html');
}

The if statements are just some fancy permission features where we only want like the offering_types to show up for broker dealers and customers. But the important lines are:

$offering_types = df_get_valuelist("offerings", "offering_types");

$strategy_types = df_get_valuelist("strategies", "strategy_types");

$context = array('offering_types' => $offering_types, 'strategy_types' => $strategy_types);
df_display($context, 'below_header.html');

Here we are using the df_get_valuelist() function in the dataface_public_api.php file which takes two parameters (tablename, valuelistname). And the valuelists are found in the valuelist.ini of the delegate classes:

valuelist.ini of offering/strategy tables
[strategy_types]
Managed Stocks = "Managed Stocks"
Managed Funds = "Managed Funds"
Managed ETFs = "Managed ETFs"
Managed Blend = "Managed Blend"
Managed Annuity = "Managed Annuity"
Currency = "Currency"
Derivatives = "Derivatives"
Commodities = "Commodities"
Unknown = "Unknown"

Nothing special here. Just a list of the strategy types. I didn't show the offering_types which is in the valuelists.ini of the offering table. But it's the same thing.

And so after we have retrieve the valuelist as variables, we place them into this context variable which we then send in as a parameter to the df_display function. The second parameter below_header.html is the file to display which will use the variables from the context variable.

below_header.html
The important code:

<select name="Offerings" onchange="window.location=this.options[this.selectedIndex].value">
{foreach from=$offering_types key=okey item=otype}
<option value="{$ENV.DATAFACE_SITE_HREF}?-table=offerings&offering_type={$otype}">{$okey}</option>
{/foreach}
</select>

The smarty tag foreach from is retrieving the offering_types variable which is an array (remember from the ApplicationDelegate.php file) and so we are getting the key and value (as item) and using them as the option value and as the labels.

One interesting thing is the onchange javascript event which automatically changes the page to the value of the option.

That's it!

Smarty Tags

So Xataface employs smarty templates throughout its application to apply its styles and stuff. I am not 100% sure how it works, but there are list of ENV variables which are available to be used throughout any template file in xataface. These ENV variables can be found at this link.