Linking JavaFX with Web Application

Today I will talk about embedding JavaFX application into a web page and to link Web Page and Java FX application via Java Script. I will take example of sample music player which I build in JavaFX. I will try to trigger some action in JavaFX application (e.g. adding a song to the Media Player playlist). We need to follow these simple steps in order to accomplish the task.

I will be using NetBeans IDE 7.2.1 for this task because packaging of JavaFX application is very easy in NetBeans IDE i.e. you do not need to bother about any Ant task write-ups.

1.        First of all you need to Code your JavaFX application. Its tutorials are very easily available.
2.     Change the Configuration of Project:

     Next step is to change the runtime configuration of your Project. For an instance the name of my music application project is “Music Play”.

                                                        Right click your Project folder in NetBeans > Set Configuration > Run_in_Browser. Clean and Build your project (Right Click project folder > Clean and Build @Run_in_Browser).  Run the project. Your default browser will show the embedded JavaFX application.       

3. Copy the generated Code into your own webpage

    Browse to the generated webpage. By default its name will be same as that of your JavaFX application.  Default path of the generated webpage is                                                                                           C:\path to\your\Documents\NetBeansProjects\MusicPlay\dist  

Open the MyMusic.html with some editor such as Notepad or more suitable DreamWeaver.

Script will be something like this.

                <script>

    function launchApplication(jnlpfile) {

        dtjava.launch(            {

                url : 'MusicPlay.jnlp'
 jnlp_content: 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLT
giPz4NCjxqbmxwIHNwZWM9IjEuMCIgeG1sbnM6amZ4PSJodHRwOi8vamF2YWZ4
LmNvbSIgaHJlZj0iTXVzaWNQbGF5LmpubHAiPg0KICA8aW5mb3JtYXRpb24+DQ
ogICAgPHRpdGxlPk11c2ljUGxheTwvdGl0bGU+DQogI

CAgPHZlbmRvcj5Nb2hpdDwvdmVuZG9yPg0KICAgIDxkZXNjcmlwdGlvbj5TYW1
wbGUgSmF2YUZYIDIuMCBhcHBsaWNhdGlvbi48L2Rlc2NyaXB0aW9uPg0KICAgI
DxvZmZsaW5lLWFsbG93ZWQvPg0KICA8L2luZm9ybWHBhcmFtIG5hbWU9InJlcX
VpcmVkRlhW

ZXJzaW9uIiB2YWx1ZT0iMi4wKyIvPg0KICA8L2FwcGxldC1kZXNjPg0KICA8am
Z4OmphdmFmeC1kZXNjICB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgbWFpbi1j
bGFzcz0

ibXVzaWNwbGF5Lk11c2ljUGxheSIgIG5hbWU9Ik11c2ljUGxheSIgLz4NCiAgP
HVwZGF0ZSBjaGVjaz0iYmFja2dyb3VuZCIvPg0KPC9qbmxwPg0K'

            },

            {

                javafx : '2.0+'

            },

            {}

        );

        return false;

    }

</script>

