a better 4gl: web ui, reporting engine, direct java access ......a better 4gl: web ui, reporting...

A Better 4GL: Web UI, Reporting Engine, Direct Java Access and

Much More

Greg Shah, CEOGolden Code Development

Tuesday October 8, 2019www.beyondabl.com

https://www.beyondabl.com/

Copyright © 2004 - 2019, Golden Code Development Corporation.

All Rights Reserved.

Agenda

● Background

● What is FWD?

● Reporting

● Direct Java Access

● SMTP Email Send

● UI

– Web Clients

– Enhanced Widgets

– Dynamic Layout

– Themes

– New Widgets

● Plans

● Which Platform is Strategic?

Background



Business Application Model

● UI and Reporting comprise the majority of the code in most (all?) business applications.

● Are there any real business applications that don’t have a UI or Reporting?



4GL Reporting Status

● 4GL Reporting is still largely based on the ChUI approach (UI statements with redirected terminal) from 1990.

● In the shift to GUI, Progress did not meaningfully upgrade the core 4GL reportng capabilities. Only direct printer support was added.

● OpenEdge does not have modern reporting with with just 4GL code.

– No capability for multiple fonts, colors, images, 2D drawing, templates.

– No ability to output to common business document types (PDF, XLS, DOC). Only CSV is available directly.

● For 30 years, 4GL developers have had to add multiple proprietary 3rd party technologies to meet standard business reporting requirements.

– Old School: DLLs (e.g. XPRINT), OCX, COM (Excel, Word), shell programs.● Messy, platform-specific, multiple technologies for similar needs.

– More Recent: Appserver + 3rd Party Reporting Engine + Report Definitions● Handles a wider range of needs, but at the cost of complexity/fragility and money.



4GL Integration Status

● 3rd Party Libraries (tight coupling)

– 4GL libraries/frameworks● Very few are available.● Developers recreate the wheel.

– .NET● Useful.● Largely Windows centric, less cloud friendly.● Limited technology availability compared to Java.● Tends to be biased to proprietary over open source.

● External Systems (loose coupling)

– Old School: streams, sockets, process launching, COM.● Messy, platform-specific, multiple technologies for similar needs.

– More Recent: appserver, web services.● Cleaner but the 4GL capabilities have lagged behind the market.



4GL UI Status

● Progress last upgraded 4GL widgets/core UI in the mid/late 90’s.

● GUI for .NET

– More complex wrapper around the core 4GL UI.

– Windows Forms is not strategic, even for Microsoft; placed in maintenance mode in 2014.

– Evolutionary dead end.

● Desktop/GUI applications are under pressure to move to web/mobile.

● OpenEdge UI is in maintenance mode.

● Progress recommends: modernize using non-4GL UI technology.



Refactor/Rewrite/Repeat: Long Tail Problem

● Each dialog/window/ADM[2] tab is considered a “screen”.

● Non-trivial applications have surprisingly large number of screens; empirical experience suggests at least 500 screens per 1MLOC of code*.

● Most (~90%) of application’s high value features done with ~10% of screens.

● On average, cost and effort to rewrite a low value screen is same as to rewrite a high value screen.

● Return on investment for ~90% of screens never achieved.

* FWD Code Analytics can be used to get an exact number, no matter how large the project.



Business Application Model

In the OpenEdge approach, business application requirements for modern UI and modern Reporting must be met with non-4GL external technology.



Built-In Reporting Engine and Direct Java Access

● Built-In Reporting Engine

– The 4GL needs a built-in, world-class reporting engine.

– Report Definitions would be written by non-programmers and could encode the layout/structure, formatting, graphics and 2D drawing.

– 4GL queries and datasets should be able to directly connect to reporting engine so that the generation of output can be driven by 4GL data access.

– Output in any standard business format including PDF, XLS/XLSX, DOC/DOCX.

● Direct Java Access

– Use OO 4GL syntax to instantiate and reference Java types.

– Full access, in-process to any technology written in Java.

