I.                  Overview

 

The Surface Method/Command is the most comprehensive Feature of the AJOMS Framework. It was designed and incorporated into the highest level menu of predefined Framework Methods/Commands, taking full advantage of all AJOMS lower level methods, interfaces, and unique support sub-systems( AJAX, JSON, JQUERRY, Macro’s and String management) to provide its powerful Application design capabilities

 

Web-site visual “Surface” Design is the arrangement of and changes to the contents of HTML Objects/Containers within the Page(s). These elements can be grouped into categories:

·         Frame ContainersTop Level HTML DIV or SPAN  Object Place-holder Containers of fixed locations and sizes.that divide the Page/Document into functional action, navigation, and results reporting presentation areas.

·         Grid Containers -  Fixed size and located  HTML DIV or SPAN  Object Place-holder Containers arranged in a specified rectangular “Surface”  pattern; “Grid”.

·         Element Containers – All types of HTML Objects comprising the designed functionality within   Master” or “Grid” member arrangements.

In order to maintain visual sanity of Web-site Surface/presentation design, the size (height and width) and location (Top and Left-side position) of each Container must be expressed in Percentage (%) terms of  the Parent Container size and location that houses them.

 

NOTE:  The AJOMS framework assumes that all arguments of this type (Object size and/or location) to its Methods are implied percentage (%) values.

 

II.               Surface/Grid Layout Generation

 

