many platforms, one common solution developing webspeed apps for desktops, ipads, tablet pcs and...

Many Platforms, One Common Solution

Developing WebSpeed Apps forDesktops, iPads, Tablet PCs and Smartphones

Scott BlaubachCo-founder of App Technologies, Inc.

Session 058

PUGChallengeAmericas

© 2011 App Technologies, Inc. All rights reserved.2

Scott Blaubach, App Technologies, Inc.

Over 20 years working with Progress Software.

Co-founder of App Technologies, a provider of consulting services and web application development tools to the Progress Software market.

President of the Wisconsin Progress User Group since 2006.


Session Goals

Demonstrate that Progress WebSpeed is a viable business application development platform.

Emphasize the importance of building cross-browser compatible web applications.

Demonstrate the flexibility of WebSpeed for Desktop, iPad, Tablet PC and Smartphone devices and operating systems.


WebSpeed Overview

High throughput, sub-second transaction times with ability to dynamic load balance.

Ability to access Progress DBs directly. No need to replicate Progress data to other sources.

Transaction processing scalable to handle thousands of simultaneous users with proven reliability and application/data integrity.

Open architecture gives freedom to integrate choice of security solutions, including firewall, authentication, authorization, and encryption technologies.


ServerApplications

Intranet Web Users

DBs

WebAgent

WebAgent

WebAgent

WebAgent

WebAgent

BUSY

AVAILABLE

Wide Area Network

LAN

WebSpeed: Single Server Intranet Web Site

http://images.google.com/imgres?imgurl=http://www.bristolstories.org/site_images/big_world_map.jpg&imgrefurl=http://www.bristolstories.org/resources.php&h=4161&w=6264&sz=1903&hl=en&start=9&um=1&tbnid=g3aoF4K9jIckWM:&tbnh=100&tbnw=150&prev=/images?q=world+map&svnum=10&um=1&hl=en&rls=SUNA,SUNA:2006-02,SUNA:en&sa=N

http://images.google.com/imgres?imgurl=http://www.tech2.com/media/images/img_3737_hpdx2700sffpc_01_450x360.jpg&imgrefurl=http://www.tech2.com/india/news/branded/hp-launches-sff-desktop-pc/4026/0&h=337&w=450&sz=64&hl=en&start=4&um=1&tbnid=nrmGfu84eY6PcM:&tbnh=95&tbnw=127&prev=/images?q=desktop+pc&svnum=10&um=1&hl=en&rls=SUNA,SUNA:2006-02,SUNA:en

http://images.google.com/imgres?imgurl=http://www.ivgid.org/img/impresarioIMG/ie7_icon.gif&imgrefurl=http://www.ivgid.org/better_browsing&h=64&w=64&sz=4&hl=en&start=14&um=1&tbnid=fUXEMQR7Qbj9tM:&tbnh=64&tbnw=64&prev=/images?q=ie+icon&svnum=10&um=1&hl=en&rls=SUNA,SUNA:2006-02,SUNA:en&sa=N


ProductionDatabase Server(s)

Application

DBs

WebAgent

WebAgent

WebAgent

WebAgent

WebAgent

Web Server DMZApplication DMZ

AVAILABLE

BUSY

DMZ Web Server(s)(Contains WebSpeed Messenger)

WebSpeed: Multiple Server Internet Web Site

http://images.google.com/imgres?imgurl=http://danwarne.com/pics/firefoxicon.jpg&imgrefurl=http://danwarne.com/make-firefox-look-like-safari/&h=150&w=150&sz=5&hl=en&start=3&um=1&tbnid=7b8DzK0dcpkw9M:&tbnh=96&tbnw=96&prev=/images?q=firefox+icon&svnum=10&um=1&hl=en&rls=SUNA,SUNA:2006-02,SUNA:en

http://images.google.com/imgres?imgurl=http://www.ivgid.org/img/impresarioIMG/ie7_icon.gif&imgrefurl=http://www.ivgid.org/better_browsing&h=64&w=64&sz=4&hl=en&start=14&um=1&tbnid=fUXEMQR7Qbj9tM:&tbnh=64&tbnw=64&prev=/images?q=ie+icon&svnum=10&um=1&hl=en&rls=SUNA,SUNA:2006-02,SUNA:en&sa=N

Shared Memory

Server Server

DB Broker

TCP/IP Port