– No more recreating the wheel.

– Write new code in Java and access it as easily as any OO 4GL code.

– Platform independent.

– Never lag behind current technology again.



Extending 4GL GUI to the Web

● What if existing 4GL GUI could run in the web, without a rewrite?

● What if 4GL GUI features were enhanced to add new capabilities, new functionality, a modern UI approach?

– some improvements could be implemented without code edits

– other improvements require some new code (or changing existing code to use new features)

● Clean, evolutionary path that starts with existing GUI investment and allows developers to achieve fully modern UI without a rewrite.

● Developers focus on high value screens; modernization effort is additive/incremental .

● Simultaneously avoids long tail problem while future proofing existing investment.



FWD is this Re-imagined, Enhanced 4GL

● Required re-imagining/re-implementing the core 4GL, from the bottom up.

● 15 years of development

– Early years focused primarily on implementing the compatible replacement.

– Recent years increasingly focused on critical improvements that have long been needed.

● Multiple successful projects.

● Open Source.

● Exactly what many 4GL developers would have wanted Progress to do.

What is FWD?



Open Source

● Solve your own problems● See how it all works● Collaborate / contribute● Available now and forever● Affero GPL (reciprocal)● Dual licensing available● https://proj.goldencode.com/p2j

Reporting



JasperReports

● Full featured Reporting Engine.

– Separates structure/layout/formatting from the data source.

– JRXML can be built by non-programmers using a variety of tools.

– Supports a wide range of content including text, images, barcodes, 2D-graphics...

– Formatting control over fonts, colors, positioning, pagination, sub-reports...

● Open Source.

● Well supported, many tools and plugins.

● WYSIWYG designer for JRXML.

● Built into the FWD application server, used as a library.

● Runs inside the same JVM with the converted application.

● New 4GL language syntax to access it.



How Reporting Works



Report Definition (.jrxml)<field name="roomType" class="java.lang.String"/>

<field name="roomPrice" class="com.goldencode.p2j.util.integer"/>

<title>

<band height="70">

<line>

<reportElement x="0" y="0" width="515" height="1" uuid="4058d4f4-b73d-4f3f-80db-3b2857ffb945"/>

</line>

<textField isBlankWhenNull="true" bookmarkLevel="1">

<reportElement style="Sans_Normal" x="0" y="10" width="515" height="30" uuid="fe78690f-568a-4de4-950e-2355cbc905f1"/>

<textElement textAlignment="Center">

<font size="22"/>

</textElement>

<textFieldExpression><![CDATA[$P{ReportTitle}]]></textFieldExpression>

<anchorNameExpression><![CDATA["Title"]]></anchorNameExpression>

</textField>

</band>

</title>

<pageHeader>

<band height="20">

<staticText>

<reportElement style="Sans_Bold" mode="Opaque" x="0" y="-20" width="45" height="15" forecolor="#FFFFFF" backcolor="#333333" uuid="d0bda39f-a3d6-...">

<property name="com.jaspersoft.studio.unit.width" value="px"/>

</reportElement>

<textElement textAlignment="Center"/>

