Leveraging Internet Connect For ClientServer Application Development

1
Leveraging Internet ConnectFor Client-Server
Application Development

• Presented By
• Greg Gubrud
• Director and CEO
• ONTOP Systems
• and
• ExtraNetworks Corporation

2
Some of ONTOP Systems ExtraNetworks
Corporation Clients

• FedEx
• Epson
• Toshiba
• US West
• Rotary International
• American Express
• Dish Networks

3
Why Do We Use Clarion IC?

• Cold Fusion (Allaire)
• Good product. Used by major consulting firms for
  their web apps. Very data-centric. Strong
  competitor to CWIC
• Silver Stream
• Flashy, easy-to-use interface, but suffers from
  Java-bloated download times
• Net Objects Fusion
• Very good product, lots of tools
• Drum Beat
• Very light on both database and UI tools. Great
  website design tool.

4
Why Do We Use Clarion IC?

• What we like about Net Objects, Cold Fusion,
  Silver Stream
• All are very good, clean designs for building
  websites with content
• Asset capabilities make it easy to find the
  reusable components youre looking for
• Database access, via ODBC, is very user friendly
• Use leading technologies, like Java Beans,
  COM/DCOM, etc.
• Drag and drop functionality is fast and
  convenient
• Browser-sensing capabilities make apps compatible
  between Netscape and IE

5
Why Do We Use Clarion IC?

• What we dont like about Net Objects, Cold
  Fusion, Silver Stream
• Most importantly!!! They handle data and
  interface well, but lack the flexibility and ease
  of building logic into your system, between the
  UI and data!
• Most are built for legacy data access, not very
  good for new data structures
• Suffer from their own bugs! Still new technology
• If these tools for the masses were really that
  easy to use, why doesnt everyone use them?

6
What CWIC Does For ExtraNetworks

• We view CWIC as core to our business
• It is a tremendous client/server platform,
  especially with high-end back-office databases
• Allows us to produce applications that no one
  else can offer
• Allows us to play in the Fortune 500 / Global
  2000 arena

7
A Typical Application Topology

• Here is a typical architecture for our CWIC
  applications

Application broker managing front-end apps and
backend systems
Backend / Legacy systems, often off-site via WAN
Users
CWIC/ NT/IIS Server
8
Begin With Some Prerequisites

• CWIC is a client/server foundation
• Use as an Internet application, or
• Use as an Intranet application
• Terminology
• Java is an OOP language developed by SUN
• Like C, but designed to be small, simple and
  heterogeneous (portable across multiple
  platforms)
• Applets small programs that are downloaded from
  the web by a browser and run inside an HTML web
  page (you must have a Java-enabled browser)

9
Begin With Some Prerequisites

• CWIC, out-of-the-box
• Out-of-the-box CWIC generates Java-based apps
• Applets are used to represent window elements and
  controls
• Applets are bundled into either a .ZIP or .CAB
  file, depending on the browser platform used
• These files range from 111K (cab) to 383 (zip)

10
Begin With Some Prerequisites

• CWIC, out-of-the-box
• End-users download these files the first time
  they use a CWIC app (thats usually 383K, a 10
  minute download, at best, before they can use
  your app)
• If users setup their browser to clear cache each
  session, they must download these files every
  time they want to use your app!
• Standard CWIC-generated apps are a bear to
  precisely control location, size and alignment
• It is very difficult to ensure that the users
  web browser version doesnt have Java compiler
  bugs
• Specifying a particular browser version is
  impossible with Global 2000 IT groups

11
Java or Caffeine-free?

• Others invented the caffeine-free templates
  (see www.icetips.com)
• Replaces Java code with HTML that loads nearly
  instantly
• Of course there are tradeoffs
• HTML buttons cant use icons
• Browse lists, represented nicely in Java, cannot
  be automatically generated in HTML without
  building your own templates

12
Java or Caffeine-free?

• But there are benefits as well
• You can build HTML list boxes, but will probably
  have to write your own code, either by hand or
  building your own template
• You must essentially intervene with the CWIC
  generator and insert your own code
• You must alias CWIC control codes with what we
  call imposter controls (more on this later)
• You must intercept Clarion control names

13
Java or Caffeine-free?

• So which one fits your need?

14
The Right Fit

• The Two Major Questions Are
• How long will the user wait for data?
• Is the product for an occasional user or repeat
  user?
