[Wt-interest] How to integrate Wt with "conventional" html / css?

[K. Frank]

Hello List!

How might I approach mixing Wt with non-Wt web programming?

To be concrete, let's say I have a simple static web site that's
implemented with html (say html5) / css and consists of a handful
of pages.

Suppose I want to add some "active" content to it -- some Wt
widgets -- but still want to leave the bulk of the web site as
plain html / css. Is there a straightforward was to embed some
Wt content into an html page and have it "play nice"?

Conversely, let's say I have a Wt-based web site, but want to
add significant document-style static content to it, and I want
to author and maintain the document content as html (and,
furthermore, I don't want to compile the html into a Wt application
or resource bundle). Is there a straightforward way to embed
html content -- perhaps even multiple pages -- into Wt?

And let's say we do either one or both of the above. Would it
be practical to style both the Wt and free-standing html parts
of the web site with the same css?

(It would be especially helpful if there were any examples of
this sort of design out there available for study.)


Thanks for any suggestions.


K. Frank

[Jeffrey Scott Flesher Gmail]

I have found that if you want a Content Management System (CMS) using
Wt, its easy to do, I keep it simple, no back end, and a flexible
function generator, its all static XHTML files, HTML5 code embed in
XML, it uses CSS, but you need to be careful with tags that would crash
the Rapid XML parser, note the XHTML files are easy to maintain via FTP
or SSH, more secure, no real reason for a back end that requires
authentication, note I run about 6 websites from 1 VPS account and 1
instance of the program, not sure if that is non-Wt web programming,
but its as close as I could come to mixing them, the C++ is just code,
it does not have to be Wt related, I use boost and other features of
C++, what's nice about this CMS is that it works, 24/7 for years now, I
never reboot the server, if the app crashes monit will recycle it, also
its easy to adopt to you needs, not much code to it, its simple, I
started work on a back end, but couldn't find a good HTML editor in C++
to use with it, so its on hold till I do, hope this helps.
The Code
https://github.com/WittyWizard/install
The Website
http://wittywizard.org/ww/en/blue/
This site is also running from the same Wt app
http://lightwizzard.com/ww/en/blue/
It uses CSS menu, it jumps around till the css loads, but I like it
because its multi-level, but the css needs work, I converted it, but
not all the css is working the way I want it to, it needs to load the
CSS in the header, I need to fix this but found an issue with cookies
that prevent me from loading it in the header, and I have not fixed it,
since I have no idea what is causing the issue, so it needs a little
work, but it works for me.

Post by K. Frank
Hello List!
How might I approach mixing Wt with non-Wt web programming?
To be concrete, let's say I have a simple static web site that's
implemented with html (say html5) / css and consists of a handful
of pages.
Suppose I want to add some "active" content to it -- some Wt
widgets -- but still want to leave the bulk of the web site as
plain html / css.  Is there a straightforward was to embed some
Wt content into an html page and have it "play nice"?
Conversely, let's say I have a Wt-based web site, but want to
add significant document-style static content to it, and I want
to author and maintain the document content as html (and,
furthermore, I don't want to compile the html into a Wt application
or resource bundle).  Is there a straightforward way to embed
html content -- perhaps even multiple pages -- into Wt?
And let's say we do either one or both of the above.  Would it
be practical to style both the Wt and free-standing html parts
of the web site with the same css?
(It would be especially helpful if there were any examples of
this sort of design out there available for study.)
Thanks for any suggestions.
K. Frank
-------------------------------------------------------------------
-----------
Mobile security can be enabling, not merely restricting. Employees
who
bring their own devices (BYOD) to work are irked by the imposition of
MDM
restrictions. Mobile Device Manager Plus allows you to control only
the
apps on BYO-devices by containerizing them, leaving personal data
untouched!
https://ad.doubleclick.net/ddm/clk/304595813;131938128;j
_______________________________________________
witty-interest mailing list
https://lists.sourceforge.net/lists/listinfo/witty-interest

--
Jeffrey Scott Flesher, PhD
Disabled Gulf War Vet, Retired U.S. Air Force
F-111 Computer Test Stations, Air Rescue and Special Ops: Helicopter Crew Chief
***@gmail.com

Light Wizzard
http://LightWizzard.com/ Light Wizzard on Yew Tube
https://www.youtube.com/TheLightWizzard
 Facebook
http://www.facebook.com/LightWizzard
Google Plus
https://plus.google.com/+LightWizzard
Twitter
http://twitter.com/TheLightWizzard IMDb

http://www.imdb.me/LightWizzard

[K. Frank]

Hi Jaffrey!

On Tue, May 17, 2016 at 7:57 PM, Jeffrey Scott Flesher Gmail