<text><![CDATA[Room #]]></text>

</staticText>

...



PDF Example

DEFINE QUERY qRpt FOR person SCROLLING.

OPEN QUERY qRpt FOR EACH person.

DEF VAR rptPdf AS HANDLE.

DEF VAR rptName AS CHAR FORMAT "X(256)".

rptName = GUID(GENERATE-UUID) +".pdf".

CREATE REPORT rptPdf.

rptPdf:report-data-source = QUERY qRpt:handle.

rptPdf:report-design = "jrxml/guests_report_pdf.jrxml".

rptPdf:set-report-param("ReportTitle", "Guests Accomodation Report").

rptPdf:export-report-pdf(rptName).

OPEN-MIME-RESOURCE "application/pdf" STRING("file:///" + rptName) false.



XLS Example

DEFINE QUERY qRpt FOR person SCROLLING.

OPEN QUERY qRpt FOR EACH person.

DEF VAR rptXls AS HANDLE.

DEF VAR rptName AS CHAR FORMAT "X(256)".

rptName = GUID(GENERATE-UUID) + ".xls".

CREATE REPORT rptXls.

rptXls:report-data-source = QUERY qRpt:handle.

rptXls:report-design = "jrxml/guests_report_xls.jrxml".

rptXls:set-report-param("ReportTitle", "Guests Accomodation Report").

rptXls:export-report-xls(rptName).

OPEN-MIME-RESOURCE "application/excel" STRING("file:///" + rptName) false.

Direct Java Access



Use Java Like OO 4GL● Use any Java class or interface.

● Access instance or static members, data and methods.

● Box/Unbox Types

– Core 4GL data types map bidirectionally to core Java types.

– e.g. DECIMAL maps to DOUBLE.

– Pass 4GL types to Java methods.

– Return Java types and assign to 4GL variables/fields.

– Pass Java types to 4GL procedures, functions or methods.

● Leverage the largest pool of 3rd party technology with just a few lines of code!

● Extend the system with your own Java modules, frameworks and libraries.





Trigonometric Functions Example

using java.lang.* from java.

...

def var max-safe-angle-rad as decimal.

...

// convert our angle from degrees to radians

max-safe-angle-rad = max-safe-angle-deg * Math:PI / 180.

...

// opposite = hypotenuse * sin(max-safe-angle)

wall-height = ladder-len * Math:sin(max-safe-angle-rad).

// adjacent = hypotenuse * cos(max-safe-angle)

ground-distance = ladder-len * Math:cos(max-safe-angle-rad).

SMTP Email Send



Server-Side Email● Full featured SMTP solution, backed by Apache Commons Email.

– Connection via 4 possible modes: UNENCRYPTED, STARTTLS_WHEN_AVAILABLE, STARTTLS_REQUIRED or SSL.

– Specify the SMTP host (IP address or hostname) and optionally the port.

– No authentication or authentication with userid/password.

– Main contents of the email can be plain text, HTML or both.

– Unlimited TO, CC and BCC recipients.

– Control over FROM and REPLY-TO addresses.

– Attach local files or files specified by URL.

– Embed images in HTML using a local file or an image via URL.





HTML Email Example

create smtp-email mailer

assign connection-type = c-type

smtp-host = host

smtp-port = string(port)

smtp-user = s-user

smtp-password = pw

smtp-from = from-addr

smtp-reply-to = reply-to

smtp-subject = subject

smtp-text = text-body

smtp-html = html-body

smtp-validate = c-valid.

mailer:add-to-address(to-addr).

mailer:add-cc-address(cc-addr).

mailer:send().



User Interface



Web UI without the Rewrite

● All 4GL screens are available with compatibility.

● 2 clients:

– Virtual Desktop Mode (for users that don’t want change)

– Embedded Mode (for users that want a modern web UI)

● FWD UI has an abstraction layer:

– Allows different UI technologies to be plugged.

– 99% of the implementation remains in common code.

● Solves the “Long Tail” problem because there is no rewrite.

● Many options for improving and evolving the UI.



Virtual Desktop Mode

● Primarily for compatibility and easy migration of existing users.

● All HTML5/CSS/Javascript, no plugins, no extensions, no native code.

● Most of the new capabilities are available except for browser-side Javascript code.



● Designed as a platform to improve, evolve and modernize the application UI.

● All HTML5/CSS/Javascript, no plugins, no extensions, no native code.

● Single page application (no reloads).

● Javascript controls can be bound to 4GL data and functionality.

Embedded Mode

● 4GL screens can be exposed in an IFrame (rectangular visual element).

● Non-modal windows (tabs and core window content) is “broken out”, decorations/chrome removed.

● Modal dialogs are displayed as a popup with the rest of the screen “greyed out”.

● Javascript can be used to customize navigation and control over the application.



Javascript “Up Calls”

● Appserver client for Javascript.

● Custom web UI with or without 4GL screens.

● Use any Javascript tooling, controls or frameworks.

● Direct calls from Javascript to converted 4GL.

● Call external procedures, internal procedures and functions.

● Data passed and returned as JSON.

● Easy to use for data binding.

● Supports 4GL named events (PUBLISH/SUBSCRIBE).



Enhanced Browse - Filtering



Enhanced Browse - Sorting



Enhanced Browse - Export



Enhanced Browse – Export PDF



Enhanced Browse – Hyperlinking

DEFINE BROWSE staysBrowse

QUERY staysBrowse NO-LOCK DISPLAY

stay.room-num HYPERLINK "xprint-invoice"

COLUMN-LABEL "Room Num" ...

PROCEDURE xprint-invoice:

def input param xroom-num as char.

...

END.

subscribe to "xprint-invoice" anywhere

run-procedure "xprint-invoice".



Dynamic Layout Phase 1



Pluggable Themes



Pluggable Themes

● Pixel level control over widget drawing.● Control colors and fonts.● Each widget type has its own drawing routines that

can be overridden.● Subclass the built-in themes and just override the

parts you need.● Build your own from scratch.● Each FWD client session can use a different theme.● The theme is chosen when the client is started.



New Widget: Web Browser

● Designed as a 4GL widget.● Load URLs or generated HTML content into a 4GL widget.● Event processing (e.g. user clicking on a link) fires 4GL triggers.● Replaces the MS Browser OCX.



Web Browser Widget Example def frame f-html with size-pixels 590 by 340 overlay view-as dialog-box title "Guests Accomodation Report".

def var h as handle.

file-info:file-name = rptName.

rptName = file-info:full-pathname.

create html-browser h

assign name = "browser"

frame = frame f-html:handle

visible = true

width-pixels = frame f-html:width-pixels - frame f-html:border-left-pixels -

frame f-html:border-right-pixels

height-pixels = frame f-html:height-pixels - 2 * frame f-html:border-top-pixels -

frame f-html:border-bottom-pixels.

h:open-web-page(rptName).

on p anywhere do:

h:print().

end.



New Widget: Treeview

● Designed as a 4GL widget.● Simple API for defining the tree structure.● Node-level icon and text customization.● Extensive event processing fires 4GL

triggers.● Replaces the MS Treeview OCX.



Treeview Widget Examplecreate treeview hTree assign

frame = frame f:handle

width = 60

height = 20.

...

enable all with frame f.

img1 = hTree:create-image("treeview-sample-icon1.png").

...

do i = 1 to 5:

chKey = "Node " + string(i).

hNode = hTree:nodes:add-last-node(chKey, chKey).

hNode:node-icon = img1.

hNode:expand-node-icon = img1.

...



New Widget: Spreadsheet

● Designed as a 4GL widget.● Can be used as an OCX

replacement.● Load/Save Excel-

compatible spreadsheets.● UI is very close to Excel.● Supports a wide range of

classic Excel features including most functions.

● Can read/write cell content.● Event processing (e.g. user

clicking or moving between cell) fires 4GL triggers.

● Still in development.



Spreadsheet Widget Example create spreadsheet hsheet assign

name = "demoSheet"

frame = frame fsheet:handle

row = 1

width-pixels = frame fsheet:width-pixels - 2

height-pixels = frame fsheet:height-pixels - 2

visible = yes

sensitive = yes.

...

procedure ctrlframe.spreadsheet.OnCellFocus:

...

cellvalue = hsheet:get-cell-edit-text(sheetname, focuscol, focusrow).

display focuscell cellvalue with frame fctrl.

end.



Plans



Plan Highlights

● ProDataSets as Reporting Data Source● Multithreading● Dynamic Layout Phase 2● More 4GL Widgets

– Data Visualization– Calendar

● Mobile Client



Uniquely Solves Critical Business Application Problems

a better 4gl: web ui, reporting engine, direct java access ......a better 4gl: web ui, reporting...

Documents