Making your images available using markup

Making your images available using markup

In RAP v1.5 we introduced markup support for several widgets. One of the most frequently asked questions about markup support is: “Why are my images not displaying?”. In this blog post I will give you a step-by-step guide on how to make your images available using markup.

  1. Save your images in your bundle source folder. In this example the images are located in “src/resources”.
  2. Register your image resources and make the location available to your application.
    private String carImageLocation;
    private String fuelImageLocation;
    private String gearImageLocation;
    private void registerImages() {
      try {
        fuelImageLocation = registerImage( "resources/fuel.png" );
        gearImageLocation = registerImage( "resources/gear.png" );
        carImageLocation = registerImage( "resources/car.png" );
      } catch( IOException exception ) {
        throw new RuntimeException( "Failed to register images", exception );
      }
    }
    private static String registerImage( String resourceName ) throws IOException {
      IResourceManager resourceManager = RWT.getResourceManager();
      if( !resourceManager.isRegistered( resourceName ) ) {
        InputStream inputStream = CLASSLOADER.getResourceAsStream( resourceName );
        if( inputStream == null ) {
          throw new RuntimeException( "Resource not found" );
        }
        try {
          resourceManager.register( resourceName, inputStream );
        } finally {
          inputStream.close();
        }
      }
      return resourceManager.getLocation( resourceName );
    }
  3. Create your image markup by adding the application context path.
    private String createGearboxImageTag() {
      String imageUrl = getImageUrl( gearImageLocation );
      return "";
    }
    private static String getImageUrl( String location ) {
      return RWT.getRequest().getContextPath() + "/" + location;
    }
  4. Enable markup support on your widget and set the markup text.
    Table table = new Table( comp, SWT.FULL_SELECTION | SWT.BORDER );
    table.setData( RWT.MARKUP_ENABLED, Boolean.TRUE );
    table.setData( RWT.CUSTOM_ITEM_HEIGHT, Integer.valueOf( 80 ) );
    ...
    item.setText( markupText );
  5. Finally…. enjoy your images!

The complete code is available in our Examples Demo in RAP Git repository.