Controling Java from HTML

Hi,

I have the following problem. I am writing a project in Java that has to be deployed in a browser. I would like to save time and code the user interface in HTML (with maybe a little JScript).
I envision a frame set of roughly two parts:
1. The application logic - 0% screen real estate
2. The application GUI (maybe itself a
frameset) 100% display real estate

I would like your advice about the best way to communicate between the application logic and the GUI (obviously I'm not into writing all this stuff in Java and using interapplet
communication). The part where the GUI sends information to the application logic is more important (and I believe mre difficult).

Here's how you can help:
1. Give me a piece of your mind about these iseeuse.
2. Write an HTML page following my description where a small form (please don't be elaborate, one text field and a submit button will do nicely) talks to an applet loaded into the control logic. The applet respondes by wiping the GUI and printing the string it has received as a parameter.

For full points I'd like a working version of 2. However I'll award 200 points (whic is still quite a lot) to someone who answers 1 and does a good job of pointing to the mechanics.

Thanks for your time and effort,
Dotan
LVL 1
dotandAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

OviCommented:
I believe You realy need one example of LiveConnect like this. After that all will be easy :

Java class :

import java.applet.Applet;
import java.awt.Graphics;

public class Messenger extends Applet {
    public String msg;
    public int y = 12;
   
    public void init() {
        msg = new String("");
    }
   
    public void paint(Graphics g) {
        if (msg != null)
            g.drawString(msg, 10, y);
    }
   
    public void update(Graphics g) {
        paint(g);
    }
   
    public void drawText(String state, String m) {
        if (state.equals("true") || state.equals("-1")) drawSelected(m);//browser detection -1 - IE; true - NN
        else drawUnselected(m);
    }
   
    private void drawSelected(String m) {
        msg = m;
        repaint();
        y+=12;
    }
   
    private void drawUnselected(String m) {
        msg = "Unselected " + m;
        repaint();
        y+=12;
    }
}


//// HTML file

<HTML>
<body>
<P>

<FORM METHOD="POST" ENCTYPE="application/x-www-form-urlencoded">
<P>
<TABLE BORDER="2" cellspacing=15>
      
      <TR >
            <TD allign="center" ><INPUT TYPE="CHECKBOX" NAME="XXX1" onClick="document.applets[0].drawText(XXX1.checked,'First text')"> First<BR>
                  <INPUT TYPE="CHECKBOX" NAME="XXX2" onClick="document.applets[0].drawText(XXX2.checked,'Second text')"> Second<BR>
                  <INPUT TYPE="CHECKBOX" NAME="XXX3" onClick="document.applets[0].drawText(XXX3.checked,'Third text')"> Third</TD>
            <TD>
<APPLET CODE="Messenger.class" WIDTH="400" HEIGHT="400" ALIGN="BOTTOM">
                  </APPLET>
            </TD>
      </TR>
</TABLE>
</center>
</FORM>

</BODY>

</HTML>


Is working in both IE and NN
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
OviCommented:
If you need, I will change this example to one with a "Send" button which will read a TextField from example.

Tip : You can use this technique (LiveConnect) in both directions (HTML -> Java and Java -> HTML). After readings of course....:)
0
Ravindra76Commented:
Hi dotnad,


HTML forms used for clinet interface.
java applets are also used for client interface.

HTML form submissions are handled by serverside code like CGI, java servlets and ASP ...

No need to transfer afield from html to applet.


you can user parameters for applet
<param name=par value=val> after applet tag.

You can use eithher HTML form for user interface or

applet s

On server sied, youcan use java servlets.

Visit thsi for applet to servlet to communication:

http://www.j-nine.com/pubs/applet2servlet/ 

If you want applet to access database see this

From: Jod
 Date: Thursday, November 18 1999 - 02:40AM CST  
 
Look here for details on oracle (as an example)


http://wpi.wpi.edu/java.815/a64685/getsta1.htm#1002361 

For example:

JDBC Thin Driver

