Basic Enterprise Application Realm

Basic Enterprise Application Realm Documentation
  • 1 PHP Reference
    • 1.1 Introduction
    • 1.2 shared_lib.php
    • 1.3 ac_tables.php
    • 1.4 ac_email.php
  • 2 Javascript Reference
    • 2.1 Introduction
    • 2.2 ac_ajax
    • 2.3 ac_event
    • 2.4 ac_filter
    • 2.5 ac_menu
    • 2.6 ac_panel
    • 2.7 ac_select
    • 2.8 ac_toc
  • 3 Forms
    • 3.1 Introduction
    • 3.2 How It Works
    • 3.3 AJAX
    • 3.4 form_processor_v2
    • 3.5 form_processor

2.1 Introduction

March 25th, 2025

BEAR provides a built-in Javascript library for the most common types of enriched interaction. This is exposed via Javascript class files located in the document root javascript directory (/bear/web_applications/html/javascript). Each file provides a different set of functionality as a simple-to-user class file. However, the Javascript has some intentional limitations which are part of the BEAR design ethos:

  • The coding style of javascript prefixes all variables with the dollar sign "$" similar to shell scripting and PHP. This technically unrequired and unusual style is to reinforce the readiblity of the code by creating a visual distinction between variables and functions or static classes.
  • The Javascript rarely strays from functions or classes that are not supported in DOM Level 0. A design goal of BEAR is to avoid having any HTML or Javascript code branches to cater for different browser compatibiliity levels. By having one block of universally supported code, maintenance and implementation is greatly simplified. Although it is possible to achieve some of these behaviours with less code using newer or browser specific functions, or to achieve more advanced behaviour, it is favorable to cater for only the features that can be achieved via the most generic code. The latest fancy Javascript interactivity is no substitute for intelligent structure and visual design cues.
  • The code is designed to be called only once in the HTML <head>. To simplify HTML and page design, the Javascript provided works by registering the unique IDs of HTML elements to specific Javascript objects to enhance their behaviour. No Javascript is required in the <body> of the HTML document. Where required, some HTML elements get enhanced with proprietary attributes in the XML ac namespace. These affect the behaviour of the Javascript libraries but have no impact on the HTML parsing.
  • The Javascript files are small. All files are between 2 and 10KiB. No more 150KiB monsters that contain hundreds of functions you never use, or commercial frameworks that send over 10MiB of Javascript.

2.1.1 How to include and use the Javascript library

As mentioned above, all the Javascript generally appears grouped together in a single location in the<head> section of the HTML document with no Javascript embedded anywhere in the main <body> element itself. Simply include the required files and put the Javascript call in a built-in Javascript onload function. This ensure that all the HTML referenced by the Javascript is loaded before your Javascript is called.

For example here is the Javascript from an actual page in this Developer Toolkit:

<script type="text/javascript" src="/javascript/ac_ajax_v2.js"></script> <script type="text/javascript" src="/javascript/ac_event_v2.js"></script> <script type="text/javascript" src="/javascript/ac_menu_v2.js"></script> <script type="text/javascript" src="/javascript/ac_panel_v2.js"></script> <script type="text/javascript" src="/javascript/ac_filter_v2.js"></script> <script type="text/javascript"> window.onload=function(){ var $a=['tab_create_table','tab_edit_table','tab_view_table']; ac_menu.createMenu($a,'tab_view_table'); ac_ajax.addForm('view_database',false,'processingHolder'); ac_ajax.addForm('create_database',false,'processingHolder'); ac_ajax.addForm('edit_database',false,'processingHolder'); ac_panel.createDynamic('column_def',63,'create_db'); $a=',1234567890 '; ac_filter.createFilter('in1',$a,'w'); ac_filter.createFilter('in2',$a,'w'); ac_filter.createFilter('id1',$a,'w'); ac_filter.createFilter('id2',$a,'w'); $a='qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890-_./'; ac_filter.createFilter('name',$a,'w'); ac_filter.createFilter('name2',$a,'w'); } </script>

That single block of Javascript includes all the required files and sets up three AJAX forms, a dynamic tab menu, and a keyboard listener to filter out invalid input on certain form fields. No other Javascript is required on the page.

Template

<script type="text/javascript" src="/javascript/FILE_TO_INCLUDE"></script> <script type="text/javascript"> window.onload=function(){ // some Javascript goes here } </script>

2.1.2 What can you do with the Javascript library?

The library provides the following types of behaviour to enrich your applications:

  • AJAX
    Methods for registering forms to be handled by AJAX with intelligent handling and dynamic HTML updates and progress indicators.
  • User input filtering
    Methods for monitoring and filtering what chacters a user is inputting to a form in real-time to guide their input according to character black or white lists and case sensitivity.
  • Menu bars and tabs
    Methods for registering selectable menubar buttons, popup panels, tabbed panels etc. Easily create a menu or toolbar with dropdown menu like a desktop application or multiple sections under different tabs.
  • Expanding panels and recurring elements
    Methods for creating smoothly animated collapsing panels (of a fixed size) or collapsable sections of any size such as showing and hiding advanced options. Easily create repeating form sections that the user can add and remove dynamically.
  • Selection tracking
    Methods for tracking and highlighting selections from a list with CSS controls triggered by checkboxes. Designate a checkbox that selects/deselects everything in a list.
  • Cascaded events and image preloading
    Methods for regsitering multiple events to the same Javascript event handler. Easily make the built-in Javascript event listeners like onmousedown call a list of functions in a defined order.
previous: ac_email.php next: ac_ajax