Editing Refactoring a CMS to Use Shared LITTLED Libraries (section)

==Listings pages==

===Page setup & initialization===

*(Optional) Update comments to use Netbeans editor folds: <code>//<editor-fold></code>
*Refactor include directives
*Refactor local CMS page URI definitions (<code>*_SCRIPT</code> > <code>*_URI</code>)
*Add <code>$breadcrumbs</code>, <code>$sTitle</code> as global variables in the page’s <code>initialize()</code> function.
*When calling <code>$filters->format_query_string()</code>, make sure not to append any values for <code>P_FILTER</code>.
*Remove calls to <code>urlencode()</code> when formatting URLs for header links.
*Use shared AJAX script for any “update cache” links.
*Configure breadcrumbs.

===Page framework===

* Refactor header and footer includes to use the path <code>ADMIN_TEMPLATE_DIR."framework/"</code>.
* Use appropriate PHP include rollup for CSS/JavaScript resources for the page, e.g.
<syntaxhighlight lang="php">
include (ADMIN_TEMPLATE_DIR."framework/css/listings_css_and_scripts.php");
</syntaxhighlight>

* Use JQuery initialization

<syntaxhighlight lang="javascript">
$(document).ready(function() {
    $('#listings-container').cms('bindListingsHandlers');
});
</syntaxhighlight>

:* See [[Binding JQuery Handlers]]
:* See [[JQuery Initialization on Listings Pages]]
:* See [[Sorting Listings|Configuration notes for sorting]].

* Make sure to include a container for error messages on the page:

<syntaxhighlight lang="html4strict">
<div id="error-container" class="error" style="display:none;"></div>
</syntaxhighlight>

*Wrap listings in a container that will allow JQuery script to locate them:
<syntaxhighlight lang="html4strict">
<div id="listings-container" class="listings">
    <? include (SECTION_BASE_DIR."_templates/content/[CONTENT-TYPE]_listings.php"); ?>
</div>
</syntaxhighlight>
*Remove any includes for popup containers.

===Filters form===

*Update any lib routines to use the analogous routine from a utility class. E.g. <code>db_utils_class::display_cached_options()</code>
*Form container has id <code>“listings-filters”</code> and class <code>“listings-filters ui-corner-all”</code>. Make sure to include JQuery UI stylesheet and that the local stylesheet contains the relevant definitions.

<syntaxhighlight lang="html4strict">
<div id="listings-filters" class="listings-filters ui-corner-all">
</syntaxhighlight>

*Form element has method “get”, id “filters_form”, and class “filters”.

<syntaxhighlight lang="php">
<form action="<?=SECTION_CMS_URI ?>" method="get" id="filters_form">
</syntaxhighlight>

*Store “next” filter value in form.

<syntaxhighlight lang="php">
<input type="hidden" name="<?=$filters->next->param ?>" value="<?=$filters->next->value ?>" />
</syntaxhighlight>

*Table element within form does not have any attributes.

<syntaxhighlight lang="html4strict">
<table>
</syntaxhighlight>

* Use <code><nowiki><label></nowiki></code> tags around all form inputs.
*Any textbox inputs that collect date values should be assigned the <code>“datepicker”</code> class.
<syntaxhighlight lang="php">
<td><label>name <input type="text" name="<?=$filters->name->param ?>" value="<?=$filters->name->value ?>" maxlength="50" /></label></td>
</syntaxhighlight>
*Submit button markup:

<syntaxhighlight lang="php">
<input type="submit" class="filter-btn ui-corner-all" name="<?=P_FILTER ?>" value="filter" />
</syntaxhighlight>

===Listings content include file===

*(Optional) Add include directive for the section’s scripts config file for the benefit of the cache_class routines. Test if one of the script definitions is defined. If not, include the scripts config file.

<syntaxhighlight lang="php">
if (!defined("[CONTENT-TYPE]_DETAILS_URI"))
{
    require_once (realpath(dirname(__FILE__).'/../../')."/_config/scripts.php");
}
</syntaxhighlight>

*Add try/catch for retrieving listings.
*Remove include directives for any stand-alone routines that render pagination links.
*Use shared include file to render pagination links.

<syntaxhighlight lang="php">
include (COMMON_TEMPLATE_DIR."framework/navigation/listings_page_links.php");
</syntaxhighlight>

*[[Sorting Listings#html|Add attributes to table elements to support pagination and sorting]].
*Remove “slot” column from listings.
*Use <code>list</code> and <code>list-alt</code> CSS classes for alternating rows to support onHover behaviors.
*Use shared templates for inline edit elements:

<syntaxhighlight lang="php">
<? include (COMMON_TEMPLATE_DIR."forms/ajax/status_cell.php"); ?>
</syntaxhighlight>

* See [[Keywords#Displaying keyword lists within listings pages|Displaying keyword lists within listings pages]]
* See [[JQuery_Listings_Operations_Buttons|JQuery listings operations buttons]]