By giving each file a proper html5 tag based on MIME type to display in html + bootstrap template
I created a web server in Java that basically lists all the files on the device. I want to create a cool, responsive UI using bootstrap to display these files in the client browser; however, I know that simply linking to each file will not get me anywhere.
Here's the code before continuing:
for (File f : files.toArray(new File[files.size()])) {
filesAsLinks += "<a href=\"/Files"
+ f.toURI().getPath().replace(":", "") + "\">"
+ f.getPath() + "</a>" + "<br>";
}
I'm going to create Handler
one that is responsible for making sure the file receives the correct html5 tag. For example:
Handler.handle (String path) {
Path source = new Path(source);
String contentType = Files.probeContentType(source);
// last two lines to get the content type of a file
if (contentType.startsWith("video")) {
return "video width=\"320\" height=\"240\" controls> "
+ "<source src=\"pathRelated/video.mp\" ;type=" + contentType + " >";
}
}
Is this relatively correct before even thinking about creating a template using bootstrap, or should I make the template first?
So far, I've replaced the generated String references with a simple html template that contains some placeholders like "ContentGoesHere" in the following template:
"<html xmlns=\"http://www.w3.org/1999/xhtml\"> "+
"<head>"+
" <title>Max Server</title>"+
"</head>"+
"<body style=\"width: 100%; height:100%;\">"+
" <table width=\"100%\">"+
" <tr>"+
" <td colspan=\"2\" style=\"background-color: #FFA500;height:10px\">"+
" <h1> HTTP Server</h1>"+
" </td>"+
"<td colspan=\"1\" style=\"background-color: #FFA500;height:10px;white-space: nowrap;\"></td>"+
" </tr>"+
" <tr>"+
" <td style=\"background-color: #FFD700; width: 100px;\" valign=\"top\">"+
" <b>Menu</b><br />"+
" <a href=\"/Files/\">Files</a><br />"+
" <a href=\"/messages\">Messages</a><br />"+
" <a href=\"/contacts\">Contacts</a><br />"+
" Settings<br />"+
" Info"+
" </td>"+
" <td style=\"float: left; margin: 5px;width:100%\" align=\"left\" valign=\"top\">"+
" ContentGoesHere"+
" </td>"+
" </tr>"+
" <tr>"+
" <td colspan=\"2\" style=\"background-color:#FFA500;clear:both;text-align:center;height:20px;\">"+
"
" </td>"+
" </tr>"+
" </table>"+
"</body>"+
"</html>";
The final result string (pattern + content) is written to the client's socket output stream and sent to the client.
source to share
I know that just creating a link to each file won't get me anywhere
Simply creating the link will work - it will open the video and the browser will handle the actual view of the file based on the type of mime file you are accessing.
If, on the other hand, you want to display every element on the same page so that you have a good format and displayable files (think YouTube or another site), then generating the html for the different elements would be correct, I would suggest creating an html based on on the file extension, not the mime type.
To your "first" question, it is up to you. You can start with a template or content within a template, depending on your workflow and whichever is most comfortable for you.
source to share