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.
- First of all you need to Code your JavaFX application. Its tutorials are very easily available.
- Change the Configuration of Project:
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
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
jnlp_content: 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLT
giPz4NCjxqbmxwIHNwZWM9IjEuMCIgeG1sbnM6amZ4PSJodHRwOi8vamF2YWZ4
LmNvbSIgaHJlZj0iTXVzaWNQbGF5LmpubHAiPg0KICA8aW5mb3JtYXRpb24+DQ
ogICAgPHRpdGxlPk11c2ljUGxheTwvdGl0bGU+DQogI
CAgPHZlbmRvcj5Nb2hpdDwvdmVuZG9yPg0KICAgIDxkZXNjcmlwdGlvbj5TYW1
wbGUgSmF2YUZYIDIuMCBhcHBsaWNhdGlvbi48L2Rlc2NyaXB0aW9uPg0KICAgI
DxvZmZsaW5lLWFsbG93ZWQvPg0KICA8L2luZm9ybWHBhcmFtIG5hbWU9InJlcX
VpcmVkRlhW
wbGUgSmF2YUZYIDIuMCBhcHBsaWNhdGlvbi48L2Rlc2NyaXB0aW9uPg0KICAgI
DxvZmZsaW5lLWFsbG93ZWQvPg0KICA8L2luZm9ybWHBhcmFtIG5hbWU9InJlcX
VpcmVkRlhW
ZXJzaW9uIiB2YWx1ZT0iMi4wKyIvPg0KICA8L2FwcGxldC1kZXNjPg0KICA8am
Z4OmphdmFmeC1kZXNjICB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgbWFpbi1j
bGFzcz0
Z4OmphdmFmeC1kZXNjICB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgbWFpbi1j
bGFzcz0
ibXVzaWNwbGF5Lk11c2ljUGxheSIgIG5hbWU9Ik11c2ljUGxheSIgLz4NCiAgP
HVwZGF0ZSBjaGVjaz0iYmFja2dyb3VuZCIvPg0KPC9qbmxwPg0K'
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
IHNwZWM9IjEuMCIgeG1sbnM6amZ4PSJodHRwOi8vamF2YWZ4LmNvbSIgaHJlZ
j0iTXVzaWNQbGF5LmpubHAiPg0KICA8aW5mb3JtYXRpb24+DQogICAgPHRpdG
xlPk11c2ljUGxheTwvdGl0bGU+DQogICAgPHZlbmRv
cj5Nb2hpdDwvdmVuZG9yPg0KICAgIDxkZXNjcmlwdGlvbj5TYW1wbGUgSmF2Y
UZYIDIuMCBhcHBsaWNhdGlvbi48L2Rlc2NyaXB0aW9uPg0KICAgIDxvZmZsaW
5lLWFsbG93ZWQvPg0KICA8L2luZm9ybWF0aW9uPg0KICA8cmVzb3VyY2VzPg0
KICAgIDxqZng6amF2Y
UZYIDIuMCBhcHBsaWNhdGlvbi48L2Rlc2NyaXB0aW9uPg0KICAgIDxvZmZsaW
5lLWFsbG93ZWQvPg0KICA8L2luZm9ybWF0aW9uPg0KICA8cmVzb3VyY2VzPg0
KICAgIDxqZng6amF2Y
WZ4LXJ1bnRpbWUgdmVyc2lvbj0iMi4wKyIgaHJlZj0iaHR0cDovL2phdmFkbC
5zdW4uY29tL3dlYmFwcHMvZG93bmxvYWQvR2V0RmlsZS9qYXZhZngtbGF0ZXN
0L3dpbmRvd3MtaT
5zdW4uY29tL3dlYmFwcHMvZG93bmxvYWQvR2V0RmlsZS9qYXZhZngtbGF0ZXN
0L3dpbmRvd3MtaT
U4Ni9qYXZhZngyLmpubHAiLz4NCiAgPC9yZXNvdXJjZXM+DQogIDxyZXNvdXJ
jZXM+DQogICAgPGoyc2UgdmVyc2lvbj0iMS42KyIgaHJlZj0iaHR0cDovL2ph
dmEuc3VuLmNvbS9wcm
jZXM+DQogICAgPGoyc2UgdmVyc2lvbj0iMS42KyIgaHJlZj0iaHR0cDovL2ph
dmEuc3VuLmNvbS9wcm
9kdWN0cy9hdXRvZGwvajJzZSIvPg0KICAgIDxqYXIgaHJlZj0iTXVzaWNQbGF
5LmphciIgc2l6ZT0iMzQzNjEiIGRvd25sb2FkPSJlYWdlciIgLz4NCiAgPC9y
ZXNvdXJjZXM+DQogIDxhcHBsZXQtZGVzYyAgd2lkdGg9IjUwMCIgaGVpZ2h0P
SI1MDAiIG1haW4tY2xhc3M9I
5LmphciIgc2l6ZT0iMzQzNjEiIGRvd25sb2FkPSJlYWdlciIgLz4NCiAgPC9y
ZXNvdXJjZXM+DQogIDxhcHBsZXQtZGVzYyAgd2lkdGg9IjUwMCIgaGVpZ2h0P
SI1MDAiIG1haW4tY2xhc3M9I
mNvbS5qYXZhZngubWFpbi5Ob0phdmFGWEZhbGxiYWNrIiAgbmFtZT0iTXVzaW
NQbGF5IiA+DQogICAgPHBhcmFtIG5hbWU9InJlcXVpcmVkRlhWZXJzaW9uIiB
2YWx1ZT0iMi4wKyIvPg0K
NQbGF5IiA+DQogICAgPHBhcmFtIG5hbWU9InJlcXVpcmVkRlhWZXJzaW9uIiB
2YWx1ZT0iMi4wKyIvPg0K
ICA8L2FwcGxldC1kZXNjPg0KICA8amZ4OmphdmFmeC1kZXNjICB3aWR0aD0iN
TAwIiBoZWlnaHQ9IjUwMCIgbWFpbi1jbGFzcz0ibXVzaWNwbGF5Lk11c2ljUG
xheSIgIG5hbWU9Ik11
TAwIiBoZWlnaHQ9IjUwMCIgbWFpbi1jbGFzcz0ibXVzaWNwbGF5Lk11c2ljUG
xheSIgIG5hbWU9Ik11
c2ljUGxheSIgLz4NCiAgPHVwZGF0ZSBjaGVjaz0iYmFja2dyb3VuZCIvPg0KP
C9qbmxwPg0K'
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.