u97 javascript webinar
TRANSCRIPT
![Page 1: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/1.jpg)
www.uniface.coml ectures.
l ectures.
![Page 2: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/2.jpg)
JavaScriptMichael TaylorProduct ManagerMay 1, 2023
l ectures.
![Page 3: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/3.jpg)
www.uniface.coml ectures.
Agenda
• JavaScript Basics• Using Uniface’s JavaScript API• Integrating DSP’s into existing websites
![Page 4: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/4.jpg)
www.uniface.coml ectures.
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
![Page 5: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/5.jpg)
www.uniface.coml ectures.
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
![Page 6: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/6.jpg)
www.uniface.coml ectures.
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”];
![Page 7: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/7.jpg)
www.uniface.coml ectures.
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).
![Page 8: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/8.jpg)
www.uniface.coml ectures.
JavaScript Functions
• Name• Parameters
only input
• Can return a value
![Page 9: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/9.jpg)
www.uniface.coml ectures.
Separate JS files
• Improve loading times• Readability• Encapsulate functionality• Include 3rd party utilities
![Page 10: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/10.jpg)
www.uniface.coml ectures.
Conditions
![Page 11: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/11.jpg)
www.uniface.coml ectures.
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
![Page 12: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/12.jpg)
www.uniface.coml ectures.
Loops
• break/continue {label}
![Page 13: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/13.jpg)
www.uniface.coml ectures.
More (advanced) Information
• Objects Constructors Prototypes
• Closures• Errors and exceptions
![Page 14: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/14.jpg)
www.uniface.coml ectures.
Agenda
• JavaScript Basics• Using Uniface’s JavaScript API• Integrating DSP’s into existing websites
![Page 15: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/15.jpg)
www.uniface.coml ectures.
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
![Page 16: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/16.jpg)
www.uniface.coml ectures.
Data types (Examples)• String
get/setValue
• Object get/setProperties
• Array Get/setValrepArray
![Page 17: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/17.jpg)
www.uniface.coml ectures.
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)
![Page 18: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/18.jpg)
www.uniface.coml ectures.
Context• weboperation
“this” is the instance
• webtrigger “this” is the field
• getParent()
![Page 19: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/19.jpg)
www.uniface.coml ectures.
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.
![Page 20: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/20.jpg)
www.uniface.coml ectures.
What do they look like
![Page 21: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/21.jpg)
www.uniface.coml ectures.
Agenda
• JavaScript Basics• Using Uniface’s JavaScript API• Integrating DSP’s into existing
websites
![Page 22: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/22.jpg)
www.uniface.coml ectures.
Uniface in an existing website• Client/Server communication• State• Scoping• Blocking• Re-use
![Page 23: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/23.jpg)
www.uniface.coml ectures.
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
![Page 24: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/24.jpg)
www.uniface.coml ectures.
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>
![Page 25: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/25.jpg)
www.uniface.coml ectures.
Using uniface.js
![Page 26: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/26.jpg)
www.uniface.coml ectures.
Thank You / Q & A
Thank You!Q & A
![Page 27: U97 JavaScript Webinar](https://reader033.vdocument.in/reader033/viewer/2022052514/58866b251a28ab7d408b597d/html5/thumbnails/27.jpg)
www.uniface.coml ectures.
Follow us online
uniface.comunifaceinfo.com/forum