GWT from scratch tutorial – Hello World

28 Ocak 2012

Eclipse -> Help -> Install New Software ->

http://dl.google.com/eclipse/plugin/3.7

Not necessary to select “android” package.
At the end of the setup it is needed to restart Eclipse.
New -> Project -> Google -> Web Application Project

GwtDene1.java

After clicking finish Eclipse creates a nice GWT app project. You can run it directly by clicking “Run” button in Eclipse. It is an awesome application that has both server and client. One problem-maybe it does not seem problem from another perspective:)- is that it is so advanced. I needed a “Hello World” project at the beginning.
To create a Hello World project let’s delete server and shared packages and their content and content of client package. We are gonna write from the start.
Create a class in client package and give it a name. For me its “GwtDene1″. Its content is like this:


package com.hakan.GwtDene1.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.dom.client.ClickEvent;

import com.google.gwt.event.dom.client.ClickHandler;

import com.google.gwt.user.client.Window;

import com.google.gwt.user.client.ui.Button;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.RootPanel;

public class GwtDene1 implements EntryPoint {

@Override

public void onModuleLoad() {//main method for GWT app

Label label = new Label("Hey bro");

Button button = new Button("Click me!");

button.addClickHandler(new ClickHandler() {//this is for handling click event

@Override

public void onClick(ClickEvent event) {

Window.alert("I love this blog.");//this is for showing a popup window

}

});

RootPanel.get().add(label);//RootPanel is the main panel in the app

RootPanel.get().add(button);

}

}

GwtDene1.gwt.xml

EntryPoint is a class which consists of the method to start application. This is similar to Java main method. EntryPoint is defined in gwt.xml. My EntryPoint class is “GwtDene1″ then gwt.xml will be like this:

<?xml version="1.0" encoding="UTF-8"?>

<module rename-to='gwtdene1'>

<inherits name='com.google.gwt.user.User'/>

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

<entry-point class='com.hakan.GwtDene1.client.GwtDene1'/>

</module>

GwtDene1.html

We are needed to edit the html file which is under war folder. This is actually the page we will see after opening the site. The output of our GWT app’s javascript code is put in this html. The important part is showing the js in this html file correctly.
You need to be careful about js file path. It is case sensitive!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link type="text/css" rel="stylesheet"

href="GwtDene1.css">

<title>My First GWT application</title>

<script type="text/javascript" language="javascript"

src="gwtdene1/gwtdene1.nocache.js"></script>

</head>

<body>

<!-- OPTIONAL: include this if you want history support -->

<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'

style="position: absolute; width: 0; height: 0; border: 0"></iframe>

<h1>My First GWT application</h1>

</body>

</html>

GwtDene1.css

This is optional. You can change the style.
Check this class names out!


.gwt-Label {

color: #DF0101;

font: normal 12px tahoma, arial, helvetica, sans-serif;

border: 1px solid black;

}

.gwt-Button {

font-size: 12px;

font-family: arial, sans-serif;

}

web.xml

This is the operation for identifying GwtDene1.html as welcome file of the app to the servlet.


<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

<a href="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd</a>"

version="2.5"

xmlns="http://java.sun.com/xml/ns/javaee">

<!-- Servlets -->

<!-- Default page to serve -->

<welcome-file-list>

<welcome-file>GwtDene1.html</welcome-file>

</welcome-file-list>

</web-app>

After clicking on “Run” on eclipse, there appears an address like this one below. Open this in Chrome. It will want to install a GWT extension. Let it go.

The coolest part is that i dont need to run the application again and again after editing the code. The browser is in a relationship with the source code. after saving the changes in eclipse, you can refresh the browser tab and see the changes. Cool!

GWT Designer setup

Eclipse -> Install New Software ->

http://dl.google.com/eclipse/inst/d2gwt/latest/3.7

Here is an screeshot from GWT Designer.

Complete code can be downloaded from here.

http://dl.dropbox.com/u/3600380/Projeler/Gwt/GwtDene1.zip

http://www.devdala.com/wp-content/plugins/sociofluid/images/digg_48.png

http://www.devdala.com/wp-content/plugins/sociofluid/images/stumbleupon_48.png

http://www.devdala.com/wp-content/plugins/sociofluid/images/delicious_48.png

http://www.devdala.com/wp-content/plugins/sociofluid/images/technorati_48.png

http://www.devdala.com/wp-content/plugins/sociofluid/images/google_48.png

http://www.devdala.com/wp-content/plugins/sociofluid/images/myspace_48.png

http://www.devdala.com/wp-content/plugins/sociofluid/images/facebook_48.png

http://www.devdala.com/wp-content/plugins/sociofluid/images/yahoobuzz_48.png

