BASISogo3Dsm.png

 BBj BUI: Getting Started

BBj BUI: Getting Started

What's a BUI?

BBj Demos

Select Your App

Publish Your App

Test Your App

Window or Dialog?

Managing BUI

What's Implemented?

What's Not Yet Implemented?

From GUI to BUI

SYSPRINT to PDF Document

POST and GET variables

See Also

What's a BUI?

Browser User Interface (BUI) is the web-based deployment option for BBj GUI applications. While Visual PRO/5® is only available for Microsoft Windows, BBj extends GUI support to all platforms, including Linux, Mac OS X, and Web browsers (using Java applets). Starting with BBj 10.00, BUI offers one more deployment option, with the client running in a Web browser as a native HTML+JavaScript+CSS application. For an overview of BUI concepts, see the BASIS International Advantage article "A Sneak Peek at BBj's Browser User Interface."  To see BUI running in your own browser, go to BBj BUI Showcase.

BBj Demos

The BBj Demos include some sample programs with source code that can run side-by-side as standard GUI programs and in a browser. The Demos are available from the system menu. Select BASIS, then BBj, then Demos:

From Demos, select Language/Interpreter:

From Language/Interpreter, select BUI Demos:

Then select Comparing BUI and SysGUI:

Then select Customer Maintenance:

Here is the Customer Maintenance sample in GUI and BUI on Windows 7:

Using BUI

Select Your App

You can publish your own BBj GUI applications for BUI deployment. Let's start with the traditional "Hello, World" program. Save this as hello.txt on your desktop:

rem ' hello.txt

sysgui = unt

open (sysgui)"X0"

bbjapi! = bbjapi()

sysgui! = bbjapi!.getSysGui()

window! = sysgui!.addWindow(100,100,225,75,"Hello",$00090003$,$$)

window!.setCallback(bbjapi!.ON_CLOSE,"EOJ")

hello! = window!.addButton(1,25,25,75,25,"Hello!")

hello!.focus()

hello!.setCallback(bbjapi!.ON_BUTTON_PUSH,"msgbox")

goodbye! = window!.addButton(2,125,25,75,25,"Goodbye!")

goodbye!.setCallback(bbjapi!.ON_BUTTON_PUSH,"eoj")

process_events

eoj:

release

msgbox:

  i = msgbox(info(1,4),64,fnmode$(info(3,6)))

  hello!.focus()

return

def fnmode$(mode$)

  if mode$="0" then return "Fat Client"

  if mode$="1" then return "Thin Client"

  if mode$="2" then return "Java Applet"

  if mode$="3" then return "Java Web Start"

  if mode$="4" then return "JavaBBjBridge"

  if mode$="5" then return "BUI (Browser)"

  return mode$

fnend

If we run hello.txt as a standard BBj thin client program, it looks like this:

Publish Your App

By default, BBj starts a Web server on port 8888 (this can be configured in Enterprise Manager). BBj BUI apps are published to URLs that look like this:

http://hostname:8888/apps/appname

 

Run the following program to publish hello.txt to http://localhost:8888/apps/hello:

rem ' publish.txt

rem ' This assumes that the sample is on the desktop; adjust as necessary

path$ = ""

path$ = env("HOME",err=*next) + "/Desktop/"

if path$="" then path$ = env("HOMEDRIVE") + env("HOMEPATH") + "/Desktop/"

appname$ = "hello"

source$ = "hello.txt"

bbjHome! = System.getProperty("basis.BBjHome")

config$ = bbjhome! + "/cfg/config.bbx"

appServer! = bbjapi().getAdmin("admin","admin123").getWebAppServer()

appConfig! = appServer!.makeEmptyAppConfig()

appConfig!.setProgramName(path$ + source$)

appConfig!.setConfigFile(config$)

appConfig!.setWorkingDirectory(path$)

appConfig!.setInterpreterUser(System.getProperty("user.name"))

app! = appConfig!.buildApplication(appname$)

published = appServer!.isPublished(app!) 

if !(published) then appServer!.publish(app!)

The published application name is case sensitive. If you publish your app as "hello", you will not be able to run it with http://localhost:8888/apps/Hello.

Test Your App

After you've published your sample Web app, you can test it by navigating to this URL in any browser (where the last part—in this case, "hello"—corresponds to your published app name):

http://localhost:8888/apps/hello

That "Hello World" sample looks like this in the Chrome browser on Windows 7:

  

Window or Dialog?

Notice that the Hello window came up in the browser as a free-floating dialog window. This is because we specified the "dialog behavior" flag here:

window! = sysgui!.addWindow(100,100,225,75,"Hello",$00090003$,$$)

To change it to a tab structure docked to the top of the browser window, change that line to:

window! = sysgui!.addWindow(100,100,225,75,"Hello",$00010003$,$$)

Saving that change and reloading the browser window displays the sample like this:

Managing BUI

To manage BUI applications interactively using Enterprise Manager, refer to Settings, Applications, Resources, and Demos.  To manage BUI applications programmatically using the API (as in the above publish.txt sample), refer to BBjAppServer and BBjBuiManager.

A published BUI app can be added to a custom web page formatted like this:

<html>

  <head>

  </head>

  <body>

    <div id="bbj-bui"></div>

    <script type="text/javascript" src="/embedbui/hello.js"></script>

  </body>

</html>

The <script> line starts the BUI app named hello, adding it to the "bbj-bui" div.  This html file should be saved to the htdocs/ directory under the basis home directory; it can be accessed with a URL in the format http://localhost:8888/files/mypage.html

What's Implemented?

The following functionality is available in the current version of BUI:

What's Not Yet Implemented?

From GUI to BUI

set !COMPAT=LISTBUTTON_DESELECT=TRUE

bbjapi().getAdmin("admin","admin123").getWebAppServer().setSessionTimeout(60)

SYSPRINT to PDF Document

SYSPRINT will deliver a PDF document to the client. Currently the file is not transferred to the browser, but opening a SYSPRINT device with both PDF and FILE= modes will write a PDF.

lp = unt

open (lp,mode="PDF,FILE=/temp/file.pdf")"LP"

print (lp)"Hello SYSPRINT!  Welcome to PDF printing!"

POST and GET variables

See Also