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
interface. 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
Internet. 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 browser...no 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
button. 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
applications. 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
machine. 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
latency. 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,
etc... 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
application 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
available. 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
boxes, 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
rules. 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
form. 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
programs. 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
service. 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
icon. 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
amounts. 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
including 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
format. 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
states. 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
server. 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
disabled 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
information. 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
appearance. 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
browser. 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
iPhone. 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!" Everywhere where there might be a browser
device that's capable of running JavaScript and
HTML5. 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
line. 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
application. 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
entails. 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 pauly@basis.com 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
be demonstrating how you can replicate your
BASIS file types without the need for a data
dictionary. 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.