The Oracle JDBC Thin driver is a 100% Pure Java implementation that complies with the JDBC 1.22
 standard. The JDBC Thin driver uses Java Sockets to connect directly to the Oracle Server and
is typically used for Java applets in either a two-tier or three-tier configuration, though
 it can also be used for Java applications. The JDBC Thin driver provides its own
implementation of a TCP/IP version of Oracle's Net8. Because it is written entirely in Java,
 this driver is platform-independent. When the JDBC Thin driver is used with an applet,
 the client browser must have the capability to support Java sockets.

The JDBC Thin driver does not require Oracle software on the client side;
 it can be downloaded into a browser simultaneously with the Java applet being run.

Best of luck From the client (usually a browser), you select a URL from an HTML page that contains a
Java applet tag. The web server downloads the Java applet and the JDBC Thin driver to the
 client. The JDBC Thin driver then establishes a direct connection to the database server
using Java Sockets.

The JDBC Thin driver connects to any Oracle database of version 7.2.3 and higher.
 The JDBC Thin driver allows a direct connection to the database by emulating Net8 and
 TTC (the wire protocol used by OCI) on top of Java sockets. The driver supports
only TCP/IP protocol and requires a TNS listener to be listening on TCP/IP sockets
from the database server.

There are four types of driver that Java can use to connect to a database directly:

1.The JDBC-ODBC bridge provides JDBC access via most ODBC drivers.

2.A native-API partly-Java driver converts JDBC calls into calls on the client
  API for Oracle, Sybase, Informix, DB2, or other databases.

3.A net-protocol pure-Java driver translates JDBC calls into a database-independent
   net protocol which is then translated to a proprietary database vendor network protocol
  by a server.

4.A native-protocol pure-Java driver converts JDBC calls into a proprietary database vendor
 network protocol.


A Type 3 driver can connect directly from the client to the Server and a two-tier
 type 4 driver could also do this if it connects directly across the network to the database
 server because neither of these types of driver have any dependence on software installed
 on the client.

Other types of driver require the applet to be signed in order to access local propritary
 code to get to the database.


None of these specifically require RMI, but you will need to check what support
 fetures your server has for JDBC connections.


There is lots of info here:

http://java.sun.com/products/jdbc 

and amongst others, some overviews here:

http://java.sun.com/docs/books/jdbc/intro.html 

and

http://www5conf.inria.fr/fich_html/papers/P23/Overview.html 
 
 Type 3 and type 4 expensive drivers.

Two solutions for you.

1. Uisng type 3 and type 4 drivers.

2. Writing database login in java servlets and calling servlets from applet through URLConnection class.
 
Best of luck
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

OviCommented:
I believe he wants SMART IDEAS....
0
OviCommented:
.. easy to implement and powerful regarding speed. CGI is a little bit slower don't you think ? Parameters doesn't resolve the problem of dynamic data changes, only by regenerating the entire HTML containing the applet. - Is not so good ideea.
0
dotandAuthor Commented:
Hi Ovi,

I like your code. Before awarding you the points I'd like to ask you to remedy one thing in the example and answer a small question.

1. Please have the demonstration run in a frame set like I described (i.e application logic is 0% visible). The applet sends back the response asd an HTML file to the frameset.

2. Perhaps I did not make it clear but the applet (application logic) should remain static during the runnig of the process. That is the only thing that changes is the GUI (this way the application gets loaded only once and does not have to re-new databse connections all the time).
Please explain if your method created the applet after every change or is it static?

Ravinda76, thanks for your comments. I know all about servelets but this is just the basic project prototype and it would be too much to drag in servelets just now. The reason for keeping the application logic separated from the GUI is exactly for the reason that later it shall be relatively painless to modify the thing to user servelets (if and when thi is required).

So Ovi, answer my small quibbles and the points are yours.

Thanks,
Dotan
0
OviCommented:
Ok, let me explain what I've already done in this field (question number 2), about Q1 you will receive soon your new version.

