FGL - Integrated Development Platform

FGL Server-Side Code Gallery

Functions with Optional and Default Parameters:


    FUNCTION myDateFormatter( dte, format="MMM dd, YYYY HH:MN ap" )
        return( dateFormat( dte ? dte : date(), format ) )
    END

    println( ">>> ", myDateFormatter() )
    println( ">>> ", myDateFormatter( , "YYYYMMDDHHMNSS" ) )

Serialize Complex Data Types:


    o = object()

    o.fish = { "cod", "walleye", "trout" }
    o.today = date( "MMMM dd, YYYY" )
    o.pi = 22 / 7

    fname = 'c:\temp\test1.dat'
    
    // serialize and write to disk
    fname.writeToDisk( pack( o ) )
    
    // read and de-serialize 
    o2 = fname.readFromDisk( ).unpack( )
    
    println( ">>> ", o2.fish[2], o2.today, o2.pi )

Object Creation and Interaction:


    // define a class
    CLASS cContact
      PUBLIC:
        local fname, mname, lname, suffix, prefix

        ACCESS name
            return( ::fname + " " + ::lname )
        END
        
        METHOD greeting( intro='Hello', msg )
            return( 
                intro + " " + ::name + 
                ( msg ? "\r\n" + msg : "" ) 
            )
        END
    END

    // create an instance of the class
    ocontact = new( "cContact" )
    
    // interact with class elements
    ocontact.fname = "Fred"
    ocontact.( "lname" ) = "Smith"

    println( ">>> ", ocontact.name )
    println( ">>> ", 
        ocontact.greeting( , "Nice to meet you" ) 
    )

Embed Server Instructions in a Web Page:


    <html>
      <body>
        <!-- write out content inline -->
        <h3>Today's date is <[ ! dateFormat( "MM-DD-YY" ) ]></h3>

        <!-- add a server block -->
        <[
            // this is a server-side block
            ! "Brought to you by: " + ouser.name
        ]>
      </body>
    </html>

Store & Retrieve Native Data in a Database:


    aa = aArray().add( {
        { "ST", "Staycation" },
        { "RT", "Road trip" },
        { "SK", "Skip" }
    }
    
    // store complex object in keyvalue db
    keyvalue.myTripOptions = aa
    
    aa = null
    
    // retrieve from keyvalue db
    aa = keyvalue.myTripOptions
    
    println( ">>> ", aa[ "RT" ] )

Chain Functions, including UDFs:


    FUNCTION myfunc( s )
        return( s.alltrim() )
    END

    greetings = " Hello World "

    println( ">>> ", 
        greetings.strextract( " ", 2 ).upper().myfunc(),
        " My Friend"
    )

Convert Objects To and From JSON:


    o = object( )

    o.fname = "Fred"
    o.lname = "Smith"
    o.addr = {
        { "Nashville, TN" },
        { "San Francisco, CA" }
    }

    // convert object to a json string
    str = objToJSON( o )

    // convert json string to object
    o = json( str )
    
    println( ">>> ", o.addr[1] )

Database Interaction:


    // instantiate data wrapper instance
    ouser = new( "cUser" )

    // get the desired record
    if ( ! ouser.getRecord( userid ) )
        return( ouser.errmsg )
    end
    
    // access a value from the db
    origTitle = ouser.title
    
    // change a value
    ouser.title = "New Title"
    
    // write the change to the database
    ouser.setRecord( userid )
    
    println( ">>> old title: ", origTitle,
    	" new title: ", ouser.title 
    )

FGL Client-Side Code Gallery

Create and Interact with In-Browser Windows:


    // create a client-side window within the current browser page 
    var w = fgl_win( "/userProfile?userid=<[ ! ouser.userid ]>", {
            dispMode : DISP_CENTERED,
            title : 'User Profile'
        }
    );

    // 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();

Dynamically Update Web Element with Server Content:


    // one line asynchronous call to update content
    uiAjaxUpdate( domid, url, extra );

    // domid = dom element (object or id) to update
    // url   = web url with params to POST asynchronously
    // extra = JS string to execute when the POST returns

Communicate & Auto-Update Content Using Pub/Sub:


    // 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 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 ]>'
        } );
    }

Advanced Web Forms:


    <[  // 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>

Add High-speed Fragment Searching to Any Table:


   <input type='text' 
       onKeyUp="searchFilterFunc(this.value,'tblHistory')"
       placeholder='enter any combination of words or phrases'
   >
   
   <table id='tblHistory'>...</table>

Create Powerful Web Applications with FGL

End-to-End Integrated Development Environment

FGL Platform Map

FGL Server-Side Code Gallery

FGL Client-Side Code Gallery

FGL Next Steps

Home

About

Documentation

Downloads

Community

Support