click to play button
click to replay button
    00:00 / 00:00
    Welcome to this Java Break with BASIS. Today
    is the last of our mini-series of "How Version 11
    Improves Your Bottom Line".
    Today is certainly the most visually appealing of
    all of our sessions about the new features that
    are delivered in BBj 11. It's the browser user
    interface and cascading style sheets.
    My name is Nico Spence. I am the Chairman
    and CEO of BASIS International and today I'll be
    joined by Nick Decker, our Engineering
    Supervisor and the one within BASIS who
    probably has the keenest eye for look and feel of
    applications. So he is probably the best
    resource we can have to show you how the
    browser user interface and CSS will improve
    your applications beyond all recognition.
    So let's get started. Our agenda today starts
    with a refresher on the browser user interface.
    Then we'll talk about the cascading style
    sheets, a refresher on what they are all about.
    And then we'll have a look at some practical
    uses of BUI and CSS with some code that may
    seem quite familiar to you. Certainly the
    business logic behind some of that code will be
    familiar to you.
    Then we'll talk about how it can improve your
    bottom line. Trying to help you think outside the
    box of delivering your standard business
    applications because now the whole new world
    of the Web environment is open to you for you to
    deliver a Web application to your community.
    And then we'll take your questions. In our communique to you we spoke about this
    being revolutionary. And it really is. The
    Enterprise Manager, as you probably know, is a
    component of the BBj ecosystem. It is written in
    Java and therefore deployed on the desktop, it
    can run a thin client
    from your desktop. All you need is a JVM on
    your desktop,
    and you can connect into any of your customer
    sites and connect into their BBj application
    running to their Enterprise Manager and manage
    the enterprise remotely, administer it remotely.
    But it can't go to BUI, because it's written in
    Java. Because it's not written in Business
    BASIC, not written in BBj. There is no way to
    simply turn that into a browser user interface, to
    run in a browser. We would have to rewrite the
    whole interface to be able to run in a browser.
    So, here's a good example of some of that
    functionality taken from Enterprise Manager. We
    showed a demonstration at our recent TechCon,
    how we took and exercised the new Enterprise
    Manager API, the Admin API
    and how you could create your own version of
    Enterprise Manager - a subset thereof perhaps
    to implement within your application code.
    And here it is running on an Apple Mac platform.
    So it inherits the look and feel of the Apple Mac.
    But, the good news is that without rewriting any
    code we can move that to the browse user
    And then it is running in Chrome on an Apple
    Mac again but without changing a single line of
    code again, we suddenly have a GUI application
    running in a browser - no Java, no JVM required
    on the desktop. So we can see that BBj is now
    suitable for Web applications.
    You can enable your desktop app for the Web
    and you can utilize the built-in Jetty Web server
    that ships with the BASIS product
    to deploy and serve that app up over the
    You can serve it to a desktop, to a laptop, to a
    smart phone, or your tablet of choice. BBj
    applications, as you know
    run in the Windows, on a Mac OS X machine,
    on Linux and other Unixes. You can deploy
    those in character or GUI.
    But now with your GUI apps, you can deploy in
    a Web browser, on the desktop, in a tablet, or
    on a smartphone.
    So write your application once in BBj and deploy
    it in the need for Java on the device.
    But that is not all, that's not the only
    revolutionary thing that we've done. You can now
    take it a step further...
    by running CSS (cascading style sheets) and
    dramatically enhance the look-and-feel of your
    application. You will receive a performance
    benefit from the multi-tiered architecture. CSS
    will run in the browser client so there is no
    interaction with the server required
    and it uses the power of the client browser to be
    able to deliver the exciting look and feel.
    So mobile devices represent a cost savings
    through efficiency and increased productivity in
    many of your existing business applications.
    You can do queries and entries from the
    worksite and can eliminate paperwork with data
    entry onsite. Some feedback we had recently
    from one of our clients - have a look on our
    home page - where you can see their success
    story where they've managed to move their
    application, in their case from Visual PRO/5,
    into the browse user interface and they are
    getting a great response from their clients.
    Have a look at our home page to see more
    about that. And this is applicable to any browser
    enabled device.
    Cascading style sheets - let's have a quick
    refresher what that is. Cascading style sheets is
    what delivers the gee whiz stuff. The look the
    functionality - some of the movement, the
    animation side and also improves the
    performance of the changed functionality.
    CSS separates the presentation from the
    content. You can change the look of a button or
    text without modifying the program source code.
    When I say to look of a button or text you'll see
    some dramatic changes in some of the
    examples that Nick will show you later.
    You won't recognize them certainly, as a BBj
    CSS is gives greater control over text content.
    You can change the spacing, the alignment, the
    positioning, the font. So as you hover, for
    example, over the text that you wish to have the
    user input, you can actually change the font. It
    can pop up at them, perhaps in a differnet color
    The weight, the decorations all of that is
    controllable via cascading style sheets. It
    enhances user interaction. It provides a different
    look for various control states. For example,
    enabled controls can be a different color, a
    different shading in the background.
    Disabled ones, again can take on a different
    appearance. Read-only, hovered, and active
    focus, all of them can have a different look.
    It reduces your development time. You can
    share style sheets between applications. So if
    you want have two applications have a similar
    look and feel and touch to the user, you can
    share that same CSS style sheet between the
    That enforces consistency, reduces your
    maintenance costs and provides an updated
    look and feel without modifying your underlying
    BBj source code. It also improves performance.
    The layout and rendering is done on the client
    reducing any network traffic. It's a compact,
    compressable definition file with a very small
    footprint. And CSS is rendering is often offloaded
    to the graphics processor
    thereby reducing the CPU load on the client
    And the screens scale well with CSS. To make your application visually appealing, you
    can add functionality - hover text, textbox
    changes, animation, ... there is whole host of
    features that you can add. And you can improve
    the performance of your application. No need for
    a Java virtual machine.
    The work is done the client side by your browser
    and reduced roundtrips means no network
    You can eliminate roundtrips trips, you can
    eliminate the latency that would be inherent
    in a wide area network. CSS selectors define
    simple controls, complex controls or individual
    control components. For example, the First,
    Next, Last, Previous buttons can be controlled
    by CSS.
    And you can control the various states as
    mentioned earlier - enabled, opaque, selected,
    And CSS selectors improve the usability. You can use a different color scheme for those
    that are colorblind. You can use larger fonts for
    the visually impaired. You can clearly highlight
    and focus controls. You can add hover effects to
    controls and create custom controls. Here is a
    typical BBj application
    rendered within the browser user interface. This is running on an Apple Mac running Chrome
    and this is the default style.
    It looks like you would expect, like any desktop
    application would look. But if we add some CSS
    this is what the app can look like. This
    customized version has colored group boxes
    with rounded corners
    and a slight drop shadow with bold font for titles.
    Here we can increase the visibility of the
    currently focused control by changing it to red
    and in fact we could even pop the font out -
    make it a little bit bigger. Colored boxes within a
    corner and drop shadow helps to suggest
    depth in these groups. And you can differentiate
    with your 'read only' controls by making them a
    different color.
    In our example today, in our demonstration, we
    are going to look at some functionality that I'm
    sure many of you are familiar with. The old
    "_amort" program for amortization of loans.
    We've rewritten that application as a mortgage
    and this is what it would look like rendered in
    the default CSS style.
    This is running on an iPad, but there is no CSS
    invoked with this app. And here it is if we
    actually invoke the CSS.
    Let me hand over to Nick to show you some
    demonstrations of this and some other apps
    running in BUI.
    I was in the market for a bigger house and
    wanted to figure out how much my monthly
    mortgage payments would be.
    So first, I went to Wikipedia to lookup
    amortization schedules and formulas,
    but the formulas there were very messy and
    complex as they dealt with variable
    compounding periods.
    Then a thought struck me, why not use the
    "_amort" program that ships with BBj? After all,
    that should
    give me all the information that I need for my
    monthly payments.
    So I ran "_amort" and entered in my principle, my interest rate, and the number periods - and it
    presents me with all the information for my
    monthly payments.
    "_amort" gives me all the desired information but it's a character-based program in bad need
    of an update to a graphical user interface.
    Since the program contains all of the logic
    necessary to calculate amortization tables, I
    knew it would be a good idea to keep most of
    that existing code. But I rewrote the program
    with a new UI keeping all of the business logic
    and computational code.
    Here is an example of that new program running
    in BUI in an iPad.
    The new version was designed and sized to be
    run in an iPad, but of course it's equally at home
    on any other tablet device and even the desktop.
    It now looks a lot better as it's a graphical user
    interface and there's a lot more screen space
    But to give it even more pizzazz and to make it
    look more like a native iPad application,
    I created a custom CSS file to improve the user
    interface. Let's apply that CSS file now
    in Enterprise Manager. I load up the app, go to
    the CSS definition,
    select my custom CSS file, and click on Save. Once those changes have been made, all I have
    to do with reload the page in my iPad.
    With the application of the CSS file, the program
    gets a major face lift. The graphical backdrop
    provides interest and emphasizes the interactive
    controls and UI elements.
    We've used CSS to customize all of the input
    fonts, color, we 've added hover effects and even
    modified the 'read only' state. As an example,
    the 'input in' controls
    change the font from gray to blue when either
    hovered or editing.
    We've also reduce the opacity for the disabled Print button to indicate that you
    cannot interact with it. After entering the values
    and doing a calculation,
    the program produces and amortization
    schedule which can then be printed. So the
    program enables the Print button at that point.
    The CSS defines the appearance for the enabled
    and disabled states so that when the BBj
    program enables the button it automatically
    changes its appearance according to the CSS
    To add even more pizzazz, we created custom
    translucent backdrops for the amortization
    schedule and BBj chart controls.
    We also fade in and out a translucent cover on
    those controls during computation.
    Lastly, the resultant value showing the
    calculated totals and monthly payment
    breakdown are for display purposes only.
    The user cannot edit these values. Therefore, the 'input in' controls are set to 'read
    only' and the CSS changes the coloring of the
    background of those controls to a light blue
    color and hover color of the font to red.
    This aids in legibility and it also indicates that
    they differ from normal editable controls on the
    Here is another example of the BBj BUI
    program. This one is a menu application that's
    also designed for the iPhone.
    It uses SCALLs to launch three different utility
    The main screen consists of three BBj buttons
    that are used to launch another BBj program.
    The buttons use CSS and are customized to
    include an image on the left hand side, a
    background gradient, and a drop shadow.
    We've also added hover and click events to
    change the font color as well as to shift the
    button text over when hovering.
    Clicking on the weather button SCALLs the BBj
    BUI weather application.
    It retreives the current weather conditions from
    Yahoo! and is now reporting on the weather
    conditions in Saarbrucken, Germany.
    Selecting a new location from the BBj list button
    brings up an animated loading notifier.
    This indicator displays while the program
    updates the weather information from the
    CSS is responsible for the loading indicator and
    adds animation and transparency effects to a
    BBj static text control.
    The tip calculator is the last example. Again, all of the BBj controls on this form are
    styled with CSS.
    We start off by entering the total bill amount.
    And the next step is to indicate the level of
    service at the restaurant.
    The stars allow you to rate your service, much
    like how you rate a song in iTunes. The stars
    are regular BBj button controls
    and allow you to choose anything from terrible to
    excellent service.
    Notice that the tip amount at the bottom of
    screen is updated to match the level of the
    service that you choose with the BBj buttons.
    The last step is to select the number of diners in
    your party, which is done by clicking on the user
    The user button is also a BBj button that is
    styled via CSS - and selecting the number in
    your party
    divides the tip and total bill into separate
    Here is yet another example of a BBj BUI
    application that was also designed for the
    iPhone. It's a news reader program that retrieves
    live xml feeds from Yahoo! News for various
    categories including Tech,
    Science, and generalized news. Its using CSS
    for various effects throughout the program
    an animated background showing clouds
    scrolling to the left.
    It's also customizing the appearance of the BBj
    list box which by now is almost unrecognizable
    due to the heavy CSS customizations.
    The BBj list box is used to display all of the
    news items.
    The program starts by contacting the Yahoo!
    servers, retreiving the desired RSS feeds in xml
    It then parses xml and places the news items
    into the BBj list box.
    We use CSS to modify the appearance of the
    list box...
    both by modifying the translucent background and customizing the list items with a
    background gradient and an icon to denote hover
    The CSS file also defines subtle hover effects for
    other controls such as buttons and tabs. One of
    the best parts of this program is the animated
    RSS feed loading screen that was accomplished
    using BBj static text controls with CSS.
    It's used whenever we click on a new tab item
    and the program loads the RSS feed from the
    Using CSS we can slide those screens down
    from the top, fade in a transparent black glass
    cover for the application
    to indicate that the user that interaction is
    and spin an activity indicator to act as an
    indeterminate progress to indicate action.
    Because we're using a BBj static text control,
    it's easy to set the text to the control to
    useful information such as the feed that we're
    retreiving and the current time stamp.
    Once the news items have been loaded, clicking
    on the list item will bring up a detailed view of
    the particular news item that provides more
    The news item loads images and text into a
    black glassy, rounded popup window that fades
    in and out.
    This is also accomplished with the BBj static
    text control utilizing CSS to modify its
    Thanks Nick. Let's move our attention back to
    the more business processing type environment
    that we might be familiar with.
    We've added functionality for our developers,
    some feature and function that you can use
    while developing with Barista.
    Firstly, you can launch Barista in the browser at
    the time of logging into Barista.
    Alternatively, you can right click on any menu
    item from the SYSGUI and select from the
    popup menu to launch that menu item program
    in a browser. And then of course, save that away
    as a Favorite to be run later.
    It's a very quick way to proof your development
    efforts and see how they would render in the
    Here's what the screenshot looks like when you
    launch Barista in a browser. Down at the
    bottom, this little red box here
    is the new option that you can check to launch
    the Barista framework in a browser.
    Let me hand over to Nick and we'll have a look
    at some of the other functionality that Barista
    offers both in terms of being able to launch
    in a browser as well as making sure that the
    size of your screen fits the target device that
    you expect to run your business application on.
    BUI features are also being added to Barista. By
    simply clicking a form you can run that program
    in the MDI.
    Holding down the Shift key and then clicking on
    it will run it outside of the MDI.
    Now what if you wanted one that same program
    in BUI, how would you do that?
    Barista will automatically register your
    application as a BUI application in Enterprise
    Manager for you
    so that you can see it real-time in a browser just
    by doing a Shift click. You could register that
    BUI app yourself in Enterprise Manager, it only
    takes a minute or so, but Barista makes it
    possible to view it instantly.
    Now once we have our program up and running
    in the browser, if I ever want to run it again all I
    have to do is make a bookmark to this.
    So I'll rename name that one "Customers" click
    on Done
    and then now even if I close this page, I can always go back
    and run it again simply by clicking on my link.
    Barista also makes it very easy to design an
    application for a mobile environment.
    For example, let's take our Customers form. I'll search for that and open it up and let's say I wanted to target this for the
    Well, what is the best way to do that to make
    sure the screen fits inside an iPhone?
    Simply by doing a right Click and selecting Set Resolution, Barista presents a
    big list of various mobile devices along with their
    width and height.
    I can select one, say OK, and now Barista and
    will show me exactly what size the device is via
    that gray border
    and allows me to easily move and size my
    controls so that it fits on the target device.
    Thanks Nick. So there you have it. Some great
    examples of Business BASIC applications
    running in a fashion that is probably most
    unrecognizable to all of you as Business BASIC
    code. So the combination of BUI and CSS on
    mobile devices
    BASIS exceeds the oft quoted Java claim of
    "Write once and run anywhere."
    We can now "Write once and run
    Everywhere where there might be a browser
    device that's capable of running JavaScript and
    Which is just about every device nowadays - on
    the Smartphone, on the mobile device and of
    course on the desktop.
    BASIS delivers improvements to your bottom
    No more do you need to worry about rewriting
    your code for a different device, worry about
    abandoning many years of effort and inherited
    intelligence in your business logic. You can take
    that business logic and with a little bit of effort,
    you can repackage it and make it
    available in a browser. It's really important to
    know how these developments in BASIS
    technology affect you in the marketplace and
    really what's happening in the marketplace. I
    thought this recent news piece you would find
    most relevant.
    In the news recently, Amazon has released a
    browser-based version of its Kindle e-book app
    called the Kindle Cloud Reader, in what appears
    to be an attempt to detour around Apple's in-app
    purchasing requirements.
    But what the e-book retailer has done is provide a great example of how media
    companies should be looking beyond the world
    of apps to the future of the web.
    One in which websites behave like apps thanks
    the magic of HTML5 and JavaScript.
    Publishers can get the benefits of both worlds
    without having to sell their souls to one app-
    store provider after another.
    BASIS's BUI allows your app to behave like a
    website. So we really are right there in the
    forefront of this latest technology of the shift to
    wanting to write things once and deploy them in
    the multiple environments and having to control
    that content yourself. Have the functionality of a
    website as well as the functionality of an
    And that's exactly what BASIS's BBj with BUI
    gives you.
    So, let's think outside the box for a minute. Let's
    think about that improvement to your bottom
    line. Think about BASIS apps for the consumer
    market. Do have a good idea for an app to run in
    a browser? Perhaps you don't want to write it
    several times for each mobile platform.
    Do you want to leverage your BBx logic? Perhaps you don't want the hassle of an app
    store submission process and all that that
    Well, we have a solution for you. Write it in BBj
    and deploy with CSS and BUI.
    And host the solution in the cloud to make it
    available to the consumer marketplace, if that's
    the marketplace you wish to serve.
    If you're concerned with license consumption,
    we have a solution for you there too. Let's talk.
    BASIS can host the app or you can host the
    app. We can deliver the licensing. Contact us
    with your business use case, with your ideas.
    Either contact your account manager
    or Paul Yeomans at or me.
    We'd be happy to hear your ideas and try and
    take them to fruition and work with you.
    So that's a classic example of how BUI and
    CSS can improve your bottom line.
    It enables your desktop app for the Web.
    Utilizes our built-in Jetty Web server that we
    bundle with our product.
    You can serve your app to the desktop, to the
    laptop, to a smartphone or tablet of your choice
    anywhere in the world.
    Mobile devices often equate to cost savings
    through efficiency and increased productivity
    giving you the ability to place that in the hands
    of the user at his position of work.
    CSS delivers the gee whiz stuff - makes your
    app look fresh, look modern, and look very
    powerful - adds functionality and performance.
    So consider your business to business or
    business to consumer applications with BUI and
    the cloud.
    So let's summarize what we've covered today. We've looked at how version 11 improves your
    bottom line, once again. How the browse the
    user interface works,
    what it's all about. We've looked at a refresher of
    the cascading style sheets concept.
    We've looked at our BUI and CSS through our
    use cases, our demonstrations, how they can
    actually work in action. And we've considered
    some of the points of how you can think laterally
    and try and bring new applications to the
    marketplace to improve your business
    productivity. Before we take your questions, let
    me hand over to Paul to give you an update on
    forthcoming BASIS events.
    Thanks Nico. Before we move to your questions
    there are two announcements I'd like to bring to
    your attention. The first being BASIS TechCon
    Canada. It's an event that will be coming up on
    September 19 and 20th
    and it comes right on the heels of our
    successful TechCon conferences that we've held
    earlier this year, both in Las Vegas and in
    Germany. So we would invite you to TechCon
    Canada hosted by our friends at Descore
    Incorporated and if you've missed this year's two
    conferences or are intrigued by what you've seen
    in the summer series "How Version 11 Improves
    Your Bottom Line",
    or just want to see the many updates that we've
    added since these two conferences, please join
    us in Montreal. The sessions will be delivered in
    English by our BASIS Albuquerque team of
    experts. And because of the location, we'd also
    have you consider extending your visit and
    bringing a guest and enjoying that beautiful city.
    Our next Java Break is back by popular demand
    and we are revisiting the "Data Replication" Java
    Break that we presented earlier this summer.
    Remember that this session targets you PRO/5,
    Visual PRO/5, and BBj developers where we will
    demonstrating how you can replicate your
    BASIS file types without the need for a data
    You can take a page from the BASIS book and
    pattern a replication routine similar to ours that
    provides us with the security of data replication
    to multiple sites around the world. So join us on
    August 31. And now we'll take your questions.