many platforms, one common solution developing webspeed apps for desktops, ipads, tablet pcs and...
Post on 28-Mar-2015
213 Views
Preview:
TRANSCRIPT
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.
© 2011 App Technologies, Inc. All rights reserved.3
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.
© 2011 App Technologies, Inc. All rights reserved.4
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.
© 2011 App Technologies, Inc. All rights reserved.5
ServerApplications
Intranet Web Users
DBs
WebAgent
WebAgent
WebAgent
WebAgent
WebAgent
BUSY
AVAILABLE
Wide Area Network
LAN
WebSpeed: Single Server Intranet Web Site
© 2011 App Technologies, Inc. All rights reserved.6
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
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
© 2011 App Technologies, Inc. All rights reserved.9
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
<script language="SpeedScript">def var vDeptCount as int no-undo.{&OUT} '<html>' skip ' <h3 style="align: center">"E" Department Listing</h3>' skip.</script>
<table cellpadding="0" cellspacing="0" border="0"><!--WSS for each EduDepartment no-lock where EduDepartment.DepartmentName begins "E": --> <tr><td>`html-encode(EduDepartment.DepartmentName)`</td></tr><!--WSS vDeptCount = vDeptCount + 1. --><!--WSS end. /* end for each EduDepartment */ --> <tr> <td style="border-top: 1px solid black;">"E" Dept Count: `vDeptCount`</td> </tr></table></html>
<html> <h3 style="align: center">"E" Department Listing</h3> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>Engineering</td></tr> <tr><td>Environmental</td></tr> <tr><td>ExecutiveSuite</td></tr> <tr> <td style="border-top: 1px solid black;">"E" Dept Count: 3</td> </tr> </table></html>
webdemo.htm
WebSpeed output
© 2011 App Technologies, Inc. All rights reserved.11
WebSpeed webdemo.htm Output Results
© 2011 App Technologies, Inc. All rights reserved.12
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
© 2011 App Technologies, Inc. All rights reserved.13
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.
© 2011 App Technologies, Inc. All rights reserved.14
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.
© 2011 App Technologies, Inc. All rights reserved.15
Most Popular Web Browsers
Internet Explorer
Firefox
Safari
Google Chrome
Opera
© 2011 App Technologies, Inc. All rights reserved.16
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.
© 2011 App Technologies, Inc. All rights reserved.17
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>
© 2011 App Technologies, Inc. All rights reserved.18
Cascading Style Sheet Example
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;}
© 2011 App Technologies, Inc. All rights reserved.19
Cascading Style Sheet Example
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>
© 2011 App Technologies, Inc. All rights reserved.20
Cascading Style Sheet Example
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:
© 2011 App Technologies, Inc. All rights reserved.21
Cascading Style Sheet Example
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>
© 2011 App Technologies, Inc. All rights reserved.22
Cascading Style Sheet Example
Web Browser CSS Extensions
-moz-border-radius: 5px 5px 0 0;
© 2011 App Technologies, Inc. All rights reserved.23
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.
© 2011 App Technologies, Inc. All rights reserved.24
AJAX Processing (Continued)
© 2011 App Technologies, Inc. All rights reserved.25
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
© 2011 App Technologies, Inc. All rights reserved.26
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
© 2011 App Technologies, Inc. All rights reserved.27
Demo
Desktop
WebSpeed Application
Illustrations
© 2011 App Technologies, Inc. All rights reserved.28
Demo: Desktop WebSpeed App using HTML, JavaScript and Cascading Style Sheets
© 2011 App Technologies, Inc. All rights reserved.29
Demo: Desktop WebSpeed App using HTML, JavaScript and Cascading Style Sheets
© 2011 App Technologies, Inc. All rights reserved.30
Demo: Desktop WebSpeed App using HTML, JavaScript and Cascading Style Sheets
© 2011 App Technologies, Inc. All rights reserved.31
Demo: Desktop WebSpeed App using HTML, JavaScript and Cascading Style Sheets
© 2011 App Technologies, Inc. All rights reserved.32
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.
© 2011 App Technologies, Inc. All rights reserved.33
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
© 2011 App Technologies, Inc. All rights reserved.34
Demo
iPad
WebSpeed Application
Examples
© 2011 App Technologies, Inc. All rights reserved.35
WebSpeed: iPad
© 2011 App Technologies, Inc. All rights reserved.36
WebSpeed: iPad
© 2011 App Technologies, Inc. All rights reserved.37
WebSpeed: iPad
© 2011 App Technologies, Inc. All rights reserved.38
WebSpeed: iPad
© 2011 App Technologies, Inc. All rights reserved.39
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
© 2011 App Technologies, Inc. All rights reserved.40
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.
© 2011 App Technologies, Inc. All rights reserved.41
Illustration
Smartphone
WebSpeed Application
Illustrations
© 2011 App Technologies, Inc. All rights reserved.42
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.
© 2011 App Technologies, Inc. All rights reserved.43
Demo: SmartPhone WebSpeed App using HTML, JavaScript and Cascading Style Sheets
Desktop applications should be redesigned for the smaller screen sizes.
© 2011 App Technologies, Inc. All rights reserved.44
Demo: SmartPhone WebSpeed App using HTML, JavaScript and Cascading Style Sheets
© 2011 App Technologies, Inc. All rights reserved.45
Demo: SmartPhone WebSpeed App using HTML, JavaScript and Cascading Style Sheets
© 2011 App Technologies, Inc. All rights reserved.46
WebSpeed: iPad Presentation
© 2011 App Technologies, Inc. All rights reserved.47
WebSpeed: iPad Presentation
© 2011 App Technologies, Inc. All rights reserved.48
WebSpeed: iPhone / iTouch Presentation
Warranty Verification Warranty Registration
© 2011 App Technologies, Inc. All rights reserved.49
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
© 2011 App Technologies, Inc. All rights reserved.50
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.
© 2011 App Technologies, Inc. All rights reserved.51
Questions?
Contact Information:
Scott Blaubach
App Technologies, Inc.
scottblaubach@apptechnologies.com
800-861-4988 Ext. 132
top related