====== O4W Application Program Interface (API) ====== === Design Flow === Developers who wish to create their own O4W applications create a routine whose name begins O4W_ and register it through the O4W Security module. This routine is similar in design to an OpenInsight "commuter module"; it will be called by different "events" involved in the web development cycle. The subroutine must take 3 parameters: SUBROUTINE O4W_MYROUTINE(CtlID, Event, Request) All web applications will receive the "CREATE" event when they are first invoked. Unlike a traditional OpenInsight form, the layout of your O4W web page will be created dynamically in this stored procedure. The stored procedure should build the web application during the CREATE event, optionally specifying other "events" that it wishes to be notified of; it will then be invoked by these other events (for example, button clicks), at which time it can dynamically generate new content or take any other action that is appropriate. When building the web page with O4W, there are several functions that must be performed. These include: * creating "styles" to control the look of the page; * creating the display elements of the page; * creating any "input controls" on the page; * specifying the actions that the page may generate Styles are the heart of modern web development. Styles control the look of the different pieces of the web page, including fonts, colors, alignment, and more. Groups of styles can be bundled together into "style sheets", which may be added to your O4W application. O4W toolkit functions also allow you to create style information "on the fly", and either use it for a single display element (for example, a particular block of text) or for groups of elements (for example, for all text). When first creating your web page, you will normally specify a 'template' containing HTML code that defines the general layout of your web page. This template can contain other scripts, style sheets, etc., which will all be included in your final output. Any web design tool (or even notepad) can be used to create this template. O4W requires the placement of 3 special "tags" within the template, along with one optional "tag", so that it can accurately place your programmatically-generated output. The required tags include %HEAD% (located in the header section), %BODY% (located in the main body), and %FOOTER% (where you wish any footer banners to appear). You can optionally also specify a location, and type, for any menu you wish to create - specify %MENU-H% for a horizontal menu, %MENU-V% for a vertical menu, or %MENU% (for a menu with the default orientation, controlled by the O4WCONFIG "MENUDIR" record), wherever you wish such a menu to appear (generated by a call to O4WMenu). Display elements are the actual items to show on the web page. This includes plain text, headers, tables, links, images, and anything else that the user will see on the page. For each of these, it is possible to associate a style. A particular type of display element is the "input control." An input control (for example, a textbox) allows the user to enter information on the web page. Input controls can have actions associated with them so that your program (or special functions built into the web page itself) can react to the users input. == Sample Code == Below is annotated sample code illustrating the use of the O4W toolkit. Specific information for each O4W API call is later in the document; however, this sample code illustrates the "flow" of the O4W design. Define the name of the stored procedure (with the O4W_ prefix), and include the insert item that defines the O4W toolkit routines Subroutine O4W_MYROUTINE(CtlEntId, Event, Request) $Insert O4WEquates Check for the 'create' event, and verify that we have all the information needed to run this routine; if not, return an error Begin Case Case Event _eqc "CREATE" * Initial form creation ReportName = O4WGetValue("REPORTID") If ReportName = "" Then O4WError("No report specified") Return End Read ReportDef From O4WReportFile%, ReportName else O4WError("Report '":ReportName:"' not on file") Return End Load the HTML "template" that will serve as the basis for our form, and set some default style information for the form (colors, images, and alignment) and for any "links" on the page O4WForm(ReportDef, O4WColorStyle("", ReportDef, ReportDef, ReportDef):@FM:O4WTextStyle("","","","",ReportDef+0)) O4WLinkStyle(ReportDef, ReportDef ) Set the "title" of the web page (which is displayed in the browser window) O4WTitle(ReportDef) Define a style, called "RPTALIGN", that we will re-use with various other elements (including the "headline" of the web page) O4WTextStyle("RPTALIGN", "", "", "", ReportDef+0) O4WHeader(ReportDef, 1, "BANNER", "RPTALIGN") Define a section that will contain our results (presented as a table). Note that the section uses the "RPTALIGN" style defined earlier O4WSectionStart("DATATABLE", "RPTALIGN") bBorder = 0 bWidth = ReportDef + 0 If ReportDef <> "0" And ReportDef <> "" Then bBorder = 1 Start the table, named RESULTS, and set its style O4WTableStart("RESULTS", O4WTableStyle("", bBorder, bWidth, ReportDef+0)) For each column in the table, define a "column header" with the desired color and text style NUM.FIELDS = DCOUNT(ReportDef, @VM) For each.field = 1 To num.fields colColor = ReportDef colBGColor = ReportDef colBold = ReportDef colAlign = ReportDef colItalic = ReportDef O4WTableHeader(ReportDef, each.field, "", O4WColorStyle("",colBGColor, colColor):@FM: O4WTextStyle("", "", colBold, colItalic, colAlign)) Define the styles for the columns themselves, saving them as the style named "RESULTS_" valColor = ReportDef valBGColor = ReportDef valAlign = ReportDef O4WColorStyle("RESULTS_":each.field, valBGColor, valColor) O4WAlignStyle("RESULTS_":each.field, valAlign) O4WTableStyle("RESULTS_":each.field, bBorder, bWidth) Next each.field Build some results (omitted from the sample code) and populate the table with the data. Note the use of the style "RESULTS_" defined for each column (above) for Cntr = 1 to Num.ROWS For EACH.FIELD = 1 To NUM.FIELDS O4WSetCell(CNTR, Each.field,'' , 'RESULTS_':EACH.FIELD) RSLT = ResultData O4WText(RSLT) Next each.field Next Cntr The RESULTS table is now complete O4WTableEnd("RESULTS") As an illustration of advanced functionality, convert the table using a "tablesorter" plugin. This requires some scripts and stylesheets to be added, before the plugin is "attached" to the RESULTS table O4WScript("/weboi/O4W/jquery.tablesorter.min.js") O4WScript("/weboi/O4W/jquery.tablesorter.pager.js") O4WStyleSheet("/weboi/O4W/style.css") O4WPlugIn("RESULTS", "tablesorter", "{widthFixed: true, widgets: ['zebra']}" ) Put a "break" between the table, and add two buttons. Add events for these buttons when they are "clicked" O4WBreak() O4WButton("Download As CSV", "BTNCSV") O4WButton("Download As PDF", "BTNPDF") O4WQualifyEvent("BTNCSV", "CLICK") O4WQualifyEvent("BTNPDF", "CLICK") The DATATABLE section is now complete O4WSectionEnd("DATATABLE") Add a "link" at the bottom of the page, another break, and a "footer" O4WLink("Home Page", "", "http://www.revelation.com") O4WBreak() O4WFooter(ReportDef, 3, "FOOTER") The CREATE event is now complete. The following section will be called when one of the buttons is clicked, and the "CLICK" event is passed back to the O4W commuter module Case event _eqc "CLICK" Gosub GenerateTable Finish up the commuter code logic End case Return === O4W Toolkit Style and Option functions === == O4WSTYLESHEET() == Allows you to define an external "style sheet" that you wish to put on the current web page. == O4WALIGNSTYLE(, , ) == Creates a "style" for element alignment. If specified, the element is horizontally aligned according to its value (this can be any valid CSS "text-align" value, and O4W recognizes 0, 1, and 2 as "shortcuts" for left, center, and right). If specified, the element is vertically aligned according to its value (this can be any valid CSS "vertical-align" value, and O4W recognizes 0, 1, and 2 as "shortcuts" for top, middle, and bottom). Returns the style information (to use immediately with a display element or input control), and (if is not null) defines the style by the stylename for use with one or more elements and input controls. == O4WCOLORSTYLE(, , , ) == == O4WCOLORS(, , , ) Deprecated – Use O4WColorStyle == Creates a "style" based on the specified background color, foreground color, and background image. Returns the style information (to use immediately with a display element or input control), and (if is not null) defines the style by the stylename for use with one or more elements and input controls. == O4WLINKSTYLE(, , ) == Defines the colors to use for links when they are first displayed, and after they have been visited. If is null, this applies to all links on the page. == O4WTABLESTYLE(, , , ) == Creates a "style" based on the specified border flag (0=no border,1=solid border), border width (with no units specified; pixels will be used), and alignment (0=left;1=center;2=right). Returns the style information (to use immediately with a display element or input control), and (if is not null) defines the style by the stylename for use with one or more elements and input controls. == O4WCELLSTYLE(, <#cols>, <#rows>, , ,) Deprecated – See O4WTableCellOptions and O4WAlignStyle == Creates a "style" for table contents. If <#cols> specified, the current table 'cell' will expand across that number of columns; if <#rows> specified, the current table 'cell' will expand across that number of rows. If specified, the text in the cell is horizontally aligned according to its value (this can be any valid CSS "text-align" value, and O4W recognizes 0,1, and 2 as "shortcuts" for left, center, and right). If specified, the text in the cell is vertically aligned according to its value (this can be any valid CSS "vertical-align" value, and O4W recognizes 0,1, and 2 as "shortcuts" for top, middle, and bottom). If is set to "1", the cell is styled as a table header ("th") instead of the default table detail ("td"). Returns the style information (to use immediately with a display element or input control), and (if is not null) defines the style by the stylename for use with one or more elements and input controls. == O4WTABLEADVANCEDOPTIONS(, , ) == Specifies additional options for table display. If is set to “1”, the table will automatically include the O4W plugin to allow “drag and drop” between the table rows. If is set to “1”, the table will automatically include the O4W plugin for rounded corners. If is set to “1”, the contents of the table will be “zebra-striped”. Returns the option information to use immediately with a display element or input control. == O4WTABLEPAGEROPTIONS(, , , ,,,) == Specifies pagination and sorting options for table contents. When specified, the default pagination subroutine will be applied to the current table (unless is set to the name of a different pagination subroutine to use). The parameter should be set to “0” to have the pagination display appear above the table, and “1” to appear below the table. Set to the number of rows/page that should initially be displayed. contains a @VM-delimited list of the column numbers where sorting should be allowed (the first column of the table is “1”, the second column is “2”, etc.). If known, should be set to the total number of rows to be displayed in the table. The parameter should be set to the current page number (“1” initially, and then as appropriate after any callbacks for pagination/sorting have been handled). Any additional options needed by the pagination routine should be passed with the parameter. Returns the option information to use immediately with a display element or input control. == O4WTABLECELLOPTIONS(<#cols>, <#rows>, ) == Specifies additional options for table contents. If <#cols> specified, the current table 'cell' will expand across that number of columns; if <#rows> specified, the current table 'cell' will expand across that number of rows. If is set to "1", the cell is styled as a table header ("th") instead of the default table detail ("td"). Returns the option information to use immediately with a display element or input control. == O4WTEXTSTYLE(, , , , , ) == Creates a "style" based on the specified font, bold flag (0=normal,1=bold), italic flag (0=normal, 1=italic), alignment (0=left;1=center;2=right;-1=justify), and font size. Returns the style information (to use immediately with a display element or input control), and (if is not null) defines the style by the stylename for use with one or more elements and input controls. == O4WLISTBOXSTYLE(,,,,) Deprecated – See O4WListBoxOptions == Creates a 'style' based on the specified multiple flag (1=multiple selections allowed) and the specified (number of rows to display) and (width of rows). If is specified with , then the entire contents of the select box (instead of only 'selected' items) will be returned. Returns the style information (to use immediately with a display element or input control), and (if is not null) defines the style by the stylename for use with one or more elements and input controls. == O4WLISTBOXOPTIONS(,,,,,) == Specifies additional options for a listbox control, including whether multiple selections are allowed (set parameter to “1”), and the specified (number of rows to display) and (width of rows). If is specified with , then the entire contents of the select box (instead of only 'selected' items) will be returned. If is specified, then the overall listbox (the HTML “select” element) will be assigned this ID; if not specified, the “select” element will automatically be given the ID “list”, where is the name of the select element. If is specified then the control will be displayed as a combobox (including a modifiable textbox), rather than a listbox. Set to “1” for a case-sensitive combobox, or “-1” for a case-insensitive combobox. Returns the option information to use immediately with a display element or input control. == O4WSIZESTYLE(, , ) == For those elements that allow for width and/or height (tables and images), specify a value followed by "px" (or nothing) for pixels, or "%" for percent. Returns the style information (to use immediately with a display element or input control), and (if is not null) defines the style by the stylename for use with one or more elements and input controls. == O4WPOSITIONSTYLE(, , , , , ) == For those elements that allow for positioning, you may specify a value for the left and top locations of the element. If is "absolute", this is an absolute position on the page; if this is "relative" (or null), the position is relative to the element's parent. You cam also specify a in addition to, or instead of, other positioning parameters; specify 'left' or 'right' (or any valid 'float' style). Since 'floating' the element will remove it from the normal layout, to preserve the sizing of any containing section, you may create a dummy element with specified (for example, 'both') to retain the proper element flow. Returns the style information (to use immediately with a display element or input control), and (if is not null) defines the style by the stylename for use with one or more elements and input controls. == O4WINPUTSTYLE(, , , , ) Deprecated – See O4WInputOptions == Creates a "style" based on the specified enabled flag (0=disabled,1=enabled) and alignment (0=left;1=center;2=right;-1=justify). If is set to '1', then the specified element will be "selected" (radio buttons and checkbox items will be checked, listbox items will be selected, and buttons will be marked as the 'default' button). Returns the style information (to use immediately with a display element or input control), and (if is not null) defines the style by the stylename for use with one or more elements and input controls. == O4WINPUTOPTIONS(, , ) == Defines additional input options based on the specified enabled flag (0=disabled,1=enabled) and flag (0=read/write, 1=read only). If is set to “0”, then the input control will not allow the browser to “auto fill in” the value. Returns the option information to use immediately with a display element or input control. == O4WRAWSTYLE(,