Difference between "Show HTML" and "Webview" in Custom UI

manuguerra

Hello,
I am writing a workflow which creates a Deck html5 presentation out of a markdown file.
In my workflow, I generate the html with absolute links to the required css and js files and put it in a variable.
If I look at the code created using "Show HTML", everything works as expected, the css and js files are loaded and the deck presentation is shown.
If I do the same in a WebView from a Custom UI, it doesn't work, in the sense that the html visualised is plain html, without css or js files loaded.

What's the difference between "Show HTML" and "Webview"? Any way to make my code working in a webview?

Thanks
Maurizio

filippocld223

The "Show HTML" action displays the HTML locally and so it works without an Internet connection
The WebView displays webpages/html files located on the Web and so you must hava an Internet connection

omz

A WebView can also show local HTML, without an internet connection (the Preview panel is essentially a WebView). Could you show how exactly you're trying to load your HTML and what it looks like?

manuguerra

The HTML, stored in the variable html5, is:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
test
</title>
<meta name="description" content="A jQuery library for modern HTML presentations">
<meta name="author" content="Caleb Troughton">
<meta name="viewport" content="width=1024, user-scalable=no">
<!-- Core and extension CSS files -->
<link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/deck.core.css">
<link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/deck.status.css">
<link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/deck.scale.css">
<link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/deck.menu.css">
	
<!-- Style theme. More available in /themes/style/ or create your own. -->
<!--link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/web-2.0.css"-->
<link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/swiss.css">
	
<!-- Transition theme. More available in /themes/transition/ or create your own. -->
<!--link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/horizontal-slide.css"-->
<!--link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/fade.css"-->

<link rel="stylesheet" href="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/css/md_hl.css">
	
<script src="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/js/modernizr.custom.js"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$']], processEscapes: true}});</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>

</head>

<body class="deck-container">

<!-- Begin slides -->
<section class="slide left"><div class="content"><h3>first slide</h3>

<p>In this slide we use mathjax.
$$\alpha$$</p>

</div></section><section class="slide left"><div class="content"><h3>second slide</h3>

<p>This is the second slide text.</p>

</div></section>
<!-- end slides -->
<!-- deck.status snippet -->
<p class="deck-status">
	<span class="deck-status-current"></span>
	/
	<span class="deck-status-total"></span>
</p>

<!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/js/jquery-1.7.2.min.js"><\/script>')</script>

<!-- Deck Core and extensions -->
<script src="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/js/deck.core.js"></script>
<script src="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/js/deck.status.js"></script>
<script src="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/js/deck.scale.js"></script>
<script src="/private/var/mobile/Applications/C6D759C4-CA91-4AC3-B4CF-A71D03FCBC3C/Library/Application Support/Dropbox/js/deck.menu.js"></script>

<!-- Initialize the deck -->
<script>
$(function() {
	$.deck('.slide');
});
</script>

</body>
</html>

Putting the variable html5 in Show HTML the result is a nice deck presentation.
In a custom UI, I have a webview named webview1. Using a "Set UI control value" tool, with View Name: webview1 and value html5, I get a different, "plain", html page. The css and js files are not loaded, I guess. BTW, the "Set UI control value" gets the right value of the variable html5 (I checked with a console output).

Can you find my mistake?

Maurizio

omz

You should probably prefix your stylesheet and script URLs with file://..., e.g. file:///private/var/[...]/deck.core.css.

manuguerra

It works!
Thank you so much for your support.

Editorial 2.0, ehm, 1.1 is fantastic! So many possibilities!

manuguerra

By the way, I am using absolute paths because relative paths do not work for me.
Is this right or am I doing something silly? Is there a particular syntax to make them working?
I have tried to chdir to the current directory, but they do not work anyway.

MartinPacker

For images I'm using ../resource/fred.png and it's working fine. I wonder why CSS wouldn't work the same way (if it doesn't).

manuguerra

Relative paths to images work for me in the built-in preview, but not in a webview.
I have also tried to os.chdir to the directory where the md file is.
What should I do to make them working?

walshmagger

When compared to HTML4, HTML5 aims to be more of an application development platform, which includes not only laying out text and images, but also playing video and audio, interactive 2d and 3d graphics, storing data in the application, dealing with online and offline access to data, and real-time networking protocols for exchanging data as it happens. Both of these are used to in web programming today, although thinking about the future, using HTML5 is suggested.

Walsh