HTML internal to stack - best practices

[hakan at exformedia.se]

Found this old mail, but no answer?! Maybe just me, but here goes.

LiveCode has a strong connection between the browser and the LiveCode engine as you can call LiveCode handlers from within your JavaScript and call JavaScript from within your LiveCode handlers. You can also detect clicks on links, when pages load in the browser etc. But there are some quirks we need to know.

a .The Browser widget runs kind of on its own. If you save something from an HTML form in a JavaScript variable this is not automagically transfered to LiveCode and vice versa.
b. The browser widget ”takes over” the rect where it displays the web page and you can thus not overlay LiveCode controls on top of the browser. We can kind of fake this but might be good to know!

So to your questions:

1) How you store the HTML doesn’t matter! IF you stor it in a property, field, variable or file is not important. Doing: ‘set the htmlText of widget ”browser" to …' will be the same as long the stuff you add evaluates to some (HTML) text. If it is a file it might be better to just set the url of the widget though.

2) The short answer is: no. You can include an HTML-file that loads CSS and JavaScript as a normal web page would do. But remember that you can’t link to some CSS that only resides within LiveCode. You can only link to a file. But there is nothing stopping you from within LiveCode create the HTML, CSS and JavaScript on the fly. Output the CSS and JavaScript to temporary files (that you link to in your HTML!) and then set the htmlText of the widget. Or save out all three files and then set the url.
If you want to build the page progressively from LiveCode you can do that also. BUT you need to either keep a copy of the HTML code in LiveCode that you edit and then reset the htmlText of the widget OR you can prepare some JavaScript functions that you can call from within LiveCode that in turn manipulates the DOM.

3) If you still are talking about the browser widget there are some lessons at https://lessons.livecode.com but I can agree that the material might need some updates as has been discussed here on the list before. Also take a look at the Dictionary. In the left column there you can find ”browser”. Click on that and you will focus on browser related stuff. There are some good things in the Dictionary!

Happy Coding!

:-Håkan
On 13 Feb 2021, 19:20 +0100, Brian K. Duck via use-livecode <use-livecode at lists.runrev.com>, wrote:
> I’m looking to understand, find references, and hopefully *examples* of a stack with html, css, JavaScript, JSON and JavaScript libraries that are stored internal to the stack.
> Some files must be modified by the user, others are untouched by user data, but included via <script> tags in the html.
>
> The stack will need to allow access, via LC fields, to variables in the JS libraries to define the server and authentication data specific to the user.
>
> The user will be filling in a form in the html, so that should be stored and modifiable by the user.
>
> The immediate need is to keep the code internal to the stack, to provide a single file solution.
>
> Questions for the list:
> 1) How is storing HTML in a text field or variable different from setting a property?
>
> 2) Do I need to assemble the HTML, CSS, and JavaScript into a single object then set the HTMLtext of the browser widget?
>
> 3) what examples or references are relevant for LC 9.6? I can go quite far back in the list, on the discussion boards or in the learning materials; but I don’t see good guidance for new features that have replaced old techniques.
>
> Sent from my iPhone,
> Brian Duck
>
> > On Feb 13, 2021, at 1:00 PM, Brian K. Duck <bduck at mac.com> wrote:
> >
> > Erik,
> >
> > The YouTube url has been validated and is included because the direct link to our GitHub team link requires:
> > 1) a logged in user
> > 2) the user must be a member of the ‘xAPI Cohort Spring 2021’ group
> >
> > GitHub gives a 404 error if either of these conditions are not met, there is no feedback provided other than this error number.
> >
> > Anyone wishing to see the code is welcome to join the xAPI Learning Cohort and request access to the Cohort GitHub area.
> >
> > The YouTube url does not have this limitation.
> >
> > As I am cross posting to: use-LiveCode, gutHub discussions, slack channels, and direct email to our team; I’m working to keep the urls posted valid, but I am learning as I go.
> >
> > Sent from my iPhone,
> > Brian Duck
> >
> > > On Feb 13, 2021, at 12:00 PM, use-livecode-request at lists.runrev.com wrote:
> > >
> > > The URL is not correct.
> > >
> > > Best regards,
> > > Erik
>
> _______________________________________________
> use-livecode mailing list
> use-livecode at lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode