1 / 45

Developing Custom QAD-Integrated Web Browser Apps

Developing Custom QAD-Integrated Web Browser Apps. Developing QAD-integrated WebSpeed Apps for Desktops, iPads, Tablet PCs and Smartphones. March 22, 2011. MWUG Spring 2011. Scott Blaubach Co-founder and Vice President. Scott Blaubach, App Technologies, Inc.

gino
Download Presentation

Developing Custom QAD-Integrated Web Browser Apps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Developing CustomQAD-IntegratedWeb Browser Apps Developing QAD-integrated WebSpeed Apps for Desktops, iPads, Tablet PCs and Smartphones March 22, 2011 MWUG Spring 2011 Scott Blaubach Co-founder and Vice President

  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 Users Group since 2006.

  3. Session Goals Demonstrate that Progress WebSpeed is a viable business application development platform for custom QAD-integrated business applications. 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.

  4. WebSpeed Overview High throughput, sub-second transaction times. Ability to access Progress DBs directly. No need to replicate Progress data to other sources in order to be viewed via the web. Upon release of WebSpeed, building a robust user interface was challenging. Lacked Application Development Tools Cascading Style Sheet standards were in their infancy

  5. 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. Custom QAD-integrated business applications developed with Progress WebSpeed are accessible from any device that has a web-browser.

  6. 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.

  7. Benefits of Web Browser Apps Ease of Deployment Users only need a web browser to access the applications. Highly Accessible Applications can be easily accessed both internally and externally, assuming the proper security access considerations have been accounted for. Highly Extensible A desktop application can also be run on iPads and other Tablet PCs without modification. That same application can be used as a basis for SmartPhones deployment. However, SmartPhone screen sizes need to be taken into consideration.

  8. 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.

  9. Most Popular Web Browsers Internet Explorer Firefox Safari Google Chrome Opera

  10. 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.

  11. Cascading Style Sheet Example Button Example using no CSS: <html> <head></head> <h2>Button Example (No CSS)</h2> <div> <a href="#"><span>Button</span></a></div> </html> Results:

  12. 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;}

  13. Cascading Style Sheet Example Button Example using CSS in Internet Explorer: <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> Results:

  14. Cascading Style Sheet Example Button Example using CSS in Safari: Results: Creating a sampleSafari.css file: … a span{background: url(StdButtonBG.jpg); . . . text-align:center; text-decoration:none; height: 21px; width: 68px; padding-top: 6px; padding-bottom: 1px;}

  15. Cascading Style Sheet Example Button Example using CSS in Safari: <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> Results:

  16. Cascading Style Sheet Example Web Browser CSS Extensions -moz-border-radius: 5px 5px 0 0;

  17. 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

  18. 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

  19. Illustration QAD-Integrated Desktop WebSpeed Application Illustrations (showing multiple web browser usage)

  20. Demo: Desktop WebSpeed App using HTML, JavaScript and Cascading Style Sheets Using Internet Explorer Viewing Customer Account Inquiry Screen

  21. Demo: Desktop WebSpeed App using HTML, JavaScript and Cascading Style Sheets Using Firefox Viewing Customer Account Update Screen

  22. Demo: Desktop WebSpeed App using HTML, JavaScript and Cascading Style Sheets Using Google Chrome Viewing Ship To Tab Display

  23. Demo: Desktop WebSpeed App using HTML, JavaScript and Cascading Style Sheets Using Opera Viewing Ship To Update Screen

  24. Demo WebSpeedApplication Demo

  25. iPad WebSpeed App • 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.

  26. Web Browser Device Considerations Apple Touch Screen Behavior (iPad / iPhone): • 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. • Standard text scrolling is accomplished by a two-fingered scroll. Remapping Two-Finger Scroll to One-Finger Scroll

  27. Demo iPad WebSpeed Application Illustration

  28. Sample iPad Display

  29. Sample iPad Display

  30. Sample iPad Display

  31. Sample iPad Display

  32. 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

  33. 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.

  34. Illustration Smartphone WebSpeed Application Illustrations

  35. Demo: SmartPhoneWebSpeed App using HTML, JavaScript and Cascading Style Sheets Desktop Application Clicking “Charts” button generates one screen with four Google charts. Charts are appropriately sized for the desktop screen size.

  36. Demo: SmartPhoneWebSpeed 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.

  37. Demo: SmartPhoneWebSpeed App using HTML, JavaScript and Cascading Style Sheets Desktop applications should be redesigned for the smaller screen sizes.

  38. Demo: SmartPhoneWebSpeed App using HTML, JavaScript and Cascading Style Sheets Additional drill-downs menus may be required to access smaller portions of the data.

  39. Demo: SmartPhoneWebSpeed App using HTML, JavaScript and Cascading Style Sheets The SmartPhone screen size may only allow for a single chart, not all four charts like the Desktop Application.

  40. Desktop App Example Warranty Registration System Application is designed to fill the full desktop screen.

  41. Desktop App Example Warranty Registration System Answers are displayed horizontally and / or vertically based on the preference of the Administrator.

  42. Mobile App Example Warranty Registration System Same functionality available as the Desktop App. Screen layout was modified for the smaller screen size. Answers displayed vertically.

  43. 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

  44. 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 need to prepare for this change in information delivery expectations. • By properly incorporating Web 2.0 features, your WebSpeed development can meet these expectations.

  45. Questions? Contact Information: Scott Blaubach App Technologies, Inc. scottblaubach@apptechnologies.com 800-861-4988 Ext. 132

More Related