<script>

    function javafxEmbed() {

        dtjava.embed(

            {

                url : 'MusicPlay.jnlp',

                placeholder : 'javafx-app-placeholder',

                width : 500,

                height : 500,

                jnlp_content : 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxqbmxw
IHNwZWM9IjEuMCIgeG1sbnM6amZ4PSJodHRwOi8vamF2YWZ4LmNvbSIgaHJlZ
j0iTXVzaWNQbGF5LmpubHAiPg0KICA8aW5mb3JtYXRpb24+DQogICAgPHRpdG
xlPk11c2ljUGxheTwvdGl0bGU+DQogICAgPHZlbmRv

cj5Nb2hpdDwvdmVuZG9yPg0KICAgIDxkZXNjcmlwdGlvbj5TYW1wbGUgSmF2Y
UZYIDIuMCBhcHBsaWNhdGlvbi48L2Rlc2NyaXB0aW9uPg0KICAgIDxvZmZsaW
5lLWFsbG93ZWQvPg0KICA8L2luZm9ybWF0aW9uPg0KICA8cmVzb3VyY2VzPg0
KICAgIDxqZng6amF2Y

WZ4LXJ1bnRpbWUgdmVyc2lvbj0iMi4wKyIgaHJlZj0iaHR0cDovL2phdmFkbC
5zdW4uY29tL3dlYmFwcHMvZG93bmxvYWQvR2V0RmlsZS9qYXZhZngtbGF0ZXN
0L3dpbmRvd3MtaT

U4Ni9qYXZhZngyLmpubHAiLz4NCiAgPC9yZXNvdXJjZXM+DQogIDxyZXNvdXJ
jZXM+DQogICAgPGoyc2UgdmVyc2lvbj0iMS42KyIgaHJlZj0iaHR0cDovL2ph
dmEuc3VuLmNvbS9wcm

9kdWN0cy9hdXRvZGwvajJzZSIvPg0KICAgIDxqYXIgaHJlZj0iTXVzaWNQbGF
5LmphciIgc2l6ZT0iMzQzNjEiIGRvd25sb2FkPSJlYWdlciIgLz4NCiAgPC9y
ZXNvdXJjZXM+DQogIDxhcHBsZXQtZGVzYyAgd2lkdGg9IjUwMCIgaGVpZ2h0P
SI1MDAiIG1haW4tY2xhc3M9I

mNvbS5qYXZhZngubWFpbi5Ob0phdmFGWEZhbGxiYWNrIiAgbmFtZT0iTXVzaW
NQbGF5IiA+DQogICAgPHBhcmFtIG5hbWU9InJlcXVpcmVkRlhWZXJzaW9uIiB
2YWx1ZT0iMi4wKyIvPg0K

ICA8L2FwcGxldC1kZXNjPg0KICA8amZ4OmphdmFmeC1kZXNjICB3aWR0aD0iN
TAwIiBoZWlnaHQ9IjUwMCIgbWFpbi1jbGFzcz0ibXVzaWNwbGF5Lk11c2ljUG
xheSIgIG5hbWU9Ik11

c2ljUGxheSIgLz4NCiAgPHVwZGF0ZSBjaGVjaz0iYmFja2dyb3VuZCIvPg0KP
C9qbmxwPg0K'

            },

            {

                javafx : '2.0+'

            },

            {}

        );

    }

    <!-- Embed FX application into web page once page is loaded -->

    dtjava.addOnloadCallback(javafxEmbed);

</script>

For proper working your webpage must be in the same directory as is your jnlp and jar files other wise you need to configure url in above script.

It is also recommended to import the script at http://java.com/js/dtjava.js

4.       Here our music application needs to access the directory for reading the mp3 file so we need to provide appropriate rights to your application this can be done as follows.

Run your Notepad with administrator account. Open your Java Policy File. It is found at

C:\Program Files\Java\jre7\lib\security

Filename is java.policy

Append following lines to this file

grant

 {

permission java.util.PropertyPermission "*", "read";

permission java.io.FilePermission "<<ALL FILES>>", "read";

permission java.lang.RuntimePermission "stopThread";

permission java.lang.RuntimePermission "modifyThreadGroup";

permission java.lang.RuntimePermission "modifyThread";

permission java.net.SocketPermission "*", "connect,accept,resolve";

};

You also need to give RuntimePermission to Java so that your application can have permission to access the web pages. So you also need to add

grant

{

                permission java.lang.RuntimePermission "*";

}

5.       Now you need to have an object of  JSObject class in your FX application. It can be done as follows:

JSObject jsObject =  getHostServices().getWebContext();

Now you need to set  a named member of a JavaScript object.

This is done as follows:

jsObject.setMember("java", mediaControl);

Here java is the alias name you will use in your javascript code and mediaControl  is object of class whose public member functions you want to call through java page.

6.       JavaScript Code

Make JavaScript function where you can call public members of registered members. In our case registered member is mediaControl. We call its member method as follows:

<script>

function addSongs()

{

               

                var abc=java.addSong('Jaane Kaise','K.K.','Raqeeb','http://localhost/songs/jaane_kaise.mp3');

               

}

</script>

Now you can use this function anywhere you want.

When this function is called then it will in turn call addSong() method of mediaControl object  in Java FX application. This is how you can link a web page and JavaFX application.

Hope you got what I wanted to convey. All your queries and suggestions are welcome in comments section.