Win a copy of Escape Velocity: Better Metrics for Agile Teams this week in the Agile and Other Processes forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Tim Cooke
  • Paul Clapham
  • Jeanne Boyarsky
Sheriffs:
  • Ron McLeod
  • Frank Carver
  • Junilu Lacar
Saloon Keepers:
  • Stephan van Hulst
  • Tim Moores
  • Tim Holloway
  • Al Hobbs
  • Carey Brown
Bartenders:
  • Piet Souris
  • Frits Walraven
  • fred rosenberger

How can I place an image on the page using *.ftl template?

 
Greenhorn
Posts: 27
1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I am using Restlet framework for creating Web server application. I created a resource on the server: /accounts/{accountId}. Template page accountPage.ftl is used to display the resource.

Just for testing purpose I created a very simple template containing just one string:
<h1>Hello world</h1>
In this case everything seems to be ok. For example, page localhost:8111/accounts/21 is displayed correctly.

Now I want to go further and to add some more information to the resource. What I tried to do first, was adding an image on the template:
<h1>Hello, world</h1> <img src="img/user21.jpg">
But this time the image is not displayed. I have an error: "the resource localhost:8111/accounts/21/img/user21.jpg is not found". It does not metter where to place the folder img. It looks like the server is looking for the image in the network but not in the local machine's file system. How can I add the image on my template using file system?
 
Saloon Keeper
Posts: 7417
170
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
That seems less a question of the templating library, and more a question of using the correct URL. What is the correct URL?
 
Vitaliy Ovcharenko
Greenhorn
Posts: 27
1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Tim Moores wrote:That seems less a question of the templating library, and more a question of using the correct URL. What is the correct URL?


There are just 3 resources created with Restlet Framework:
1. Root resource localhost:/8111
2. Accounts resource localhost:/8111/accounts
3. Account resource localhost:/8111/accounts/{accountId}
The last resource depends on userId stored in database and could be localhost:/8111/accounts/1 or localhost:/8111/accounts/2 etc. depending on number of users stored in the database.

As I said all resources are created using Restlet Framework and template engine FreeMarker (for creating *.ftl pages).

For example I want to display data of the user which id=1, and image "1.jpg" is stored in folder img (the path is img/1.jpg related to the folder where all the files are stored (I mean all *.class and *.ftl files using by the application).
If I go to localhost:/8111/accounts/1 with my browser I get a page displaying the user's data from the database. All data are strings and are displayed on the page using ftl template.  I am trying to display the image using the string which is a path to the image file:

<!DOCTYPE html>
<html>
<head>
<title>${accountPage.title}</title>
</head>
<body>
<h1>User profile:</h1>
<p>User name: ${accountPage.userName}</p>
<p>Last name: ${accountPage.userLastName}</p>
<p>Email: ${accountPage.userEmail}</p>
<p>Address: ${accountPage.userAddress}</p>
<p>Password: ${accountPage.userPassword}</p>
<p>Photo: ${accountPage.userPhoto}</p>
<p>Last visit: ${accountPage.userLastVisit}</p>
<p>Status: ${accountPage.userStatus}</p>

<img src=${accountPage.userPhoto} alt=${accountPage.userName} style="width:304px;height:228px;">
</body>
</html>

The tag <p>Photo: ${accountPage.userPhoto}</p> correctly displays the path to the source file but the tag
<img src=${accountPage.userPhoto} alt=${accountPage.userName} style="width:304px;height:228px;">  does not work because of the error "the resource localhost:/8111/accounts/1/img/1.jpg does not exists". And this is true because as I said before, there are just 3 resources created. So it looks like I need to create a new resource for the image but it does not make a sens to load a local file from the internet it needs to be loaded from the file system like on usual html page (for example <img src="filePath">). And this is the point. I do not know how can I do this.
 
Tim Moores
Saloon Keeper
Posts: 7417
170
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
If "/accounts" is mapped to the web service, then the image directory should start with some other name, maybe "images". Can you move the files to that directory? Then you can serve them directly rather than creating a REST resource for them.
 
Vitaliy Ovcharenko
Greenhorn
Posts: 27
1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Tim Moores wrote:If "/accounts" is mapped to the web service, then the image directory should start with some other name, maybe "images". Can you move the files to that directory? Then you can serve them directly rather than creating a REST resource for them.


Actually, file structure is very simple:
application dir|
                   |src|
                   |     |*.java
                   |bin|
                   |    |*.class
                   |    |*.ftl
                   |    |img|
                   |          |*.jpg
                   |*.jar    
So there are not too much choices. I tried to put img folder to bin or application dir or to both of them. But nothing changed.
 
Tim Moores
Saloon Keeper
Posts: 7417
170
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I meant the directories of the web app once it's running. How you organize the directories during development isn't relevant to that.
 
Vitaliy Ovcharenko
Greenhorn
Posts: 27
1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Tim Moores wrote:I meant the directories of the web app once it's running. How you organize the directories during development isn't relevant to that.


Web service is running as Restlet application and uses only those resources which were created within Restlet. All the files used by Restlet are shown above. There no any other files or folders. And the point is that if I want to create them in any of existed folders, the application does not see them.
 
Tim Moores
Saloon Keeper
Posts: 7417
170
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
The images don't have to be part of the web app. But if they are, they need to be outside the "accounts" directory.

Maybe start by finding a place to store them where you access them via HTTP. Then you can add the logic to create URLs pointing to them to the REST code.
 
Hey cool! They got a blimp! But I have a tiny ad:
the value of filler advertising in 2021
https://coderanch.com/t/730886/filler-advertising
reply
    Bookmark Topic Watch Topic
  • New Topic