I have found that if you want a Content Management System (CMS) using Wt, its easy to do, I keep it simple, no back end, and a flexible function generator, its all static XHTML files, HTML5 code embed in XML, it uses CSS, but you need to be careful with tags that would crash the Rapid XML parser, note the XHTML files are easy to maintain via FTP or SSH, more secure, no real reason for a back end that requires authentication, note I run about 6 websites from 1 VPS account and 1 instance of the program, not sure if that is non-Wt web programming, but its as close as I could come to mixing them, the C++ is just code, it does not have to be Wt related, I use boost and other features of C++, what's nice about this CMS is that it works, 24/7 for years now, I never reboot the server, if the app crashes monit will recycle it, also its easy to adopt to you needs, not much code to it, its simple, I started work on a back end, but couldn't find a good HTML editor in C++ to use with it, so its on hold till I do, hope this helps.

This sounds like it answers some of my questions. Let
me see what kind of ideas it gives me.

The Code
https://github.com/WittyWizard/install

Thanks for the link to your code. This kind of concrete
example is very helpful for me.

The Website
http://wittywizard.org/ww/en/blue/
This site is also running from the same Wt app
http://lightwizzard.com/ww/en/blue/
It uses CSS menu, it jumps around till the css loads, but I like it because its multi-level, but the css needs work, I converted it, but not all the css is working the way I want it to, it needs to load the CSS in the header, I need to fix this but found an issue with cookies that prevent me from loading it in the header, and I have not fixed it, since I have no idea what is causing the issue, so it needs a little work, but it works for me.
Hello List!
How might I approach mixing Wt with non-Wt web programming?
...
Jeffrey Scott Flesher, PhD
Disabled Gulf War Vet, Retired U.S. Air Force
F-111 Computer Test Stations, Air Rescue and Special Ops: Helicopter Crew Chief
...

Food for thought -- I appreciate your reply.


Best regards.


K. Frank

[Koen Deforche]

Hey,

Post by K. Frank
Hello List!
How might I approach mixing Wt with non-Wt web programming?
To be concrete, let's say I have a simple static web site that's
implemented with html (say html5) / css and consists of a handful
of pages.
Suppose I want to add some "active" content to it -- some Wt
widgets -- but still want to leave the bulk of the web site as
plain html / css. Is there a straightforward was to embed some
Wt content into an html page and have it "play nice"?

Wt has a so-called 'widget set' mode that is exactly that: it allows you to
embed a few Wt widgets in a different page (possibly hosted on a different
domain). In this case the application is imported inside this page as a
script. There is a feature/widgetset example that illustrates the
technique. It's also used on the homepage: the 'chat widget' is actually a
second Wt application which is embedded in the first. See also this blog
post on this topic:

https://www.webtoolkit.eu/wt/blog/2010/12/17/widgetset_mode_and_cross_origin_requests

Conversely, let's say I have a Wt-based web site, but want to

Post by K. Frank
add significant document-style static content to it, and I want
to author and maintain the document content as html (and,
furthermore, I don't want to compile the html into a Wt application
or resource bundle). Is there a straightforward way to embed
html content -- perhaps even multiple pages -- into Wt?

This is a bit harder: there are several approaches:
- read the HTML/CSS in a specialized WTemplate/WText which then renders it
inside your application as a widget
- serve the static HTML/CSS alongside the Wt application as a raw HTML
pages (using a static resource). For one customer we followed this approach.

The main challenge is to make sure that links and secondary resources are
pulled in correctly. That again depends on how they look like, etc...

Post by K. Frank
And let's say we do either one or both of the above. Would it
be practical to style both the Wt and free-standing html parts
of the web site with the same css?

For the widget set application, and the template approaches, that's
automatically the case.
For static HTML/CSS alongside this won't be the case.

Regards,
koen

[K. Frank]

Hi Koen!

Post by Koen Deforche
Hey,

Post by K. Frank
Hello List!
How might I approach mixing Wt with non-Wt web programming?
...
Suppose I want to add some "active" content to it -- some Wt
widgets -- but still want to leave the bulk of the web site as
plain html / css. Is there a straightforward was to embed some
Wt content into an html page and have it "play nice"?

Wt has a so-called 'widget set' mode that is exactly that: it allows you to
embed a few Wt widgets in a different page (possibly hosted on a different
domain). In this case the application is imported inside this page as a
script. There is a feature/widgetset example that illustrates the technique.
It's also used on the homepage: the 'chat widget' is actually a second Wt
application which is embedded in the first. See also this blog post on this
https://www.webtoolkit.eu/wt/blog/2010/12/17/widgetset_mode_and_cross_origin_requests

Thank you. I have added:

<div id="chat"></div>
<script src="http://www.webtoolkit.eu/wt/examples/simplechat/chat.js?div=chat">
</script>

from the above blog post to a trivial html web page, and it does seem to work.
(I have a question about chat.js that I will ask in a separate post.)

Post by Koen Deforche

Post by K. Frank
Conversely, let's say I have a Wt-based web site, but want to
add significant document-style static content to it, and I want
to author and maintain the document content as html (and,
furthermore, I don't want to compile the html into a Wt application
or resource bundle). Is there a straightforward way to embed
html content -- perhaps even multiple pages -- into Wt?

- read the HTML/CSS in a specialized WTemplate/WText which then renders it
inside your application as a widget