I've created few months earlier an applet which can display touristic info's about a country. The project has two main parts :
1.HTML - containing few checkboxes with touristic topics (museums, theaters, libraries, etc)
2.Java applet - containing a map of an country. In this map the user can see all principal towns of the country in two colors : blue - the ones wich doesn't have any of the touristic specified topics and green - for those who have at least one topic present.
 For this I use ADABASD as database sistem.

What is the role of LiveConnect ? : The user can choose an combination of checkboxes on HTML part, and in the map will see the towns coresponding to his "filter" let's say. So any change made on HTML side will be automatically reflected in the applet.(And with this I respond to your question about the GUI - the applet is loaded only and only once, the changes are suported by him). I hope you understand me until here.

For example you have this topics (checkboxes) :
  - x
  - y
  - z
, and the towns t1(having x topic), t2(having z topic), t3 (having x,y topics), t4(having x,y,z).

Let's say you select :
    x : you will see in applet t1, t3,t4
    y : you will see in applet t3,t4
    z : you will see in applet t2,t4
 x,y : you will see in applet t3,t4
x,y,z : you will see in applet t4, and so on.

The conection to database is made only once to load in vectors (in my case) the information, so in applet you only swich between diferent filters, acording to the selection made in HTML.


Cuting the code :

HTML :

<TD allign="center" ><INPUT TYPE="CHECKBOX" NAME="XXX1"
                    onClick="document.applets[0].drawText(XXX1.checked,'First text')"> First<BR>
                    <INPUT TYPE="CHECKBOX" NAME="XXX2" onClick="document.applets[0].drawText(XXX2.checked,'Second text')">
                    Second<BR>
                    <INPUT TYPE="CHECKBOX" NAME="XXX3" onClick="document.applets[0].drawText(XXX3.checked,'Third text')">
                    Third</TD>

You see in every checbox declaration onClick="document.applets[0].drawText(XXX1.checked,'First text')" - this meens that I send to the applet curent state of the checkbox (XXX1.checked) and a string containing the message to display in applet using the method drawText (you will find the definition of this method in the applet code)

Applet (view added comments):

import java.applet.Applet;
import java.awt.Graphics;

public class Messenger extends Applet {
    public String msg; //string to display
    public int y = 12; //distance between drawed rows
                       
    public void init() {
        msg = new String("");
    }
                         
     public void paint(Graphics g) { //draw message only if not null
         if (msg != null)
         g.drawString(msg, 10, y);
     }
                         
     public void update(Graphics g) {
         paint(g);
     }
                         
     public void drawText(String state, String m) {
     // method called with LiveConnect from HTML  - parameters the state of the checkbok, and message to display
         if (state.equals("true") || state.equals("-1")) drawSelected(m);//browser detection for state -1 - IE; true - NN
         else drawUnselected(m);
     }
                         
     private void drawSelected(String m) { //call paint with selected checkbox message
         msg = m;
         repaint();
         y+=12; //next row number
     }
                         
     private void drawUnselected(String m) { //call paint with unselected checkbox message
         msg = "Unselected " + m;
         repaint();
         y+=12;
     }
}



OK, if you have more questions in this part, please ask.

The new version will be soon here, so please wait a little.
0
OviCommented:
Ok, let me explain what I've already done in this field (question number 2), about Q1 you will receive soon your new version.

I've created few months earlier an applet which can display touristic info's about a country. The project has two main parts :
1.HTML - containing few checkboxes with touristic topics (museums, theaters, libraries, etc)
2.Java applet - containing a map of an country. In this map the user can see all principal towns of the country in two colors : blue - the ones wich doesn't have any of the touristic specified topics and green - for those who have at least one topic present.
 For this I use ADABASD as database sistem.

What is the role of LiveConnect ? : The user can choose an combination of checkboxes on HTML part, and in the map will see the towns coresponding to his "filter" let's say. So any change made on HTML side will be automatically reflected in the applet.(And with this I respond to your question about the GUI - the applet is loaded only and only once, the changes are suported by him). I hope you understand me until here.

For example you have this topics (checkboxes) :
  - x
  - y
  - z
, and the towns t1(having x topic), t2(having z topic), t3 (having x,y topics), t4(having x,y,z).