AJOMS provides a method (this.SF_mkgrid)  that creates a grid (rows and columns) layout of elements providing the basic container (APO’s) structure for a  surface of visually  labeled/imaged cells (icons) selectors that when invoked (clicked) initiate execution of application and/or predefined AJOMS method(s)/commands (cmds). The AJOMSSurfacemethod/command employs the AJOMS Grid( (this.SF_mkgrid) method to create its template (Grid)  of surface cell container elements.

 

A. Make a Grid Method

 

 The  Make Grid Method (this.SF_mkgrid) creates a  pattern of addressable fixed sized Container Objects for attachment/assignment to a Parent Container’s  innerHTML” attribute. SF_mkgrid has four (4) arguments and produces an array (xnodes) of APO nodes (pointers), one for each element in the created Grid.

 

 

B. Grid Method (this.SF_mkgrid) Format

 

FORMAT:  xnodes = this.SF_mkgrid(wid, grid, dest {, xhtml }) ;

 

 

wid

The common string preface (wid) identification (ID) for each grid container/object element  generated, as declared in the grid specifications argument.  The ID generated for each grid member is: wid-row#-column#

 

grid

The specifications for the desired grid structure. These specifications are declared in a “JSON” argument string of 10 named data field values, as follows:

 

 Ajax.Grid ='{"grid":{"rows":"~1","cols":"~2","cellht":"~3",

"cellwd":"~4","rowsp":"~5","colsp":"~6","rowoset":"~7",

"coloset":"~8,"append":”~9,"apndid":"~a"}}';

 

rows = the number of rows in the grid.

cols = the number of columns in the grid.

cellht = the height of a grid cell/object as a % value of the grid container destination (dest) height.

cellwd = the width of a grid cell/object as a % value of the grid container destination (dest) width.

rowsp = the space between the rows of grid cells/objects as a % value of the grid container destination (dest) height.

colsp= the space between the columns of grid cells/objects as a % value of the grid container destination (dest) width.

rowoset = the space offset to the first row of grid cells/objects as a % value of the grid container destination (dest) height.

coloset = the space offset to the first column of grid cells/objects as a % value of the grid container destination (dest) width.

append = The height of An HTML  declared Object (APO) elements (xhtml) to be appended at the bottom of created GRID  HTML object rows.

apndid=  The ID of the appended Object (APO) Elements (xhtml).

 

 

Grid specification values (~1 thru ~10)  are populated using the AJOMS macro expansion method: _STR.xmacro([args]), as exemplified below:

 

grid= _STR.xmacro([Ajax.Grid, rows, cols, cellht, cellwd,.rowsp, colsp

rowoset, colosert, append, apndid]);

 

 

The destination container object ID (dest) to hold the generated structure of grid object containers

xhtml

Optional argument used to append an HTML Object (APO) element layout (xhtml) to the specified grid generated HTML  structure.

xnodes

The resultant array of node  pointers (xnodes) to each cell/object (APO) of the generated grid structure.

 

III.           Create a SURFACE (Grid Structure) Command

 

The Surface facility employs most of the unique features of the AJOMS Framework into  a single Method/Command to generate and populate a pattern of  labeled (ICON) cells (APO’s) having associated command (CMDS)  method threads (ATO’s).

When invoked, the Surface command creates a surface of  ICONs ( image and/or text labeled) cell objects (APO’s), each associated (onclick) with a unique set of  CMDS/commands (AJOMS and/or Application created Client and/or Server-side operations (Methods, commands, etc.). The Surface command, employs the Grid Method (SF_mkgrid) to create the grid/pattern of Container objects and establishes the contents of each cell from directives contained in a named Surface cells instruction file (SCIF), or generated from the contents of a specified Server-side’s directory(“actdir”) member.

 

The Surface command can create any desired pattern of ICONS( (Text and/or image)  cells (Object containers) associated with different Application methods, ultimately providing User/Customers simple, and visually pleasing, access to  multiple facets of a  Web-site’s Application  designed functionality.

As a result, The AJOMS Surface Command provides the following Application Programming features, to populate a designated Container (APO),  based upon selection  and/or combining the multiple  calling parameters:

 

 

 

 

A. Surface Command Format

 

SURFACE(‘^file^:^name^,^rows^:n,^cols^:n,^pght^:m,^pgwd^:m,^eheight^:m,

^ewidth^:m,^pages^:n,^rspace^:m,^cspace^:m,

^ rowoset ^:m,^coloset^:m,^drag^:n',’ dest, dest’);

 

 

file

Name of the Surface Cells Instruction File (SCIF)

actdir

“Optional” Directory name instead of SCIF file name.

dest

The ID of the Surface results container  object (APO)

pght

The height of the page/grid expressed as a percentage (1-n) of the height of the Surface dest container object

pgwd

The width of the page/grid expressed as a percentage (1-n) of the width of the Surface dest container object

pages

Number of grid pages of rows and columns in the Surface.

rows

Number of rows of cells in Surface grid/page.

cols

Number of columns of cells in Surface grid/page.

cellht

The height of a cell expressed as a percentage (1-100) of the height of the dest container object

cellwd

The width of a cell expressed as a percentage (1-100) of the width of the dest container object

rowsp

The space between rows of the page/.grid expressed as a percentage (1-n) of the height of the Surface dest container object

colsp

The space between columns of the page/.grid expressed as a percentage (1-n) of the width of the Surface dest container object

rowoset

Space before the first Row of cells (% of Page height)

coloset

Space before the first  Column member in each row of cells (% of Page width)

title

A flag (0 or 1) that controls inclusion of a title (Text and Image) for all cells (1 is the default setting) 

drag

A flag (0 or 1) that allows for the moving  (“mouse” dragging )of  cell contents to new positions in the page/grid for all cells (0 is the default setting) 

timed

The interval of time in tics (1-1000000) to automatically  move cell contents to the next wrap-around position in the page/grid (0 is the default setting)  . When timed is set, drag and title flags are set to 0.

 

 

1.      Surface Cells Instruction File (SCIF)

 

The AJOMS SURFACE command relies upon instructions contained within a  Surface Cells Instruction File (SCIF) to direct population of the Surface  Grid cells (containers). Cell content specifications are contained within a JSON data array type structure, with each cell’s specification the next position in the array:

 

Format:

 

{"surface":{"cells":[{cell-0} , {cell-1}.…,{cell-n-1}] ]}};

 

Grid containers are populated row by row, from the JSON cell array , such that array position[0] are the instructions for grid cell[row1,col1]  until all the grid cells (ncells)are processed.

 

NOTE: The number of Cells in the grid is: ncells =   rows  * cols * pages

 

2.     SCIF Cell Instruction format

 

The specifications for each declared cell of the Surface command is defined by cell array ( cell[] ) elements within the JSON text structure of the command referenced SCIF file.

 

Cell Array Element Format:

 

            ,{

 “ICON”:[0-2],

“CMDS”:[[0-n]

}

 

  1. Surface Cell ICON

 

A cell ICON is a potential visual (Image or Text) target provided for User interaction/invocation (Mouse click, etc.) of Application Web-site designed functionalities.

 

The cell ICON Array is comprise of  (3) three member elements to:

·       Specify the path name of the ICON image file ( if not provided a transparent image file path is the default).

·       Specify an ICON Title (Text Name), or  define an  HTML INPUT  “text” type instruction have its value attribute as the ICON Tiltle.

·       Specify an ICON Title description that is displayed when “mouse” ICON “hovering” occurs.


 

Cell ICON Array element definitions:

 

0

The ICON image path file name

If not, the path named to an AJOMS transparent/clear image (png) file is provided.

1

The ICON Title Text

  • The ICON Title text string, or
  • HTML  “INPUT  text”  value

 

2

The ICON description Text (hovering invoked)

 

 

 

  1.  Cell Commands (CMDS)

 

A cell CMDS Array contains the Application and AJOMS Commands/Methods to be initiated when it’s ICON is selected/triggered (Mouse click, etc.). Each position  in the CMDS array contains separate AJOMS operation. There is no limit to the number of commands (0-n) specified in the cell CMDS array.

 

 

 

C ell CMDS Array element definitions:

 

0

Any number (0-n)  of AJOMS and/ or Application Methods/Commands to be initiated when it’s ICON is selected. 

1

2

.

n

 

 

 

 

 

 

 

 

B.  Surface Command Processing

 

The AJOMS Surface Method/Command performs the following steps to provide its Application Programming options:

 

 

 

ARG

Definition

Default Value Generated

rows

The number of rows in the page grid

1

cols

The number of Columns in the page grid

1

cellht

Cell member  Height (% of Page height pght)

(pght –((rows+1)*rowsp))/rows

cellwd

Cell member  Width (% of Page width pgwd)

(pgwd –((cols+1)*colsp))/cols

rowsp

Space between Rows of cells (% of Page height)

0

colsp

Space between Columns of cells (% of Page width)

0

rowoset

Space before the first Row of cells (% of Page height)

0

coloset

Space before the first  Column member in each row of cells (% of Page width)

0

 

 

A.   Surface Page  Navigation

 

The AJOMS Surface Commend allows navigation and selection of Page Contents to load, when the Multiple-page option (pages > 1) was designated at command invocation. In this case, a page navigation panel is appended at the bottom of the page, allowing navigation and access to  any  pages of ICON Surface cells.

 

B.   Re-Positioning Cell Content Within a Surface  Page

 

The position of cells within a Page can be can be rearranged:

  1. Automatically- via the Surface ’timed:tics option. In this case the Cell contents (HTML) of all the Page elements (cells) are moved/wraped- around one position counter clockwise at the end of each specified time interval/cycle ‘tics.’ When this option is invoked, ICON image and labels are inhibited, ( I.E.,  the Surface Command  title’ flag is unset).
  2. Manually – When the Surface ‘drag’ option is set (drag:1) at invocation. In this case Page cell contents (HTML) can be dragged to new positions in the Page.

 

IV.           Examples of AJOMS Surface Command Usage

 

The Following Code, that drives the asynchronous program  logic of the AJOMS Example Program, best exemplifies the Power, uniqueness,  and usefulness of  the APOMS  Framework Surface  Method/Command. The following depictions of Surface Command usage are taken directly from the design of the AJOMS Example Web-site implementation:


 

AJOMS Example Program (ajoms_client.php)

<script language="JavaScript">

function startup()

            {

            Ajoms.EMSGFLG= 0 ;                   

 

            Ajoms.LOG.frames(['_data1:S_data1','_data2:S_data2','_data:S_data','_Page:S_Page']);

            Ajoms.ATO.stay(['DB_RECS','IO_getfile','IO_getimg','IO_getdir']);

            Ajoms.IDS.curdir='tfn';

 

            SURFACE('^file^:^title.txt^,^brec^:0,^rows^:1,^cols^:2,^cellht^:100,

                        ^cellwd^:18,^coloset^:5,^colsp^:0','!M_title') ;                             

            AJOMS('{^IO_getdir^:{^d^:^./music^,^ICborder^:^BORDER^}}','!M_right,_data' );

            SURFACE('^file^:^Comands.txt^,^rows^:18,^cols^:1,^cellht^:4,

                        ^cellwd^:100,^ICborder^:^BORDER^,^rowsp^:1,

                        ^colsp^:2,^rowoset^:2','!M_left') ;

            AJOMS('{^LST_play^:{^file^:^./Music.txt^,^SUPR^:^1^}}','_Page') ;                                                                                                                                                                                               

            SURFACE('^file^:^./pics2^,^rows^:7,^cols^:1,^ICborder^:^BORDER^,^filt^:^`jpg`,

                                    `gif`,`png`^,^timed^:2000','!M_left_1:_data1') ;   

            SURFACE('^file^:^Radio.txt^,^rows^:1,^cols^:1,^cellht^:100,^cellwd^:4,

                                    ^coloset^:65','!M_bottom') ;            

            SURFACE('^file^:^shell.txt^,^rows^:200,^cols^:1,^cellht^:3,^cellwd^:60,

                                    ^ICborder^:^BORDER^','_data2') ;

            };

</script>

 

 

.

 


AJOMS Example Program (ajoms_client.php)

<!--  AJOMS Application EXAMPLE: Frame Container Layout -->

<body style="background-color:silver;"onLoad="startup();">

 

                        <div id='M_title' class='S_title'></div>

                        <div id='M_left' class='S_left' ></div>

        <div id='M_left_1' class='S_left_1' ></div>

        <div id='_Page' class='S_Page'></div>

        <span id='M_center' class='S_center'>                          

                        <div id='_data' class='S_data' ></div>         

            <div id='_data1' class='S_data1' ></div>

            <div id='_data2' class='S_data2' ></div>

        </span>                 

        <div id='M_right' class='S_right' ></div>

                        <div id='M_bottom' class='S_bottom' ></div>

     

</body>                                             

</html>

<?php

include "flowplayer.js" ;

include "ajoms_client.css" ;

include "ajoms_frame.js" ;

include "ajoms_client_side.js" ;

?>

 

 

 

 

 

 

A.   Site Navigation Menu.

 

This  example of the AJOMS Surface Command produces a 17  ICON menu list to navigate through the AJOMS Example sample Web-site  application via the following Surface Command statement options and SCIF (Comands.txt) specifications:

 

1.     Surface JSON Command Data:

 

SURFACE(‘^file^:^Comands.txt^,^rows^:17,^cols^:1,^pght^:100,

^pgwd^:100,^cellht^:3,^cellwd^:100,^rowsp^:2,^colsp^:2','!M_left’ ) ;

 

2.     FCIF JSON (Comands.txt) Data:

 

 

{"surface":{"cells":[

{"ICON":["","<input type=text style='width:100%;background:#33FF33;' id='tfn' value='./music'>","last file name"]},                                                                                  

{"ICON":["","Reset","Reset Display Areas"],

            "CMDS":["$.clear('Page,_data,_data1,_data2,_ermesg')"]

                                    },                                 

{"ICON":["","Directory","List Directory Entries"],

            "CMDS":["ajoms(1{^IO_getdir^:{^d^:^JS.ID.v(`#tfn`)^}},_data1)"]

                                    },                     

{"ICON":["","<input type=text style='width:100%;background:#33FF33;' id='pdn' value='./pics2' >","Picture Directory Name"],

            "CMDS":["$('pdn').obj('value',$('tfn').obj('value'))"]

                                    },                                 

{"ICON":["","Pictures","Select Pictures"],

                                    "CMDS":["SURFACE('^actdir^:^JS.ID.v(`pdn`)^,^rows^:4,^cols^:5,^pght^:100,^pgwd^:100,^pages^:1,^timed^:6000','_data1')"]

                                    },

{"ICON":["","Music","Select Music to Play"],

                                    "CMDS":["SURFACE('^file^:^Music.txt^,^rows^:8,^cols^:2,^pght^:300,^pgwd^:100,^pages^:3,^button^:-1,^drag^:0','_data2:_data2')"]

                                    },

{"ICON":["","Juke Box","Play Music Continuously"],

            "CMDS":["(Ajoms.SMDEV)ajoms(1{^play^:{^file^:^Music.txt^,^INDEX^:2}},_data2)",

                                    "(!Ajoms.SMDEV)ajoms(1{^play^:{^file^:^Music.txt^,^INDEX^:2}},_data2)"]

                                    },

{"ICON":["","Records","Load File Page Records"],

            "CMDS":["ajoms(1{^DB_recs^:{^f^:^JS.ID.v(`#tfn`);^,^INDEX^:1}},_data)"]

                                    },                                 

{"ICON":["","Tblform","load table form"],

            "CMDS":["ajoms({^tblform^:{^INDEX^:1}}RESULTS,_data1)"]

                                    },

{"ICON":["","Menu","Load the menu"],

                                    "CMDS":["SURFACE('^file^:^Comands.txt^,^rows^:1,^cols^:17,^pght^:5,^cellht^:2,^pages^:1,^INDEX^:3','_data')"]

                                    },

{"ICON":["","Execute","Exec JS Stmts."],

            "CMDS":["ajoms({^jsexec^:{}},_data1)"]

                                    },

{"ICON":["","Data","Get Data"],

            "CMDS":["ajoms({^getdata^:{^dir^:^.^}},_data1,_data2)"]

                                    },

{"ICON":["","Hist-On","History Trace On"],

            "CMDS":["$.ajoms('hist',1)"]

                                    },

{"ICON":["","Hist-off","History Trace Off"],

            "CMDS":["$.ajoms('hist',0)"]

                                    },

{"ICON":["","Window","Start New Window"],

            "CMDS":["ajoms({^WINDOW^:{^url^:^ajoms.com/ajoms_client.php^,^wname^:^mywindow^,^dest^:^^,^tbnm^:^1^}})"]

                                    },

{"ICON":["","Info","Info about CMDS"],

            "CMDS":["SURFACE('^file^:^info.txt^,^rows^:1,^cols^:4,^pght^:5,^pgwd^:60','_data1')"]

                                    },                                                                                             

{"ICON":["","REFRESH","Re-init Display Areas"],

            "CMDS":["$.clear('Page,_data,_data1,_data2,_ermesg')",

            "ajoms(1{^play^:{^file^:^Music.txt^,^INDEX^:2}},_data1)",

                                    "SURFACE('^file^:^Music.txt^,^rows^:9,^cols^:5,^pght^:100,^pgwd^:100,^pages^:1,^colsp^:0,^rowsp^:0,^drag^:1','_data2')"]

                                    }                                                                                                          

]}}

 

 

B.  Internet Tab  Selection Panel

 

This  example of the AJOMS Surface Command produces a Panel/Grid  named  Tabs/Buttons  to select/link-to different internet Web-sites, via the following Surface Command statement options:

 

1.     Surface JSON Command Data:

 

Surface(‘file^:^tabs.txt^,^rows^:1,^cols^:4,^pgwd^:60,

        ^cellwd^:12, ^rowoset^:20,^coloset^:5,^drag^:1}}','!_wintab' ) ;

 

2. FCIF JSON (tabs.txt) Data:

 

{"surface":{"cells":[

{"ICON":["","SEARCH","Google Search"],

            "CMDS":["ajoms({^WINDOW^:{^url^:^Google.com^,^wname^:

                          ^mywindow^,^dest^:^^,^tbnm^:^1^}})"]

                                    },

{"ICON":["","U-TUBE","U-tube"],

            "CMDS":["ajoms({^WINDOW^:{^url^:^utube.com^,^wname^:

                          ^mywindow^,^dest^:^^,^tbnm^:^1^}})"]

                                    },                                             

{"ICON":["","NEWS","Fox News"],

            "CMDS":["ajoms({^WINDOW^:{^url^:^Foxnews.com^,^wname^:

                           ^mywindow^,^dest^:^^,^tbnm^:^1^}})"]

                                    },                                             

{"ICON":["","<input type=text style='width:100%;background:#33FF33;'

                         id='tab2' value='ajoms.com'>","URL Address"],

            "CMDS":["ajoms({^WINDOW^:{^url^:^JS.ID.v(`tab2`)^,^wname^:

                         ^mywindow^,^dest^:^^,^tbnm^:^1^}})"]

                                    }                                                                                                          

     ]}}

 

 

 

C. Timed Picture Selection Panel

 

This  example of the AJOMS Surface Command produces a “timed” changing  Panel (Grid) of Pictures for selection, in the AJOMS Example sample Web-site  application, via the following Surface Command statement options:

 

1.     Surface JSON Command Data:

 

SURFACE(‘actdir^:^./pics2^,^rows^:4,^cols^:5,^pght^:100,

      ^pgwd^:100,^timed^:2000’,’_data1’);

 

2.     Specified Directory (“actdir”:”./pics2”) File Members:

 

 


V.                 APPENDIX

 

  1. CSS  for AJOMS EXAMPLE  (ajoms_client.css)

(APO Styles and APO positions within Page)

 

<style>

body * {font-size:95%;font-family:Times New Roman;}

 

 

 

.S_title{

position:absolute;

top:1%;

left:0% ;

width:100%;

height:3%;

background-color:#FF00FF;

}

 

.S_bottom{

position:absolute;

top:96%;

left:0% ;

height:4%;

width:100%;

background-color:#FF00FF;

}

 

.S_left{

position:absolute;

top:4%;

left:1%;

height:92%;

width:9%;

}

 

.S_left_1{

position:absolute;

top:4%;

left:11%;

height:92%;

width:9%;

}

 

 

.S_right{

position:absolute;

top:4%;

left:85%;

height:92%;

width:15%;

overflow:auto ;

}

 

.S_Page

{

position:absolute;

top:4%;

left:20%;

width:71%;

height:92%;

}

 

 

.S_center{

position:absolute;

top:4%;

left:20%;

height:92%;

width:65%;

}

 

 

.S_data1{

position:absolute;

top:0%;

left:0%;

height:100%;

width:50%;

overflow:auto ;

}

 

.S_data2{

position:absolute;

top:0%;

left:50%;

height:100%;

width:50%;

overflow:auto ;

}

 

.S_data{

position:absolute;

top:0%;

left:0%;

height:100%;

width:100%;

overflow:auto ;

}

 

img.default {

height:100%;

width:100%;

}

 

li b{

text-decoration:none;

color:#000000;

background-color:#33FF33;

}

 

select option{

text-decoration:none;

color:#000000;

background-color:#FFFF00;

}

 

textarea.textshow {

background-color:#FFFF00 ;

width:100%;

height:100%;

}

 

.text {

background-color:#FFFF00 ;

}

 

</style>