Universal Translator for your Tweets

Siriquelle — Tue, 21 Jul 2009 10:21:19 +0000

I thought this was going to be easy… SO much for preconceptions. Today, I’m going to give you the code to create a twitter translation App using, HTML, CSS, JavaScript and Java, the Twitter API and the Google Translate API. In a future tutorial I will demonstrate cross domain Ajax to get this Application to work totally on the client side but in the mean time you will need to have a Java enabled server to execute the server-side JSP that requests the API for twitter.

As you type your tweet the the JavaScript will analyze your keystrokes and check for when a space is entered assuming you are done typing a word, at this point the text is passed to Google for translation. When your done typing hit tweet and it’s off to twitter with your tweet.

This is what your app will look like when it’s finished:

Source

The Folder structure you will need is similar to all other projects. You can download the source folder for this project and open it in NetBeans to get a better idea of how the end result will look. There are no special libraries you need to get this going just java.io.* and java.net.* .

This is the HTML you will need, (/index.html):




    
        
        
        Twitter Universal Translate
    
    
        
            Twitter Multilanguage

            
                Username
                

                Password
                

                Translate To
                

                Tweet
                

                
            
            “Translate your tweet into a chosen language as you type.”

This is the CSS you will need, (/assets/css/style.css):

* {
    margin: 0;
    padding: 0;
}

/*///////////////////////////////////////////////////*/

#content{
    color:#333;
    width:350px;
    margin:100px auto;
    border:15px inset #66ffff;
    padding:10px;
    font-family:sans-serif;
    -moz-border-radius:10px;
}

.textlabel,textinput{
    display:block;
}

.textlabel{
    font-weight:bold;
}

.textlabel,.textinput, .textarea,.select{
    width:200px;
}

.textinput, .textarea,.select{
    padding:1px;
    margin-bottom:5px;
}

.textinput:focus, .textarea:focus{
    background-color:#ffffcc;
}

.head{
    font-size:32px;
    font-family:sans-serif;
    font-weight:bold;
    margin-bottom:5px;
}

.infobar{
    width:120px;
    float:right;
    position:relative;
    top:-140px;
    left:0px;
    padding: 3px;
    border:5px #ffff99 solid;
    background-color:#ffffcc;
    color:#003333;
    font-size:14px;
    font-style:oblique;
    text-align:center;
}

This is the JavaScript you will need, (/assets/js/jscript.js):

google.load("language", "1");

function translate(event){
    var textarea = document.getElementById("textarea");
    var lang = document.getElementById("lang");

    if(event.keyCode == 32){
        google.language.translate(textarea.value, "", lang.value, function(result) {
            if (!result.error) {
                var container = document.getElementById("textarea");
                container.value = result.translation + " ";
            }
        });
    }
}

function translateTwo(){
    var textarea = document.getElementById("textarea");
    var lang = document.getElementById("lang");
    google.language.translate(textarea.value, "", lang.value, function(result) {
        if (!result.error) {
            var container = document.getElementById("textarea");
            container.value = result.translation + " ";
        }
    });
}

function load(url, callback) {
    var xhr = new XMLHttpRequest();

    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var status = document.getElementById("textarea").value;
    var auth = "tweet.jsp?username="+username+"&password="+password+"&status="+status;

    xhr.onreadystatechange = function() {
        if((xhr.readyState < 4) || xhr.status !== 200) return;
        callback(xhr);
    };
    try{
        xhr.open('GET', auth, true);
        xhr.send();
    }catch(e){
        document.write(e);
    }
}

function callLoad(){
    load('tweet.jsp', function(xhr) {
        var joke = document.getElementById("status");
        var textarea = document.getElementById("textarea");
        joke.innerHTML = 'OK';
        textarea.value = '';
    });
}

This is the Java you will need, (/tweet.jsp):

