Building Responsive Applications with Uniface: Getting Started (Part 1 of 3) In this webinar you will learn: • Requirements for a new project • Development Environment walkthrough • Application architecture considerations

2. Uniface Responsive Web
1 of 3: Getting Started
David Akerman – Solution Consultant

3. Agenda
Demo Starter ApplicationWhy?
Prerequisites
Project Considerations
Environment
Development

4. Why?

5. Any time, anywhere
Multiple Devices
Shared Business Logic
BYOD (varied screen size,
format, etc)
Varied Location
Office, home, mobile working
Connected, offline
Internet, intranet

6. Improve User Interface & Experience

7. Deployment and Updates

8. Uniface Solution: Dynamic Server Pages

9. Javascript API

10. Uniface Mobile

11. Prerequisites

12. Core Skills and Competencies

13. Resources to aid UI development

14. Project
Considerations

15. Typical Approach
Requirement
Plan
Train
Analyse
Prepare
Proof of Concept
Estimate
Develop / Modernise / Extend

16. User Experience
• Familiar look and feel or new UI?
Scalability & Fault Tolerance
• Load Balancing?
• Auto-failover or manual?
Security
• Authentication
• Resilience
Performance
• SLA targets
Non-functional Requirements

17. Environment

18. Uniface Web Request Dispatcher
libwrd.jar in Tomcat

19. Multiple Web Applications
Different URL per app/environment
http://server/prod/wrd/main
http://server/app1/test/main
Each environment has web config +
Urouter configuration.
Context Servlet ComponentProtocol Server:port

20. Configuration: Tomcat (Context)
http://server:port/WebStart
Tomcat virtual directory definition:
tomcatconfCatalinalocalhostWebStart.xml
Points to project web folder:
<Context docBase="D:Projectswebstartweb">
<Valve className="org.apache.catalina.valves.AccessLogValve"
prefix="tabs-" suffix=".log" pattern="common"/>
</Context>

21. Configuration: Tomcat (wrd)
Physical folder contains WEB-INFweb.xml
D:ProjectswebstartwebWEB-INFweb.xml
web.xml defines servlet mapping, e.g.
http://server:port/WebStart/wrd/
Servlet defines connections to Uniface UROUTER

22. Tomcat web.xml servlet configuration
<!-- Uniface W(eb) R(equest) D(ispatcher) Servlet -->
<servlet>
<servlet-name>
wrd
</servlet-name>
<servlet-class>
com.compuware.uniface.urd.WRDServlet
</servlet-class>
<init-param>
<param-name>MIDDLEWARE</param-name>
<param-value>UV8:localhost+13001|userver|*|webstart</param-value>
</init-param>

23. Tomcat web.xml servlet mapping
<servlet-mapping>
<servlet-name>wrd</servlet-name>
<url-pattern>/wrd/*</url-pattern>
</servlet-mapping>

24. Uniface Common resources
e.g. unifacewebappsunifacecommonuniface.js
Web folder: ../common
Override in wasv.asn:
[SETTINGS]
$UNIFACE_RUNTIME_BASE_URL=/uniface/common
or Tomcat Context (virtual dir):
CommontomcatconfCatalinalocalhost
WebStart#common.xml

25. Development

26. User Interface Elements
Navigation
Tabs
Modality & Overlays
Icons
Validation & business logic
Error handling & messaging
Responsiveness
Accessibility

27. DSP Containers Nav
Page

28. Content DSP Container
DSP Container Flow
2. NAV DSP
Page DSP Container
ALERT DSP Container
MENU 1
1. LOGIN DSP
ALERT DSP Container
MENU 2 MENU 3
LOGIN
Username / Password
MAIN DSPALERT DSP
MESSAGE
2a. PAGE DSP
1. CONTENT = “LOGIN”
2. CONTENT = “NAV”
2a. NCONTENT = “PAGE”
NAV DSP

29. Considerations
Layout  HTML / CSS Layout
Long transaction  Browser persistence (e.g. tabs)
Client-side code  JavaScript webtriggers
Validation  (Web)triggers
Error handling  (Web)operations
Variables  State management
Hitlist  Data paging
Authentication  Session management
Frameworks  Templates, Libraries & Snippets

30. Desktop vs. Web
No Structure Editor
Triggers
Statements & functions
Stateless
Database transactions
Security
Performance
Fault Tolerance
Function Replaced by
Macro activate of operation
$prompt In Javascript in 9.7.02
$dbocc Javascript Occurrence.getStatus Function, if
necessary on client side
edit, display,
$editmode
Displaymode can be achieved in DSPs only by use
of non editable widgets
$formtitle Headers in HTML or in Uniface fields
message Webmessage
Apexit exit (0), do not leave with negative status
askmess Separate Dialog (DSP or JavaScript) with buttons
for the answer
$curhits No stepped hitlist in web
$fieldcheck No option to force validation with $fieldcheck. If
immediate reaction is neccessary, best check for
change in Javascript,
$instanceparent Function works also in DSPs, but sequence of
activation and perhaps DSPs itself different from
C/S
$batch DSPs can‘t run in batch, Forms can be kept for
batch usage.

31. Application Architecture
Features, e.g.
Navigation
Modality
Error Handling + Messaging
Tab control
Uniface defaults
Authentication, Inject JS/CSS, external HTML layout
Component Templates
Common types, e.g. List, Maintenance, Tab

32. Resources
Uniface Help: Tutorials
Uniface Training
uniface.info
- Samples, forums, blogs
youtube.com/uniface
github.com/uniface
- Frameworks & tools

33. Walkthrough:
WebStart App

34. Thank You
& Questions