uniurlframe uniURLFrame: call function in html page or external JS files.

[Fred Montier]

I always had a problem with uniURLFrame uniHTMLFrame. I don't find documentation about their correct use in the uniGUI help nor anything similar in Ext.JS. There is no reference of when to use the JS name of the component, when to use
"parent", "windows", "top" or "1#. bla bla bla".

I've scoured the entire forum and always the solutions don't explain when and where to use these parameter rules or which components have restrictions or different behavior. This is really the serious problem in uniGUI as I usually spend literally DAYS in trial and error to find the correct combination to call the component's OnAjax or, the most problematic, access JS libs included in html pages.

A trick I discovered is if a page contains a JS lib, it is possible to declare a function at the end of the page with the same parameters so that it is triggered BUT NEVER call the lib directly by the function name in uniGUI. Even declaring it in servermodule.customfiles doesn't work.

Well, I have a problem where I need to SPECIFICALLY use uniURLFrame because these libs in my project do not work in uniHTMLFrame. So far so good, but I need to call the functions and if I use dynamic creation via frame in a unipagecontrols I can't find the correct way to call this javascript function declares in the HTML loaded in the uniUrlFrame.

Note that even if I declare the libs I need in uniGUI and call the functions directly they are not read or recognized as code available in the external Javascript file (I declare it in the HTML code or in the uniGUI). Some work and some don't.

In short, I made a testcase where the project loads a frame in a uniPageControl and declares a simple function. Note that it is executed directly in the button's event in the HTML code. But the correct way to call this function:

