Easter Break 2014 - Office Closed

Enjoy those Easter eggs! (Which have nothing to do with the original Christian mythology, but rather derive their roots in the Pagan religions that preceded it for thousands of years or even the Zoroastrians.)Did you know that in moderation chocolate is very good for you? Did you also know that most Easter eggs have very little actual cocoa (the real chocolate) in them, in fact they mostly sugar in various forms - which isn't that good for you.We'll be closed from Monday, 14th April to Monday, 21st April 2014. Clients with Priority Support contracts will not be affected. Ad-hoc Support clients can still lodge tickets but they won't be processed until we return to the office on Tuesday, 22nd April 2014.

EasyTable Editor (Part 2) - Alias' & CSS & Type

Share

EasyTable_Editor_Alias_And_Types_FPIn the Editor each component has a use otherwise it wouldn't be there. After all we've all got things to do. When a table is first created each column is given an Alias. The Alias is used in lot of ways as CSS labels and MySQL table column names.

&nbsp

He Goes by the Alias

The alias is derived from the column name or "Label", which in turn comes either from the headings each column may have in the original CSV file or, if no heading exist, a series of temporary labels are generated that look like this: Column1, Column2. At this point even though we can change the label to any value at any time, the Alias is fixed in stone (or rather the backend database). [If the first character of your column label doesn't start with a letter (a-z,A-Z) EasyTable will prepend a lower case 'a' to ensure that the alias is a valid CSS label.]

The Alias is also used in the CSS class that is attached to each column in the table. So for the US Presidents table show in {rokbox title=|EasyTable [ Alias' and Types ]| album=|EasyTable-text| text=|the screenshot|}images/stories/EasyTable/EasyTable_Editor_Alias_And_Types.png{/rokbox} these setting will generate a CSS entry for the President column heading like this:

<td class="sectiontableheader president">President</td> 

- List View

<td class="sectiontableheader president">President</td> 

- Detail View

Or like this for the actual cell containing the data:

<td class="colfld president">George Washington</td>

- List View

<td class="sectiontablerow president">George Washington</td> 

- Detail View

Using just these CSS values you can format the table and the column in anyway that you want by adding the relevant CSS class to your Joomla template.

Rows

Following the Joomla convention rows in the table are assigned alternating classes of 'row0' and 'row1'. This allows your to specify in your templates CSS (if it's not already there) different colours for alternating rows of the table. Row HTML looks like these examples:

<tr class="row0">...</tr> 

- First and odd rows of List View

<tr class="row1">...</tr> 

- Second and even rows of List View

He's the Type

As mentioned previously - each column can have a specified Type. Currently the types are Text, Image and URL in EasyTable for J! In EasyTable Pro additional types of Number and Date are also supported.

Text

A text field is just that, the data from that column is simply inserted into the cell without any other attributes. The cell itself has some specific class labels attached to it based on the column Alias (as discussed above) and whether it's a list view cell or a detail view cell.

In the discussion of Alias above a list view example is shown where the class labels for the table cell are colfld and president (based on the alias).  The same cell in a record detail view will have class labels of sectiontablerow and president. This allows you to specify different CSS for the same data based on the view currently in use.

Image

A image field, uses the contents of the field as the name of the image to display. In it's simpliest EasyTable concatenates the text in the Image Directory (eg. /images/stories/USPresidents) field together with the text in the column you've set to a type Image (eg. thmb_GeorgeWashington.jpg). The resulting HTML looks something like this:

<td class="colfld thumbnail">
<img src="http://static.seepeoplesoftware.com/images/stories/USPresidents/thmb_GeorgeWashington.jpg" />
</td>

- Detail View

Those of you paying attention will have noticed that my example Image Directory value doesn't actually have a trailing slash. Thats because EasyTable component combines the two values by concatenating Image Directory + DS + Image Column Text. In this case the DS stands for Joomla's built-in Directory Separator constant which the Joomla framework sets to the correct value for your hosting system.

URL

A URL field, uses the contents of the field as the main component of a standard link

If EasyTable detects a fully qualified URL (ie. one starting with HTTP:// ) if will set a target for the URL of "_blank" which will cause a new web browser window to open.  If the field contains http://www.google.com the resulting HTML looks something like this:

<a href="http://www.google.com" target="_blank">http://www.google.com</a>

If EasyTable detects a partial URL (ie. one without HTTP:// ) if will not set a target for the URL which will cause a the link to open .  If the field contains /manuals/ProductManual.pdf the resulting HTML looks something like this:

<a href="http://static.seepeoplesoftware.com/manuals/ProductManual.pdf">/manuals/ProductManual.pdf</a>

Description

The description field is used to explain the contents of a column in an EasyTable by adding a "title" attribute to the heading cell of the list or detail view of a table. The result is that moving the mouse cursor over a heading will in modern browsers display a "tooltip" of the column description and for users of screen readers and other accessibility tools they can get a comprehensive description of the contents of the column.

The HTML from the Presidents example table is shown below:

<td class="sectiontableheader party" title="The political group or Party that the President was associated with at the time of election.">Party</td>

 

Current EasyTable articles:
Share

You need to login to access the forums.

Member Login

You need to Login to access your Subscription details or the Forums.