How to properly embed form served by Orbeon Forms in HTML document? - orbeon

I'm new to orbeon Forms and I have trouble to embed form into my PHP application.
I have virtual machine with ubuntu-server 16.04 with installed:
NGINX + PHP application on https://localhost/
Tomcat8 + Orbeon Forms 2016.3 CE serving simple form on https://localhost:8443/orbeon/testapp/form
Now I want to embed my form into my site so in my index.php I do:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>My form:</h1>
<?php
$arrContextOptions=array(
"ssl"=>array(
"verify_peer"=>false,
"verify_peer_name"=>false,
),
);
echo file_get_contents('https://localhost:8443/orbeon/testapp/form?orbeon-embeddable=true', false, stream_context_create($arrContextOptions));
foreach ($http_response_header as $header){
$groups = [];
if (preg_match('/Set\-Cookie: JSESSIONID=(.*?);/i', $header, $groups)){
setcookie('JSESSIONID', $groups[1], 0, '/orbeon/', '', true, true);
break;
}
}
?>
</body>
</html>
and this shows me broken form. What I'm doing wrong?

Embedding is much more difficult than that, unfortunately. There is an old document, Embedding and Proxying Orbeon Forms, which covers some of the things to do.
Orbeon Forms puts this in practice in the Java embedding API, which is implemented in Scala here as of 2017-05.
There is also an outdated TYPO3 extension which you could download for inspiration, as it is implemented in PHP.

Related

How to style input box(use codemirror) of ThebeLab?

I am trying to integrate the ThebeLab javascript library with my web application. Now so far, using their example code, I am able to integrate successfully. ThebeLab uses a Codemirror editor for its input field. And as per ThebeLab's official documentation, we can even customize the Codemirror editor using the configuration settings provided by Codemirror itself.
Now, when I am trying to customize the Codemirror editor using the example provided by ThebeLab, it is not working. It doesn't even throw any kind of error in console either. Even, the example provided by the ThebeLab on their official web page is itself doesn't work.
Now, this issue is already raised and closed on their official GitHub repository. And as per them, the solution is already provided with the newer version(0.5.1) of ThebeLab javascript. And I am also using the newer version which is 0.5.1, but still, it is not working.
This is my code:
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>Thebe Lab examples</title>
<!-- Configure and load Thebe !-->
<script type="text/x-thebe-config">
{
bootstrap: true,
requestKernel: true,
kernelOptions: {
name: "python3",
serverSettings: {
"baseUrl": "http://127.0.0.1:8888",
"token": "test-secret"
}
},
codeMirrorConfig: {
theme: "abcdef"
},
}
</script>
<script type="text/javascript" src="https://unpkg.com/thebelab#latest" ></script>
</head>
<body>
<h1>Thebe Lab: using a local server</h1>
<p>This page illustrates how to setup Thebe Lab, using a local Jupyter server as kernel provider. This assumes that you have started the local server as:
<pre>
jupyter notebook --NotebookApp.token=test-secret --NotebookApp.allow_origin='<span id="origin">*</span>'
</pre>
and that it's running on port 8888
</p>
<pre data-executable="true" data-language="python">print("Hello!")</pre>
<script type="text/javascript">
document.getElementById('origin').innerHTML = location.origin;
</script>
</body>
</html>
Kindly help me out here soon. Thank you.

How to use html templates in electron framework?