Let's say you select :
    x : you will see in applet t1, t3,t4
    y : you will see in applet t3,t4
    z : you will see in applet t2,t4
 x,y : you will see in applet t3,t4
x,y,z : you will see in applet t4, and so on.

The conection to database is made only once to load in vectors (in my case) the information, so in applet you only swich between diferent filters, acording to the selection made in HTML.


Cuting the code :

HTML :

<TD allign="center" ><INPUT TYPE="CHECKBOX" NAME="XXX1"
                    onClick="document.applets[0].drawText(XXX1.checked,'First text')"> First<BR>
                    <INPUT TYPE="CHECKBOX" NAME="XXX2" onClick="document.applets[0].drawText(XXX2.checked,'Second text')">
                    Second<BR>
                    <INPUT TYPE="CHECKBOX" NAME="XXX3" onClick="document.applets[0].drawText(XXX3.checked,'Third text')">
                    Third</TD>

You see in every checbox declaration onClick="document.applets[0].drawText(XXX1.checked,'First text')" - this meens that I send to the applet curent state of the checkbox (XXX1.checked) and a string containing the message to display in applet using the method drawText (you will find the definition of this method in the applet code)

Applet (view added comments):

import java.applet.Applet;
import java.awt.Graphics;

public class Messenger extends Applet {
    public String msg; //string to display
    public int y = 12; //distance between drawed rows
                       
    public void init() {
        msg = new String("");
    }
                         
     public void paint(Graphics g) { //draw message only if not null
         if (msg != null)
         g.drawString(msg, 10, y);
     }
                         
     public void update(Graphics g) {
         paint(g);
     }
                         
     public void drawText(String state, String m) {
     // method called with LiveConnect from HTML  - parameters the state of the checkbok, and message to display
         if (state.equals("true") || state.equals("-1")) drawSelected(m);//browser detection for state -1 - IE; true - NN
         else drawUnselected(m);
     }
                         
     private void drawSelected(String m) { //call paint with selected checkbox message
         msg = m;
         repaint();
         y+=12; //next row number
     }
                         
     private void drawUnselected(String m) { //call paint with unselected checkbox message
         msg = "Unselected " + m;
         repaint();
         y+=12;
     }
}



OK, if you have more questions in this part, please ask.

The new version will be soon here, so please wait a little.
0
OviCommented:
Ok, at Q1 here is the solution (I hope that this time I've understand correctly)

Applet code remain unchanged.

//////////////index.html : //////////////////////////////
<HTML>
<FRAMESET COLS="40,*">
<FRAME src="check.html">
<FRAME src="applet.html">
</FRAMESET>
</HTML>
//////////////////////End index.html///////////////////

//////////////check.html : //////////////////////////////
<HTML>
<BODY>
<script language="JavaScript"><!--
    document.write('<FORM>');
    document.write('<INPUT TYPE=CHECKBOX NAME=\"XXX1\" onClick=\"parent.frames[1].document.applets[0].drawText(XXX1.checked,\'First text\')\"> First<BR>');
    document.write('<INPUT TYPE=\"CHECKBOX\" NAME=\"XXX2\" onClick=\"parent.frames[1].document.applets[0].drawText(XXX2.checked,\'Second text\')\"> Second<BR>');
    document.write('<INPUT TYPE=\"CHECKBOX\" NAME=\"XXX3\" onClick=\"parent.frames[1].document.applets[0].drawText(XXX3.checked,\'Third text\')\"> Third');
    document.write('</FORM>');
// --></script>  
</BODY>
</HTML>
//////////////////////End check.html///////////////////

//////////////applet.html : //////////////////////////////
<HTML>
<BODY>

<script language="JavaScript"><!--
    document.write('<applet code=Messenger.class width=100% ');
    document.write('height=100% id=\"Messenger\" ');
    document.write('name=\"Messenger\" >');
    document.write('</applet>');
// --></script>
</BODY>
</HTML>

//////////////////////End applet.html///////////////////
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Java

From novice to tech pro — start learning today.