A.  UniURLFrame1.JSInterface.JSCode('myAlert()');
B. UniURLFrame1.JSInterface.JSCode(#1'.iframe.contentWindow.myAlert()');
C. unisession.addjs('myAlert();');

  I know that this code above (c) will never work but , explain WHY !!!!!
  What are the limits on uniGUI. ExtJS and components scope for functions and JS Code ?
  And why some times you have to config a name to uniURLFrame/uniHTMLFrame using Ext.JS Functions   ?

If I just use uniURLFrame it will work and run the function, no problem. But I need to use it in a Frame and in an uniPageControl. That is reason of such approach.

Problems on this testcase:

1-What is the correct way to call this function "myAlert()" in the HTML code ?
2-Where do I find the correct parameters to call these JS codes and why it doesn't work in some cases?

This same problem have being posted at the forum with out any answers or only  links to on-line manual where there are just name of properties , functions or methods without any content.

 

 

 

FrameTesteCase.rar

[Fred Montier]

And I know that if I use the SCRIPT property in main form it will work in some cases but not in this particular case using frame and loading from uniURLFrame. And  more,  uniHTMLFrame has a behavior different (as expected) but injection in uniLabel, all this get very confusing.

So, try and error won't get much of my content done. I have more than a hundred examples with JS adaptations problems. And boy, I have been studying this this like crazy for the last 2 years.

Thanks in advance.

[Fred Montier]

...And of course I know about scopes (vars and functions) in JS files,  imports and using iframes in html. The same example runs ok with uniHTMLFrame (except line b, of course),  But as far as I can see, there is something messed up in Ext.JS/unigui the way it works.  And without no documentation... mission impossible !

And using some libs, they can not load in uniHTMLFrame, as this particular projects that I'm, working now. I always got "function not declared" error and ajax error, object name ... etc. Even declaring in servermodule.customfiles, same thing.

I can solve it partially with unihtmlFrame  (for the JS problems) but the html code is note rendered the same as uniUrlFrame and the CSS got messed up.

Just to avoid answers about things I have really looked into the past months.

[zhyhero]

The world is "Tree" .

 Run unigui app, open url in browser, and the developer-tool will tell you what is inside it.

Type and run “console.log(this)” in developer-tool.

(This pic shows how current session objects are organized like a tree inside the browser vm , and "this" is a "Window" type object. )

Every object may have a name ,like O6A,O10....... and MainForm.

 

When you include an outside js file,it's content will append to the "Tree".

Example ,we define a function in file "jsfunc.js",

function ___js_func_1(){

    alert("call js_function");

}

and add "/files/jsfunc.js" to servermodule.customfiles.

When uniapp initialized, the function "___js_func_1"  will append to the object tree (this is "Window").

Or we put an TUniHTMLFrame on a UniForm, set HTML property with:

<head>
<script>
function ___my_func_good(){ alert('good'); }  // function append to "Window"

var ___mytools={};  // object append to "Window"
___mytools.good=function (){ alert('good'); }  //function append to "Window".___mytools

</script>
</head>
<body>
hello<br>
<input type="button" value="click good" onclick="___my_func_good()"></input>
</body>
 

At runtime, "___my_func_good" and "___mytools" will append to the tree (this is "Window"), like pic shows.

Usually,we just simple  call "this.___js_func_1()",   "this.___myfunc_good()" and "this.___mytools.good()".

Unisession.AddJs('this.___js_func_1();');

 

You can add any new child object(or function) to any object on the tree, so it is important to make sure what is "this".

If you dynamic create js objects or functions in runtime , you may consider how to organize them on the "Tree"

 

 

[Fred Montier]

Thanks for your help but I really do think you missed the point here.

I'm talking about uniGUI + ext.js / components are related to original JS behavior. How to call, parameter to, from and at JS files and variants to components and the main to uniHTMLFrame and uniURLFrame. Other components have some use like uniLabel etc, but different behavior. THIS IS NOT DOCUMENTED in unigui or Ext.JS. That is the main issue.

The correct way to invoke from external to Ext.JS/uniIGUi Controls using uniHTMLFrame/uniURLFrame and what are the rules BECAUSE they are not in the manual /documentation. Calling codes in  functions JS, using code in the files and relating them to uniGUI. Make a search here and you will find dozens of posts complaining about this. Reading the uniGUI core source code have helped me more than any thing. This is the problem here.  I'm trying finish my third book on uniGUI and I must provide clear rules and examples where to using every component, integrate to invoke, how/where to invoke, why use some params and whatnot's.  If you have a table with this, would be of great help because for now, I have a case list with variants to "try and errors" scenarios. This is not productive.

At the unigui's forum, EVERY single answer about those components and problems, have incomplete or not very clear solutions: "do this, do that answers". Not why's. And I know that is  a problem solving/support forum, only. Keeping tracking in console won't solve those problems witha broader range of complexity. And I'm very aware of how to use the console. Note that I made clear that addjs example will not work in this case, but I need to explain clearly why it should work and not should work in all possible cases. Not guesses, as I'm doing. That is the second point, also.

As I said before , and this is my overall solution, for JS libs that won't work, I use the Javascript after HTML body code with pseudo names to call the original functions,  will work ok in most of the cases. But this behavior, NEVER happens in Intraweb using almost the same code. Debugging via console, the only difference is the Ext.JS libs being invoked. But the same test with the "almost pure" TMS Webcore, never have such problem either. This is the third point. Well, TMS webcore is really only JS.

I've made a lot of projects using external JS libs (see my web site: https://www.uniguiexpress.com ) and some of them works as planned and other just don't. I have more than 200 projects that never worked due to issues to integration to uniGUI. No way. I have almost 300 projects that worked adapting to unigui with a lot of different JS libs. But in everyone, I had to provide  some peculiar solution or adaptation to Ext.JS components.

It is not just a matter of tracking objects and understanding scopes, and using another tools works on a more clear way.  Stack Overflow is full of similar questions and most of them are solved with some tweaks between situations and browsers. JS is a shit language to debug for obvious reasons and the fact that you have different browser, compatibility issues and unknown problems make all problematic.

FYI: using some libs in servermodule.customfiles, will never be readable. Using them in direct HTML in frames are way more reliable, in some cases. I DONT KNOW WAY ! and using unigui session.addjs , also in some cases, are the less reliable way to cover them all. Make a simple test case, with external JS file , declaring before or after makes some difference for some projects. See the youtube seminar on Quartex and the authors explain more about problems like that and how they are trying to solve it, you will have a tip on how adapting Ext.JS (uniGUI Solution) can be problematic, that is why I'm in favor of a "bare-bones" uniGUI option.

FYI 2: If you have tried some stuff with  CEF4Delphi, and inject direct JS code and pages, you don't have this problems because there is no Ext.JS libs and just pure JS code with the chromium engine. This is the closest you will get to Node.JS.  So, it is really a "feature" related to use of uniGUI/Ext.js code to JS natural mess.

And most of all, the way you call AjaxRequest, depending on some components  has different behaviors and effects. Fourth point here.

The last fifth point is the testcase project provided above, to explain WHY this won't work in uniURLFrame, will work with some small tweaks, and work in uniHTMLFrame in some cases. This will make clear to me where is the problem. Just try the code, switching component and see the "problemagic".


Anyway, thank for your help.

[Fred Montier]

FYI: examples of JS libs that will have problems: WebIX, PDF Annotation. Both easy to use but different solutions and components to make it work in unigui.

PDF Annotation Editor
https://unigui.com.br/uniGUIPDFAnnotationEditor.html

https://unigui.com.br/KanbanBoard-eng.html
Webix Kanban

 

[Sherzod]

Excuse me my friend, please, again, what is the specific question you are asking at the beginning of this post, and what specific problem are you facing? Briefly please.

[zhyhero]

Sorry for missed the point.

In you testcase,

#1'.iframe.contentWindow.myAlert();'   =>   UniURLFrame1.JSName+'.iframe.contentWindow.myAlert();' 

UniURLFrame1.JSName => O5E or other ...

O5E is on the Tree.

I guess #1 just a placeholder, it will replace by some jsname on runtime.

try

UniURLFrame1.JSInterface.JSCode('O5E.iframe.contentWindow.myAlert();');

unisession.addjs('O5E.iframe.contentWindow.myAlert();');

 

And in you index.html file

<script>

  function myAlert() {

       alert('peek-a-boo I see you');

       console.log('out -> ',this); // this will be O5E.iframe.contentWindow 

     };

</script>

 

 

top => O5E's parent   ,root of the Tree.