http://www.devdala.com/wp-content/plugins/sociofluid/images/twitter_48.png

GWT Kurulumu ve hello world projesi

28 Ocak 2012

GWT, java yazarak javascript applicationlar olusturmaya olanak veren sahane bir framework. Kurulum soyle:

Eclipse -> Help -> Install New Software -> http://dl.google.com/eclipse/plugin/3.7

Android pakedi secilmeyebilir. Kurulum bittikten sonra eclipse kendine restart atmak ister.
New -> Project -> Google -> Web Application Project

GwtDene1.java

Finish dedikten sonra eclipse bize kendisi guzel bir gwt application yaratir. Direk run diyip cikti incelenebilir. Serverli clientli on numara bir application kendisi. Yalniz bir kusuru var ki o da cok ileri duzey olmasi. Tabi ki ileri duzey diyince yanlis anlasilmasin yeni baslayanlar icin ileri duzey. Basit bir hello world projesi yaratamiyoruz. En azindan ben beceremedim. Birkac yerde okudugum uzre de bunun icin sikayette bulunmuslar gugila.
Neyse ben temiz basit bir hello world projesi istiyordum onun icin: proje agacindan server package’inin ve shared package’inin tamamini ve client package’nin icerigini silinir tamamen. Temelden alinir. Client pakedinin icine yeni bir class yaratalir ve adina GwtDene1 dedim. Icerigi asagidaki gibidir:


package com.hakan.GwtDene1.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.dom.client.ClickEvent;

import com.google.gwt.event.dom.client.ClickHandler;

import com.google.gwt.user.client.Window;

import com.google.gwt.user.client.ui.Button;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.RootPanel;

public class GwtDene1 implements EntryPoint {

@Override

public void onModuleLoad() {

Label label = new Label("Heyow");

Button button = new Button("Buton bu");

button.addClickHandler(new ClickHandler() {

@Override

public void onClick(ClickEvent event) {

Window.alert("Blog on numero");

}

});

RootPanel.get().add(label);

RootPanel.get().add(button);

}

}

GwtDene1.gwt.xml

EntryPoint belirlenmesi lazim. Java’da bulunan main methodu gibi entrypoint de applicationin nerden baslayacagini tanimlar. Onu gwt xmlinde tanimlanir. Soyle ki benim EntryPointim az onceki GwtDene1 classi idi. Onu xml’e asagidaki gibi yaziyorum:

<?xml version="1.0" encoding="UTF-8"?>

<module rename-to='gwtdene1'>

<inherits name='com.google.gwt.user.User'/>

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

<entry-point class='com.hakan.GwtDene1.client.GwtDene1'/>

</module>

GwtDene1.html

War klasorunun altindaki sayfanin goruntulenecegi xml’in icerigini de duzenlemek gerekiyor. Bu gorecegimiz sayfa aslinda. Gwt’nin ciktisi olan javascript kodu da bu html icinden gosterilir. Burda onemli olan o js dosyasinin duzgun olarak html’de gosterilmesidir. Buyuk kucuk harfe dikkat etmek lazim. html affetmez.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link type="text/css" rel="stylesheet"

href="GwtDene1.css">

<title>My First GWT application</title>

<script type="text/javascript" language="javascript"

src="gwtdene1/gwtdene1.nocache.js"></script>

</head>

<body>

<!-- OPTIONAL: include this if you want history support -->

<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'

style="position: absolute; width: 0; height: 0; border: 0"></iframe>

<h1>My First GWT application</h1>

</body>

</html>

GwtDene1.css

Css ile de oynanabilir istek dahilinde.

.gwt-Label {</pre>
font: normal 12px tahoma, arial, helvetica, sans-serif;

border: 1px solid black;

}

.gwt-Button {

font-size: 12px;

font-family: arial, sans-serif;

}
<pre>

web.xml

Servlete welcome file inin GwtDene1.html oldugunun gosterilmesi operasyonu bu da.


<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

<a href="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd</a>"

version="2.5"

xmlns="http://java.sun.com/xml/ns/javaee">

<!-- Servlets -->

<!-- Default page to serve -->

<welcome-file-list>

<welcome-file>GwtDene1.html</welcome-file>

</welcome-file-list>

</web-app>

Run diyince asagidaki gwt console unda soyle bir adres gorunur. Bu adres chrome’da acilir. Chrome bi eklenti yuklemek ister. Let it go. Yuklesin.

GWT Designer kurulumu

Eclipse -> Install New Software -> http://dl.google.com/eclipse/inst/d2gwt/latest/3.7

Designer paleti soyle gorunuyor:

