<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Blog @ SIB Visions &#187; Fun</title>
	<atom:link href="http://blog.sibvisions.com/category/dev/fun-dev/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.sibvisions.com</link>
	<description>Blog @ SIB Visions</description>
	<lastBuildDate>Mon, 13 Apr 2026 09:47:01 +0000</lastBuildDate>
		<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Alexa, shutter control</title>
		<link>https://blog.sibvisions.com/2017/04/21/alexashuttercontrol/</link>
		<comments>https://blog.sibvisions.com/2017/04/21/alexashuttercontrol/#comments</comments>
		<pubDate>Fri, 21 Apr 2017 12:26:40 +0000</pubDate>
		<dc:creator>rjahn</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Fun]]></category>
		<category><![CDATA[Alexa]]></category>
		<category><![CDATA[Shutter]]></category>

		<guid isPermaLink="false">https://blog.sibvisions.com/?p=6655</guid>
		<description><![CDATA[It's time for some words about my "shutter control" side project. 
My house has electrical roller shutters with remote control units for every window. It was/is possible to close and open the shutters with these remote control units without any problems. But it wasn't possible to open/close them automatically because I don't own a central [...]]]></description>
			<content:encoded><![CDATA[<p>It's time for some words about my "shutter control" side project. </p>
<p>My house has electrical roller shutters with remote control units for every window. It was/is possible to close and open the shutters with these remote control units without any problems. But it wasn't possible to open/close them automatically because I don't own a central control unit. I'm not sure if such a central control unit is available for my "old" receiver modules?<br />
Anyway, I'm a researcher and builder. So I built a central control unit based on a Raspberry Pi. I wrote about it in the past:</p>
<ul>
<li><a href="https://blog.sibvisions.com/2013/01/21/control-your-window-shutters-with-javafx/">Control your window shutters with JavaFX</a></li>
<li><a href="https://blog.sibvisions.com/2015/01/08/iot-window-shutter-control-with-jvx-vaadin-and-raspberrypi/">IoT: Window shutter control with JVx, Vaadin and RaspberryPi</a></li>
<li>(German) <a href="https://blog.sibvisions.com/2013/06/12/rolladen-steuern-mit-pi/">Rolladen steuern mit Pi</a></li>
</ul>
<p>In the meantime, the project got a lux sensor to close the shutter if it's dark outside and it recognizes public holidays for later opening. It's not a good idea to open shutters on public holidays at 6 am <img src='https://blog.sibvisions.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  The whole project is working very stable and it's so useful!</p>
<p>A few months ago, I heard about Google Home and Amazon Echo because both systems offer Voice control. I thought that voice control would be an awesome feature for my shutter control because sometimes it happens that my smartphone or remote control units are not at hand. And voice control is faster than using a smartphone or remote control. The only problem was that Google Home and Amazon Echo weren't available in Austria, not for German language and I didn't find any information about their APIs and whether if it's possible to develop addons. ... Sometimes you have to wait...</p>
<p>Things have changed in the meantime and both devices have APIs but only Amazon Echo is available for German language. I read some test reviews about both devices and Amazon is the pioneer. It supports more 3rd party devices than Home and looks proven. I had no preferences for Echo or Home, but Echo was available. The decision was simple <img src='https://blog.sibvisions.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>I made some simple tests with Echo because I tried to find out if it's really useful to have such a thing at home. And for sure, it is. It works really great and saves time <img src='https://blog.sibvisions.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  It's great as replacement for standard radios or to stream your favourite music. It's also nice to listen to daily news or the weather forecast. A nice feature is the alarm clock!</p>
<p>But enough, it's a nice and useful device which simply works. The idea was voice control of my roller shutters. </p>
<p>Amazon Echo allows developers to create AddOns. Such AddOns are called Skills. It's not trivial but also not complex to create a custom Skill. The getting started is well documented and more <a href="https://developer.amazon.com/alexa">documentation is available online</a>. A developer forum exists and is active enough. It's really no problem to start but some pieces of the puzzle are unclear. I didn't find a detailed technical overview or didn't search long enough. It also was unclear where the Skills will be executed. I thought a skill is like an app and runs directly on the device... This was not the case.</p>
<p>Amazon Echo is a simple client and sends all requests to the amazon cloud. It handles responses but the brain is in the cloud. This means that all your services must be in the cloud. It's not a problem to host your own services in your own infrastrcuture but all your services have to be available via Internet. It's not possible to access a server in your Intranet directly. It's not possible to tweak with custom router configurations or custom dns records. Your services have to be available as cloud services. I found many solutions with service proxies or request forwarding but I didn't like this solutions because my home network is private.</p>
<p>But this was the only limitation and not really a problem because we have technologies like <a href="https://en.wikipedia.org/wiki/MQTT">MQTT</a>. I didn't use MQTT in the past but read a lot about it. The problem was that I didn't have a use-case for it. This was changed with Echo.</p>
<p>I played around with <a href="https://mosquitto.org/">Mosquitto</a> some hours and after TLS with and without user certificates were working, I was ready for connecting my shutter client. I don't write about my Mosquitto configuration here because there are so many good blog entries available in the wild.<br />
It might be interesting that I use <a href="https://www.eclipse.org/paho/">Eclipse paho</a> as Java client library.</p>
<p>Ooh... and <a href="https://gist.github.com/sharonbn/4104301">this utility class</a> was really helpful. It made it possible to communicate secure to my Mosquitto broker. The class didn't support authentication without user certificate and it didn't read from InputStreams, but it was a good starting point. It also didn't work in with my Jetty application server. Here's a snippet of my code:</p>
<div class="codesnip-container" >
<div class="java codesnip" style="font-family:monospace;"><span class="kw1">public</span> <span class="kw1">static</span> SSLSocketFactory getSocketFactory<span class="br0">&#40;</span><span class="kw3">Object</span> pCACrt, <span class="kw3">Object</span> pCrt, <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">Object</span> pKey, <span class="kw3">String</span> pPassword<span class="br0">&#41;</span><br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; <span class="kw1">try</span><br />
&nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Load Certificate Authority (CA) certificate</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; PEMParser reader <span class="sy0">=</span> <span class="kw1">new</span> PEMParser<span class="br0">&#40;</span>createReader<span class="br0">&#40;</span>pCACrt<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; X509CertificateHolder caCertHolder <span class="sy0">=</span> <span class="br0">&#40;</span>X509CertificateHolder<span class="br0">&#41;</span>reader.<span class="me1">readObject</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; reader.<span class="me1">close</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; JcaX509CertificateConverter conv <span class="sy0">=</span> <span class="kw1">new</span> JcaX509CertificateConverter<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">X509Certificate</span> caCert <span class="sy0">=</span> conv.<span class="me1">getCertificate</span><span class="br0">&#40;</span><span class="br0">&#40;</span>X509CertificateHolder<span class="br0">&#41;</span>caCertHolder<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// CA certificate is used to authenticate server</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">KeyStore</span> caKeyStore <span class="sy0">=</span> <span class="kw3">KeyStore</span>.<span class="me1">getInstance</span><span class="br0">&#40;</span><span class="kw3">KeyStore</span>.<span class="me1">getDefaultType</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; caKeyStore.<span class="me1">load</span><span class="br0">&#40;</span><span class="kw2">null</span>, <span class="kw2">null</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; caKeyStore.<span class="me1">setCertificateEntry</span><span class="br0">&#40;</span><span class="st0">&quot;ca-certificate&quot;</span>, caCert<span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; TrustManagerFactory trustManagerFactory <span class="sy0">=</span> TrustManagerFactory.<span class="me1">getInstance</span><span class="br0">&#40;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TrustManagerFactory.<span class="me1">getDefaultAlgorithm</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; trustManagerFactory.<span class="me1">init</span><span class="br0">&#40;</span>caKeyStore<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Create SSL socket factory</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; SSLContext context <span class="sy0">=</span> SSLContext.<span class="me1">getInstance</span><span class="br0">&#40;</span><span class="st0">&quot;TLSv1.2&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>exists<span class="br0">&#40;</span>pCrt<span class="br0">&#41;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Load client certificate</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader <span class="sy0">=</span> <span class="kw1">new</span> PEMParser<span class="br0">&#40;</span>createReader<span class="br0">&#40;</span>pCrt<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; X509CertificateHolder certHolder <span class="sy0">=</span> <span class="br0">&#40;</span>X509CertificateHolder<span class="br0">&#41;</span>reader.<span class="me1">readObject</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.<span class="me1">close</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">X509Certificate</span> cert <span class="sy0">=</span> conv.<span class="me1">getCertificate</span><span class="br0">&#40;</span>certHolder<span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Load client private key</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader <span class="sy0">=</span> <span class="kw1">new</span> PEMParser<span class="br0">&#40;</span>createReader<span class="br0">&#40;</span>pKey<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">Object</span> keyObject <span class="sy0">=</span> reader.<span class="me1">readObject</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.<span class="me1">close</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; PEMDecryptorProvider provider <span class="sy0">=</span> <span class="kw1">new</span> JcePEMDecryptorProviderBuilder<span class="br0">&#40;</span><span class="br0">&#41;</span>.<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="me1">build</span><span class="br0">&#40;</span>pPassword.<span class="me1">toCharArray</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; JcaPEMKeyConverter keyConverter <span class="sy0">=</span> <span class="kw1">new</span> JcaPEMKeyConverter<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="me1">setProvider</span><span class="br0">&#40;</span><span class="st0">&quot;BC&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">KeyPair</span> key<span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>keyObject <span class="kw1">instanceof</span> PEMEncryptedKeyPair<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key <span class="sy0">=</span> keyConverter.<span class="me1">getKeyPair</span><span class="br0">&#40;</span><span class="br0">&#40;</span><span class="br0">&#40;</span>PEMEncryptedKeyPair<span class="br0">&#41;</span>keyObject<span class="br0">&#41;</span>.<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="me1">decryptKeyPair</span><span class="br0">&#40;</span>provider<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">else</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key <span class="sy0">=</span> keyConverter.<span class="me1">getKeyPair</span><span class="br0">&#40;</span><span class="br0">&#40;</span>PEMKeyPair<span class="br0">&#41;</span>keyObject<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Client key and certificates are sent to server so it can authenticate </span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// the client</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">KeyStore</span> clientKeyStore <span class="sy0">=</span> <span class="kw3">KeyStore</span>.<span class="me1">getInstance</span><span class="br0">&#40;</span><span class="kw3">KeyStore</span>.<span class="me1">getDefaultType</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clientKeyStore.<span class="me1">load</span><span class="br0">&#40;</span><span class="kw2">null</span>, <span class="kw2">null</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clientKeyStore.<span class="me1">setCertificateEntry</span><span class="br0">&#40;</span><span class="st0">&quot;certificate&quot;</span>, cert<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clientKeyStore.<span class="me1">setKeyEntry</span><span class="br0">&#40;</span><span class="st0">&quot;private-key&quot;</span>, key.<span class="me1">getPrivate</span><span class="br0">&#40;</span><span class="br0">&#41;</span>, <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pPassword.<span class="me1">toCharArray</span><span class="br0">&#40;</span><span class="br0">&#41;</span>, <span class="kw1">new</span> <span class="kw3">Certificate</span><span class="br0">&#91;</span><span class="br0">&#93;</span> <span class="br0">&#123;</span> cert <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; KeyManagerFactory keyManagerFactory <span class="sy0">=</span> KeyManagerFactory.<span class="me1">getInstance</span><span class="br0">&#40;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; KeyManagerFactory.<span class="me1">getDefaultAlgorithm</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; keyManagerFactory.<span class="me1">init</span><span class="br0">&#40;</span>clientKeyStore, pPassword.<span class="me1">toCharArray</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; context.<span class="me1">init</span><span class="br0">&#40;</span>keyManagerFactory.<span class="me1">getKeyManagers</span><span class="br0">&#40;</span><span class="br0">&#41;</span>, <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trustManagerFactory.<span class="me1">getTrustManagers</span><span class="br0">&#40;</span><span class="br0">&#41;</span>, <span class="kw2">null</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">else</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; context.<span class="me1">init</span><span class="br0">&#40;</span><span class="kw2">null</span>, trustManagerFactory.<span class="me1">getTrustManagers</span><span class="br0">&#40;</span><span class="br0">&#41;</span>, <span class="kw2">null</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">return</span> context.<span class="me1">getSocketFactory</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; <span class="kw1">catch</span> <span class="br0">&#40;</span><span class="kw3">Exception</span> e<span class="br0">&#41;</span><br />
&nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">throw</span> <span class="kw1">new</span> <span class="kw3">RuntimeException</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></div>
</div>
<p>So, the communication via MQTT was configured and ready to use. The next step was the creation of a Skill. Echo supports using external services via https. The Skills-API comes with a special Servlet, the SpeechletServlet. You have to extend this servlet for every service. This creates boilerplate code because the servlet does nothing special. It usually configures the Speechlet. A Speechlet is more or less the main class for your service. So I decided to create a generic Servlet:</p>
<div class="codesnip-container" >
<div class="java codesnip" style="font-family:monospace;"><span class="kw1">public</span> <span class="kw1">class</span> GenericServlet <span class="kw1">extends</span> SpeechletServlet<br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; <span class="kw1">public</span> <span class="kw4">void</span> init<span class="br0">&#40;</span>ServletConfig pConfig<span class="br0">&#41;</span> <span class="kw1">throws</span> ServletException<br />
&nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">String</span> sSpeechlet <span class="sy0">=</span> pConfig.<span class="me1">getInitParameter</span><span class="br0">&#40;</span><span class="st0">&quot;speechlet&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">try</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Class<span class="sy0">&lt;?&gt;</span> clazz <span class="sy0">=</span> <span class="kw1">Class</span>.<span class="me1">forName</span><span class="br0">&#40;</span>sSpeechlet<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">Object</span> obj <span class="sy0">=</span> clazz.<span class="me1">newInstance</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>obj <span class="kw1">instanceof</span> Speechlet<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setSpeechlet<span class="br0">&#40;</span><span class="br0">&#40;</span>Speechlet<span class="br0">&#41;</span>obj<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">else</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setSpeechlet<span class="br0">&#40;</span><span class="br0">&#40;</span>SpeechletV2<span class="br0">&#41;</span>obj<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">catch</span> <span class="br0">&#40;</span><span class="kw3">Exception</span> e<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">throw</span> <span class="kw1">new</span> ServletException<span class="br0">&#40;</span><span class="st0">&quot;Can't init speechlet, e&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">super</span>.<span class="me1">init</span><span class="br0">&#40;</span>pConfig<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <span class="br0">&#125;</span></p>
<p><span class="br0">&#125;</span> &nbsp; <span class="co1">// GenericServlet</span></div>
</div>
<p>Simple configuration in web.xml and no additional servlets needed:</p>
<div class="codesnip-container" >
<div class="xml codesnip" style="font-family:monospace;"><span class="sc3"><span class="re1">&lt;servlet<span class="re2">&gt;</span></span></span><br />
&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;servlet-name<span class="re2">&gt;</span></span></span>ShutterService<span class="sc3"><span class="re1">&lt;/servlet-name<span class="re2">&gt;</span></span></span><br />
&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;servlet-class<span class="re2">&gt;</span></span></span>com.sibvisions.alexa.services.GenericServlet<span class="sc3"><span class="re1">&lt;/servlet-class<span class="re2">&gt;</span></span></span></p>
<p>&nbsp; <span class="sc3"><span class="re1">&lt;init-param<span class="re2">&gt;</span></span></span><br />
&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;param-name<span class="re2">&gt;</span></span></span>speechlet<span class="sc3"><span class="re1">&lt;/param-name<span class="re2">&gt;</span></span></span><br />
&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;param-value<span class="re2">&gt;</span></span></span>com.sibvisions.alexa.services.shutter.ShutterSpeechlet<span class="sc3"><span class="re1">&lt;/param-value<span class="re2">&gt;</span></span></span><br />
&nbsp; <span class="sc3"><span class="re1">&lt;/init-param<span class="re2">&gt;</span></span></span><br />
<span class="sc3"><span class="re1">&lt;/servlet<span class="re2">&gt;</span></span></span></div>
</div>
<p>The Skill itself doesn't need source code. Amazon offers a web UI for the configuration and a simple test tool. The creation was straight forward and I simply followed an example from the Skills-API package. One tricky step was the certificate configuration, but Amazon supports self-signed certificates and wildcard certificates without problems. So, the Skill creation was done very fast because everything was done online without coding.</p>
<p>The custom service creation wasn't very difficult because the API is really simple and doesn't need more than implementing 4 interface methods:</p>
<div class="codesnip-container" >
<div class="java codesnip" style="font-family:monospace;">@Override<br />
<span class="kw1">public</span> <span class="kw4">void</span> onSessionStarted<span class="br0">&#40;</span>SessionStartedRequest pRequest, Session pSession<span class="br0">&#41;</span> <span class="kw1">throws</span> SpeechletException<br />
<span class="br0">&#123;</span><br />
<span class="br0">&#125;</span></p>
<p>@Override<br />
<span class="kw1">public</span> <span class="kw4">void</span> onSessionEnded<span class="br0">&#40;</span>SessionEndedRequest pRequest, Session pSession<span class="br0">&#41;</span> <span class="kw1">throws</span> SpeechletException<br />
<span class="br0">&#123;</span><br />
<span class="br0">&#125;</span></p>
<p>@Override<br />
<span class="kw1">public</span> SpeechletResponse onIntent<span class="br0">&#40;</span>IntentRequest pRequest, Session pSession<span class="br0">&#41;</span> <span class="kw1">throws</span> SpeechletException<br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; Intent intent <span class="sy0">=</span> pRequest.<span class="me1">getIntent</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="kw3">String</span> intentName <span class="sy0">=</span> <span class="br0">&#40;</span>intent <span class="sy0">!=</span> <span class="kw2">null</span><span class="br0">&#41;</span> <span class="sy0">?</span> intent.<span class="me1">getName</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; TranslationMap tmap <span class="sy0">=</span> getTranslation<span class="br0">&#40;</span>pRequest<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="st0">&quot;DownIntent&quot;</span>.<span class="me1">equals</span><span class="br0">&#40;</span>intentName<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">||</span> <span class="st0">&quot;UpIntent&quot;</span>.<span class="me1">equals</span><span class="br0">&#40;</span>intentName<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sy0">||</span> <span class="st0">&quot;HaltIntent&quot;</span>.<span class="me1">equals</span><span class="br0">&#40;</span>intentName<span class="br0">&#41;</span><span class="br0">&#41;</span> <br />
&nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">String</span> sText<span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">try</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="st0">&quot;DownIntent&quot;</span>.<span class="me1">equals</span><span class="br0">&#40;</span>intentName<span class="br0">&#41;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; client.<span class="me1">down</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sText <span class="sy0">=</span> <span class="st0">&quot;The shutters are moving down!&quot;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span><span class="st0">&quot;UpIntent&quot;</span>.<span class="me1">equals</span><span class="br0">&#40;</span>intentName<span class="br0">&#41;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; client.<span class="me1">up</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sText <span class="sy0">=</span> <span class="st0">&quot;The shutters are moving up!&quot;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">else</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; client.<span class="me1">halt</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sText <span class="sy0">=</span> <span class="st0">&quot;The shutters are stopping!&quot;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">catch</span> <span class="br0">&#40;</span><span class="kw3">Exception</span> e<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sText <span class="sy0">=</span> <span class="st0">&quot;Shutter control not possible!&quot;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; sText <span class="sy0">=</span> tmap.<span class="me1">translate</span><span class="br0">&#40;</span>sText<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Create the Simple card content.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; SimpleCard card <span class="sy0">=</span> <span class="kw1">new</span> SimpleCard<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; card.<span class="me1">setTitle</span><span class="br0">&#40;</span>tmap.<span class="me1">translate</span><span class="br0">&#40;</span><span class="st0">&quot;Shutter control&quot;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; card.<span class="me1">setContent</span><span class="br0">&#40;</span>sText<span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">// Create the plain text output.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; PlainTextOutputSpeech speech <span class="sy0">=</span> <span class="kw1">new</span> PlainTextOutputSpeech<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; speech.<span class="me1">setText</span><span class="br0">&#40;</span>sText<span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">return</span> SpeechletResponse.<span class="me1">newTellResponse</span><span class="br0">&#40;</span>speech, card<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <span class="br0">&#125;</span> <br />
&nbsp; &nbsp; <span class="kw1">else</span> <br />
&nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">throw</span> <span class="kw1">new</span> SpeechletException<span class="br0">&#40;</span>tmap.<span class="me1">translate</span><span class="br0">&#40;</span><span class="st0">&quot;Invalid intent!&quot;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span></p>
<p>@Override<br />
<span class="kw1">public</span> SpeechletResponse onLaunch<span class="br0">&#40;</span>LaunchRequest pRequest, Session pSession<span class="br0">&#41;</span> <span class="kw1">throws</span> SpeechletException<br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; TranslationMap tmap <span class="sy0">=</span> getTranslation<span class="br0">&#40;</span>pRequest<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="kw3">String</span> sText <span class="sy0">=</span> tmap.<span class="me1">translate</span><span class="br0">&#40;</span><span class="st0">&quot;Here we go!&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="co1">// Create the Simple card content.</span><br />
&nbsp; &nbsp; SimpleCard card <span class="sy0">=</span> <span class="kw1">new</span> SimpleCard<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; card.<span class="me1">setTitle</span><span class="br0">&#40;</span>tmap.<span class="me1">translate</span><span class="br0">&#40;</span><span class="st0">&quot;Shutter control&quot;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; card.<span class="me1">setContent</span><span class="br0">&#40;</span>sText<span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; <span class="co1">// Create the plain text output.</span><br />
&nbsp; &nbsp; PlainTextOutputSpeech speech <span class="sy0">=</span> <span class="kw1">new</span> PlainTextOutputSpeech<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; speech.<span class="me1">setText</span><span class="br0">&#40;</span>sText<span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; PlainTextOutputSpeech repromptSpeech <span class="sy0">=</span> <span class="kw1">new</span> PlainTextOutputSpeech<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; repromptSpeech.<span class="me1">setText</span><span class="br0">&#40;</span>tmap.<span class="me1">translate</span><span class="br0">&#40;</span><span class="st0">&quot;Tell me the direction!&quot;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; Reprompt reprompt <span class="sy0">=</span> <span class="kw1">new</span> Reprompt<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; reprompt.<span class="me1">setOutputSpeech</span><span class="br0">&#40;</span>repromptSpeech<span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; <span class="kw1">return</span> SpeechletResponse.<span class="me1">newAskResponse</span><span class="br0">&#40;</span>speech, reprompt, card<span class="br0">&#41;</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></div>
</div>
<p>It's also possible to use Amazons infrastructure for your services, but I have my own application server.</p>
<p>After some days, my roller shutters were controlled by Amazon Echo aka Alexa with voice commands. It was really cool and simple!</p>
<p>Here's a demonstration of the result (it's in German):</p>
<p><center><div class="wp-caption aligncenter nomargin" style="width: 570px"><iframe width="560" height="315" src="https://www.youtube.com/embed/xrjjmQdsCeI" frameborder="0" allowfullscreen></iframe><p class="wp-caption-text">Alexa in action</p></div></center></p>
<p>I can only recommend this device!</p>
]]></content:encoded>
			<wfw:commentRss>https://blog.sibvisions.com/2017/04/21/alexashuttercontrol/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Using Oracle JET with VisionX/JVx</title>
		<link>https://blog.sibvisions.com/2016/02/29/using-oracle-jet-with-visionxjvx/</link>
		<comments>https://blog.sibvisions.com/2016/02/29/using-oracle-jet-with-visionxjvx/#comments</comments>
		<pubDate>Mon, 29 Feb 2016 14:00:37 +0000</pubDate>
		<dc:creator>rjahn</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Fun]]></category>
		<category><![CDATA[JET]]></category>
		<category><![CDATA[VisionX]]></category>

		<guid isPermaLink="false">http://blog.sibvisions.com/?p=5481</guid>
		<description><![CDATA[The shiny new technology from Oracle is JET (Javascript Extension Toolkit). It's a really interesting thing because it bundles relevant technologies like jQuery, jQuery UI, Knockout, Require, Hammer, ...
You don't need know-how for every used technology, only JET is enough. This is a nice and new approach in the JS world. A possible problem with [...]]]></description>
			<content:encoded><![CDATA[<p>The shiny new technology from Oracle is <a href="http://www.oraclejet.org">JET</a> (Javascript Extension Toolkit). It's a really interesting thing because it bundles relevant technologies like jQuery, jQuery UI, Knockout, Require, Hammer, ...</p>
<p>You don't need know-how for every used technology, only JET is enough. This is a nice and new approach in the JS world. A possible problem with such an approach could be the update of single libraries, but this isn't your problem because Oracle has to maintain the right versions and bugfixes in JET. So it's not our problem <img src='https://blog.sibvisions.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>I'm not a big fan of Javascript libraries/technologies but from time to time I like to play around with such things and proof the interaction with <a href="https://jvx.sibvisions.com">JVx</a>. Some time ago my new friend was <a href="http://blog.sibvisions.com/2015/06/15/angularjs-with-jvx-in-action/">AngularJS</a>.</p>
<p>This time, I tried to work with Oracle JET. </p>
<p><em>The use-case was trivial</em>: I'd like to visualize a list of contacts as simple table. The contacts are available as REST service. The REST service needs basic authentication.</p>
<p><strong>Foreword</strong>: JET has much documentation and some useful examples, but it's inconsistent because the documentation shows different solutions for the same problem and you don't know which is best or recommended. And the examples are sometimes too complex. The start with existing examples is simple but if you start coding, it's not so simple. But this is a documentation problem and has nothing to do with the product itself. I prefer source code to find out how things work and this procedure worked without problems for JET.</p>
<p><strong>Foreword 2</strong>: I couldn't find a description for Basic authentication. Not in the forum, not in the documentation and not in different blog posts. But I found many questions regarding Basic authentication. I found a solution for the problem but if someone has a better solution, please add a comment. My solution is more or less not API compliant - but works with JET version 1.1.2 and hopefully with newer versions as well.</p>
<p><strong>Conditions</strong></p>
<p>I've used our <a href="http://visionx.sibvisions.com">VisionX tool</a> and the Contacts demo application for this example because VisionX has an embedded tomcat and REST access is pre-configured. It's not tricky to use any other simple JVx application but it requires more work because you need an application server and a deployed application.</p>
<p>The <a href="http://www.sibvisions.com/en/java-developer/123-visionx-trial">Trial version of VisionX</a> is a good start. Before I show you the source code, I'll show you the result:</p>
<div id="attachment_5485" class="wp-caption aligncenter nomargin" style="width: 529px"><a href="http://blog.sibvisions.com/wp-content/uploads/2016/02/jet_contacts.png" rel="lightbox[5481]"><img src="http://blog.sibvisions.com/wp-content/uploads/2016/02/jet_contacts.png" alt="Contacts table" title="jet_contacts" width="519" height="454" class="size-full wp-image-5485" /></a><p class="wp-caption-text">Contacts table</p></div>
<p>You're right, this isn't rocket science. But it's not hard to add more columns and some css.</p>
<p>What about the source code?</p>
<p>We have one html page, <strong>index.html</strong>:</p>
<div class="codesnip-container" >
<div class="html4strict codesnip" style="font-family:monospace;"><span class="sc0">&lt;!DOCTYPE html&gt;</span></p>
<p><span class="sc2">&lt;<a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a>&gt;</span><br />
&nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/head.html"><span class="kw2">head</span></a>&gt;</span><br />
&nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/title.html"><span class="kw2">title</span></a>&gt;</span>JET with VisionX/JVx<span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/title.html"><span class="kw2">title</span></a>&gt;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/meta.html"><span class="kw2">meta</span></a> <span class="kw3">charset</span><span class="sy0">=</span><span class="st0">&quot;UTF-8&quot;</span>&gt;</span><br />
&nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/meta.html"><span class="kw2">meta</span></a> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">&quot;viewport&quot;</span> <span class="kw3">content</span><span class="sy0">=</span><span class="st0">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</span><br />
&nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/link.html"><span class="kw2">link</span></a> <span class="kw3">rel</span><span class="sy0">=</span><span class="st0">&quot;icon&quot;</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;css/images/favicon.ico&quot;</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;image/x-icon&quot;</span> <span class="sy0">/</span>&gt;</span></p>
<p>&nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/link.html"><span class="kw2">link</span></a> <span class="kw3">rel</span><span class="sy0">=</span><span class="st0">&quot;stylesheet&quot;</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;css/libs/oj/v1.1.2/alta/oj-alta-min.css&quot;</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text/css&quot;</span><span class="sy0">/</span>&gt;</span><br />
&nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/link.html"><span class="kw2">link</span></a> <span class="kw3">rel</span><span class="sy0">=</span><span class="st0">&quot;stylesheet&quot;</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;css/demo-alta-patterns-min.css&quot;</span><span class="sy0">/</span>&gt;</span><br />
&nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/link.html"><span class="kw2">link</span></a> <span class="kw3">rel</span><span class="sy0">=</span><span class="st0">&quot;stylesheet&quot;</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;css/override.css&quot;</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text/css&quot;</span><span class="sy0">/</span>&gt;</span></p>
<p>&nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/script.html"><span class="kw2">script</span></a> data-main<span class="sy0">=</span><span class="st0">&quot;js/main&quot;</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;js/libs/require/require.js&quot;</span>&gt;&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/script.html"><span class="kw2">script</span></a>&gt;</span><br />
&nbsp; <span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/head.html"><span class="kw2">head</span></a>&gt;</span><br />
&nbsp; <br />
&nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a>&gt;</span><br />
&nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/br.html"><span class="kw2">br</span></a><span class="sy0">/</span>&gt;</span><br />
&nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/div.html"><span class="kw2">div</span></a> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;mainContent&quot;</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;oj-md-12 oj-col page-padding&quot;</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/div.html"><span class="kw2">div</span></a> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;demo-page-content-area page-padding&quot;</span>&gt;</span> &nbsp;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/h1.html"><span class="kw2">h1</span></a>&gt;</span>Contacts via VisionX<span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/h1.html"><span class="kw2">h1</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/br.html"><span class="kw2">br</span></a><span class="sy0">/</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<a href="http://december.com/html/4/element/table.html"><span class="kw2">table</span></a> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;table&quot;</span> </span><br />
<span class="sc2"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-bind<span class="sy0">=</span><span class="st0">&quot;ojComponent: {component: 'ojTable', </span><br />
<span class="sc2"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data: dataSource, </span><br />
<span class="sc2"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;columns: [{headerText: '#', </span><br />
<span class="sc2"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; field: 'ID', sortable: 'enabled'},</span><br />
<span class="sc2"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{headerText: 'First name', </span><br />
<span class="sc2"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; field: 'FIRSTNAME', sortable: 'enabled'},</span><br />
<span class="sc2"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{headerText: 'Last name', </span><br />
<span class="sc2"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; field: 'LASTNAME'}]}&quot;</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/table.html"><span class="kw2">table</span></a>&gt;</span> <br />
&nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/div.html"><span class="kw2">div</span></a>&gt;</span><br />
&nbsp; &nbsp; <span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/div.html"><span class="kw2">div</span></a>&gt;</span> &nbsp; &nbsp;<br />
&nbsp; <span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a>&gt;</span><br />
<span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a>&gt;</span></div>
</div>
<p>We need two javascript files, <strong>main.js</strong>:</p>
<div class="codesnip-container" >
<div class="javascript codesnip" style="font-family:monospace;">requirejs.<span class="me1">config</span><span class="br0">&#40;</span><span class="br0">&#123;</span><br />
&nbsp; &nbsp; paths<span class="sy0">:</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="st0">'knockout'</span><span class="sy0">:</span> <span class="st0">'libs/knockout/knockout-3.3.0'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="st0">'jquery'</span><span class="sy0">:</span> <span class="st0">'libs/jquery/jquery-2.1.3.min'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="st0">'jqueryui-amd'</span><span class="sy0">:</span> <span class="st0">'libs/jquery/jqueryui-amd-1.11.4.min'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="st0">'promise'</span><span class="sy0">:</span> <span class="st0">'libs/es6-promise/promise-1.0.0.min'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="st0">'hammerjs'</span><span class="sy0">:</span> <span class="st0">'libs/hammer/hammer-2.0.4.min'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="st0">'ojdnd'</span><span class="sy0">:</span> <span class="st0">'libs/dnd-polyfill/dnd-polyfill-1.0.0.min'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="st0">'ojs'</span><span class="sy0">:</span> <span class="st0">'libs/oj/v1.1.2/min'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="st0">'ojL10n'</span><span class="sy0">:</span> <span class="st0">'libs/oj/v1.1.2/ojL10n'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="st0">'ojtranslations'</span><span class="sy0">:</span> <span class="st0">'libs/oj/v1.1.2/resources'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="st0">'signals'</span><span class="sy0">:</span> <span class="st0">'libs/js-signals/signals.min'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="st0">'text'</span><span class="sy0">:</span> <span class="st0">'libs/require/text'</span><br />
&nbsp; &nbsp; <span class="br0">&#125;</span><span class="sy0">,</span><br />
&nbsp; &nbsp; shim<span class="sy0">:</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="st0">'jquery'</span><span class="sy0">:</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; exports<span class="sy0">:</span> <span class="br0">&#91;</span><span class="st0">'jQuery'</span><span class="sy0">,</span> <span class="st0">'$'</span><span class="br0">&#93;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="st0">'crossroads'</span><span class="sy0">:</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; deps<span class="sy0">:</span> <span class="br0">&#91;</span><span class="st0">'signals'</span><span class="br0">&#93;</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; exports<span class="sy0">:</span> <span class="st0">'crossroads'</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; <span class="br0">&#125;</span><span class="sy0">,</span><br />
&nbsp; &nbsp; config<span class="sy0">:</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; ojL10n<span class="sy0">:</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; merge<span class="sy0">:</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">//'ojtranslations/nls/ojtranslations': 'resources/nls/menu'</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>require<span class="br0">&#40;</span><span class="br0">&#91;</span><span class="st0">'ojs/ojcore'</span><span class="sy0">,</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="st0">'knockout'</span><span class="sy0">,</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="st0">'jquery'</span><span class="sy0">,</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="st0">'app'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="st0">'ojs/ojknockout'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="st0">'ojs/ojknockout-model'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="st0">'ojs/ojdialog'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="st0">'ojs/ojinputtext'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="st0">'ojs/ojinputnumber'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="st0">'ojs/ojbutton'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="st0">'ojs/ojtable'</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="st0">'ojs/ojdatacollection-common'</span><span class="br0">&#93;</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">function</span><span class="br0">&#40;</span>oj<span class="sy0">,</span> ko<span class="sy0">,</span> $<span class="sy0">,</span> app<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> vm <span class="sy0">=</span> <span class="kw2">new</span> app.<span class="me1">contactsVM</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $<span class="br0">&#40;</span>document<span class="br0">&#41;</span>.<span class="me1">ready</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ko.<span class="me1">applyBindings</span><span class="br0">&#40;</span>vm<span class="sy0">,</span> document.<span class="me1">getElementById</span><span class="br0">&#40;</span><span class="st0">'mainContent'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">//Show the content div after the REST call is completed.</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $<span class="br0">&#40;</span><span class="st0">'#mainContent'</span><span class="br0">&#41;</span>.<span class="me1">show</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div>
</div>
<p>and <strong>app.js</strong></p>
<div class="codesnip-container" >
<div class="javascript codesnip" style="font-family:monospace;">define<span class="br0">&#40;</span><span class="br0">&#91;</span><span class="st0">'ojs/ojcore'</span><span class="sy0">,</span> <span class="st0">'knockout'</span><span class="sy0">,</span> <span class="st0">'ojs/ojmodel'</span><span class="br0">&#93;</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp;<span class="kw2">function</span><span class="br0">&#40;</span>oj<span class="sy0">,</span> ko<span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp;<span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="kw2">function</span> viewModel<span class="br0">&#40;</span><span class="br0">&#41;</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> self <span class="sy0">=</span> <span class="kw1">this</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; self.<span class="me1">serviceURL</span> <span class="sy0">=</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="st0">'http://localhost/services/rest/vxdemo/ContactsWorkScreen/data/contacts'</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; self.<span class="me1">dataSource</span> <span class="sy0">=</span> ko.<span class="me1">observable</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; self.<span class="me1">ContactsCollection</span> <span class="sy0">=</span> ko.<span class="me1">observable</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; self.<span class="me1">myBasicAuth</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span><span class="br0">&#125;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; self.<span class="me1">myBasicAuth</span>.<span class="me1">prototype</span>.<span class="me1">getHeader</span> <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> headers <span class="sy0">=</span> <span class="br0">&#123;</span><span class="br0">&#125;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headers<span class="br0">&#91;</span><span class="st0">'Authorization'</span><span class="br0">&#93;</span> <span class="sy0">=</span> <span class="st0">'Basic '</span> <span class="sy0">+</span> btoa<span class="br0">&#40;</span><span class="st0">&quot;admin:admin&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">return</span> headers<span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; parseContact <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>response<span class="br0">&#41;</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">return</span> <span class="br0">&#123;</span>ID<span class="sy0">:</span> response<span class="br0">&#91;</span><span class="st0">'ID'</span><span class="br0">&#93;</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; FIRSTNAME<span class="sy0">:</span> response<span class="br0">&#91;</span><span class="st0">'FIRSTNAME'</span><span class="br0">&#93;</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; LASTNAME<span class="sy0">:</span>response<span class="br0">&#91;</span><span class="st0">'LASTNAME'</span><span class="br0">&#93;</span><span class="br0">&#125;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> Contact <span class="sy0">=</span> oj.<span class="me1">Model</span>.<span class="me1">extend</span><span class="br0">&#40;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; urlRoot<span class="sy0">:</span> self.<span class="me1">serviceURL</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; parse<span class="sy0">:</span> parseContact<span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; idAttribute<span class="sy0">:</span> <span class="st0">'ID'</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> myContact <span class="sy0">=</span> <span class="kw2">new</span> Contact<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> ContactsCollection <span class="sy0">=</span> oj.<span class="me1">Collection</span>.<span class="me1">extend</span><span class="br0">&#40;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url<span class="sy0">:</span> self.<span class="me1">serviceURL</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; model<span class="sy0">:</span> myContact<span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oauth<span class="sy0">:</span> <span class="kw2">new</span> self.<span class="me1">myBasicAuth</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; comparator<span class="sy0">:</span> <span class="st0">&quot;ID&quot;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; self.<span class="me1">ContactsCollection</span><span class="br0">&#40;</span><span class="kw2">new</span> ContactsCollection<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">//simple Request test</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">//self.ContactsCollection().fetch({headers: {&quot;Authorization&quot;: 'Basic ' + btoa(&quot;admin:admin&quot;)}});</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; self.<span class="me1">dataSource</span><span class="br0">&#40;</span><span class="kw2">new</span> oj.<span class="me1">CollectionTableDataSource</span><span class="br0">&#40;</span>self.<span class="me1">ContactsCollection</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span> &nbsp; &nbsp; &nbsp;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="br0">&#125;</span></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="kw1">return</span> <span class="br0">&#123;</span><span class="st0">'contactsVM'</span><span class="sy0">:</span> viewModel<span class="br0">&#125;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; <span class="br0">&#41;</span><span class="sy0">;</span></div>
</div>
<p>Above files are not enough to run the example because you need a full JET application. You can download a JET application from the <a href="http://docs.oracle.com/middleware/jet112/jet/">official site</a> (-> Getting started with Oracle JET -> Downloading Oracle JET). The QuickStart template works well. Unzip the application into the directory: &lt;VisionX_folder&gt;/rad/apps/visionx/WebContent/ojet (ojet must be created manually). Simply copy the example files in the ojet, ojet/js folder.<br />
Open the browser and navigate to: <em>http://localhost/ojet/</em></p>
<p>My source code is small and simple but I don't know if it could be optimized. The <a href="https://docs.oracle.com/middleware/jet112/jet/developer/GUID-0C0D187C-CDCB-4235-ADA8-7AE9D93FFA08.htm#JETDG173">official CRUD example</a> application has more features and doesn't connect to a real REST service.<br />
It wasn't funny to use/read the example because it's much for such a simple use-case. I found a similar but <a href="http://andrejusb.blogspot.co.at/2015/11/oracle-jet-rendering-table-from-adf-bc.html">inofficial example</a>. This was nice but didn't solve the Basic authentication problem!</p>
<p>Long story, short:</p>
<p>I found no option for Basic authentication and no documentation, but found that <a href="http://docs.oracle.com/middleware/jet112/jet/developer/GUID-2FB7E441-6F2B-4382-8D28-F631891DDBDD.htm#JETDG464">OAuth</a> is supported. Not the same as Basic authentication but something I could search in the source code. The <a href="http://www.oracle.com/webfolder/technetwork/jet/jsdocs/a83bb037c4.html">Model file</a> was the right place to search (-> oauth).</p>
<p>And my simple solution for Basic authentication was:</p>
<div class="codesnip-container" >
<div class="javascript codesnip" style="font-family:monospace;">self.<span class="me1">myBasicAuth</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span><span class="br0">&#125;</span><span class="sy0">;</span><br />
self.<span class="me1">myBasicAuth</span>.<span class="me1">prototype</span>.<span class="me1">getHeader</span> <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span><br />
<span class="br0">&#123;</span><br />
&nbsp; <span class="kw2">var</span> headers <span class="sy0">=</span> <span class="br0">&#123;</span><span class="br0">&#125;</span><span class="sy0">;</span><br />
&nbsp; headers<span class="br0">&#91;</span><span class="st0">'Authorization'</span><span class="br0">&#93;</span> <span class="sy0">=</span> <span class="st0">'Basic '</span> <span class="sy0">+</span> btoa<span class="br0">&#40;</span><span class="st0">&quot;admin:admin&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; <span class="kw1">return</span> headers<span class="sy0">;</span><br />
<span class="br0">&#125;</span><span class="sy0">;</span></div>
</div>
<p>Username and password are hardcoded, but it's easy to replace the code with a better solution.</p>
<p>The "authenticator" will be set as oauth property:</p>
<div class="codesnip-container" >
<div class="javascript codesnip" style="font-family:monospace;"><span class="kw2">var</span> ContactsCollection <span class="sy0">=</span> oj.<span class="me1">Collection</span>.<span class="me1">extend</span><span class="br0">&#40;</span><br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; url<span class="sy0">:</span> self.<span class="me1">serviceURL</span><span class="sy0">,</span><br />
&nbsp; &nbsp; model<span class="sy0">:</span> myContact<span class="sy0">,</span><br />
&nbsp; &nbsp; oauth<span class="sy0">:</span> <span class="kw2">new</span> self.<span class="me1">myBasicAuth</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">,</span><br />
&nbsp; &nbsp; comparator<span class="sy0">:</span> <span class="st0">&quot;ID&quot;</span><br />
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div>
</div>
<p>The problem with this API is that it's not guaranteed that the getHeader method will be used in future releases. And it's also not perfect to use oauth for Basic authentication, but whatever.</p>
<p>Our example runs with VisionX' embedded tomcat. If you want to test with your own application server, you should enable CORS for VisionX to use the REST services from an external server:</p>
<p>To enable CORS, change the web.xml in &lt;VisionX_folder&gt;/conf/ and add </p>
<div class="codesnip-container" >
<div class="xml codesnip" style="font-family:monospace;"><span class="sc3"><span class="re1">&lt;init-param<span class="re2">&gt;</span></span></span><br />
&nbsp; <span class="sc3"><span class="re1">&lt;param-name<span class="re2">&gt;</span></span></span>cors.origin<span class="sc3"><span class="re1">&lt;/param-name<span class="re2">&gt;</span></span></span><br />
&nbsp; <span class="sc3"><span class="re1">&lt;param-value<span class="re2">&gt;</span></span></span>http://localhost:8080<span class="sc3"><span class="re1">&lt;/param-value<span class="re2">&gt;</span></span></span><br />
<span class="sc3"><span class="re1">&lt;/init-param<span class="re2">&gt;</span></span></span></div>
</div>
<p>to <em>RestletServlet</em> definition.</p>
<p><a href="http://blog.sibvisions.com/wp-content/uploads/2016/02/ojet.zip">Example Download</a></p>
]]></content:encoded>
			<wfw:commentRss>https://blog.sibvisions.com/2016/02/29/using-oracle-jet-with-visionxjvx/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Use OBridge together with JVx</title>
		<link>https://blog.sibvisions.com/2016/02/26/use-obridge-together-with-jvx/</link>
		<comments>https://blog.sibvisions.com/2016/02/26/use-obridge-together-with-jvx/#comments</comments>
		<pubDate>Fri, 26 Feb 2016 13:29:54 +0000</pubDate>
		<dc:creator>rjahn</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Fun]]></category>
		<category><![CDATA[JVx]]></category>

		<guid isPermaLink="false">http://blog.sibvisions.com/?p=5438</guid>
		<description><![CDATA[OBridge is a nice Java FOSS project. The description according to the website:
OBridge generates standard Java source code for calling PL/SQL stored procedures and functions.
It's focus is on Oracle but this wasn't a limitation for us to test it with JVx. 
Most of you know that JVx has generic support for procedure/function calls which is [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://obridge.org/">OBridge</a> is a nice Java FOSS project. The description according to the website:</p>
<blockquote><p>OBridge generates standard Java source code for calling PL/SQL stored procedures and functions.</p></blockquote>
<p>It's focus is on Oracle but this wasn't a limitation for us to test it with JVx. </p>
<p>Most of you know that JVx has generic support for procedure/function calls which is DB independent. The implementation is not really type-safe but it's simple.<br />
If type-safety is preferred, you could use OBridge for your application.</p>
<p>I write about this library, because it's super small and simple. We love small and simple things <img src='https://blog.sibvisions.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Assume, we have following PL/Sql procedure:</p>
<div class="codesnip-container" >
<div class="plsql codesnip" style="font-family:monospace;"><a href="http://www.oracle.com/pls/db92/db92.drilldown?word=CREATE"><span class="kw1">CREATE</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=OR"><span class="kw1">OR</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=REPLACE"><span class="kw2">REPLACE</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=PROCEDURE"><span class="kw1">PROCEDURE</span></a> execProcedure<span class="br0">&#40;</span>pNumber <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=IN"><span class="kw1">IN</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=OUT"><span class="kw1">OUT</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=NUMBER"><span class="kw1">NUMBER</span></a><span class="sy0">,</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pInText <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=IN"><span class="kw1">IN</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=VARCHAR2"><span class="kw1">VARCHAR2</span></a><span class="sy0">,</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pOutText <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=OUT"><span class="kw1">OUT</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=VARCHAR2"><span class="kw1">VARCHAR2</span></a><span class="br0">&#41;</span> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=IS"><span class="kw1">IS</span></a><br />
&nbsp; nr <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=NUMBER"><span class="kw1">NUMBER</span></a> <span class="sy0">:=</span> pNumber<span class="sy0">;</span><br />
<a href="http://www.oracle.com/pls/db92/db92.drilldown?word=BEGIN"><span class="kw1">BEGIN</span></a><br />
&nbsp; pOutText <span class="sy0">:=</span> <span class="st0">'Out: '</span><span class="sy0">||</span> pOutText <span class="sy0">||</span><span class="st0">' In: '</span><span class="sy0">||</span> pInText<span class="sy0">;</span></p>
<p>&nbsp; pNumber <span class="sy0">:=</span> pNumber <span class="sy0">+</span> pNumber<span class="sy0">;</span><br />
<a href="http://www.oracle.com/pls/db92/db92.drilldown?word=END"><span class="kw1">END</span></a> execProcedure<span class="sy0">;</span></div>
</div>
<p>and function:</p>
<div class="codesnip-container" >
<div class="plsql codesnip" style="font-family:monospace;"><a href="http://www.oracle.com/pls/db92/db92.drilldown?word=CREATE"><span class="kw1">CREATE</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=OR"><span class="kw1">OR</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=REPLACE"><span class="kw2">REPLACE</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=FUNCTION"><span class="kw1">FUNCTION</span></a> execFunction<span class="br0">&#40;</span>pNumber <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=IN"><span class="kw1">IN</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=OUT"><span class="kw1">OUT</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=NUMBER"><span class="kw1">NUMBER</span></a><span class="sy0">,</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pInText <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=IN"><span class="kw1">IN</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=VARCHAR2"><span class="kw1">VARCHAR2</span></a><span class="sy0">,</span> <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pOutText <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=OUT"><span class="kw1">OUT</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=VARCHAR2"><span class="kw1">VARCHAR2</span></a><span class="br0">&#41;</span> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=RETURN"><span class="kw1">RETURN</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=VARCHAR2"><span class="kw1">VARCHAR2</span></a> <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=IS"><span class="kw1">IS</span></a><br />
&nbsp; res <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=VARCHAR2"><span class="kw1">VARCHAR2</span></a><span class="br0">&#40;</span>200<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; nr <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=NUMBER"><span class="kw1">NUMBER</span></a> <span class="sy0">:=</span> pNumber<span class="sy0">;</span><br />
<a href="http://www.oracle.com/pls/db92/db92.drilldown?word=BEGIN"><span class="kw1">BEGIN</span></a><br />
&nbsp; pOutText <span class="sy0">:=</span> <span class="st0">'Out: '</span><span class="sy0">||</span> pOutText <span class="sy0">||</span><span class="st0">' In: '</span><span class="sy0">||</span> pInText<span class="sy0">;</span></p>
<p>&nbsp; pNumber <span class="sy0">:=</span> pNumber <span class="sy0">+</span> pNumber<span class="sy0">;</span></p>
<p>&nbsp; <a href="http://www.oracle.com/pls/db92/db92.drilldown?word=RETURN"><span class="kw1">RETURN</span></a> <span class="st0">'IN-Param Nr: '</span><span class="sy0">||</span> nr<span class="sy0">;</span><br />
<a href="http://www.oracle.com/pls/db92/db92.drilldown?word=END"><span class="kw1">END</span></a> execFunction<span class="sy0">;</span></div>
</div>
<div style="display: block; height: 5px;">&nbsp;</div>
<p>With JVx, the procedure and function call will look like following JUnit test:</p>
<div class="codesnip-container" >
<div class="java codesnip" style="font-family:monospace;">@Test<br />
<span class="kw1">public</span> <span class="kw4">void</span> testCall<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="kw1">throws</span> <span class="kw3">Exception</span><br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; DBAccess dba <span class="sy0">=</span> DBAccess.<span class="me1">getDBAccess</span><span class="br0">&#40;</span><span class="st0">&quot;jdbc:oracle:thin:@localhost:xe&quot;</span>, <span class="st0">&quot;test&quot;</span>, <span class="st0">&quot;test&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; dba.<span class="me1">open</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="co3">/** <br />
&nbsp; &nbsp; &nbsp;* Procedure call. <br />
&nbsp; &nbsp; &nbsp;*/</span></p>
<p>&nbsp; &nbsp; OutParam ouTextParam <span class="sy0">=</span> <span class="kw1">new</span> OutParam<span class="br0">&#40;</span>InOutParam.<span class="me1">SQLTYPE_VARCHAR</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; dba.<span class="me1">executeProcedure</span><span class="br0">&#40;</span><span class="st0">&quot;execProcedure&quot;</span>, <span class="kw3">BigDecimal</span>.<span class="me1">valueOf</span><span class="br0">&#40;</span><span class="nu0">25</span><span class="br0">&#41;</span>, <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="st0">&quot;Hello JVx' procedure&quot;</span>, ouTextParam<span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; <span class="kw1">Assert</span>.<span class="me1">assertEquals</span><span class="br0">&#40;</span><span class="st0">&quot;Out: &nbsp;In: Hello JVx' procedure&quot;</span>, ouTextParam.<span class="me1">getValue</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; <span class="co3">/** <br />
&nbsp; &nbsp; &nbsp;* Function call. <br />
&nbsp; &nbsp; &nbsp;*/</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; ouTextParam <span class="sy0">=</span> <span class="kw1">new</span> OutParam<span class="br0">&#40;</span>InOutParam.<span class="me1">SQLTYPE_VARCHAR</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <span class="kw3">Object</span> oResult <span class="sy0">=</span> dba.<span class="me1">executeFunction</span><span class="br0">&#40;</span><span class="st0">&quot;execFunction&quot;</span>, <span class="kw3">Types</span>.<span class="me1">VARCHAR</span>, <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="kw3">BigDecimal</span>.<span class="me1">valueOf</span><span class="br0">&#40;</span><span class="nu0">25</span><span class="br0">&#41;</span>, <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="st0">&quot;Hello JVx' function&quot;</span>, ouTextParam<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="kw1">Assert</span>.<span class="me1">assertEquals</span><span class="br0">&#40;</span><span class="st0">&quot;IN-Param Nr: 25&quot;</span>, oResult<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <span class="kw1">Assert</span>.<span class="me1">assertEquals</span><span class="br0">&#40;</span><span class="st0">&quot;Out: &nbsp;In: Hello JVx' function&quot;</span>, ouTextParam.<span class="me1">getValue</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></div>
</div>
<div style="display: block; height: 5px;">&nbsp;</div>
<p>and the same with OBridge:</p>
<div class="codesnip-container" >
<div class="java codesnip" style="font-family:monospace;">@Test<br />
<span class="kw1">public</span> <span class="kw4">void</span> testCall<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="kw1">throws</span> <span class="kw3">Exception</span><br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; DBAccess dba <span class="sy0">=</span> DBAccess.<span class="me1">getDBAccess</span><span class="br0">&#40;</span><span class="st0">&quot;jdbc:oracle:thin:@localhost:1521:xe&quot;</span>, <span class="st0">&quot;test&quot;</span>, <span class="st0">&quot;test&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; dba.<span class="me1">open</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="co3">/** <br />
&nbsp; &nbsp; &nbsp;* Procedure call. <br />
&nbsp; &nbsp; &nbsp;*/</span></p>
<p>&nbsp; &nbsp; Execprocedure proc <span class="sy0">=</span> ProceduresAndFunctions.<span class="me1">execprocedure</span><span class="br0">&#40;</span><span class="kw3">BigDecimal</span>.<span class="me1">valueOf</span><span class="br0">&#40;</span><span class="nu0">35</span><span class="br0">&#41;</span>, <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="st0">&quot;Hello OBridge procedure&quot;</span>, dba.<span class="me1">getConnection</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="kw1">Assert</span>.<span class="me1">assertEquals</span><span class="br0">&#40;</span><span class="st0">&quot;Out: &nbsp;In: Hello OBridge procedure&quot;</span>, proc.<span class="me1">getPouttext</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>&nbsp; &nbsp; <span class="co3">/** <br />
&nbsp; &nbsp; &nbsp;* Function call. <br />
&nbsp; &nbsp; &nbsp;*/</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; Execfunction func <span class="sy0">=</span> ProceduresAndFunctions.<span class="me1">execfunction</span><span class="br0">&#40;</span><span class="kw3">BigDecimal</span>.<span class="me1">valueOf</span><span class="br0">&#40;</span><span class="nu0">35</span><span class="br0">&#41;</span>, <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="st0">&quot;Hello OBridge function&quot;</span>, dba.<span class="me1">getConnection</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="kw1">Assert</span>.<span class="me1">assertEquals</span><span class="br0">&#40;</span><span class="st0">&quot;IN-Param Nr: 35&quot;</span>, func.<span class="me1">getFunctionReturn</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <span class="kw1">Assert</span>.<span class="me1">assertEquals</span><span class="br0">&#40;</span><span class="st0">&quot;Out: &nbsp;In: Hello OBridge function&quot;</span>, func.<span class="me1">getPouttext</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></div>
</div>
<div style="display: block; height: 10px;">&nbsp;</div>
<p>The OBridge code saves two LoC for the call, but it needs some additional classes and packages in your application. If you change your procedure or function definition in the database, you have to recreate the Java files.<br />
This is not needed with pure JVx, but it's your choice.</p>
<p>The code generation is not tricky, simply follow the official documentation. Our steps:</p>
<ul>
<li>Create the file config.xml in the working directory of your project
<div class="codesnip-container" >
<div class="xml codesnip" style="font-family:monospace;"><span class="sc3"><span class="re1">&lt;?xml</span> <span class="re0">version</span>=<span class="st0">&quot;1.0&quot;</span> <span class="re0">encoding</span>=<span class="st0">&quot;UTF-8&quot;</span><span class="re2">?&gt;</span></span></p>
<p><span class="sc3"><span class="re1">&lt;configuration<span class="re2">&gt;</span></span></span><br />
&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;jdbcUrl<span class="re2">&gt;</span></span></span>jdbc:oracle:thin:test/test@localhost:1521:xe<span class="sc3"><span class="re1">&lt;/jdbcUrl<span class="re2">&gt;</span></span></span><br />
&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;sourceRoot<span class="re2">&gt;</span></span></span>./src/<span class="sc3"><span class="re1">&lt;/sourceRoot<span class="re2">&gt;</span></span></span><br />
&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;rootPackageName<span class="re2">&gt;</span></span></span>com.sibvisions.apps.obridge.db<span class="sc3"><span class="re1">&lt;/rootPackageName<span class="re2">&gt;</span></span></span><br />
&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;packages<span class="re2">&gt;</span></span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;entityObjects<span class="re2">&gt;</span></span></span>objects<span class="sc3"><span class="re1">&lt;/entityObjects<span class="re2">&gt;</span></span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;converterObjects<span class="re2">&gt;</span></span></span>converters<span class="sc3"><span class="re1">&lt;/converterObjects<span class="re2">&gt;</span></span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;procedureContextObjects<span class="re2">&gt;</span></span></span>context<span class="sc3"><span class="re1">&lt;/procedureContextObjects<span class="re2">&gt;</span></span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;packageObjects<span class="re2">&gt;</span></span></span>packages<span class="sc3"><span class="re1">&lt;/packageObjects<span class="re2">&gt;</span></span></span><br />
&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;/packages<span class="re2">&gt;</span></span></span><br />
<span class="sc3"><span class="re1">&lt;/configuration<span class="re2">&gt;</span></span></span></div>
</div>
</li>
<li>Run the main class: org.obridge.OBridge with argument: -c config.xml<br />
(or use -c fullqualified_path_to_config.xml)</li>
</ul>
<div style="display: block; height: 15px;">&nbsp;</div>
<p>If you love our generic built-in solution, you don't need OBridge but if you prefer type-safety it's definitely an option.</p>
]]></content:encoded>
			<wfw:commentRss>https://blog.sibvisions.com/2016/02/26/use-obridge-together-with-jvx/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>RaspberryPi + 1-wire + i2c + camera and kernel pain</title>
		<link>https://blog.sibvisions.com/2015/01/26/raspberrypi-1-wire-i2c-camera-and-kernel-pain/</link>
		<comments>https://blog.sibvisions.com/2015/01/26/raspberrypi-1-wire-i2c-camera-and-kernel-pain/#comments</comments>
		<pubDate>Mon, 26 Jan 2015 13:01:58 +0000</pubDate>
		<dc:creator>rjahn</dc:creator>
				<category><![CDATA[Fun]]></category>
		<category><![CDATA[RaspberryPi]]></category>

		<guid isPermaLink="false">http://blog.sibvisions.com/?p=3635</guid>
		<description><![CDATA[Our last research project was real fun: Build a Webcam with temp and light sensor to do some home/office automation.
We took a RaspberryPi model B, temp sensor (DS18B20) and light sensor (TSL45315).
The temp sensor had a 1-wire interface and the Internet had many tutorials to connect the sensor to a RasPi. It should be a [...]]]></description>
			<content:encoded><![CDATA[<p>Our last research project was real fun: Build a <strong>Webcam with temp and light sensor</strong> to do some home/office automation.</p>
<p>We took a RaspberryPi model B, <a href="http://www.watterott.com/de/Temperatur-Sensor-Wasserdicht-DS18B20">temp sensor (DS18B20)</a> and <a href="http://www.watterott.com/de/TSL45315-Breakout">light sensor (TSL45315)</a>.</p>
<p>The temp sensor had a 1-wire interface and the Internet had many tutorials to connect the sensor to a RasPi. It should be a trivial job, if you read the tutorials and it should be ready in max. 10 minutes. <strong>Should</strong>!</p>
<p>The theory wasn't the reality and the tutorials didn't cover our environment, because we had a new Raspbian ISO with kernel 3.16 and 3.18 some hours later.</p>
<p>We tried to connect the sensor as described (with and without pullup resistor, with parasite power and without) but it wasn't detected. It was horrible because the driver was loaded without problems and logged a simple success message.<br />
We didn't find information about the problem because we didn't see an error. It simply did nothing and the filesystem didn't contain the relevant files and directories. Our <strong>/sys/bus/w1/devices</strong> directory was clean and empty. After some hours error searching, without any ideas we tried an older Raspbian image with kernel 3.6 and our sensor worked out-of-the-box without modifications. We saw additional log information from the 1-wire module which we didn't have with our 3.18 kernel. So we knew that something has changed in the kernel or kernel config... </p>
<p>But we weren't happy because the whole thing should work with an up-to-date setup. After we knew that the kernel caused our problems, we tried to find a solution and found: <a href="http://www.raspberrypi.org/forums/viewtopic.php?t=97216&#038;p=676793">http://www.raspberrypi.org/forums/viewtopic.php?t=97216&#038;p=676793</a> (first posting on 2nd page). There was a hint about the device tree. With this information, we found: <a href="https://github.com/raspberrypi/documentation/blob/master/configuration/device-tree.md">https://github.com/raspberrypi/documentation/blob/master/configuration/device-tree.md</a></p>
<p>We disabled the device-tree by adding <strong>device_tree=</strong> to our config.txt and everything worked after a reboot, with our 3.18 kernel. So far so good.</p>
<p>It also worked with <strong>device_tree_overlay=overlays/w1-gpio-overlay.dtb</strong>. This option was our preferred one  because it didn't disable the device_tree.</p>
<p>After our temp sensor worked without problems we connected the Raspicam and made some tests. Everything worked without problems. The last piece of our project was the light sensor. It was a littly bit tricky to use the sensor with our Pi because the source code example wasn't available for Java/Pi4J, but here it is:</p>
<div class="codesnip-container" >
<div class="java codesnip" style="font-family:monospace;">I2CBus bus <span class="sy0">=</span> I2CFactory.<span class="me1">getInstance</span><span class="br0">&#40;</span>I2CBus.<span class="me1">BUS_1</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>I2CDevice device <span class="sy0">=</span> bus.<span class="me1">getDevice</span><span class="br0">&#40;</span>0x29<span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>device.<span class="me1">write</span><span class="br0">&#40;</span><span class="br0">&#40;</span><span class="kw4">byte</span><span class="br0">&#41;</span><span class="br0">&#40;</span>0x80 <span class="sy0">|</span> 0x0A<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p><span class="kw4">byte</span><span class="br0">&#91;</span><span class="br0">&#93;</span> byData <span class="sy0">=</span> <span class="kw1">new</span> <span class="kw4">byte</span><span class="br0">&#91;</span>1<span class="br0">&#93;</span><span class="sy0">;</span><br />
device.<span class="me1">read</span><span class="br0">&#40;</span>byData, 0, 1<span class="br0">&#41;</span><span class="sy0">;</span></p>
<p><span class="kw3">System</span>.<span class="me1">out</span>.<span class="me1">println</span><span class="br0">&#40;</span>byData<span class="br0">&#91;</span>0<span class="br0">&#93;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p><span class="kw3">System</span>.<span class="me1">out</span>.<span class="me1">println</span><span class="br0">&#40;</span><span class="st0">&quot;Power on...&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>device.<span class="me1">write</span><span class="br0">&#40;</span><span class="br0">&#40;</span><span class="kw4">byte</span><span class="br0">&#41;</span><span class="br0">&#40;</span>0x80 <span class="sy0">|</span> 0x00<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
device.<span class="me1">write</span><span class="br0">&#40;</span><span class="br0">&#40;</span><span class="kw4">byte</span><span class="br0">&#41;</span>0x03<span class="br0">&#41;</span><span class="sy0">;</span></p>
<p><span class="kw3">System</span>.<span class="me1">out</span>.<span class="me1">println</span><span class="br0">&#40;</span><span class="st0">&quot;Config...&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></p>
<p>device.<span class="me1">write</span><span class="br0">&#40;</span><span class="br0">&#40;</span><span class="kw4">byte</span><span class="br0">&#41;</span><span class="br0">&#40;</span>0x80 <span class="sy0">|</span> 0x01<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
device.<span class="me1">write</span><span class="br0">&#40;</span><span class="br0">&#40;</span><span class="kw4">byte</span><span class="br0">&#41;</span>0x00<span class="br0">&#41;</span><span class="sy0">;</span> &nbsp; <span class="co1">//M=1, T=400ms</span><br />
<span class="co1">//device.write((byte)0x01); &nbsp; //M=2, T=200ms</span><br />
<span class="co1">//device.write((byte)0x02); &nbsp; //M=4, T=100ms</span></p>
<p>byData <span class="sy0">=</span> <span class="kw1">new</span> <span class="kw4">byte</span><span class="br0">&#91;</span>2<span class="br0">&#93;</span><span class="sy0">;</span></p>
<p><span class="kw1">while</span> <span class="br0">&#40;</span><span class="kw2">true</span><span class="br0">&#41;</span><br />
<span class="br0">&#123;</span><br />
&nbsp; &nbsp; device.<span class="me1">write</span><span class="br0">&#40;</span><span class="br0">&#40;</span><span class="kw4">byte</span><span class="br0">&#41;</span><span class="br0">&#40;</span>0x80 <span class="sy0">|</span> 0x04<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; device.<span class="me1">read</span><span class="br0">&#40;</span>byData, 0, 2<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="kw4">int</span> l <span class="sy0">=</span> byData<span class="br0">&#91;</span>0<span class="br0">&#93;</span> <span class="sy0">&amp;</span> 0xFF<span class="sy0">;</span><br />
&nbsp; &nbsp; <span class="kw4">int</span> h <span class="sy0">=</span> byData<span class="br0">&#91;</span>1<span class="br0">&#93;</span> <span class="sy0">&amp;</span> 0xFF<span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="kw4">int</span> lux <span class="sy0">=</span> <span class="br0">&#40;</span>h <span class="sy0">&lt;&lt;</span> 8<span class="br0">&#41;</span> <span class="sy0">|</span> <span class="br0">&#40;</span>l <span class="sy0">&lt;&lt;</span> 0<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; lux <span class="sy0">*=</span> <span class="nu0">1</span><span class="sy0">;</span> &nbsp; <span class="co1">//M1</span><br />
&nbsp; &nbsp; <span class="co1">//lux *= 2; &nbsp; //M2</span><br />
&nbsp; &nbsp; <span class="co1">//lux *= 4; &nbsp; //M4</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="kw3">System</span>.<span class="me1">out</span>.<span class="me1">println</span><span class="br0">&#40;</span>lux<span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span class="kw3">Thread</span>.<span class="me1">sleep</span><span class="br0">&#40;</span>1000<span class="br0">&#41;</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></div>
</div>
<p>We compared the output with an Arduino board and the values were "the same".</p>
<p>It wasn't possible to use the light sensor without required modules. We simply added <strong>device_tree_param=i2c1=on</strong> to our config.txt and I2C worked. You should install</p>
<div class="codesnip-container" >
<div class="bash codesnip" style="font-family:monospace;"><span class="kw2">sudo</span> <span class="kw2">apt-get</span> <span class="kw2">install</span> i2c-tools</div>
</div>
<p>to verify connected sensors, via:</p>
<div class="codesnip-container" >
<div class="bash codesnip" style="font-family:monospace;">i2cdetect <span class="re5">-y</span> <span class="nu0">1</span></div>
</div>
<p>After we thought that everything will work, we put all pieces together: temp sensor, cam, light sensor.<br />
During development, we didn't use all parts together - only the relevant sensor, to rule out errors.</p>
<p>Everything worked fine after starting the Pi, but the cam stopped capturing after some minutes... frustrating.<br />
So again we tried to find an error without detailed information and without logs. We thought it might be a module loading problem and found some hints: <a href="https://github.com/raspberrypi/linux/issues/435">https://github.com/raspberrypi/linux/issues/435</a>. But nothing worked for us. The only working solution was: <strong>disable the device tree</strong> <img src='https://blog.sibvisions.com/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /> </p>
<p>The whole system is up and running for some days and there we no problems.</p>
<p>We currently don't know what's the problem with the device tree or what we should configure to avoid problems, but if you have similar problems, this posting could help. If you have a working solution with the device tree... leave a comment <img src='https://blog.sibvisions.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>https://blog.sibvisions.com/2015/01/26/raspberrypi-1-wire-i2c-camera-and-kernel-pain/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Vaadin UI with SmartTV</title>
		<link>https://blog.sibvisions.com/2015/01/09/vaadin-ui-with-smarttv/</link>
		<comments>https://blog.sibvisions.com/2015/01/09/vaadin-ui-with-smarttv/#comments</comments>
		<pubDate>Fri, 09 Jan 2015 13:26:49 +0000</pubDate>
		<dc:creator>rjahn</dc:creator>
				<category><![CDATA[Fun]]></category>
		<category><![CDATA[vaadinUI]]></category>

		<guid isPermaLink="false">http://blog.sibvisions.com/?p=3602</guid>
		<description><![CDATA[It's not rocket science and we didn't write code, but it's nice to see our UIs on SmartTVs  
Here are some impressions:












]]></description>
			<content:encoded><![CDATA[<p>It's not rocket science and we didn't write code, but it's nice to see our UIs on SmartTVs <img src='https://blog.sibvisions.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Here are some impressions:</p>
<table>
<tr>
<td><div id="attachment_3603" class="wp-caption aligncenter nomargin" style="width: 310px"><a href="https://blog.sibvisions.com/wp-content/uploads/2015/01/statistic.jpg" rel="lightbox[3602]"><img src="https://blog.sibvisions.com/wp-content/uploads/2015/01/statistic-300x225.jpg" alt="SmartTV - Statistic" title="statistic" width="300" height="225" class="size-medium wp-image-3603" /></a><p class="wp-caption-text">SmartTV - Statistic</p></div></td>
<td></td>
<td><div id="attachment_3604" class="wp-caption aligncenter nomargin" style="width: 310px"><a href="https://blog.sibvisions.com/wp-content/uploads/2015/01/data.jpg" rel="lightbox[3602]"><img src="https://blog.sibvisions.com/wp-content/uploads/2015/01/data-300x225.jpg" alt="SmartTV - Data" title="data" width="300" height="225" class="size-medium wp-image-3604" /></a><p class="wp-caption-text">SmartTV - Data</p></div></td>
</tr>
<tr>
<td><div id="attachment_3606" class="wp-caption aligncenter nomargin" style="width: 310px"><a href="https://blog.sibvisions.com/wp-content/uploads/2015/01/shutter.jpg" rel="lightbox[3602]"><img src="https://blog.sibvisions.com/wp-content/uploads/2015/01/shutter-300x225.jpg" alt="SmartTV - Window Shutter" title="shutter" width="300" height="225" class="size-medium wp-image-3606" /></a><p class="wp-caption-text">SmartTV - Window Shutter</p></div></td>
<td></td>
<td></td>
</tr>
</table>
]]></content:encoded>
			<wfw:commentRss>https://blog.sibvisions.com/2015/01/09/vaadin-ui-with-smarttv/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Window shutter UI - WiiU</title>
		<link>https://blog.sibvisions.com/2015/01/08/window-shutter-ui-wiiu/</link>
		<comments>https://blog.sibvisions.com/2015/01/08/window-shutter-ui-wiiu/#comments</comments>
		<pubDate>Thu, 08 Jan 2015 15:30:10 +0000</pubDate>
		<dc:creator>rjahn</dc:creator>
				<category><![CDATA[Fun]]></category>
		<category><![CDATA[vaadinUI]]></category>

		<guid isPermaLink="false">http://blog.sibvisions.com/?p=3596</guid>
		<description><![CDATA[Because I got some emails, here's the window shutter UI how it looks on my Wii U. Sure, the space is not perfectly used, but the UI wasn't optimized for Wii U. Also the agent name of the browser wasn't checked to optimize controls.
But it's ok and control just works  
The pictures (phone cam):







]]></description>
			<content:encoded><![CDATA[<p>Because I got some emails, here's the <a href="https://blog.sibvisions.com/2015/01/08/iot-window-shutter-control-with-jvx-vaadin-and-raspberrypi/">window shutter UI</a> how it looks on my Wii U. Sure, the space is not perfectly used, but the UI wasn't optimized for Wii U. Also the agent name of the browser wasn't checked to optimize controls.</p>
<p>But it's ok and control just works <img src='https://blog.sibvisions.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>The pictures (phone cam):</p>
<table>
<tr>
<td><div id="attachment_3597" class="wp-caption aligncenter nomargin" style="width: 310px"><a href="https://blog.sibvisions.com/wp-content/uploads/2015/01/controller.jpg" rel="lightbox[3596]"><img src="https://blog.sibvisions.com/wp-content/uploads/2015/01/controller-300x225.jpg" alt="Wii-U controller" title="controller" width="300" height="225" class="size-medium wp-image-3597" /></a><p class="wp-caption-text">Wii-U controller</p></div></td>
<td></td>
<td><div id="attachment_3598" class="wp-caption aligncenter nomargin" style="width: 310px"><a href="https://blog.sibvisions.com/wp-content/uploads/2015/01/tv.jpg" rel="lightbox[3596]"><img src="https://blog.sibvisions.com/wp-content/uploads/2015/01/tv-300x225.jpg" alt="Wii-U (TV)" title="tv" width="300" height="225" class="size-medium wp-image-3598" /></a><p class="wp-caption-text">Wii-U (TV)</p></div></td>
</tr>
</table>
]]></content:encoded>
			<wfw:commentRss>https://blog.sibvisions.com/2015/01/08/window-shutter-ui-wiiu/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