` ` `

User1

Database Users

User2User3

User4User5User6

…

User…

Database Server

State Aware Scenario

Shared Memory

Server Server

DB Broker

TCP/IP Port

Agent 1Database Users

Agent 2Agent 3

Database Server WebSpeed Server

W/S Broker

Web Server

../scripts/cgiip.exe

TCP/IP Port TCP/IP Port

…

Agent 2 Agent 3Agent 1

Stateless Scenario


http://192.168.168.36Valid web server URL.

/scripts/cgiip.exeReference to WebSpeed Messenger that is executed on the Web Server

/WService=wsdevtValid entry in the ubroker.properties table

/exm/webdemo.rValid Progress executable within the agent’s propath.

Accessing a WebSpeed Program


WebSpeed webdemo.htm Output Results


Progress Application Deployment Options

Progress Application Deployment options have typically included Progress Character, GUI, or .NET Open Client. WebSpeed has had limited deployment compared to these other options.

GUI and .NET Open Client both provide a robust User Interface but require a Client Server or Terminal Server deployment.

Upon release of WebSpeed, building a robust user interface was challenging. • Lacked Application Development Tools• Cascading Style Sheet standards were in their infancy


WebSpeed Application Development Revisited

Web 2.0 functionality provides new user interface richness to browser-based applications.• Browser manufacturer compliance to Cascading Style

Sheet standards.• AJAX [Asynchronous JavaScript and XML] allows data

to be retrieved from the web server in the background and displayed on the current screen without reposting the entire web page.

Through Web 2.0 functionality, WebSpeed-based applications now can provide a rich user interface comparable to GUI and .NET.


Most Common Operating Systems

Desktops• Windows• Apple / Mac OSX• Linux

Mobile Devices• Apple iOS• Google Android• Windows Mobile• RIM (Blackberry)• Symbian• Palm

Question: What do all these have in common?

Answer: They all run at least one of the popular web browsers.


Most Popular Web Browsers

Internet Explorer

Firefox

Safari

Google Chrome

Opera


Cascading Style Sheets

Cascading Style Sheets (CSS) provide a set of style rules which can be incorporated into an HTML document.

CSS is a means to separate web content from formatting styles.


Cascading Style Sheet Example

Button Example using no CSS:

Results:

<html><head></head><h2>Button Example (No CSS)</h2>

<div> <a href="#"><span>Button</span></a></div></html>



Creating a sample.css file

/* sample.css */a {color: #000099;

background-color: #CCCCCC; text-decoration: none;}

a span {background: url(StdButtonBG.jpg); border-style: outset;border-width: thin; cursor: pointer; font: 11px arial, sans-serif; text-align:center; text-decoration:none; height: 30px; width: 70px;

padding-top: 5px;}



Button Example using CSS in Internet Explorer:

Results:

<html><head>

<LINK rel="stylesheet" href=“sample.css" TYPE="text/css" /></head><h2>Button Example</h2>

<div><a href="#"><span>Button</span></a></div></html>



Button Example using CSS in Safari:

Results:

…

a span {background: url(StdButtonBG.jpg); . . . text-align:center; text-decoration:none;

height: 21px; width: 68px; padding-top: 6px; padding-bottom: 1px;}

Creating a sampleSafari.css file:



Button Example using CSS in Safari:

Results:

<html><head>

<LINK rel="stylesheet" href=“sampleSafari.css" TYPE="text/css" /></head><h2>Button Example</h2>

<div><a href="#"><span>Button</span></a></div></html>



Web Browser CSS Extensions

-moz-border-radius: 5px 5px 0 0;


AJAX Processing

AJAX allows JavaScript to:• Request a specified URL • Receive the returned content• Do “anything” with the returned content

AJAX relies entirely on HTTP requests and responses. No new form of communication between the browser and the server.


AJAX Processing (Continued)


One Common Solution

With effective use of Cascading Style Sheets and JavaScript, the same Progress WebSpeed application can be run on:

• Multiple web browsers

• Multiple operating systems

• Multiple devices


Desktop WebSpeed App Demo Highlights

Web 2.0 functionality Operating System Independence Web-browser ease-of-access

• Can be run anywhere a user has access to a web browser

• No need to worry about client configuration

Web-browser ease-of-deployment.• No need to push applications out via Citrix /

Terminal Server


Demo

Desktop

WebSpeed Application

Illustrations


Demo: Desktop WebSpeed App using HTML, JavaScript and Cascading Style Sheets


iPad WebSpeed App Demo Highlights

Same CSS style rules used for Safari running on Mac/Windows desktop as for Safari running on the iPad.

Same program running on desktop as on the iPad.


Web Browser Device Considerations

Apple Touch Screen Behavior (iPad / iPhone):

• Standard text scrolling is accomplished by a two-fingered scroll.

To scroll up or down within a text area with an overflow capability requires a two-finger scroll gesture.

A one-finger scroll is more intuitive.

Remap area to a one-finger scroll using JavaScript ontouchstart / ontouchend handlers.

Remapping Two-Finger Scroll to One-Finger Scroll


Demo

iPad


Examples


WebSpeed: iPad


iPad Considerations

The iPad is a viable device for accessing corporate application data anywhere an employee has access to Wi-Fi or 3G network (and proper security access):

• Sales person on a sales call• Production manager on manufacturing floor• Shipping personnel processing shipments• Executives inside and outside of the office• Retail store employees accessing product info• Any employee needing mobile access to data


Smartphone WebSpeed App Demo Highlights

Same CSS style rules used for Safari running on Mac/Windows desktop as for Safari running on the iPhone or iPod Touch.

Same program running on desktop can be run on the Smartphone.

Available real estate limits usability on Smartphones. A simplified user interface for Smartphones should be developed.


Illustration

Smartphone


Illustrations


Demo: SmartPhone WebSpeed App using HTML, JavaScript and Cascading Style Sheets

Desktop Application Running on a SmartPhone Device

Desktop applications can run on a SmartPhone, but the results aren’t always desirable.



Desktop applications should be redesigned for the smaller screen sizes.


WebSpeed: iPad Presentation


WebSpeed: iPhone / iTouch Presentation

Warranty Verification Warranty Registration


Future web development considerations

HTML5Next major revision of HTML, incorporating features such as video playback and drag and drop that currently require third-party browser plug-ins, in addition to offline editing.

CSS3Next major revision of Cascading Style Sheet markup language including new effects, new selectors, and multicolumn layouts.

Cloud Computing


Future web development considerations

The new young work force is already accustomed to accessing information via web browsers on desktops, laptops, Tablet PCs iPads, and Smartphones.

IT organizations and Progress Application Partners need to prepare for this change in information delivery expectations.

By properly incorporating Web 2.0 features, your WebSpeed development can meet these expectations.


Questions?

Contact Information:

Scott Blaubach

App Technologies, Inc.

[email protected]

800-861-4988 Ext. 132

many platforms, one common solution developing webspeed apps for desktops, ipads, tablet pcs and...

Documents

progress webspeed

webspeed output slide

webspeed program slide

webspeed messenger webspeed

web server wservice

encryption technologies

infancy slide

valid web server url