I need to build a cross platform app with multiple windows. So I would like to know how to use html templates in electron.
Based on a similar question and what I've seen, there's no built in html template language in Electron, which is actually great because it allows you to use any other template language.
I'm currently playing with ejs in Electron.
Below is my index.ejs template file:
<html lang="en">
<head>
<title>The Index Page</title>
</head>
<body>
<h1>Welcome, this is the Index page.</h1>
<% if (user) { %>
<h3>Hello there <%= user.name %></h3>
<% } %>
</body>
</html>
And below is a section of my main.js file where the above template is rendered and loaded onto the BrowserWindow. Note that I've left out most of the boilerplate code:
const ejs = require('ejs');
//... Other code
let win = new BrowserWindow({width: 800, height: 600});
//... Other code
// send the data and options to the ejs template
let data = {user: {name: "Jeff"}};
let options = {root: __dirname};
ejs.renderFile('index.ejs', data, options, function (err, str) {
if (err) {
console.log(err);
}
// Load the rendered HTML to the BrowserWindow.
win.loadURL('data:text/html;charset=utf-8,' + encodeURI(str));
});
I'll give some credit to this gist for helping me find the data:text/html;charset=utf-8 part of the url that can be used to load dynamic content.
UPDATE
I'm actually not using this anymore. It's faster to just load the default html and use the native DOM methods. The Electron Quickstart program shows how to do this nicely.
Another option is to do the templating during your build. Here is a simple example using gulp to add nonces to the CSP meta tag and the inline script.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'nonce-<%= scriptNonce %>';">
<title>Basic Electron App</title>
</head>
<body>
<div id="app"></div>
<script type="application/javascript" nonce=<%= scriptNonce %>>
require('./index.js');
</script>
</body>
</html>
and in gulfile.js add the following to what you already have and make sure this task is included in your pipeline. You can also just update your current html task with the code below.
const template = require('gulp-template');
const uuidv4 = require('uuid/v4');
gulp.task('copy-html', () => {
// Create nonces during the build and pass them to the template for use with inline scripts and styles
const nonceData = {
scriptNonce: new Buffer(uuidv4()).toString('base64'),
styleNonce: new Buffer(uuidv4()).toString('base64')
};
return gulp.src('src/*.html')
.pipe(template(nonceData))
.pipe(gulp.dest('dist/'));
});
This is a very stripped down example. I have a more complete example at https://github.com/NFabrizio/data-entry-electron-app if anyone is interested, though there is still one warning when running the application because one of the packages I am using pulls in react-beautiful-dnd, which adds inline styles but does not currently accept nonces.

Integrating Activiti Explorer with Ruby on Rails project

