Publishing using blogger api

This post published using blogger api

BOOK WITH FLIP PAGES USING HTML5, CSS3 & JS

Well, back after a long time..and I'll be posting some of the screen shots of a new thing I just created for time pass...

A bit of background: I was reading HTML5 canvas and was looking for real world applications and significance of the same. Google is awesome and among a lot of examples I came across 20thingsilearned.com. That was the inspiration, along with a tutorial on the internet (since I'm still learning canvas)..I created almost similar kind of book...the screen shots of which are presented below :

Hope you like it.. :)

---

UPLOAD A FILE USING LIBRARY

In my previous post I mentioned how to write the code that will upload a file to the server using servlet 3.0. But the main headache comes when you're not so lucky and somehow You don't work in an environment which supports servlet 3.0. For eg, if u try to run a webserver that supports servlet 3.0 like APACHE TOMCAT 7.0 along with netbeans or eclipse IDE in our low configured college laptop on windows environment..it'll definitely crash!! So, this tutorial might be specially useful for my friends and to those who're facing almost a similar situation.

For the introductory knowledge read my previous post on file upload introduction before servlet 3.0 came to rescue...It is advisable to read it thoroughly or if u avoid the basics, you might spend 50 minutes on a bug trying to skip a 5 min.

Libraries to the rescue.....

There are a lot of libraries that are available free to download that eases your file upload coding task!..the 2 libraries I found to be pretty flexible are

1. Apache Commons File upload API
2. Oreilly's file uploading library.

Since, Apache commons file upload api is pretty popular and there are a lot of codes available over the internet regarding how to use it...I'll better focus on Oreilly's file uploading library that works magic and is pretty impressive!

All you need to do is -

1. Download the library from http://www.servlets.com/cos/ and include it in your class path the way you import external jar/zip files from you IDE, or using command prompt.

2. Make an HTML file as I suggested in my previous post.

3. Make a servlet (don't use JSP for backend logic...remember I told you...it's a bad practice. use JSP for front end logic only!) that actually uses it to write the file upload logic.

First thing's first, Download the file (cos-26Dec2008.zip) from the link. You'll find the file download link at the bottom of Oreilly's page and iclude it in your project's class path.

Now, lets get started with the servlet....You may like to see the documentation before you get started (and you should before blindly copy-pasting the use of a class and it's methods). The documentation goes here: JAVADOC

I'll be going to use the following constructor :


MultipartRequest(javax.servlet.http.HttpServletRequest request, java.lang.String saveDirectory, int maxPostSize)


There are three parameters of this function, the first one being the HttpServletRequest. The second one defines the path of the directory where the file will get saved in the server hard-disk, after getting uploaded. The third parameter constraints the maximum size of file upload.

So, we can't do much about the first parameter. The second parameter needs to be specified and is the most important. Remember that the path will not be any machine specific path or a client side path. It should be a generalized server path where your project resides.To get the generalized server path use:


String saveFile=this.getServletContext().getRealPath("\\");


For the 3rd parameter, it's upto your will. For eg, if u want to limit max file size to 4MB u should write "4*1024*1024" as the third constructor.

Now if we use these parameters and create an object of the "MultipartRequest" class your file upload code is ready. The only thing left is to retrieve the file name. We'll use the method -


getOriginalFileName(java.lang.String name)


The parameter to this method is the "name" you provide to < input type="file" name="file">.

The entire servlet:


import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import java.io.*;
import javax.servlet.http.HttpServlet;
import com.oreilly.servlet.*;

/**
*
* @author soumya
*/

public class multiserv extends HttpServlet
{

protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try
{

String saveFile=this.getServletContext().getRealPath("\\");
MultipartRequest mr=new MultipartRequest(request,saveFile,4*1024*1024);

System.out.print(saveFile); // see the path in your console for reference

String filename=mr.getOriginalFileName("file");

response.sendRedirect("home.jsp");

}
catch(Exception e)
{
out.print(e.getMessage());
}
}



protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}



protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}


So that's it...you got the tutorial for uploading file...and that too without servlet 3.0!...cheers!! :) Hope you liked it....

---

UPLOAD A FILE TO WEB-SERVER

If you are a web developer, I'm definite you have faced this problem at some point or the other. Usually getting any parameter from another jsp/html isn't quite a big deal. A simple "request.getParameter()" handles your request and retrieves the parameter value for the given parameter name. But when sending/uploading a file from client side to the server, request.getParameter() doesn't work, and that's where we get stuck!!..But that's quite obvious, because, a file is not like any other formal parameter. A file needs to be transmitted as a MIME stream (Multipurpose Internet Mail Extensions stream) from the client side to the server side and request.getParameter() doesn't work with MIME streams!!



