I just recently discovered prefuse, last week. It seems to be a very exciting way to visualize normally banal material. My uses for the toolkit may be a bit amateur relative to it's capabilities. I plan to modify the TreeView source to create a visual sitemap for my site. I have already determined how to edit the source data xml file, and I have a working tree created. I still have a large number of changes to make before I can get it online, and hence I need some help.
First off, I am new to java. I have some programming experience yet a lot of the code in the source TreeView file is over my head. Bascially all I have been able to do so far is edit the xml file and create my labels. This said, if you have any advice for me can you please post it in the most user-friendly way possible. Thanks.
My goal is to create an applet that can be easily integrated into my current CMS that will provide a clickable navigation tree. This tree will be used to provide an alternative, not a replacement, for conventional navigation. I understand that the BrowserLauncher API(?) can be used to create hyperlinks on the various labels. I really have no idea how to use this tool. I'm hoping to have links be clickable with the left mouse button, which brings in the conflict of focus. Do I have any alternative ways to focus on the labels? Ideally I would have the labels expand and focus on mouseover.
Also, is there a way to prevent material from spilling outside the window? I'm looking to create some sort of selective barier that would allow the current relevant information to all be shown on the page, while branches that are not relevant can spill outside the window. Here is what I mean: say I mouseover a main category called 'Movies,' I want all the sub-categories of movies to fit in the window, while another main categories get moved off page to compensate. This desire arises from me playing around with the TreeView demo and seeing how it could be hard to navigate for a novice user. I hope this makes some sense, or that there is some alternative way to make the tree more user-friendly.
In the prefuse demo video, the degree of interest tree demo had a filter level slider. Is this code available?
Also, when searching, is there a way to expand the whole tree and highlight the search terms. Right now the demo doesn't expand the tree, it just highlights the visible terms.
Is there an easy way to integrate a TreeView applet into my site? I am a complete newbie at java, and I don't know how to create an in-page applet. Which 'library' files need to be hosted on the server? Do I use a jar?
Thanks for your help and patience. Cheers.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Basically, all you want is possible with prefuse.
For basic usage on an applet, search google or this forum, that should be more helpful. You will need the prefuse.jar for it (which is nothing else than a zip file with .jar at the end and a manifest file) and you own compiled classes (*.java compile it -> *.class). Your compiled classes may be included in the jar. The applet tag in you html page will look something like this:
<applet name="GraphEditor" codebase="applet/" code="prefuse.demos.TreeView" archive="prefuse.jar,anyOtherJarFileGoesHere.jar" width="1000" height="750">
</applet>
codebase is the directory where it looks for the jar files and code is the class to start. A good way for this class is to extend JPrefuseApplet, as in the demo applets. Oh, and all those files lie on the server.
To learn prefuse, read the User's Manual http://prefuse.org/doc/manual and look at the javadocs (the comments) for the java classes(files). For example:
addControlListener(new FocusControl(1, "filter"));
Change the 1 to a 0, that will solve your focus conflict, as it now reacts on mouseover. That's not working perfectly, as the items start moving and if the mouse leaves the bounds of an item, it will loose the focus; but thats not hard to change, as you can copy the FocusControl, rename it to MyFocusControl for example and just modify the itemExited method. Or you can decide to focus on singleClick and to open the link on doubleClick ;-)
And that leads to the BrowserLauncher. The simplest way to explain it is that you try it. The DataMountain demo contains an example.
The GraphView demo has a Distance slider, try it ;-)
The search things are also not too complicated, as you need one or two additional actions, one that expands the tree to all search items that are actually not visible (or even expand the whole tree) and maybe another action to pan (move the graph in x/y direction) to show all or at least one of the found items. I'd suggest to concentrate on this later.
hope that helps, greetz Björn
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Alright, I've finally gotten enough other stuff done that I can revisit this little pet project. Right now, I'm trying to do as little work as possible to add as much functionality to my app.
My first priority is to create clickable nodes. I've decided to use a double click to open a browser to a URL. I've looked at the application of BrowserLauncher in the DataMountain demo code, and it seems pretty straightforward. My problem is finding a way to get my links into the TreeView code. All the links have a common beginning URL, with a "Category" number on the end. So, all I need to do is find a way to retrieve the category code from a generated XML document and then use a BrowserLauncher(URL+cat) command.
My current problem is that I can't find a way to import the category codes. First off, I have created a new AttributeDecl in the XML data file, and have just added a [Category = "105"] piece of code in each branch/leaf attribute. Will this work?
Next, I am trying to find a way to get TreeMLReader to recognize and import the category values. Is this done in the 'ParseAttribute' loop?
Also, I've seen the getNodeTable command in Graph. Do I need to create some sort of new "getCatTable"?
Thanks for your help and patience, I am really in over my head on this one.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Not much time right now, but it should be sufficient to declare the additional attribut "cat" in the xml file that is read by the treemlreader (if you use one). samples of this are within the demos, you may search for "mlreader" over the demos directory/workingset to find the demos and the corresponding xml files... hope that short post helps...
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
So I understand how to create the attribute in the xml source file. Does treemlreader automatically parse this attribute? I can't really tell how it reads parameters other than the "name," or if it does this at all.
Assuming TreeMLReader doesn't need any changes to read in the "cat" attribute, where does this value get stored? I am trying to use the BrowserLauncher code from the DataMountain demo in my treeview code to access the "cat" value and then open a new window. I'm not sure how the BrowserLauncher section of code should read the "cat" value, and from where. Any advice?
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Yes, this attribute will be parsed automatically. Of course you have to set a value in each node for this attribute. You don't need to create a new table!
You can access this value on each item by:
item.get("cat");
or even: item.getString("cat");
if know it contains a String.
If item is a VisualItem (e.g. from iterating over visualization.items();), then the backing data tuple will be called for its "cat" value.
Look at the DataMountain demo, it makes use of the BrowserLauncher with a similar approach of concatenating an id fild with a base URL.
If you run an applet, you don't need the BroswerLauncher and can use the appletContext (not sure about the name, something like this) to call URLs in the Browser.
hope that helps, greetz Björn
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Alright, I've figured out how to integrate the "cat" string. Everything works good and well using BrowserLauncher. I run into a bit of trouble when trying to run the applet through a site. Using Eclipse's "run as>java applet," BrowserLauncher runs fine. When the applet is run through HTML, the linked nodes don't open new windows.. simply nothing happens when I double click.
So, I'm assuming that somehow BroswerLauncher can't get its bearings when run as an embedded applet, so it doesn't work. This leads me to getAppletContext().showDocument. I've figured out how to create a URL from the Strings, but I can't seem to run getAppletContext() from within the TreeView program. It seems to me that getAppletContext(), as its name implies, only works in the actual code of the applet.
This creates a problem for me, because the applet code only references the program code. The specific error that Eclipse gives me is:
"The method getAppletContext() is undefined for the type new ControlAdapter(){}"
Can I define the method somehow inside the TreeView code? Any ideas on how to avert this problem?
Thanks for all your help, I've come a long way in a week.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Yes, BrowserLauncher for applications and getAppletContext().showDocument for applets.
When you create your Applet (does it extend JPrefuseApplet?), you should store a reference to it. Of course you can call getAppletContext only on that Applet object. I haven't tried, but the code below should do it(?)
public class MyApplet extends JPrefuseApplet {
public void init() {
Controller.setApplet(this); //store the reference to this applet object in the class 'Controller' or pass it to your custom classes where you make use of it.
...
}
}
Thanks for the quick response Björn. Unfortunately, I still need a bit of hand-holding. Please bear with me.
I am building my applet off of the TreeView applet found in the Demos/Applets folder. It extends JPrefuseApplet. When you say store a reference to this applet objevt in the class 'Controller,' do you mean to create a new custom class called 'Controller'?
I'm not entirely sure how to create a reference to an applet object. I tried to create a custom class, with a method called setApplet. I figured out how to pass the "this" command to the setApplet method, but I get confused here. How should I be using this reference? You said to call "Controller.getApplet()....." somewhere else, specifically in which file?
My idea was to have ControlAdapter class send the url variable to my custom Class. In this class, a method (working under "setApplet(TreeView view)") would load the url with getAppletContext().showdocument(url). I am having a variety of problems with this code, so I'm assuming I'm doing something completely wrong.
All of this was my best attempt to try to do what you suggested in your last post. I am still a complete newbie to Java, so I'm guessing that what I did was not at all what you suggested...
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Oh, sorry, I forgot about your Java experience...
For now, forgot about this Controller class - I don't want to confuse you.
I'll try to write a tiny guide, so I hope you'll be able to reconstruct it:
1) In your Applets init method where you create your Treeview (or your main class) object, pass in the applet. this will look similar to this:
public void init() {
...
//either:
YourClass yourClass = new YourClass(this);
this.setContentPane(yourClass.getMainPane());
//or similar to the TreeView demo:
this.setContentPane(
prefuse.demos.TreeView.demo("/chi-ontology.xml.gz", "name", this));
}
2) There has to be a corresponding Constructor in either YourClass or a corresponding demo method in TreeView:
public class YourClass {
private JApplet applet;
public YourClass(JApplet applet) {
//either this, if you call URLs in this class
this.applet = applet;
//or this, if you call URLs in "CustomClass"
[CustomClass cc = new CustomClass(applet);]
...//do your initializations here
}
3) We are nearly done, you can now call
applet.getAppletContext()... anywhere in the class where you have the private JApplet applet; declared and assigned.
You mentioned a custom class that will load the URL (I call it 'CustomClass' for now). You'll have to pass the applet through to that CustomClass, so you can use it there. The code in [] is doing this in 1)
//possible look of CustomClass
public CustomClass {
private JApplet applet;
...
public CustomClass(JApplet applet){
this.applet = applet;
}
...
public void loadURL(String urlVariable){
String URL = ...; //build your URL here
applet.getAppletContext().showDoc...;
}
}
I hope that was clear enough, maybe you should play around with some simpler Java examples?
greetz, Björn
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
I just recently discovered prefuse, last week. It seems to be a very exciting way to visualize normally banal material. My uses for the toolkit may be a bit amateur relative to it's capabilities. I plan to modify the TreeView source to create a visual sitemap for my site. I have already determined how to edit the source data xml file, and I have a working tree created. I still have a large number of changes to make before I can get it online, and hence I need some help.
First off, I am new to java. I have some programming experience yet a lot of the code in the source TreeView file is over my head. Bascially all I have been able to do so far is edit the xml file and create my labels. This said, if you have any advice for me can you please post it in the most user-friendly way possible. Thanks.
My goal is to create an applet that can be easily integrated into my current CMS that will provide a clickable navigation tree. This tree will be used to provide an alternative, not a replacement, for conventional navigation. I understand that the BrowserLauncher API(?) can be used to create hyperlinks on the various labels. I really have no idea how to use this tool. I'm hoping to have links be clickable with the left mouse button, which brings in the conflict of focus. Do I have any alternative ways to focus on the labels? Ideally I would have the labels expand and focus on mouseover.
Also, is there a way to prevent material from spilling outside the window? I'm looking to create some sort of selective barier that would allow the current relevant information to all be shown on the page, while branches that are not relevant can spill outside the window. Here is what I mean: say I mouseover a main category called 'Movies,' I want all the sub-categories of movies to fit in the window, while another main categories get moved off page to compensate. This desire arises from me playing around with the TreeView demo and seeing how it could be hard to navigate for a novice user. I hope this makes some sense, or that there is some alternative way to make the tree more user-friendly.
In the prefuse demo video, the degree of interest tree demo had a filter level slider. Is this code available?
Also, when searching, is there a way to expand the whole tree and highlight the search terms. Right now the demo doesn't expand the tree, it just highlights the visible terms.
Is there an easy way to integrate a TreeView applet into my site? I am a complete newbie at java, and I don't know how to create an in-page applet. Which 'library' files need to be hosted on the server? Do I use a jar?
Thanks for your help and patience. Cheers.
Basically, all you want is possible with prefuse.
For basic usage on an applet, search google or this forum, that should be more helpful. You will need the prefuse.jar for it (which is nothing else than a zip file with .jar at the end and a manifest file) and you own compiled classes (*.java compile it -> *.class). Your compiled classes may be included in the jar. The applet tag in you html page will look something like this:
<applet name="GraphEditor" codebase="applet/" code="prefuse.demos.TreeView" archive="prefuse.jar,anyOtherJarFileGoesHere.jar" width="1000" height="750">
</applet>
codebase is the directory where it looks for the jar files and code is the class to start. A good way for this class is to extend JPrefuseApplet, as in the demo applets. Oh, and all those files lie on the server.
To learn prefuse, read the User's Manual http://prefuse.org/doc/manual and look at the javadocs (the comments) for the java classes(files). For example:
addControlListener(new FocusControl(1, "filter"));
Change the 1 to a 0, that will solve your focus conflict, as it now reacts on mouseover. That's not working perfectly, as the items start moving and if the mouse leaves the bounds of an item, it will loose the focus; but thats not hard to change, as you can copy the FocusControl, rename it to MyFocusControl for example and just modify the itemExited method. Or you can decide to focus on singleClick and to open the link on doubleClick ;-)
And that leads to the BrowserLauncher. The simplest way to explain it is that you try it. The DataMountain demo contains an example.
The GraphView demo has a Distance slider, try it ;-)
The search things are also not too complicated, as you need one or two additional actions, one that expands the tree to all search items that are actually not visible (or even expand the whole tree) and maybe another action to pan (move the graph in x/y direction) to show all or at least one of the found items. I'd suggest to concentrate on this later.
hope that helps, greetz Björn
Alright, I've finally gotten enough other stuff done that I can revisit this little pet project. Right now, I'm trying to do as little work as possible to add as much functionality to my app.
My first priority is to create clickable nodes. I've decided to use a double click to open a browser to a URL. I've looked at the application of BrowserLauncher in the DataMountain demo code, and it seems pretty straightforward. My problem is finding a way to get my links into the TreeView code. All the links have a common beginning URL, with a "Category" number on the end. So, all I need to do is find a way to retrieve the category code from a generated XML document and then use a BrowserLauncher(URL+cat) command.
My current problem is that I can't find a way to import the category codes. First off, I have created a new AttributeDecl in the XML data file, and have just added a [Category = "105"] piece of code in each branch/leaf attribute. Will this work?
Next, I am trying to find a way to get TreeMLReader to recognize and import the category values. Is this done in the 'ParseAttribute' loop?
Also, I've seen the getNodeTable command in Graph. Do I need to create some sort of new "getCatTable"?
Thanks for your help and patience, I am really in over my head on this one.
Not much time right now, but it should be sufficient to declare the additional attribut "cat" in the xml file that is read by the treemlreader (if you use one). samples of this are within the demos, you may search for "mlreader" over the demos directory/workingset to find the demos and the corresponding xml files... hope that short post helps...
So I understand how to create the attribute in the xml source file. Does treemlreader automatically parse this attribute? I can't really tell how it reads parameters other than the "name," or if it does this at all.
Assuming TreeMLReader doesn't need any changes to read in the "cat" attribute, where does this value get stored? I am trying to use the BrowserLauncher code from the DataMountain demo in my treeview code to access the "cat" value and then open a new window. I'm not sure how the BrowserLauncher section of code should read the "cat" value, and from where. Any advice?
Yes, this attribute will be parsed automatically. Of course you have to set a value in each node for this attribute. You don't need to create a new table!
You can access this value on each item by:
item.get("cat");
or even: item.getString("cat");
if know it contains a String.
If item is a VisualItem (e.g. from iterating over visualization.items();), then the backing data tuple will be called for its "cat" value.
Look at the DataMountain demo, it makes use of the BrowserLauncher with a similar approach of concatenating an id fild with a base URL.
If you run an applet, you don't need the BroswerLauncher and can use the appletContext (not sure about the name, something like this) to call URLs in the Browser.
hope that helps, greetz Björn
Alright, I've figured out how to integrate the "cat" string. Everything works good and well using BrowserLauncher. I run into a bit of trouble when trying to run the applet through a site. Using Eclipse's "run as>java applet," BrowserLauncher runs fine. When the applet is run through HTML, the linked nodes don't open new windows.. simply nothing happens when I double click.
So, I'm assuming that somehow BroswerLauncher can't get its bearings when run as an embedded applet, so it doesn't work. This leads me to getAppletContext().showDocument. I've figured out how to create a URL from the Strings, but I can't seem to run getAppletContext() from within the TreeView program. It seems to me that getAppletContext(), as its name implies, only works in the actual code of the applet.
This creates a problem for me, because the applet code only references the program code. The specific error that Eclipse gives me is:
"The method getAppletContext() is undefined for the type new ControlAdapter(){}"
Can I define the method somehow inside the TreeView code? Any ideas on how to avert this problem?
Thanks for all your help, I've come a long way in a week.
Yes, BrowserLauncher for applications and getAppletContext().showDocument for applets.
When you create your Applet (does it extend JPrefuseApplet?), you should store a reference to it. Of course you can call getAppletContext only on that Applet object. I haven't tried, but the code below should do it(?)
public class MyApplet extends JPrefuseApplet {
public void init() {
Controller.setApplet(this); //store the reference to this applet object in the class 'Controller' or pass it to your custom classes where you make use of it.
...
}
}
Somewhere else call Controller.getApplet().getAppletContext().showDocument...
hope that helps, Björn
Thanks for the quick response Björn. Unfortunately, I still need a bit of hand-holding. Please bear with me.
I am building my applet off of the TreeView applet found in the Demos/Applets folder. It extends JPrefuseApplet. When you say store a reference to this applet objevt in the class 'Controller,' do you mean to create a new custom class called 'Controller'?
I'm not entirely sure how to create a reference to an applet object. I tried to create a custom class, with a method called setApplet. I figured out how to pass the "this" command to the setApplet method, but I get confused here. How should I be using this reference? You said to call "Controller.getApplet()....." somewhere else, specifically in which file?
My idea was to have ControlAdapter class send the url variable to my custom Class. In this class, a method (working under "setApplet(TreeView view)") would load the url with getAppletContext().showdocument(url). I am having a variety of problems with this code, so I'm assuming I'm doing something completely wrong.
All of this was my best attempt to try to do what you suggested in your last post. I am still a complete newbie to Java, so I'm guessing that what I did was not at all what you suggested...
Oh, sorry, I forgot about your Java experience...
For now, forgot about this Controller class - I don't want to confuse you.
I'll try to write a tiny guide, so I hope you'll be able to reconstruct it:
1) In your Applets init method where you create your Treeview (or your main class) object, pass in the applet. this will look similar to this:
public void init() {
...
//either:
YourClass yourClass = new YourClass(this);
this.setContentPane(yourClass.getMainPane());
//or similar to the TreeView demo:
this.setContentPane(
prefuse.demos.TreeView.demo("/chi-ontology.xml.gz", "name", this));
}
2) There has to be a corresponding Constructor in either YourClass or a corresponding demo method in TreeView:
public class YourClass {
private JApplet applet;
public YourClass(JApplet applet) {
//either this, if you call URLs in this class
this.applet = applet;
//or this, if you call URLs in "CustomClass"
[CustomClass cc = new CustomClass(applet);]
...//do your initializations here
}
3) We are nearly done, you can now call
applet.getAppletContext()... anywhere in the class where you have the private JApplet applet; declared and assigned.
You mentioned a custom class that will load the URL (I call it 'CustomClass' for now). You'll have to pass the applet through to that CustomClass, so you can use it there. The code in [] is doing this in 1)
//possible look of CustomClass
public CustomClass {
private JApplet applet;
...
public CustomClass(JApplet applet){
this.applet = applet;
}
...
public void loadURL(String urlVariable){
String URL = ...; //build your URL here
applet.getAppletContext().showDoc...;
}
}
I hope that was clear enough, maybe you should play around with some simpler Java examples?
greetz, Björn
Hey, my problem is almost the same as yours, did you find a workaround for the issue? can you help me with this please?