My JavaFX application needs to be able to find the FXML files to load them with the FXMLLoader, as well as stylesheets (CSS files) and images. When I try to load these, I often get errors, or the item I'm trying to load simply doesn't load at runtime.
For FXML files, the error message I see includes
Caused by: java.lang.NullPointerException: location is not set
For images, the stack trace includes
Caused by: java.lang.IllegalArgumentException: Invalid URL: Invalid URL or resource not found
How do I figure out the correct resource path for these resources?
Short version of answer:
Use getClass().getResource(...) or SomeOtherClass.class.getResource(...) to create a URL to the resource
Pass either an absolute path (with a leading /) or a relative path (without a leading /) to the getResource(...) method. The path is the package containing the resource, with . replaced with /.
Do not use .. in the resource path. If and when the application is bundled as a jar file, this will not work. If the resource is not in the same package or in a subpackage of the class, use an absolute path.
For FXML files, pass the URL directly to the FXMLLoader.
For images and stylesheets, call toExternalForm() on the URL to generate the String to pass to the Image or ImageView constructor, or to add to the stylesheets list.
To troubleshoot, examine the content of your build folder (or jar file), not your source folder.
Placing src in the path when you get a resource is always wrong. The src directory is only available at development and build time, not at deployment and runtime.
Full Answer
Contents
Scope of this answer
Resources are loaded at runtime
JavaFX uses URLs to load resources
Rules for resource names
Creating a resource URL with getClass().getResource(...)
Organizing code and resources
Maven (and similar) standard layouts
Troubleshooting
Scope of this answer
Note that this answer only addresses loading resources (for example FXML files, images, and stylesheets) that are part of the application, and bundled with it. So, for example, loading images that the user chooses from the file system on the machine on which the application is running would require different techniques that are not covered here.
Resources are loaded at runtime
The first thing to understand about loading resources is that they, of course, are loaded at runtime. Typically, during development, an application is run from the file system: that is, the class files and resources required to run it are individual files on the file system. However, once the application is built, it is usually executed from a jar file. In this case, the resources such as FXML files, stylesheets, and images, are no longer individual files on the filesystem but are entries in the jar file. Therefore:
Code cannot use File, FileInputStream, or file: URLs to load a resource
JavaFX uses URLs to load resources
JavaFX loads FXML, Images, and CSS stylesheets using URLs.
The FXMLLoader explicitly expects a java.net.URL object to be passed to it (either to the static FXMLLoader.load(...) method, to the FXMLLoader constructor, or to the setLocation() method).
Both Image and Scene.getStylesheets().add(...) expect Strings that represent URLs. If URLs are passed without a scheme, they are interpreted relative to the classpath. These strings can be created from a URL in a robust way by calling toExternalForm() on the URL.
The recommended mechanism for creating the correct URL for a resource is to use Class.getResource(...), which is called on an appropriate Class instance. Such a class instance can be obtained by calling getClass() (which gives the class of the current object), or ClassName.class. The Class.getResource(...) method takes a String representing the resource name.
Rules for resource names
Resource names are /-separated path names. Each component represents a package or sub-package name component.
Resource names are case-sensitive.
The individual components in the resource name must be valid Java identifiers
The last point has an important consequence:
. and .. are not valid Java identifiers, so they cannot be used in resource names.
These may actually work when the application is running from the filesystem, though this is really more of an accident of the implementation of getResource(). They will fail when the application is bundled as a jar file.
Similarly, if you are running on an operating system that does not distinguish between filenames that differ only by case, then using the wrong case in a resource name might work while running from the filesystem, but will fail when running from a jar file.
Resource names beginning with a leading / are absolute: in other words they are interpreted relative to the classpath. Resource names without a leading / are interpreted relative to the class on which getResource() was called.
A slight variation on this is to use getClass().getClassLoader().getResource(...). The path supplied to ClassLoader.getResource(...) must not begin with a / and is always absolute, i.e. it is relative to the classpath. It should also be noted that in modular applications, access to resources using ClassLoader.getResource() is, under some circumstances, subject to rules of strong encapsulation, and additionally the package containing the resource must be opened unconditionally. See the documentation for details.
Creating a resource URL with getClass().getResource()
To create a resource URL, use someClass.getResource(...). Usually, someClass represents the class of the current object, and is obtained using getClass(). However, this doesn't have to be the case, as described in the next section.
If the resource is in the same package as the current class, or in a subpackage of that class, use a relative path to the resource:
// FXML file in the same package as the current class:
URL fxmlURL = getClass().getResource("MyFile.fxml");
Parent root = FXMLLoader.load(fxmlURL);
// FXML file in a subpackage called `fxml`:
URL fxmlURL2 = getClass().getResource("fxml/MyFile.fxml");
Parent root2 = FXMLLoader.load(fxmlURL2);
// Similarly for images:
URL imageURL = getClass().getResource("myimages/image.png");
Image image = new Image(imageURL.toExternalForm());
If the resource is in a package that is not a subpackage of the current class, use an absolute path. For example, if the current class is in the package org.jamesd.examples.view, and we need to load a CSS file style.css which is in the package org.jamesd.examples.css, we have to use an absolute path:
URL cssURL = getClass().getResource("/org/jamesd/examples/css/style.css");
scene.getStylesheets().add(cssURL.toExternalForm());
It's worth re-emphasizing for this example that the path "../css/style.css" does not contain valid Java resource names, and will not work if the application is bundled as a jar file.
Organizing code and resources
I recommend organizing your code and resources into packages determined by the part of the UI they are associated with. The following source layout in Eclipse gives an example of this organization:
Using this structure, each resource has a class in the same package, so it is easy to generate the correct URL for any resource:
FXMLLoader editorLoader = new FXMLLoader(EditorController.class.getResource("Editor.fxml"));
Parent editor = editorLoader.load();
FXMLLoader sidebarLoader = new FXMLLoader(SidebarController.class.getResource("Sidebar.fxml"));
Parent sidebar = sidebarLoader.load();
ImageView logo = new ImageView();
logo.setImage(newImage(SidebarController.class.getResource("logo.png").toExternalForm()));
mainScene.getStylesheets().add(App.class.getResource("style.css").toExternalForm());
If you have a package with only resources and no classes, for example, the images package in the layout below
you can even consider creating a "marker interface" solely for the purposes of looking up the resource names:
package org.jamesd.examples.sample.images ;
public interface ImageLocation { }
which now lets you find these resources easily:
Image clubs = new Image(ImageLocation.class.getResource("clubs.png").toExternalForm());
Loading resources from a subpackage of a class is also reasonably straightforward. Given the following layout:
we can load resources in the App class as follows:
package org.jamesd.examples.resourcedemo;
import java.net.URL;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class App extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
URL fxmlResource = getClass().getResource("fxml/MainView.fxml");
Parent root = FXMLLoader.load(fxmlResource);
Scene scene = new Scene(root);
scene.getStylesheets().add(getClass().getResource("style/main-style.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}
To load resources which are not in the same package, or a subpackage, of the class from which you're loading them, you need to use the absolute path:
URL fxmlResource = getClass().getResource("/org/jamesd/examples/resourcedemo/fxml/MainView.fxml");
Maven (and similar) standard layouts
Maven and other dependency management and build tools recommend a source folder layout in which resources are separated from Java source files, as per the Maven Standard Directory Layout. The Maven layout version of the previous example looks like:
It is important to understand how this is built to assemble the application:
*.java files in the source folder src/main/java are compiled to class files, which are deployed to the build folder or jar file.
Resources in the resource folder src/main/resources are copied to the build folder or jar file.
In this example, because the resources are in folders that correspond to subpackages of the packages where the source code is defined, the resulting build (which, by default with Maven, is in target/classes) consists of a single structure.
Note that both src/main/java and src/main/resources are considered the root for the corresponding structure in the build, so only their content, not the folders themselves, are part of the build. In other words, there is no resources folder available at runtime. The build structure is shown below in the "troubleshooting" section.
Notice that the IDE in this case (Eclipse) displays the src/main/java source folder differently from the src/main/resources folder; in the first case it displays packages, but for the resource folder it displays folders. Make sure you know if you are creating packages (whose names are .-delimited) or folders (whose names must not contain ., or any other character not valid in a Java identifier) in your IDE.
If you are using Maven and decide that for ease of maintenance you'd rather keep your .fxml files next to the .java files that reference them (instead of sticking strictly to the Maven Standard Directory Layout), you can do so. Just tell Maven to copy these files to the same folder in your output directory that it will place the class files generated from those source files into, by including something like the following in your pom.xml file:
<build>
...
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.fxml</include>
<include>**/*.css</include>
</includes>
</resource>
...
</build>
If you do this, you can then use an approach like FXMLLoader.load(getClass().getResource("MyFile.fxml")) to have your classes load .fxml resources from the directory which contains their own .class files.
Troubleshooting
If you get errors you do not expect, first check the following:
Make sure you are not using invalid names for your resources. This includes using . or .. in the resource path.
Make sure you are using relative paths where expected, and absolute paths where expected. for Class.getResource(...) the path is absolute if it has a leading /, and relative otherwise. For ClassLoader.getResource(...), the path is always absolute, and must not start with a /.
Remember that absolute paths are defined relative to the classpath. Typically the root of the classpath is the union of all source and resource folders in your IDE.
If all this seems correct, and you still see errors, check the build or deployment folder. The exact location of this folder will vary by IDE and build tool. If you are using Maven, by default it is target/classes. Other build tools and IDEs will deploy to folders named bin, classes, build, or out.
Often, your IDE will not show the build folder, so you may need to check it with the system file explorer.
The combined source and build structure for the Maven example above is
If you are generating a jar file, some IDEs may allow you to expand the jar file in a tree view to inspect its contents. You can also check the contents from the command line with jar tf file.jar:
$ jar -tf resource-demo-0.0.1-SNAPSHOT.jar
META-INF/
META-INF/MANIFEST.MF
org/
org/jamesd/
org/jamesd/examples/
org/jamesd/examples/resourcedemo/
org/jamesd/examples/resourcedemo/images/
org/jamesd/examples/resourcedemo/style/
org/jamesd/examples/resourcedemo/fxml/
org/jamesd/examples/resourcedemo/images/so-logo.png
org/jamesd/examples/resourcedemo/style/main-style.css
org/jamesd/examples/resourcedemo/Controller.class
org/jamesd/examples/resourcedemo/fxml/MainView.fxml
org/jamesd/examples/resourcedemo/App.class
module-info.class
META-INF/maven/
META-INF/maven/org.jamesd.examples/
META-INF/maven/org.jamesd.examples/resource-demo/
META-INF/maven/org.jamesd.examples/resource-demo/pom.xml
META-INF/maven/org.jamesd.examples/resource-demo/pom.properties
$
If the resources are not being deployed, or are being deployed to an unexpected location, check the configuration of your build tool or IDE.
Example image loading troubleshooting code
This code is deliberately more verbose than is strictly necessarily to facilitate adding additional debugging information for the image loading process. It also uses System.out rather than a logger for easier portability.
String resourcePathString = "/img/wumpus.png";
Image image = loadImage(resourcePathString);
// ...
private Image loadImage(String resourcePathString) {
System.out.println("Attempting to load an image from the resourcePath: " + resourcePathString);
URL resource = HelloApplication.class.getResource(resourcePathString);
if (resource == null) {
System.out.println("Resource does not exist: " + resourcePathString);
return null;
}
String path = resource.toExternalForm();
System.out.println("Image path: " + path);
Image image = new Image(path);
System.out.println("Image load error? " + image.isError());
System.out.println("Image load exception? " + image.getException());
if (!image.isError()) {
System.out.println("Successfully loaded an image from " + resourcePathString);
}
return image;
}
External Tutorial Reference
A useful external tutorial for resource location is Eden coding's tutorial:
Where to put resource files in JavaFX.
The nice thing about the Eden coding tutorial is that it is comprehensive. In addition to covering the information on lookups from Java code which is in this question. The Eden tutorial covers topics such as locating resources that are encoded as urls in CSS, or resource references in FXML using an # specifier or fx:include element (which are topics currently not directly covered in this answer).
What I want is to convert a flash project to an openfl project (which is written in haxe) in order to use its cross platform feature. I used as3hx to convert actionscript classes of a flash project to haxe. Then I fix compile errors by hand, and fix a run time error too. When I compile the project, I see a blank black window, which means that graphics are not loaded. I convert the code and code is working fine, but I don't know what should I do with graphics. There is a fla file in flash project, which I don't know how to convert it to openfl.
Adobe Flash CC, which is the program used to write flash project, does the linkage of a symbol to a actionscript class, and I don't know how to do this in openfl.
In openfl, as far as I know, giving graphics to a class is done like this :
import openfl.display.Bitmap;
import openfl.display.BitmapData;
import openfl.display.Sprite;
import openfl.Assets;
class Main extends Sprite {
public function new () {
super ();
var bd:BitmapData = Assets.getBitmapData("img/openfl.png");
var b:Bitmap = new Bitmap(bd);
addChild(b);
}
}
Where the openfl.png is a graphical file in a special folder named img, which declared to be an assets path.
I use HaxeDevelop IDE.
Thanks for any help
You can't use FLA files inside OpenFL, there's only support for SWF files exported by Flash from those FLA files:
http://www.openfl.org/learn/tutorials/using-swf-assets/
OpenFL's "native" SWF playback functionality is limited but for simple graphics and animations it's usable as long as you figure out what features are actually being supported and limit yourself to those.
I am developing an AIR application. This application needs some hardware accesses that are not possible with AIR. I decided to use the NativeApplication class in AIR, which launches a C# executable. The AIR application and the "native" application then communicate with the standard output and standard input streams.
A bit like that:
private var np:NativeProcess = new NativeProcess();
private var npi:NativeProcessStartupInfo = new NativeProcessStartupInfo();
private var args:Vector.<String> = new Vector.<String>();
private function creationCompleteHandler(event:FlexEvent):void {
args.push("myCommand");
args.push("myParameter");
npi.arguments = args;
npi.executable = File.applicationDirectory.resolvePath("MyNativeExe.exe");
np.addEventListener(ProgressEvent.STANDARD_OUTPUT_DATA, onData);
np.start(npi);
}
private function onData(e:ProgressEvent):void {
while(np.standardOutput.bytesAvailable != 0) {
trace(String.fromCharCode(np.standardOutput.readByte()));
}
}
I put MyNativeExe.exe file in the application directory, set the "extendedDesktop" value in the *-app.xml supportedProfiles, and it works fine.
Now, I would like to create a kind of AS3 SWC library that embeds MyNativeExe.exe and which provide an AS3 class to manage the interaction with MyNativeExe.exe. Therefore I could easily reuse this work in other AIR projects by simply addind the SWC file as a library. I may have to manually add the "extendedDesktop" value to the new AIR projects, but it is not a problem.
And I am stuck. I can embed an EXE file in a SWC file, by manually selecting the resources to embed with Flash Builder but...
it will not be automatically embeded in the final SWF file as only the needed parts of the SWC file are merged with the SWF
even if it is (enforcing the merge with an [Embed] tag, ...), how can I access and execute the embedded EXE file? NativeProcessInfo.executable needs a File object, and not a byte stream.
The only idea I have would be to embed the EXE file with [Embed], load it as a byte array, create a new file with the byte array as data, and then execute the file. I don't know if it works, but I do not like the idea, as it implies having the EXE kind of duplicated.
Does someone have an idea?
Thank you!
You should look into the Air Native Extensions. Simply put, one of the a new features in Air 3.0 was the ability to compile and link to custom language extensions directly from air. I haven't found an example of using C# directly, but there is a link on that page to doing with managed C++.
I am making an AS3 project in FB4. In our workflow, we have artists compile art into SWC files which the I then link as 'Referenced Libraries' in FB4.
Then I set the "Link Type" of the SWC files to "external" instead of merged into code. This should create SWFs corresponding to the SWC files in the output folder, right?
This doesn't seem to be the case. I am only seeing one SWF file: the main_app's.
I was trying to make it so that I can use a library manager to load the files dynamically.
I tried extracting the swfs manually, but it seems the main_app still compiles all the swcs to itself. I made sure the Link Type was set to external. The file size for the main_app between "external" and "merged to code" seem to be the same.
I've made a simple project in Flash Builder 4 and the only way I got the SWC->SWF happening is by creating a Flex Project instead of an ActionScript Project and selecting "Runtime shared library (RSL)" instead of "External". This is because the Flex framework have some classes that work out the loading of those libraries for you. It also automate the conversion (I should say extraction) process.
Now, if you don't want to create a Flex project just for this, you can extract the SWF yourself. The SWC file format is just a Zip containing a SWF and an XML file describing the content. You can then load dynamically this extracted SWF file using a Loader and setting the correct Application Domain. Here's a snippet of my sample project.
public class Web extends Sprite
{
public function Web()
{
//you will not be able to instantiate classes of your library until it's loaded
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
loader.load(new URLRequest("library.swf"), new LoaderContext(false, ApplicationDomain.currentDomain));
}
protected function onLoadComplete(event:Event):void
{
//here you can create instances of classes defined in your library
new Asset();
}
}
You might think that's a pretty tedious job to unzip+copy every time your designers update the library. You could automate this process with a script or an Ant file. Unfortunately, unless I'm missing something, it looks like Flash Builder doesn't want you to extend your build process, so you will still need a bit of hand work or completely convert to Ant (or something similar) to build.
Good luck!
From the moment the SWC is added to your Library, you should be able to access the SWC's assets by directly calling their specific class names . There's no need to try to get a SWF and load it with the Loader class. This actually defeats the purpose of using a SWC in the first place!
Let's say that , in your SWC, you have a MovieClip with a class name of GraphicAsset, to create a new instance , you simply do this:
var mc:MovieClip = new GraphicAsset();
In FB4's folder structure , have a look at your SWC in the Referenced Libraries folder & check the default package, you should see a list of all your assets.
I found it is very useful to load a swf into AS as class (what Embed metadata did). However, I am in trouble to do exact the same thing to content that is not load in compile-time (Loader and URLRequest). How can I do that?
If you want to load a specific class to instantiate it there are two ways. One is to use the getDefinitonByName() method and the other is to import the class normally from a SWC but excluding the SWC at compilation.
In both cases you need to make sure the SWF containing the class is loaded when you attempt to instantiate it.
Example:
1/ Create a library.fla with your assets
2/ Export library.swf (tick export .swc if you want to use the 2nd solution)
3/ In another document load library.swf
4/ When library .swf is loaded try :
var MyClass:Class = getDefintionByName("Ball");
var ball1:MovieClip = new MyClass();
var ball2:MovieClip = new MyClass();
If you want to use the SWC method just add the library.swc to your classpath and make sure you exclude it from you when you compile (just check your environnement's documentation, or let me know what you're running). Then proceed the same way as previously by preloading the library.swf before instantiating. The nice thing is that you will be able to write : new Ball(); transparently...