I have tried several different methods to accomplish this and none have been successful. Ive tried jruby, the rest api for activiti (this does not update the UI and is thus not suited for my purposes), and the mechanize gem. The mechanize gem did not work because of the VAADIN UI that activiti explorer ships with or so I think. I currently have activiti hosted in an iframe in my rails app, and am trying to find a way to communicate between the two. I used the gem like this:
agent= Mechanize.new
agent.redirection_limit= 10
//page is used three times to illustrate different routes taken.
page= agent.get('http://127.0.0.1:8080/activiti-webapp-explorer2-5.18.0/)
page= agent.post('http://127.0.0.1:8080/activiti-webapp-explorer2-5.18.0/ui/APP/2/login',{'username'=>'kermit', 'password'=>'kermit'} )
page=agent.put('http://127.0.0.1:8080/activiti-webapp-explorer2-5.18.0/ui/1/loginHandler',{'username'=>'kermit', 'password'=>'kermit'})
here is a sample response from activiti explorer when mechanize is used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">html, body {height:100%;margin:0;}</style><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/activiti-webapp-explorer2-5.18.0/VAADIN/themes/activiti/favicon.ico" /><link rel="icon" type="image/vnd.microsoft.icon" href="/activiti-webapp-explorer2-5.18.0/VAADIN/themes/activiti/favicon.ico" /><title>Activiti Explorer</title>
</head>
<body scroll="auto" class="v-generated-body">
<script type="text/javascript">
//<![CDATA[
if(!vaadin || !vaadin.vaadinConfigurations) {
if(!vaadin) { var vaadin = {}}
vaadin.vaadinConfigurations = {};
if (!vaadin.themesLoaded) { vaadin.themesLoaded = {}; }
}
vaadin.vaadinConfigurations["activitiwebappexplorer25180ui-1091631569"] = {appUri:'/activiti-webapp-explorer2-5.18.0/ui', standalone: true, themeUri:"/activiti-webapp-explorer2-5.18.0/VAADIN/themes/activiti", versionInfo : {vaadinVersion:"6.8.8",applicationVersion:"NONVERSIONED"},"comErrMsg": {"caption":"Communication problem","message" : "Take note of any unsaved data, and <u>click here<\/u> to continue.","url" : null},"authErrMsg": {"caption":"Authentication problem","message" : "Take note of any unsaved data, and <u>click here<\/u> to continue.","url" : null}};
//]]>
</script>
<iframe tabIndex='-1' id='__gwt_historyFrame' style='position:absolute;width:0;height:0;border:0;overflow:hidden;' src='javascript:false'></iframe>
<script language='javascript' src='/activiti-webapp-explorer2-5.18.0/VAADIN/widgetsets/org.activiti.explorer.CustomWidgetset/org.activiti.explorer.CustomWidgetset.nocache.js?1444407987049'></script>
<script type="text/javascript">
//<![CDATA[
if(!vaadin.themesLoaded['activiti']) {
var stylesheet = document.createElement('link');
stylesheet.setAttribute('rel', 'stylesheet');
stylesheet.setAttribute('type', 'text/css');
stylesheet.setAttribute('href', '/activiti-webapp-explorer2-5.18.0/VAADIN/themes/activiti/styles.css');
document.getElementsByTagName('head')[0].appendChild(stylesheet);
vaadin.themesLoaded['activiti'] = true;
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
setTimeout('if (typeof org_activiti_explorer_CustomWidgetset == "undefined") {alert("Failed to load the widgetset: /activiti-webapp-explorer2-5.18.0/VAADIN/widgetsets/org.activiti.explorer.CustomWidgetset/org.activiti.explorer.CustomWidgetset.nocache.js?1444407987049")};',15000);
//]]>
</script>
<div id="activitiwebappexplorer25180ui-1091631569" class="v-app v-theme-activiti v-app-ExplorerApp" ><div class="v-app-loading"></div></div>
<noscript>You have to enable javascript in your browser to use an application built with Vaadin.</noscript></body>
</html>
I have tried all of the possible url's I could see on the UI, but none of them work. I have tried all of post, get, and put with each of these three urls .I found these URL's by looking at the loaded page, and noticing that they are nested iframes. Any help in seeing the feasiblity of the mechanize gem would be great, as feel as if this would be an easy fix to my problem. As a side note, I have changed the tomcat properties to allow for CORS requests. Also, http requests from rails to activiti explorer do not work either, so that form of communication is also out.
Also if you are familiar with activiti- I have edited the authenticate method in default login handler to try and parse http requests to get the username and password to login automatically. This however returns the same html code as printed above. Any help would be greatly appreciated. Here is a sample of the http requests I make from rails:
auth = {:userid=> "kermit", :password => "kermit"}
puts HTTParty.get("http://activiti.testing.com:8080/activiti-webapp-explorer2-5.18.0/", :content_type => "application/json",
:basic_auth => auth)
I think integrating Activiti Explorer in iframe is not a good idea. Since your username and password are exposed! And the requirements of the frontend are various.
I like Activiti Explorer at first, Modeler is really awesone! But I use Rails and find it hard to customize and integrate Activiti Explorer later. I tried integrate with Activiti REST, while I prefer Activiti Java API for the following reasons:
Activiti REST is a subset of Activiti Java API. eg: SetProcessDefinitionVersionCmd is not availiable in Activiti REST.
Performance concerns. I develop a task web page, but it needs over 10 http requests.
I like Acitivi Modeler and Diagram Viewer. I need Activiti Explorer running and make them work together.
So I develop a gem named jruby_activiti, integrating Activiti Engine, Modeler and Diagram Viewer. All these are availiable in JRuby on Rails! Hope my experiences could help you.

jQuery UI Autocomplete can't figure it out

I decided to use jQuery UI for my autocomplete opposed to a plugin because I read that the plugins are deprecated. My overall goal is to have an autocomplete search bar that hits my database and returns users suggestions of city/state or zipcodes in a fashion similar to google. As of now I am not even sure that the .autocomplete function is being called. I scratched everything I had and decided to start with the basics. I downloaded the most recent version of jQuery UI from http://jqueryui.com/download and am trying to get the example that they use here http://jqueryui.com/demos/autocomplete/ to work. All the scripts that I have included seem to be connected at least linked through Dreamworks so I am fairly certain that the paths I have included are correct. The CSS and Javascripts that I have included are unaltered straight from the download. Below is my HTML code and my backend PHP code that is returning JSon formated data. Please help me. Maybe I need to include a function that deals with the JSon returned data but I am trying to follow the example although I see that they used a local array.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQueryUI Demo</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" type="text/css" />
<script type="text/javascript" src ="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src ="js/jquery-ui-1.8.17.custom.min.js"></script>
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#tags").autocomplete({
source: "search_me.php"
});
});
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->
</body>
</html>
Below the PHP part.
<?php
include 'fh.inc.db.php';
$db = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD) or
die ('Unable to connect. Check your connection parameters.');
mysql_select_db(MYSQL_DB, $db) or die(mysql_error($db));
$location = htmlspecialchars(trim($_GET['term'])); //gets the location of the search
$return_arr = array();
if(is_numeric($location)) {
$query = "SELECT
zipcode_id
FROM
user_zipcode
WHERE
zipcode_id REGEXP '^$location'
ORDER BY zipcode_id DESC LIMIT 10";
$result = mysql_query($query, $db) or die(mysql_error($db));
while($row = mysql_fetch_assoc($result)) {
extract($row);
$row_array['zipcode_id'] = $zipcode_id;
array_push($return_arr, $row_array);
}
}
mysql_close($db);
echo json_encode($return_arr);
?>
Thanks for the ideas. Here is an update.
I checked the xhr using firebug and made sure that it is responding thanks for that tip. also the above php code I hadn't initialized $return_arr so i took care of that. Also thanks for the clarification of the js required or rather not required. Now when I type in a zipcode a little box about a centimeter shows up underneath it but I can't see if anything is in there, I would guess not. I went to my php page and set it up to manually set the variable to "9408" and loaded the php page directly through my browser to see what it returned. This is what it returned.
[{"zipcode_id":"94089"},{"zipcode_id":"94088"},{"zipcode_id":"94087"},{"zipcode_id":"94086"},{"zipcode_id":"94085"},{"zipcode_id":"94083"},{"zipcode_id":"94080"}]
I then went to a JSON code validator at this url http://jsonformatter.curiousconcept.com/ at it informed me that my code is in fact returning JSON formatted data. Anymore suggestions to help me troubleshoot the problem would be terrific.
Wow after more research I stumbled across the answer on someone another post.
jquery autocomplete not working with JSON data
Pretty much the JSON returned data must contain Label or Value or both. Switched the zipcode_id to value in my $row_array and... boom goes the dynamite!
Your scripts (js files) references are not correct, should only be:
<!-- the jquery library -->
<script type="text/javascript" src ="js/jquery-1.7.1.min.js"></script>
<!-- the full compressed and minified jquery UI library -->
<script type="text/javascript" src ="js/jquery-ui-1.8.17.custom.min.js"></script>
The files "jquery.ui.core.js", "jquery.ui.widget.js" and "jquery.ui.position.js" are the separated development files, the jquery ui library is splitted into modules.
The file "jquery-ui-1.8.17.custom.min.js" contains them all, compressed and minified !
Concerning the data source, as stated in the "Overview" section of the Autocomplete documentation: when using a an URL, it must return json data, either of the form of:
an simple array of strings: ['string1', 'string2', ...]
or an array of objects with label (and a value - optionnal) property [{ label: "My Value 1", Value: "AA" }, ...]
I'm really not familiar with PHP so just make sure your php script returns one of those :-)

