Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Uniface Lectures Webinar - Building Responsive Applications with Uniface: Development

747 views

Published on

Building Responsive Applications with Uniface: Development (Part 2 of 3). In this webinar you will learn:

• Dynamic Server Page (DSP) Coding Recap
• User Interface Techniques
• Demo WebStart Application
• Code Walkthrough (View on our YouTube channel)

Published in: Software
  • The Scrambler Unlock Her Legs | 95% Off by Bobby Rio-Rob Judge? ➤➤ http://t.cn/AijLRbnO
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Uniface Lectures Webinar - Building Responsive Applications with Uniface: Development

  1. 1. Uniface Responsive Development (2 of 3) David Akerman – Solution Consultant
  2. 2. Agenda Dynamic Server Page (DSP) Coding Recap User Interface Techniques Demo WebStart Application Code Walkthrough
  3. 3. Coding DSP’s
  4. 4. Javascript API
  5. 5. Comparing ProcScript vs. JavaScript Server <Detail> trigger - button clicked trigger detail public web webmessage "Button clicked" return 0 end; trigger Also onFocus, onBlur etc. in Extended Triggers Browser Extended trigger - editbox changed webtrigger onChange javascript alert(this.getValue()); endjavascript end ; trigger
  6. 6. Comparing ProcScript vs. JavaScript Operations Server Operations operation Update public web params string pOptions: IN endparams ; ProcScript Code return 0 end ; Update Browser Operations weboperation Update params string pOptions: IN endparams javascript // JavaScript code endjavascript end ; Update
  7. 7. Activating Operations Call weboperation from server (queued) webactivate $instancename.save() Call server operation from browser (asynchronous) this.getInstance().activate("save"); - use promises to control flow
  8. 8. operation getLocation public web params string address : in numeric latitude : inout numeric longitude: inout endparams call CalcCoordinates(address, latitude, longitude) end ; getLocation Promises webtrigger onClick javascript this.getInstance().activate("getLocation",address,null,null) .then( function(out){ google.maps.locate(out.args[1], out.args[2]); }, function(e) { alert("Error getting the location !"); } ); endjavascript Get Location from GoogleJavaScript Activation Example 4 1 2 3 Browser Server Get Location Button
  9. 9. Scope Controls data sent & received between browser & server Scoping operations block, prevent race conditions output input trigger detail public web scope input output operation AnotherDSP.show endscope activate "AnotherDSP".show() return 0 end; trigger
  10. 10. Dynamic Scope operation storeData public web scope input output operation myInstanceList().store endscope variables string vInstList, vInstName endvariables vInstList = $replace(MODIFIED_INSTANCES, 1, ";", ";", -1) forlist vInstName in vInstList newinstance "SUB_DSP", vInstName activate vInstName.store() endfor end ; storeData output input weboperation myInstanceList() returns JavaScript array of Instance Names
  11. 11. HTML 5 widgets: bound error labels Field validation error handling when the user tabs or clicks away from a field. Associate an error label via the ID attribute with prefix ‘uflderror:’
  12. 12. Validation Use JavaScript for non-declarative browser checks: Always validate on server!
  13. 13. CSS Classes <input id="ufld:search.criteria.ui" type="text" class="form-control" placeholder="Search..."> $fieldproperties("SEARCH.CRITERIA") = "html:class=form-control" $fieldproperties("SELECT.BUTTON") = "html:class=btn btn-primary btn-lg" javascript fld.setProperty("html:class", "form-control"); endjavascript Modifying Properties
  14. 14. CSS class:classname vs. html:class putitem/id $FieldPropertes("select.buttons"), "class:btn-lg", "true" putitem $FieldPropertes("select.buttons"), "!class:btn-lg" javascript field.setProperty("!class:btn-lg"); endjavascript putitem/id $OccProperties("order"), "class:selected", "true" putitem/id $EntityProperties("order"), "class:empty", "true" Use class:classname property instead of html:class to change individual classes:
  15. 15. CSS Attributes Add Attribute putitem/id $OccProperties("ORDER"),"html:data-selected", "true" HTML <table id="uent:ORDER.POS" class="table table-hover"> <tbody> <tr id="uocc:ORDER.POS" data-selected> <td><span id="ufld:CODE.ORDER.POS">Code</span></td> <td><span id="ufld:DESCR.ORDER.POS">Name</span></td> </tr> </tbody> </table> JavaScript Find var elements = document.querySelectorAll('tr[data-selected]'); jQuery: $('tr[data-selected]').each(…) or $('tr[data-selected]')[0];
  16. 16. HTML 5 Widgets: Known Issues http://unifaceinfo.com/fixes-updates/ Bug #31084: HTML 5 control Reconnect failures ($procerror -259) Workaround: datatype=string in usys.ini webwidgets [webwidgets] EditBox=htmlinput(html:type=text;detail=dblclick;datatype=string) DropDownList=htmlselect(html:size=1;datatype=string) ListBox=htmlselect(html:size=3;datatype=string) CheckBox=htmlinput(html:type=checkbox;datatype=string) Bug #31422: Date display YYYY-MM-DD Datetime field empty after update occurrence Workaround: datatype=string in field widget more properties
  17. 17. UI Techniques
  18. 18. User Interface Techniques Messaging & Error handling Responsiveness Tabs Modality & Overlays Navigation Icons Data Paging
  19. 19. Tabs All content in one DSP e.g. BOOTTABS Each tab contained by div element • Hide with style display:none Optional DspContainers
  20. 20. Modality - CSS “Lightbox” effect via CSS • Hidden dialog (html display:none) • To show: • Unhide (display:block) • Change CSS z-index, position, background-color, opacity etc. • CSS libraries typically provide CSS classes and JavaScript methods e.g. .modal() + .hide()
  21. 21. Modality – Sample Implementation Create a DSP to handle modal display • Show() method to load a DSP in container • Adds re-usable functionality (e.g. title, buttons, callback) Paint a DSPContainer field on your main page • Set initial value to load above modal controller DSP Call methods in other DSP’s (e.g. SAMPLE_MODAL) activate "<MODAL_DSP>".show(“Confirmation", vMessage, vInstanceName, "Yes,No", % $instancename, “confirmCallback") return 0
  22. 22. Data Paging Use DBMS driver read features: offset maxhits See: Help Topic: “Data Paging in Web Applications” Sample on unifaceinfo.com
  23. 23. Using Icon Fonts – Attributes Only <html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font- awesome.min.css" /> </head> <body> <i id="ufld:btn_home.buttons.ui" class="fa fa-home fa-fw"></i> </body> </html>
  24. 24. Using Icon Fonts – Modelled Buttons Uniface button HTML <input id="ufld:RET.BUTTONS.UI" type="button" class="btn btn-primary fa" value="Button" /> #defines ; fa-refresh – see font-awesome cheatsheet #define B_BROWSE_ICON = &#xf021 Format trigger #if (<$componentType> = D) $format = $concat($string("<B_BROWSE_ICON>; "), "Retrieve") #endif
  25. 25. Considerations
  26. 26. Security Sensitive data – can it be tampered with? • URL, Cookie, Hidden Fields can be modified • If protection needed, hash encode and/or use server-side storage • Always validate on server • Use SSL Uniface prevents modification of non-editable fields • Requires $SERVER_SECRET in .asn Check user is authenticated Use “public web” for browser activated operations only More information in Help – see “Web Security Guidelines”
  27. 27. Code Performance Tips Use Javascript API to move logic to browser Attach & Detach operations • Clear data when removed from DspContainer? Reduce data synchronisation • Only paint user interface entities • Business logic in services • DSP containers • Scoping Reduce State Management Cache!
  28. 28. Resources Uniface Help: Tutorials Uniface Training uniface.info - Samples, Forums, Blogs youtube.com/uniface github.com/uniface - Frameworks & Tools
  29. 29. Walkthrough: WebStart App
  30. 30. Thank You & Questions

×