Uniface Lectures: JavaScript Webinar. Covers JavaScript basics, using JavaScript with Uniface and integrating DSP's into existing websites.

1. www.uniface.comlectures.
lectures.

2. JavaScript
Michael Taylor
Product Manager
April 15, 2016
lectures.

3. www.uniface.comlectures.
Agenda
• JavaScript Basics
• Using Uniface’s JavaScript API
• Integrating DSP’s into existing websites

4. www.uniface.comlectures.
What is JavaScript
• Programming language
 High-level, weakly-typed, dynamic, interpreted
 Standards based - ECMAScript
• Started as a web automation language
• Highly optimized
 Google v8 engine
• Full access to (D)ocument (O)bject (M)odel
• It is not Java
 Java is like Star Trek – JavaScript is like Star wars

5. www.uniface.comlectures.
My First JavaScript
• Defined inside <script> tag
• Can be in head or body
• Normally in-line as the page is passed
• Can be set to async

6. www.uniface.comlectures.
JavaScript Variables
• JavaScript variables are containers for storing data
• Should be declared
 Or it will be created globally
• No data type specified
 Can contain anything
 String, Number, Boolean, Array, Object, undefined
 var myArray = [“Volvo”, “Saab”, “Ford”];
 myArray[0];
 var myObject = {myProperty1: “ABC”, myProperty2: 1000};
 myObject.myProperty1;
 myObject[“myProperty1”];

7. www.uniface.comlectures.
JavaScript Functions
A JavaScript function is a block of code
designed to perform a particular task.
A JavaScript function is executed when
"something" invokes it (calls it).

8. www.uniface.comlectures.
JavaScript Functions
• Name
• Parameters
 only input
• Can return a value

9. www.uniface.comlectures.
Separate JS files
• Improve loading times
• Readability
• Encapsulate functionality
• Include 3rd party utilities

10. www.uniface.comlectures.
Conditions

11. www.uniface.comlectures.
Operators
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator

12. www.uniface.comlectures.
Loops
• break/continue {label}

13. www.uniface.comlectures.
More (advanced) Information
• Objects
 Constructors
 Prototypes
• Closures
• Errors and exceptions

14. www.uniface.comlectures.
Agenda
• JavaScript Basics
• Using Uniface’s JavaScript API
• Integrating DSP’s into existing websites

15. www.uniface.comlectures.
Uniface JavaScript API
• uniface
 Instance
 Entity
 Occurrence
 Field
• Enables interaction with fields and data in
browser
• Frames within frames
 Similar to Client/Server
Documentation: Uniface Reference -> APIs: JavaScript

16. www.uniface.comlectures.
Data types (Examples)
• String
 get/setValue
• Object
 get/setProperties
• Array
 Get/setValrepArray

17. www.uniface.comlectures.
webOperation/webtrigger
• Instructs Uniface to
• Client side JavaScript operation
• Callable from API or web activate
• Attach an event (onClick, OnChange, detail)
• Scope (Optional – defaults to
input/output)
• Params (Optional – IN/INOUT only)
• JavaScript/EndJavaScript (optional)

18. www.uniface.comlectures.
Context
• weboperation
 “this” is the instance
• webtrigger
 “this” is the field
• getParent()

19. www.uniface.comlectures.
Promises
A promise represents the eventual result of
an asynchronous operation. It is a
placeholder into which the successful result
value or reason for failure will materialize.

20. www.uniface.comlectures.
What do they look like

21. www.uniface.comlectures.
Agenda
• JavaScript Basics
• Using Uniface’s JavaScript API
• Integrating DSP’s into existing
websites

22. www.uniface.comlectures.
Uniface in an existing website
• Client/Server communication
• State
• Scoping
• Blocking
• Re-use

23. www.uniface.comlectures.
Configure Uniface
• wasv.asn
 Set the location of the Uniface JS/CSS runtime
 $uniface_runtime_base_url
 Set the location to load dspjs files
 $js_base_url
• web.xml
 Security – CORS
 Google - tomcat CORS

24. www.uniface.comlectures.
Sample CORS section
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>
org.apache.catalina.filters.CorsFilter
</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

25. www.uniface.comlectures.
Using uniface.js

26. www.uniface.comlectures.
Thank You / Q & A
Thank You!
Q & A

27. www.uniface.comlectures.
Follow us online
uniface.com
unifaceinfo.com/forum