Just to be sure I understand:

Could this be as simple as reading in a well-formed html file (say,
content.html,
although the actual file name / extension is irrelevant -- could equally well be
content.xyz), for example, using in c++ an ifstream, and using the
entire contents
of the file as the argument to WText::setText()?

Post by Koen Deforche
- serve the static HTML/CSS alongside the Wt application as a raw HTML
pages (using a static resource). For one customer we followed this approach.

I think I've done this in some of my toy experiments, having links in a
Wt app link to static html files, and having links in the files link back
to the Wt app. (But I'm not really sure ... I'm still confused by how the
urls, internal urls, path names, and docroot all interact.)

But what do you mean by a "static resource"?

Post by Koen Deforche
The main challenge is to make sure that links and secondary resources are
pulled in correctly. That again depends on how they look like, etc...

Post by K. Frank
And let's say we do either one or both of the above. Would it
be practical to style both the Wt and free-standing html parts
of the web site with the same css?

For the widget set application, and the template approaches, that's
automatically the case.

Okay.

Post by Koen Deforche
For static HTML/CSS alongside this won't be the case.

Okay, that seems reasonable.

Post by Koen Deforche
Regards,
koen

Thanks for your explanations.


Best.


K. Frank

[Koen Deforche]

Hey Frank,

Post by K. Frank
Could this be as simple as reading in a well-formed html file (say,
content.html,
although the actual file name / extension is irrelevant -- could equally well be
content.xyz), for example, using in c++ an ifstream, and using the
entire contents
of the file as the argument to WText::setText()?

More or less, since you're relying on the browser to be forgiving for the
erroneous <html>, <head> <body> and other tags. In pratice browsers are
(too) forgiving for these kind of markup mixups.
If you want to do it cleaner, you would have to remove this junk (e.g. by a
preprocessing step, or on the fly).

Post by K. Frank

Post by Koen Deforche
- serve the static HTML/CSS alongside the Wt application as a raw HTML
pages (using a static resource). For one customer we followed this

approach.
I think I've done this in some of my toy experiments, having links in a
Wt app link to static html files, and having links in the files link back
to the Wt app. (But I'm not really sure ... I'm still confused by how the
urls, internal urls, path names, and docroot all interact.)
But what do you mean by a "static resource"?

It's a resource (something that responds to GET (or POST, or ...) requests)
that's not tied to a single session, but has a fixed URL. In other words,
it's more similar to the web API of PHP, Python, etc...
Within the context of a Wt application, they are typically used only for
web services that complement your web UI.
They offer a bit more flexibility as plain files served from the docroot as
they can still transform the response in some more intelligent way (if
necessary).

Regards,
koen

[K. Frank]

Hello Koen!

Post by Koen Deforche
Hey Frank,

Post by K. Frank
Could this be as simple as reading in a well-formed html file (say,
content.html,
although the actual file name / extension is irrelevant -- could equally well be
content.xyz), for example, using in c++ an ifstream, and using the
entire contents
of the file as the argument to WText::setText()?

More or less, since you're relying on the browser to be forgiving for the
erroneous <html>, <head> <body> and other tags. In pratice browsers are
(too) forgiving for these kind of markup mixups.
If you want to do it cleaner, you would have to remove this junk (e.g. by a
preprocessing step, or on the fly).

Thank you. I've been experimenting to see how things behave with
what you call erroneous tags, and I have a question.

Could you give me some guidance as to how I should understand
the following behavior?

I have the following html file, test.html:

<!-- <body> -->
<!-- <badtag> -->
<!-- <badmatch> -->
<h1>heading</h1>
<p>paragraph</p>
<!-- </matchbad> -->
<!-- </badtag> -->
<!-- </body> -->

I have a simple Wt application that loads the contents of test.html
into a WText, and also links to test.html:

new WText ("link to <a href='links/test.html'>test</a>");

I have four cases: test.html, as given above; uncommenting the
<body> tag pair; uncommenting the <badtag> pair; and uncommenting
the <badmatch> pair.

In all four cases, when I navigate to test.html thro ugh the link, "heading"
and "paragraph" are displayed as I would expect.

In the WText, the original and <badtag> cases display the same as the
link. In the <body> case, the WText (or at least its contents) doesn't
display at all, and in the <badmatch> case, the raw contents of test.html
is displayed -- that is, no formatting, and the comments and markup
tags are displayed.

I'm just wondering how I should model the processing in my mind in
order to understand this behavior in detail. For example <badtag>
seems to be ignored, but <body> causes the contents not to be
displayed, while <badmatch> seems to turn off the html parsing.

(I get the same results with all three of recent versions of chrome,
opera, and ie.)

I should note that there is nothing urgent or problematic about this.
I'm just trying to learn the details of what is going on.

(Also, am I right that to be fully well-formed for a free-standing web
page, the html file should have html, head, and body tags, while
these are technically not legal in an html fragment in a WText?)

Post by Koen Deforche
...
Regards,
koen

Thanks again.


K. Frank