Now how to solve this....

There are lots of example out there on the internet, but its very hard to choose which one will work, specially if you don't have any clue, how these things work! So first let me warn you, most of the examples that you'll find over the internet used to work in prehistoric dinosaur era.

Now the internet and web-browsers are pretty much secure and to bring about the security, they have changed the way the old-prehistoric-codes used to handle file uploads! Previously, the entire client path used to get parsed on submit to the servlet (for eg.) providing a scope of security breaching! But now, in all modern browsers, the entire class path doesn't get submitted when the form is serialized, but a fake client path followed by the file name is parsed!..So if you find a code that plays with client side path of the file to upload, dump it straight away!!

The second type of examples that successfully upload the files to the web-server are available on the internet by parsing the entire form-data along with the file as MIME stream and retrieves the file name from the boundaries of the stream. But this is pretty ineffective in the sense that, if you have other parameters like input type text/password or anything, you cannot retrieve them using request.getParameter() as I mentioned, the entire thing gets parsed as MIME stream and it doesn't work with MIMEs. So if you want to upload a single file from a single form, it works fine. But my suggestion is, try to avoid those codes!



Servlet 3.0 to the rescue...

So if you have an application server that supports servlet 3.0(usually recent versions like APACHE TOMCAT v7.0,GLASSFISH v3) you're lucky!..Thanx to my friend Soumyajyoti Bhadra for suggesting this to me!Something similar to request.getParameter() works wonder!..It's request.getPart(). Using request.getPart() you can easily retrieve your file from the client end along with other parameters.