Kodun tamaminin surdan indirilmesine:

http://dl.dropbox.com/u/3600380/Projeler/Gwt/GwtDene1.zip

Qt XML Processing – Read/Write

22 Ocak 2012

A basic post for describing the usage of QDom. RIP Delorean :-0

I’m writing this for myself in fact. Because in the beginning of every project i forget how to do these.

Btw, in my opinion QDom is better than original Dom:)

Little tip: For platform independency, in Qt programs you can write the whole file path with ‘/’ char. Qt replaces it with system’s seperator. If you are compiling the code in Windows, it will be replaced with ‘\’ and in Linux, it will stay same.

Xml Reading

void Util::xmlReader()
{
    QDomDocument doc("Root");
//here is my xml file. it is in the project.
    QString sFilePath("dene1.xml");
    QFile file( sFilePath );
//Read the file first
    if (!file.open(QIODevice::ReadOnly))
        return;
    if (!doc.setContent(&file))
    {
//Transforming QString to C's string is a little costly
        printf("File not found : %s\n", sFilePath.toStdString().c_str() );
        file.close();
        return;
    }
    file.close();

    QDomElement docElem = doc.documentElement();

    QDomNode n = docElem.firstChild();
    while(!n.isNull()) {
        QDomElement e = n.toElement();
        if(!e.isNull()) {
            cout << "tag  : " << e.tagName().toStdString() << endl;
            cout << "value: " << e.text().toStdString() << endl;
        }
        n = n.nextSibling();//don't forget this is important!
    }
}

Xml Writing


void Util::xmlWriter()
{
    QDomDocument doc("Root");
    QDomElement root = doc.createElement("Root");
    doc.appendChild(root);

    QDomElement tag = doc.createElement("Child");//Directly creates an element
    root.appendChild(tag);

    QDomText t = doc.createTextNode("Hello World");//Content of element
    tag.appendChild(t);

    QString xml = doc.toString();
    qDebug() << "xml : " << xml << endl;

    xmlDosyayaYazdir("dene1.xml",doc);
}

Writing File to Disk


bool Util::xmlWriteFileToDisk(QString par_sFilePath, QDomDocument par_qXmlDoc)
{
    QFile dosya( par_sFilePath );

    if (dosya.open(QFile::WriteOnly | QFile::Truncate))
    {
        QTextStream out(&dosya);
        out << par_qXmlDoc.toByteArray(6);
        return true;
    }else
    {
        return false;
    }
}

Cheerios

Premature optimization is the root of all evil

21 Ocak 2012

As Donald Knuth said “We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil.”

Google Docs vieweri kullanarak siteye döküman gömmek

20 Ocak 2012

Sayfalara pdf, doc, ppt eklemek icin birkac yontemvar. Scribd bu yontemlerden biri. Google Docs bir baska yol. Google Docs’un viewer biraz daha hizli ve esnek gibime geliyor. Ayrica dokumaninizi scribd uzerinde yayinlamaniza da gerek kalmiyor. Tabi tercih meselesi bu.

Viewer’a surdan erisilebilir:

https://docs.google.com/viewer

Oncelikle pdf belgesini nette bi yerlere yuklemek lazim. Ben bunun icin depo olarak kullandigim wordpress uzantili blogumun alanini kullandim. Dosyayi yukledigimde soyle bir baglantisi oluyor:

http://devdala.files.wordpress.com/2012/01/dosyaIsmi.pdf

Bu url i tutup ustteki google docs viewer’dan gerekli embed kodunu urettiriyoruz. Suna benzer bir sey oluyor o da:

<iframe src="http://docs.google.com/viewer?url=http%3A%2F%2Fdevdala.files.wordpress.com%2F2012%2F01%2FdosyaIsmi.pdf&embedded=true" width="600" height="780" style="border: none;"></iframe>

Bunu iframe istenilen yere yapistirilabilir. WordPress editorunde html’den yapistirmayi unutmayin. Eklentiye falan gerek yok. Bi de bazen chrome’da gozukmeyebiliyor. Firefox’ta bakilmasina.

Ayrintiya gel – Leyla ile Mecnun

14 Ocak 2012

Celenge bakilmasina

Adamlar yapmış – Battlefield 3 gerçekçiliği

01 Ocak 2012

Oldum olası sevememişimdir şu battlefieldi

A break room from Google

27 Aralık 2011

Linux ve Windows’ta Qt için Eclipse’i kullanmak

01 Aralık 2011

Yazılara alakasız resim koyma konusunda gittikçe başarım artıyor.

Minimum gereksinimler:

