FGL - Client-side FGL.js

FGL Features - FGL.JS

fgl language fgl.js web server database dev tools

FGL.JS
Browser-Side Language Extension

Client-side FGL, embodied in the JavaScript library FGL.JS, extends the server-side FGL programming environment down to the browser and provides a standardized development environment for the creation and deployment of advanced websites and web applications.

FGL.JS provides an abstraction layer that normalizes modern browsers while adding in-browser enhancements such as robust windowing, window and desktop management, extended event and DOM interaction, rich AJAX integration, real-time data portability, enhanced drag and drop, intra-object communications, and more.

Advanced Browser UIs with FGL.js (tap the picture for details):

Create and Interact with In-Browser Windows:


    // create a client-side window
    // within the current browser page 
    var w = fgl_win( "/userProfile?userid=fred007", {
            title : "Fred's User Profile",
            dispMode : DISP_CENTERED,
            width : 600, 
            height : 440
        }
    );

    // get dom document from the window
    var doc = w.getDocument();
    
    // interact with content within the window
    doc.domSet( "msg", "Welcome to your window" );
    doc.doInit();

Key Features

Client-side FGL is written in pure HTML, CSS, and JavaScript, and provides:

In-Browser Windowing UI
Advanced Window Manager
Pub/Sub Window & Element Communications
Real-Time UI Element Updating
Advanced UI Components
Enhanced JavaScript Functions
Seamless Server Integration
Full Windowing Functionality
Transparent Windows
Modal Windows
Child Windows
Custom Borders
Extended Tooltips
Custom Window Themes, Headers, And Footers
Default Themes and Templates
Embedded Website Support
Internal And External Content Within Windows
Extended Drag And Drop
Cross-Browser, Cross-Domain Drag And Drop
Enhanced Ajax Integration
Full Support Of Openajax Hub And Intra-Object Communications
Robust Widget And Mashup Platform
Support For All Web-Based Content: Text, Images, Video, Widgets, Websites, And More
Leak-Free Event Handlers And Dom Integration
Standardized Functions For Enhanced String, Numeric, Dates, Arrays, Form Elements, And More
Integrated Data Portability
Individual Object Save And Restore
Comprehensive Browser Desktop Save And Restore
Automated Serialization And Restoration Of Objects
Extensive Effects, Animation, And Default Controls
Extensible Object Repository
Standardized Library Of Common Functions And Rad Tools

Create, Communicate, and Auto-Update Content:

Communicate directly between windows, modal dialogs, and even the browser desktop


    // create two overlapping windows    
    var w1 = fgl_win( "/win1.htm", { 
        title: '1st window', 
        width: 640, 
        height: 450,
        theme: 'dark' 
    } );
    var w2 = fgl_win( "/win2.htm", { 
        title: '2nd window', 
        theme: 'light' 
    } );

    // register messages that each window is interested in
    wmsg.register( w1, "profile_pic_change", "cbFuncW1" );
    wmsg.register( w2, "profile_pic_change", "cbFuncW2" );

    // send a message when profile img changes
    imgProfile.onchange = function( ) {
        wmsg.publish( "profile_pic_change", { 
            pic: this.src,
            userid : '<[ ! ouser.userid ]>'
        } );
    }

    // force send a message
    wmsg.publish( "profile_pic_change", { 
        data:'send whatever you want',
        url:'/whatever'
    } );

Advanced Web Forms:

Extensive tools for forms creation, processing, and server-side data integration.

    <[  // server side

        ui = new( "cTableUI" )
        ui.section( )
        ui.text( "NAME", "name", ouser.name )
        ui.text( "DOB", "dob", ouser.dob )
        ui.end( ), ui.subsection( )
        ui.select( "COUNTRY OF RESIDENCE", "country", ouser.country )
        ui.end( )

        aCountries = { 
            { "US", "United States" }, 
            { "CA", "Canada" }
            // ...
        }

        if ( session.var( "q" ) == "update" )
            objUpdateFromSession( session, ouser )
            ouser.setRecord( ouser.userid )
        end
    ]>
    <!-- client-side -->
    <html><body>
    <form name='inpt' method='post' action='/thisform.htm'>
    <input type='hidden' name='q' value='update'>

    <!-- render form -->
    <[ ! ui.value ]>

    <button onclick="inpt.submit()">submit</button>
    
    <script>
    
    function uiInit( ) {
        uiDatePicker( "dob", { noTime:1 } );
        uiList( "country", { 
            data:<[ ! aCountries.toJSON() ]> 
        } );
    }
    domReady( "uiInit()" );
  
    </script>
    </form>
    </body></html>

#####

FGL Features - FGL.JS

FGL.JS Browser-Side Language Extension

FGL.JS
Browser-Side Language Extension