So, let's look into the code - You'll need two files-
1. An HTML file
2. A servlet (and not JSP, tired of telling people, JSPs should be used for presentation logic, while servlets as backend logic, it's a better practice).

First, create an HTML file - Do not forget to use method="post" and enctype="multipart/form-data", otherwise your file won't get uploaded!


HTML:

<html>
<head>
<title>File Upload</title>
</head>

<body>
<form name="file_upload" method="post" enctype="multipart/form-data" action="UploadFile">
Select File : <input name="file" type="file"/>
<br>
<input type="submit" value="Upload File"/>

</form>
</body>
</html>


Next, create the servlet - UploadFile.java


SERVLET:

package com.example.servlets;

+ import ........; // package imports



public class UploadFile extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException, AddressException {

response.setContentType("text/html;charset=UTF-8");

PrintWriter out = response.getWriter();
try {

Part myfile = request.getPart("file");
Scanner scanner = new Scanner(myfile.getInputStream()); // upload the file
String filename = s.nextLine(); // read the filename
//get the server file path
String path = this.getServletContext().getRealPath(filename);

out.println("File Upload Successful");
}
catch (Exception e){
e.printStackTrace();}

finally {
out.close();
}
}

protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException
{
try
{
processRequest(request, response);
}catch (AddressException ex) {
Logger.getLogger(UploadFile.class.getName()).log(Level.SEVERE, null, ex);
}


protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException
{
try {
processRequest(request, response);
} catch (AddressException ex) {
Logger.getLogger(addemployee.class.getName()).log(Level.SEVERE, null, ex);
}
}

}



That's it...Your file will get uploaded to the web server. Now use the file name to access the file!..cheers..!! Hope you liked it.

---

SKETCH YOUR WEBSITE

If you already have an experience designing a website you are probably aware of how much difficult it is to design a good looking website based on your imagination. It really takes a toll of your thinking ability and I'm pretty sure you have always wanted to make a rough sketch on a piece of paper. That's what I'm going to discuss right now. It's always a great idea to sketch a website design or a single webpage design before actually coding them!

So you can always take a rough sheet, sketch some design that's coming to your mind, and I guess you know, how much easy things become after that. If you haven't tried this technique, trust me on this. And if you sketch them in a systematic manner, it eases your work to a great extent! What I mean by "systematic manner" is sketching your website on a paper browser! Paper browser is nothing but a browser drawn on a paper providing you a real time perspective of a real browser.

There are lots of paper browser templates available over the internet to download for free...specially THIS ONE.

But I wasn't satisfied with a downloadable template...and decided to make one of my own, taking Google Chrome as the browser template. Just a screenshot and few Photoshop editing did the trick for me. Here's what i got -

PAPER BROWSER WITH GRID


Page Size: 1024px * 768px


Grid Size: 32px


PAPER BROWSER WITHOUT GRID


Page Size: 1024px * 768px


Grid Size: NO GRIDS


These paper browsers helped me a lot to ease my designing job.
Here's an example of my work with a paper browser -

Hope you'll find paper browser quite useful!!

---

A SIMPLE POPUP USING JAVASCRIPT

I still remember, a long time back (almost a year), when I first wanted to implement a popup in my web-designs with translucent background. And as usual the internet and google were the first 2 things that came into my mind. I went searching on and found cool and sleek stuffs like greybox, lightbox, thickbox,....and lot, with neat colors and cool jQuery effects.

But back then it was pretty heavy for me and I wanted something simpler. So I thought why not I make a popup starting simply with JavaScript, without any jQuery effect! So, I rolled up my sleeves and started coding a popup with translucent background using simple HTML, css and JavaScript and wanted to keep it as simple as possible. And here's what I got -

DEMONSTRATION: CLICK HERE (Best viewed in Google chrome, Mozilla Firefox, IE7 and above)

» This is how I did it -

First, I created two <div> tags. One for the translucent black layer with id="overlay" and class="translucent_cover" and the other for the popup with message in it with id="top_block" and class="top_block". Then I put some content within the 2nd div, i.e, the message to be shown in the popup box.

HTML:

<div class="translucent_cover" id="overlay" style="visibility: hidden;">
</div>

<div class="top_block" id="top_block" style="visibility: hidden;">


<div class="text_embross">
<b>SIMPLE POPUP</b>
</div>
<hr/>
<div class="black_text">
<i>This is a demo of a little sophisticated version<br/>
of the simple popup using JavaScript.<br/>
Hope you liked it.</i>
</div>
<div align="right">
<input class="blue_button" onclick="close_pop()" type="button" value="Close" />
</div>

</div>

The next thing I had to do is to add css classes in oder to design those <div>s the way I wanted. The "translucent_cover" covering the whole page with black color and opacity of 80%. The "top_block" over it with content already added.

CSS:

.translucent_cover
{


position: absolute;
display: block;
height: 1500px;
width: 2000px;
top: 0;
left: 0;
z-index: 1000;
background: black;
-moz-opacity: 0.8;
opacity:.80;
margin-top: -300px; //adjust as per need
margin-left: -100px; //adjust as per need
filter: alpha(opacity=80);

}

.top_block
{

position: absolute;
display: block;
min-height: 100px; //adjust as per need
min-width: 350px; //adjust as per need
z-index: 1001;
background: white;
margin-left: -150px; // adjust as per need
left: 50%;
top: 65%;
border: 6px solid white;
border-radius: 10px 10px;
-moz-border-radius: 10px 10px;
padding: 15px;

}

Next came the biggest thing. The designs being done, the only thing that was left was to adjust the popup's visibility using JavaScript. The first and foremost thing was to create an event either through a link or through a button or through any click that will call the function, which will initiate the pop-up's visibility. I chose to go for a link.

HTML:

<a href="javascript:void(0)" onclick="pop()">CLICK HERE</a>

Finally came the JavaScript functions:

JAVASCRIPT:

function close_pop()
{
document.getElementById("overlay").style.visibility='hidden';
document.getElementById("top_block").style.visibility='hidden';
}

function pop()
{
document.getElementById("overlay").style.visibility='visible';
document.getElementById("top_block").style.visibility='visible';
}

That's it..my simple JavaScript popup was ready and running. May be you might argue this is not the best way to do it, but still, I was pretty satisfied with my first popup. Later on, it went through a lot of optimizations with dynamic content loading ability and smooth jQuery effects, but this has been my first stepping stone! Don't worry, they'll be coming soon in this blog!

Hope you liked it...!!

---

SIMPLE POPUP

---

This is a demo of a little sophisticated version
of the simple popup using JavaScript.
Hope you liked it.

MY FIRST POST

Finally I decided my first post of this blog! MY IBM The Great Mind Challenge(TGMC) 2010 SRS for the project scenario ECOPS. An effort of my team's 20hrs at a stretch documentation!..pheww...it was pretty tiring!..and here it goes -

Ecops srs

LET THERE BE LIGHT

Today I was working on my computer, when my mother told me to switch on a light. I was so engaged with work then that i forgot to switch it on, and after some time she herself switched it on and scolded me.."can't you even switch on a light??"

Well, see....I CAN SWITCH ON A LIGHT! everybody can....



CLICK ON THE SWITCH TO TOGGLE(ON/OFF) AND SEE....