Windows ve Linux
Eclipse 3.2.1 veya daha yeni bir surum
Eclipse C/C++ CDT Plugin 3.1.1 veya daha yeni bir surum
Qt 4.1.0 veya daha yeni bir surum
Java JRE 1.4 veya daha yeni bir surum

Eger Microsoft toolchainleri kullaniliyorsa debugging biraz kisitli. En iyi mingw ile calisiyor.

Yukleme:

Eclipse C/C++ indirilir - http://www.eclipse.org/downloads/
Eclipse Qt integration indirilir (Official Qt distribution) - http://qt.nokia.com/products/eclipse-integration/
Eger Qt API documentation istiyorsaniz ki bence isteyin, onu da ayni yerden indirilir. Eclipse Qt API Documentation.
Linux icin Sun java runtime gerekli. Openjdk olmuyor sanirim.
Eclipse’i bir yere cikarilir(tar’dan veya zipten)
Java binary dosyalarinin PATH’e ekli oldugundan emin olun. (Ortam degiskenleri)
Eclipse’i calistirilir.
Arkasindan Qt pluginini zipten ya da tardan cikartilir. Eclipse’in plugin ve feature klasorunun altina cikartilan dosyalar atilir(plugin ve feature diye iki klasor çıkıyor zaten merge et gitsin). Eger isteniyorsa dokumantasyon da ayni sekilde atilir. Eger windowsta yukleme yapiliyorsa indirilen plugin dogrudan setup wizard yardimiyla kurulabilir. Ama dokumantasyon icin mecburen plugin klasorune kopyalama isleminin yapilmasi gerekir.
Eclipse yeniden baslatilir.
Eger basarili olunmussa eclipse’in acilisinda Qt eklentisi ilk defa calisiyor diye bir uyari cikar.
Eclipse menulerinden Window/Preferences/Qt gidilir ve Qt’nin yuklu oldugu klasorun yolu gosterilir.
Thats it!

Amarok’ta KDE wallet’in calismasini engellemek

20 Kasım 2011

Gnome’da kde zaten sikintili. bi de bu tip ozellesmis uygulamalar gelince iyice sikinti oluyor. Amarok kullananlar bilir acilista takilip kalir falan.

Onu engellemek icin amarok’u acinca Settings -> Configure Amarok -> Internet Services geliyoruz. Last.fm’in basindaki tiki kaldiriyoruz. Ben de calismadi bi daha wallet service. Ama olmazsa su da yapilabilir:

- Last.fm disable edildikten sonra amarok kapatilip terminale su yazilir:

gedit .kde/share/config/amarokrc

- Sonra asagidaki deger yes yapilir

ignoreWallet=yes

- Sordugu zaman da acces always diyiniz.

Ubuntu’da kaybolan ses simgesini geri getirme

20 Kasım 2011

Mail simgesini, blutut simgesini falan kaldiriyim derken yaptigim isguzarlik sonucu ses simgesi de kayboldu.

Geri getirmek superkolay:

- Panele sag tiklanmasina

- “Add to panel”e tiklanmasina

- “Indicator applet”in secilmesine ve add denmesine. Thats it.

Ubuntu’da Firefox guncelleme

20 Kasım 2011

Uzun zamandir emektar 3.6 kullaniyordum. ff 8 falan cikmis diyolar.

Terminali acip sirasiyla sunlari yaziyoruz:

gksu add-apt-repository ppa:mozillateam/firefox-stable

gksu apt-get update

sudo apt-get install firefox

Mozilla linuxu pek sallamaz oldu sanki. Insan bi deb pakedi koymaz mi sitesine. Hadi yattim.

Arama yap:
Kategulu
- Adobe Flash Dersleri
- Atış serbest
- Bilgisayar
- Diziler
- Güncel
- Linux
- Mobil
- NVIDIA CUDA
- Oyun dünyası
- Sinema
- windows 7
- wordpress
- Yazılım
Tivitine ban
- @asinangedik ya "cheers"a ne demeli? 1 day ago
- #wordpress i guncellemeye korkuyorum valla. her seferinde auto update yukleme esnasindaki heycan, garip gurup hatalar, calismayan eklentiler 4 days ago
- @asinangedik her seye thank you diyolar kardes sen ne diyon ya:/ 1 week ago
- More updates...
Posting tweet...
Powered by Twitter Tools
Bağlantılar

GwtDene1.java

GwtDene1.gwt.xml

GwtDene1.html

GwtDene1.css

web.xml

GWT Designer setup

GwtDene1.java

GwtDene1.gwt.xml

GwtDene1.html

GwtDene1.css

web.xml

GWT Designer kurulumu

Xml Reading

Xml Writing

Writing File to Disk

Kategulu

Tivitine ban

Bağlantılar