{"id":376,"date":"2012-07-07T19:40:25","date_gmt":"2012-07-07T14:10:25","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=376"},"modified":"2012-07-07T19:40:25","modified_gmt":"2012-07-07T14:10:25","slug":"using-java-objects-in-javascript-in-eclipse-swt-browser-control","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/using-java-objects-in-javascript-in-eclipse-swt-browser-control\/","title":{"rendered":"Using Java Objects in JavaScript in Eclipse SWT Browser Control"},"content":{"rendered":"<p>I have been developing Eclipse plugins for more than four years now. I have implemented many features in the <a href=\"http:\/\/www.google.com\/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;ved=0CFQQFjAA&amp;url=http%3A%2F%2Fwww.adobe.com%2Fproducts%2Fcoldfusion-builder.html&amp;ei=fTL4T6mlK8fhrAeyu6XVBg&amp;usg=AFQjCNE-hlztk9nYHbOvWeTCYgn6OP8Nkg\" target=\"_top\">ColdFusion Builder<\/a>, which is an Eclipse based IDE. Eclipse SDK provides a <a href=\"http:\/\/help.eclipse.org\/indigo\/index.jsp?topic=%2Forg.eclipse.platform.doc.isv%2Freference%2Fapi%2Forg%2Feclipse%2Fswt%2Fbrowser%2FBrowser.html\" target=\"_top\">SWT Browser control<\/a> which can be used within Eclipse plugin to display HTML files. Eclipse does not include any browser, but it uses the system browser- on Windows it is Internet Explorer and on Macintosh it is Safari. I have used this control mainly to display static HTML content or open a URL on a remote server, e.g. for executing ColdFusion Builder extensions written in CFML.<\/p>\n<p>Recently I have been doing a lot of mobile application dev elopement, and saw how easy it was to invoke Java objects from JavaScript in Android. I have blogged about this in one of my posts, <a href=\"http:\/\/wp.me\/p2g9O8-w\" target=\"_top\">Creating Android Applications with HTML User Interface<\/a>. This got me thinking that it would be nice if SWT Browser control would also provide some way to pass Java Objects to JavaScript. Turned out that it is possible.<\/p>\n<p><!--more--><\/p>\n<p>To expose Java Object from Eclipse to JavaScript, you need to create a class that extends <a href=\"http:\/\/help.eclipse.org\/indigo\/index.jsp?topic=%2Forg.eclipse.platform.doc.isv%2Freference%2Fapi%2Forg%2Feclipse%2Fswt%2Fbrowser%2FBrowserFunction.html\" target=\"_top\">BrowserFunction<\/a>. The constructor of this class takes two arguments; the first one is <a href=\"http:\/\/help.eclipse.org\/indigo\/index.jsp?topic=%2Forg.eclipse.platform.doc.isv%2Freference%2Fapi%2Forg%2Feclipse%2Fswt%2Fbrowser%2FBrowser.html\" target=\"_top\">Browser<\/a> instance and second one is name of the the function that will be available in JavaScript code running the SWT browser control. For example, if you want to get list of files in a folder from JavaScript code, you would first write a class that extends BrowserFunction &#8211;<\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007020; font-weight: bold;\">import<\/span> <span style=\"color: #0e84b5; font-weight: bold;\">java.io.File<\/span><span style=\"color: #666666;\">;<\/span>\n\n<span style=\"color: #007020; font-weight: bold;\">import<\/span> <span style=\"color: #0e84b5; font-weight: bold;\">org.eclipse.swt.browser.Browser<\/span><span style=\"color: #666666;\">;<\/span>\n<span style=\"color: #007020; font-weight: bold;\">import<\/span> <span style=\"color: #0e84b5; font-weight: bold;\">org.eclipse.swt.browser.BrowserFunction<\/span><span style=\"color: #666666;\">;<\/span>\n\n<span style=\"color: #007020; font-weight: bold;\">public<\/span> <span style=\"color: #007020; font-weight: bold;\">class<\/span> <span style=\"color: #0e84b5; font-weight: bold;\">ListFilesFunction<\/span> <span style=\"color: #007020; font-weight: bold;\">extends<\/span> BrowserFunction <span style=\"color: #666666;\">{<\/span>\n\n\tBrowser browser <span style=\"color: #666666;\">=<\/span> <span style=\"color: #007020; font-weight: bold;\">null<\/span><span style=\"color: #666666;\">;<\/span>\n\tString functionName <span style=\"color: #666666;\">=<\/span> <span style=\"color: #007020; font-weight: bold;\">null<\/span><span style=\"color: #666666;\">;<\/span>\n\n\t<span style=\"color: #007020; font-weight: bold;\">public<\/span> <span style=\"color: #06287e;\">ListFilesFunction<\/span><span style=\"color: #666666;\">(<\/span>Browser browser<span style=\"color: #666666;\">,<\/span> String name<span style=\"color: #666666;\">)<\/span> <span style=\"color: #666666;\">{<\/span>\n\t\t<span style=\"color: #007020; font-weight: bold;\">super<\/span><span style=\"color: #666666;\">(<\/span>browser<span style=\"color: #666666;\">,<\/span> name<span style=\"color: #666666;\">);<\/span>\n\t\t<span style=\"color: #007020; font-weight: bold;\">this<\/span><span style=\"color: #666666;\">.<\/span><span style=\"color: #4070a0;\">browser<\/span> <span style=\"color: #666666;\">=<\/span> browser<span style=\"color: #666666;\">;<\/span>\n\t\t<span style=\"color: #007020; font-weight: bold;\">this<\/span><span style=\"color: #666666;\">.<\/span><span style=\"color: #4070a0;\">functionName<\/span> <span style=\"color: #666666;\">=<\/span> name<span style=\"color: #666666;\">;<\/span>\n\t<span style=\"color: #666666;\">}<\/span>\n\n\t<span style=\"color: #007020; font-weight: bold;\">public<\/span> Object <span style=\"color: #06287e;\">function<\/span> <span style=\"color: #666666;\">(<\/span>Object<span style=\"color: #666666;\">[]<\/span> args<span style=\"color: #666666;\">)<\/span>\n\t<span style=\"color: #666666;\">{<\/span>\n\t\t<span style=\"color: #007020; font-weight: bold;\">if<\/span> <span style=\"color: #666666;\">(<\/span>args<span style=\"color: #666666;\">.<\/span><span style=\"color: #4070a0;\">length<\/span> <span style=\"color: #666666;\">==<\/span> <span style=\"color: #40a070;\">0<\/span><span style=\"color: #666666;\">)<\/span>\n\t\t\tbrowser<span style=\"color: #666666;\">.<\/span><span style=\"color: #4070a0;\">execute<\/span><span style=\"color: #666666;\">(<\/span><span style=\"color: #4070a0;\">\"alert('Function \"<\/span> <span style=\"color: #666666;\">+<\/span>\n            functionName <span style=\"color: #666666;\">+<\/span> <span style=\"color: #4070a0;\">\" requires one argument - parent folder path');\"<\/span><span style=\"color: #666666;\">);<\/span>\n\n\t\tFile file <span style=\"color: #666666;\">=<\/span> <span style=\"color: #007020; font-weight: bold;\">new<\/span> File<span style=\"color: #666666;\">(<\/span>args<span style=\"color: #666666;\">[<\/span><span style=\"color: #40a070;\">0<\/span><span style=\"color: #666666;\">].<\/span><span style=\"color: #4070a0;\">toString<\/span><span style=\"color: #666666;\">());<\/span>\n\n\t\t<span style=\"color: #007020; font-weight: bold;\">if<\/span> <span style=\"color: #666666;\">(!<\/span>file<span style=\"color: #666666;\">.<\/span><span style=\"color: #4070a0;\">exists<\/span><span style=\"color: #666666;\">())<\/span>\n\t\t\tbrowser<span style=\"color: #666666;\">.<\/span><span style=\"color: #4070a0;\">execute<\/span><span style=\"color: #666666;\">(<\/span><span style=\"color: #4070a0;\">\"alert('Folder \"<\/span> <span style=\"color: #666666;\">+<\/span> args<span style=\"color: #666666;\">[<\/span><span style=\"color: #40a070;\">0<\/span><span style=\"color: #666666;\">]<\/span> <span style=\"color: #666666;\">+<\/span>\n<span style=\"color: #4070a0;\"> \" does not exist');\"<\/span><span style=\"color: #666666;\">);<\/span>\n\n\t\t<span style=\"color: #007020; font-weight: bold;\">if<\/span> <span style=\"color: #666666;\">(!<\/span>file<span style=\"color: #666666;\">.<\/span><span style=\"color: #4070a0;\">isDirectory<\/span><span style=\"color: #666666;\">())<\/span>\n\t\t\tbrowser<span style=\"color: #666666;\">.<\/span><span style=\"color: #4070a0;\">execute<\/span><span style=\"color: #666666;\">(<\/span><span style=\"color: #4070a0;\">\"alert('Path \"<\/span> <span style=\"color: #666666;\">+<\/span> args<span style=\"color: #666666;\">[<\/span><span style=\"color: #40a070;\">0<\/span><span style=\"color: #666666;\">]<\/span> <span style=\"color: #666666;\">+<\/span> <span style=\"color: #4070a0;\">\" must be a folder');\"<\/span><span style=\"color: #666666;\">);<\/span>\n\n\t\t<span style=\"color: #007020; font-weight: bold;\">return<\/span> file<span style=\"color: #666666;\">.<\/span><span style=\"color: #4070a0;\">list<\/span><span style=\"color: #666666;\">();<\/span>\n\t<span style=\"color: #666666;\">}<\/span>\n<span style=\"color: #666666;\">}<\/span><\/pre>\n<\/div>\n<p>Notice that you can call JavaScript code from Java using <a href=\"http:\/\/help.eclipse.org\/indigo\/topic\/org.eclipse.platform.doc.isv\/reference\/api\/org\/eclipse\/swt\/browser\/Browser.html#execute(java.lang.String)\" target=\"_top\">execute<\/a> function of the Browser.<\/p>\n<p>You then need to associate this function with the browser control, for example &#8211;<br \/>\n<!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007020; font-weight: bold;\">public<\/span> <span style=\"color: #007020; font-weight: bold;\">class<\/span> <span style=\"color: #0e84b5; font-weight: bold;\">View<\/span> <span style=\"color: #007020; font-weight: bold;\">extends<\/span> ViewPart\n<span style=\"color: #666666;\">{<\/span>\n\tBrowser browserCtl <span style=\"color: #666666;\">=<\/span> <span style=\"color: #007020; font-weight: bold;\">null<\/span><span style=\"color: #666666;\">;<\/span>\n\t<span style=\"color: #666666;\">...<\/span>\n\n\t<span style=\"color: #007020; font-weight: bold;\">public<\/span> <span style=\"color: #902000;\">void<\/span> <span style=\"color: #06287e;\">createPartControl<\/span><span style=\"color: #666666;\">(<\/span>Composite parent<span style=\"color: #666666;\">)<\/span> <span style=\"color: #666666;\">{<\/span>\n\t\t<span style=\"color: #666666;\">...<\/span>\n\t\tbrowserCtl <span style=\"color: #666666;\">=<\/span> <span style=\"color: #007020; font-weight: bold;\">new<\/span> Browser<span style=\"color: #666666;\">(<\/span>parent<span style=\"color: #666666;\">,<\/span> SWT<span style=\"color: #666666;\">.<\/span><span style=\"color: #4070a0;\">None<\/span><span style=\"color: #666666;\">);<\/span>\n\n\t\t<span style=\"color: #007020; font-weight: bold;\">new<\/span> <span style=\"color: #06287e;\">ListFilesFunction<\/span><span style=\"color: #666666;\">(<\/span>browserCtl<span style=\"color: #666666;\">,<\/span> <span style=\"color: #4070a0;\">\"getFiles\"<\/span><span style=\"color: #666666;\">);<\/span>\n\t\t<span style=\"color: #666666;\">...<\/span>\n\t<span style=\"color: #666666;\">}<\/span>\n\t...\n<span style=\"color: #666666;\">}<\/span><\/pre>\n<\/div>\n<p>You can invoke this function from JavaScript as follows &#8211; <!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #062873; font-weight: bold;\">&lt;html&gt;<\/span>\n    <span style=\"color: #062873; font-weight: bold;\">&lt;head&gt;<\/span>\n        <span style=\"color: #062873; font-weight: bold;\">&lt;script <\/span><span style=\"color: #4070a0;\">type='text\/javascript'<\/span><span style=\"color: #062873; font-weight: bold;\">&gt;<\/span>\n        \tfiles <span style=\"color: #666666;\">=<\/span> getFiles(<span style=\"color: #4070a0;\">\"c:\/\"<\/span>);\n\n\t\t<span style=\"color: #007020; font-weight: bold;\">for<\/span> (i <span style=\"color: #666666;\">=<\/span> <span style=\"color: #40a070;\">0<\/span>; i <span style=\"color: #666666;\">&lt;<\/span> files.length; i<span style=\"color: #666666;\">++<\/span>)\n\t\t{\n\t\t\t<span style=\"color: #007020;\">document<\/span>.writeln(files[i] <span style=\"color: #666666;\">+<\/span> <span style=\"color: #4070a0;\">\"&lt;br&gt;\"<\/span>);\n\t\t}\n        <span style=\"color: #062873; font-weight: bold;\">&lt;\/script&gt;<\/span>\n    <span style=\"color: #062873; font-weight: bold;\">&lt;\/head&gt;<\/span>\n    <span style=\"color: #062873; font-weight: bold;\">&lt;body&gt;<\/span>\n\n    <span style=\"color: #062873; font-weight: bold;\">&lt;\/body&gt;<\/span>\n<span style=\"color: #062873; font-weight: bold;\">&lt;\/html&gt;<\/span><\/pre>\n<\/div>\n<p>Notice that getFiles function called in the above JavaScript code is associated with ListFilesFunction class declared earlier.<\/p>\n<p>The value I see in being able to call Java from JavaScript, as described above, is that you can create very powerful UI using HTML5\/JavaScript very easily and at the same time enhance capability of browser based applications &#8211; by creating your own custom Java classes that can access local resources, or make many functionality available that otherwise are not accessible using plain JavaScript.<\/p>\n<p>I am working on an Eclipse RCP application that would take a path to zip file or a folder containing HTML and JavaScript code and display that in the Browser control &#8211; so essentially you can convert your web application easily into a standalone desktop application. And since it ia based on Eclipse, it is it cross platform.<\/p>\n<p>You might find this somewhat similar to <a href=\"http:\/\/get.adobe.com\/air\/\" target=\"_top\">Adobe AIR<\/a>. Of course AIR has a lot more features than this simple application that I am creating &#8211; but one aspect of AIR, which is easily converting web application to desktop application is same in the Eclipse RCP application I am developing.<\/p>\n<p>-Ram Kulkarni<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I have been developing Eclipse plugins for more than four years now. I have implemented many features in the ColdFusion Builder, which is an Eclipse based IDE. Eclipse SDK provides a SWT Browser control which can be used within Eclipse plugin to display HTML files. Eclipse does not include any browser, but it uses the &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/ramkulkarni.com\/blog\/using-java-objects-in-javascript-in-eclipse-swt-browser-control\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Using Java Objects in JavaScript in Eclipse SWT Browser Control&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[38,20,1],"tags":[25,39,5,40,41],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-64","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/376"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=376"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/376\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=376"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}