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>


#####

Copyright © 2020-2024 by the FGL Foundation, All Rights Reserved



10 ms