• Do they use a slow connection ((T1)?
• How fast do they need the product?
• Does the application need to be turned around in
  about the time of a non-Internet app?
• If a custom app, how much money can they spend?

15
The Right Fit

• Speed of execution and development time tend to
  be inverse relationships
• Java-free apps take more time to develop and
  debug.

Java-Free
High
Speed of execution
Low
Java
Shorter
Longer
Speed of development
16
The Right Fit

• What types of applications are ideal for each?

Java-Free

• Totally Java-free
• applications
• Applications that
• mesh tightly with
• other HTML
• pages, like stores

• Hybrid app
• avoiding list
• boxes
• Order forms and
• other customer
• applications

High
Speed of execution

• Out of box Java
• applications
• Standard lists,
• forms and reports.
• Windows-looking
• apps

• Hybrid app,
• more lists.graphics
• on controls
• Lower-
• performance,local,
• in-house computers

Low
Java
Shorter
Longer
Speed of development
17
The Right Fit

• Example applications

Java-Free

• Knowledgebases
• Searchable data
• bases, like
• IceTips.com
• E-commerce
• Online docs and
• catalogs

• Customer forms
• Enter key value
• and return form
• with info (order
• status)
• Form/report apps

High
Speed of execution

• In house client-
• server applications
• Order systems
• Reservations
• Look-up systems

• Full featured lists
• using HTML form
• and reports
• Parts of app used
• by users with low
• speed computers

Low
Java
Shorter
Longer
Speed of development
18
Building Your App

• Lets assume youre building Java-free apps like
  many Clarion developers
• Start by designing your page in a good editor,
  like FrontPage or Adobe Page Mill.
• Layout your pages exactly like they are to appear
  on the final product. Include table layouts,
  images, sample data fields (if a list, use
  strings, if a form, use form fields)
• Save the page to disk and check it with Netscape
  and Internet Explorer

19
Building Your App

• A word about Netscape and IE
• IE is very forgiving when it reads HTML code
• Netscape may simply display a blank page if a
  single HTML tag is missing
• HTML editors do not always ensure Netscape
  compatibility
• Always check your HTML design and final app with
  Netscape to ensure compatibility
• Netscape has a source editor that can check a
  page if you run into problems--it doesnt tell
  you where the problem is though

20
Building Your App

• Normalize your HTML code
• Figure out what HTML page elements will be used
  on each page
• Cut and paste these sections from the HTML sample
  page, and insert into an include file (e.g.
  pagehead.inc) using your Clarion source editor
• Strip the page of top, left, and bottom elements
  until all thats left is just the core data
  window code

21
Building Your App
1. Design page mockup with editor
2. Parse out HTML code into blocks
5. Check design, both in IE and Netscape
3. Create Clarion .INC (source) file
4. Insert .INC file into same embed point in each
procedure
22
Building Your App

• Imposter-control Method
• We use the term imposter control internally to
  say that were using CWIC as the engine, but
  tricking the Java part into using HTML code
  instead
• To do this, we need to generate HTML controls
  that have the same characteristics as the Java
  controls, and we have to use CWICs name
  convention to make Clarion understand what to do
  with the control
• We are essentially using Clarions database
  control and logic backend to process our HTML web
  page frontend

23
Building Your App

• When using the imposter-control method, all
  displaying embeds will be in the Internet, after
  the opening tag of the procedure
• Create clearly identified sections within this
  embed area. We typically use
• !-----Page Header
• !-----Left Side Menu
• !-----Form Area
• !-----Buttons
• !-----Footer

24
Building Your App

• Overview of Imposter-control method
• Create app in CW with the exact controls and
  order you want to appear in final app
• View generated source for namex30004 tags
• Create HTML code in !-----Form embed for imposter
  controls (use FrontPage if you dont know what
  the HTML control should look like)
• Hide your CW controls by using the Internet
  Options button in the procnot the Hide
  attribute!
• Check app in both IE and Netscape

25
Building Your App

• Generate your app and view the code
• Create your application in CW and run in your web
  browser. Control alignment and size does not have
  to be at all exact
• View source in your web browser
• Print out code if you need to reference it later

26
Building Your App

• Look for namex tags
• These are the CWIC tags generated as a way of
  feeding info back to the IC engine for such
  things as the value entered into a field
• Dont worry about the namex90 tags at the top
  of the page
• See how CWIC creates the namex30 tags for your
  controls. Heres some tips
• Numbers start at x30001
• Fields take a number for the prompt and one for
  the field (e.g. x30001 and x30002)
• Check boxes take one number
• Drop lists take two (one for the prompt, one for
  the list)
• Images and other non-controls do not have numbers

27
Building Your App

• Create your controls in HTML
• If youre unfamiliar with HTML FORM tags and
  controls, you may want to use a good editor, like
  FrontPage to create the look of your control,
  then copy resulting HTML code to your
  application.
• All code is put into the after embed,
  using Target.WriteLn statements.

28
Building Your App

• Reduce code to smallest elements
• Reduce code to its smallest, most compact,
  reusable elements so you dont have to use as
  many Target.WriteLn strings
• For instance, assign HTML code to variables
• isrc
• he
• fclrcolor60F01A
• pfnt
• Example
• Target.WriteLn(
  size2) becomes...
• Target.WriteLn(isrc FILfield he pfnt
  click here he he)

29
Building Your App

• Hide Clarion controls
• Do not use the Hide attribute!

4 simple steps to hiding controls 1. Put
something in HTML before code section, like
2. Check the Remove default
HTML generation box 3. Make window/page colors
white 4. Make all control borders 0
30
Building Your App

• Test your program
• Run Netscape and Internet Explorer and carefully
  look for problems in either
• If you have problems with this method, it will
  undoubtedly be in building your tables, rows and
  data cells correctly, causing alignment problems,
  so read up on using these tags
• Always run your apps off-site to check for speed,
  usability, and other factors that may not present
  themselves when running locally
• Carefully check data! By giving an entry field
  the wrong name tag, you can store data in the
  wrong field!

31
Building Your App

• A note about HTML controls
• You can format fields and indicate user responses
  by displaying blank data to the window
• For dates, simply say format(FILDate,_at_d1) and
  the blank HTML field will show / / indicating
  how it should be filled out.
• Drop down lists
• Use -1 as the SELECTED1 tag, and 0 as the first
  selection
• The selection you put in the HTML option tag is
  NOT what will be returned to the Clarion field!
• You must de-format dates and other calculations
  before putting them into your fields because HTML
  controls all assume strings!

32
Building Your App

• Enough about forms, now about lists?
• You will need to build looping structures to
  generate your lists in HTML
• List functions will need to be built by hand
  initially. Heres a simple snippet of list code
• You simply create your own list box functionality
• Tables and cells will help keep everything
  aligned
• You can build a lot of the list box by copying
  the Clarion browse box template code where
  appropriate

LineNum10 !10 records per page LOOP LineNum
Times NEXT(FileName) Target.WriteLn(Nam
e CLIP(FILName)) END
33
Building Your App

• About reports
• Reports are really just simple HTML lists with
  less column and background formatting.
• Reports should be on a white background to reduce
  toner usage when printed
• Reports can also be sent to a text, comma
  delimited, or other file, behind the scenes, and
  the user presented with a link to download that
  file name for import into Excel or other viewer
  offline

34
Building Your App

• The freedom of HTML
• HTML allows you to match the look of your
  application with the rest of the website
• HTML allows you to add background color to make
  forms, lists and reports easier to read
• HTML allows you to control the fonts, size and
  colors of your text for easier reading
• Graphics can be implemented very easily and
  without complication
• Graphics and regions can be used instead of
  buttons (regions are also given namex30 numbers)

35
How We Beef-Up Our CWIC Development

• FrontPage 98
• Used to quickly pre-build the look and feel we
  want, then cut and paste into CWIC
• PhotoShop
• We exchange some HTML savings for graphics and
  flashier interfaces
• Within Clarion
• Build reusable components on larger projects
• Functions
• Header and footer HTML include files
• Queues handle most data
• Variables to express standard HTML code
  throughout application

36
How We Beef-Up Our CWIC Development

• Java Script
• Low bandwidth
• Generate with Clarion logic and Target.WriteLns
• Read up on JS and visit sites. Start with
• www.jsworld.com, www.worldwidemart.com/scripts
• Microsoft GIF Amimator
• For flashier animated graphics
• Clarion DOS CEDT
• For search and replaces of Target.WriteLns in
  large HTML scripts
• ACD See
• Quick viewing of graphic files (available at
  www.download.com)

37
Truths and Falsehoods About HTML Apps

• You may have to train developers on using HTML
• Your pages will load very fast
• You lose almost no application functionality
• You will have to be more ingenious about how you
  build applications
• You will need a new mindset for thinking about
  HTML applications

38
Truths and Falsehoods About HTML Apps

• You will not be sorry you deployed HTML instead
  of Java apps from a usability and customer
  problem standpoint
• You will be blown away by how good they can look
  and what you can do with them!

39
And Good Luck!

• I hope youve found our experience, and this
  session, to be useful!
• Greg Gubrud
• CEO, ONTOP Systems
• CEO, ExtranetWorks Corporation