<%@page import="java.net.*, java.io.*"%>
<%
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String status = request.getParameter("status");
        try {
            String twitteruser = username;
            String twitterpass = password;
            String encodedData = URLEncoder.encode(status, "UTF-8");

            String credentials = twitteruser + ":" + twitterpass;
            String encodecredentials = new sun.misc.BASE64Encoder().encode(credentials.getBytes());

            URLConnection connection = null;
            URL url = new URL("http://twitter.com/statuses/update.xml");
            connection = url.openConnection();
            connection.setRequestProperty("Authorization", "Basic " + encodecredentials);
            connection.setDoOutput(true);

            OutputStreamWriter output = new OutputStreamWriter(connection.getOutputStream());
            output.write("status=" + encodedData);
            output.close();

            BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
            String decodedString;
            while ((decodedString = in.readLine()) != null) {
                out.println(decodedString);
            }
            in.close();

        } catch (Exception e) {
            System.out.println(e.toString());
        }

%>

Ideally a Servlet would be best suited to processing the response from twitter but for this project it’s OK. And there you go you can now tweet in multiple languages like James Bond might. yay!

Java Web ‘Hello World’

Siriquelle — Thu, 02 Jul 2009 12:43:33 +0000

As a Web Developer I naturally enjoy web development and writing a blog has always been on my mind. I start and stop and start and well. You get the message. I’ve even tried my hand at podcasting. With this post I want to introduce people to the NetBeans IDE and to get us started I want to show how to get a hello world running in java through a JSP page. In the future I’ll talk about Servlets and session handling but for now it’s get up and running time.

I love java for some reason. Maybe because it’s the first language I really sunk my teeth into. Anyhow, first off any aspiring developer should download install and familiarize themselves with an IDE. IDE stands for Integrated Development Environment. Some people swear by Eclipse because of its extensibility and it has its uses but for me NetBeans has it made. It’s released by Sun, the JAVA people so it’s got some neat features like auto formatting that make a developers life easier.

So, first you need to travel to NetBeans.org and download the latest version of NetBeans. You should be looking for the Java version or the all version. Really you just want a version that ticks the Java Web and EE box. Oh, and make sure you’ve got JavaScript enabled or you won’t see anything.

After NetBeans is downloaded you can go ahead and run it. Agree to everything as it loads. And after it loads simply go to file > new project and you should see something looking like this:

Choose Java Web > Web Application and click next. After you’ve done this you should see the next window in the ‘New Java Web Application Wizard. All you need o concern yourself with is the box i have highlighted, i.e. Give your new web application a name, I chose HelloWorld but you can choose any name you wish. It’s best if you don’t use spaces in the name just yet however.

After you’ve chosen a name for your ‘Hello World’ application you should select Next and then select Finish on the final page. In another post I will explain what each of the options mean specifically but for now we’re going to focus on the ‘Hello World’. There’s nothing like the first app feeling. As developers we are constantly learning new technologies and from time to time that feeling returns but the first is unique.

At this point you should see something like HTML code in the center of your screen. This is your editor window and here is where you will edit and manage all of your code.

To the left you should be seeing your project tree. It shows you index.jsp by default:

To execute your project you need to right click on your project and choose run from the drop down list. You will notice allot of things start to happen. JSP pages are compiled and rendered by a web server and displayed in your browser. So far this index.jsp page does nothing special and if its contents were contained in a .html page instead the browser would render it just the same.

Now, try adding this code to the top of your JSP page:

<%
String h = "hello";
String w = "world";
%>

And add this code to the between the body tags of your JSP page:


<%= h + w + "!!" %>

Your page should look something like this after you’re done:

Save the page in NetBeans and refresh the page in your browser and you get the same result, but this time you’ve been programming in java. Congratulations your Java Web story has begun. In the next post in the series I will explain what a String is and how it works. :)

Threadbare Canvas Productions » netbeans

Universal Translator for your Tweets

Java Web ‘Hello World’

<%= h + w + "!!" %>