Strange extra characters in rendered html on IE 8

I have an ASP.Net MVC site that I want to render some custom HTML 5 canvasses in. I am getting a strange issue with the server serving up extra characters that are not in the source code.
In order to use an HTML 5 canvas in IE 8 you have to add the following tag in the html head:
<!--[if IE]><script src="../../Scripts/excanvas.js"></script><![endif]-->
For some reason this is served up as:
<!--[if IE]>IE]><script src="../../Scripts/excanvas.js"></scr<![endif]-->
Of course the duff markup causes the excanvas script to not be loaded by IE. I can't understand why the line gets garbled. I have the following doctype which is documented at http://www.w3schools.com/html5/tag_doctype.asp:
<!DOCTYPE html>
I'm not familiar with using HTML 5 or the new doctype so I'm suspicious of it. I'm also hosting on Apache with Mono so maybe that's what's garbling the line.
The page in question is at: http://openancestry.org/FamilyTree/Simpsons
Anyone seen this before or know why I cant use the "if IE" syntax?
UPDATE:
Well I'm pretty sure it's either Mono or Apache thats garbling the HTML so I've used the workaround below which adds a compatibility meta tag for IE8 and includes excanvas for any IE that predates IE9.
I'd still appreciate any answers on why the HTML gets garbled.
<% if (Request.Browser.Browser.Contains("IE") && float.Parse(Request.Browser.Version) < 9) { %>
<% if (float.Parse(Request.Browser.Version) > 7) { %>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<% } %>
<script type="text/javascript" src="../../Scripts/excanvas.js"></script>
<% } %>
Before I answer, I want to point out that you are missing type="text/javascript" in your example.
It is possible that the ASP.NET parser in Mono is mangling your comment. What version of Mono are you using (and what platform I suppose).
I just tried this on Mono 2.10 on Mac and did not have this problem.

Resources