Good programming practices

Applet interaction with URL hash

March 15th, 2011

Applets don’t have to be just isolated box on a web page. They can communicate with a web page in which they are placed. Below is example of how can applet react to URL changes and also cause the changes.

Advantages

  • Possibility to creates anchor which changes the state of an applet, for example selecting a tab in tabbed pane.
  • State changes are added to window history, so you can use back and forward buttons.
  • No need to reload applet nor web page.

Example

When you click on a link or select another tab, both applet and url hash will change. You can also add the hash in address filed manually. Try also to use back/forward buttons. Unfortunately, this doesn’t work in IE.




English Polish Spanish

  1. var allow = true;
  2.  
  3. // change active tab
  4. function changeApplet() {
  5. if (allow) {
  6. var applet = $('#applet');
  7. applet[0].urlHashChanged(window.location.hash.substring(1));
  8. }
  9. allow = true;
  10. }
  11. // applet has been loaded
  12. function appletLoaded(x) {
  13. changeApplet();
  14. }
  15. // called by Applet
  16. function hashChanged(hash) {
  17. allow = false;
  18. window.location.hash = '#' + hash;
  19. }
  20. $(window).bind('hashchange', changeApplet);
Java   
  1. package urlhash;
  2.  
  3. import java.awt.BorderLayout;
  4. import java.awt.Container;
  5. import java.util.HashMap;
  6. import java.util.Map;
  7. import javax.swing.*;
  8. import javax.swing.event.*;
  9. import netscape.javascript.JSObject;
  10.  
  11. public class Applet extends JApplet implements ChangeListener {
  12. private final JPanel top = new JPanel();
  13. private final JLabel label = new JLabel("Hash: ");
  14. private final JTextField hashText = new JTextField();
  15. private final JTabbedPane center = new JTabbedPane();
  16. private final JPanel english = new JPanel();
  17. private final JPanel polish = new JPanel();
  18. private final JPanel spanish = new JPanel();
  19. private final Map map = new HashMap();
  20. // names of hashes
  21. private final String[] tabNames = new String[] { "english", "polish", "spanish" };
  22.  
  23. public Applet() {
  24. }
  25.  
  26. private void jbInit() {
  27. hashText.setEditable(false);
  28. top.setLayout(new BorderLayout());
  29. top.add(label, BorderLayout.WEST);
  30. top.add(hashText, BorderLayout.CENTER);
  31. center.addTab("English", english);
  32. center.addTab("Polish", polish);
  33. center.addTab("Spanish", spanish);
  34. english.add(new JLabel("Hello!"));
  35. polish.add(new JLabel("Cześć!"));
  36. spanish.add(new JLabel("¡Hola!"));
  37. Container c = this.getContentPane();
  38. c.setLayout(new BorderLayout());
  39. c.add(top, BorderLayout.NORTH);
  40. c.add(center, BorderLayout.CENTER);
  41. center.addChangeListener(this);
  42. }
  43.  
  44. public void init() {
  45. jbInit();
  46. for (int i = 0; i < tabNames.length; i++) {
  47. map.put(tabNames[i], i);
  48. }
  49. // informs JavaScript that applet is loaded
  50. JSObject win = JSObject.getWindow(this);
  51. win.call("appletLoaded", null);
  52. }
  53.  
  54. // Changes text and selects tab
  55. public void urlHashChanged(String hash) {
  56. hashText.setText(hash);
  57. Integer index = map.get(hash);
  58. if (index != null) {
  59. center.setSelectedIndex(index);
  60. }
  61. }
  62.  
  63. // Changed active tab
  64. public void stateChanged(ChangeEvent e) {
  65. String name = tabNames[center.getSelectedIndex()];
  66. hashText.setText(name);
  67. JSObject win = JSObject.getWindow(this);
  68. win.call("hashChanged", new String[] { name });
  69. }
  70. }

Technologies

Download whole example: urlhash.zip - 36KB

Leave a Response

You must be logged in to post a comment.