Month: September 2007

Konzeptionelles

Da ich egientlich schon Mitte der Woche nen Zeitplan fertig haben wollte, fühle ich mich ein wenig unwohl. Letztendlich weiß ich ja schon ungefähr welche einzelnen Bereiche es abzuarbeiten gilt, aber man hat ja dann irgendwie auch Anspruch, dass ganze ein wenig mit Struktur und Übersicht zu verbinden.
Bisher sammelte sich alles in 2 Mind-Maps:
1. Funktionalität:

2. Systemübersicht:


Im Moment bin ich dabei einen Programmablauf zu erstellen, damit ich die einzelnen Abläufe mal zusammen bekomme.
Ansonsten habe ich in JSP die ersten Datenbank-Funktionen fertig und schon die ersten Beans in Java geschrieben und eingesetzt.
P.S.: Mit ? versehende Punkte sind optional/bisher nicht als voll implementiert geplant.
P.P.S.: Extra für Willem: Man kann auf die Bilder klicken und sie werden größer. Und eine Vorschau dient zur Vorschau und nicht zum ansehen der Bilder ^^

es geht voran

Nach der gestrigen Ernüchterung habe ich es dann heute einfach noch mal mit ner aktuellen Eclipse Version versucht. Auf der Eclipse Homepage gibt es ja den “Europa Build”. Und siehe da: es ging plötzlich. War zwar erst immer noch etwas absturzfreudig das ganze, aber nachdem ich Java wieder auf Version 6 umgestellt habe, konnte ich sogar damit arbeiten.
Das hat zu folge, dass ich mittlerweile in wenig weiter mit JSP gekommen bin (allerdings immer noch auf bekanntem Gebiet 😀 – siehe dazu auch die Quelltexte).
Zudem habe ich dann heute mal mein erstes Script als JSP/YUI Kombination geschrieben. Und das schönste: es geht sogar.
Nachfolgend also eine Tabelle, die sehr simpel durch 2 Schleifen erstellt wurde.
Zudem habe ich Schleifen benutzt, um das JavaScript fürs YUI zu erstellen.
(für die Sortierfunktion muss man alle Table Headers als Array angeben – das war mir ein wenig zu mühselig um es per Hand zu machen 🙂 )
Tabelle ohne YUI:

Tabelle mit YUI:

(durch Klick auf den Tabellenkopf kann man die einzelnen Spalten jeweils sortieren)
allererstes Panel:

Letzendlich gibt es bei YUI immer zwei (okay eigentlich drei) Möglichkeiten, um den Inhalt zu erstellen.

  1. durch Veränderung von vorhandenem HTML Code (sog. Markup)
  2. durch reine JavaScript Befehle
  3. durch JavaScript und eine externe Quelle (sei es nun ein XML Feed oder JSON)

Das eröffnet einem einen relativ großen Bereich an Möglichkeiten.
Zudem fand ich heute eine weitere, interessant Seiten, auf der die verschiedenen Möglichkeiten des YUI Frameworks demonstriert werden. [1][2]
Der Code für die obigen Beispiele ist folgender:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Client <%=request.getRemoteHost() %>!</title>
<style type="text/css">
    .grey{
        background: grey;
    }
    .black{
        background: black;
        color: white;
    }
    td, th{
        font-size: xx-small;
    }
</style>
<link rel="stylesheet" type="text/css" href="yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/datatable/assets/skins/sam/datatable.css" />

<script type="text/javascript" src="yui/utilities/utilities.js"></script>
<script type="text/javascript" src="yui/datasource/datasource-beta.js"></script>
<script type="text/javascript" src="yui/datatable/datatable-beta.js"></script>
<script type="text/javascript" src="yui/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="yui/element/element-beta-min.js"></script> 

</head>
<body>
<a href="menu.jsp">Men&uuml;</a>
<h2>THIS is a JSP/YUI TEST TABLE!</h2>
<%
    int _cols = 20;
    int _rows = 30;
%>

<div id="myContainer">
<table  id="accounts">
<%
    out.println("t<thead><tr>");
    for(int j=0; j<_cols; j++){
        out.println("tt<th class="black">"+j+"</th>");
    }
    out.println("t</tr></thead>");
    String css_class = "";
    out.println("t<tbody>");
    for(int i=0; i<_rows;i++){
        out.println("t<tr>");
        if(i % 2 == 0)
            css_class = "white";
        else
            css_class = "grey";
        for(int j=0; j<_cols; j++){
            out.println("tt<td class=""+css_class+"">"+i+","+j+"</td>");
        }
        out.println("t</tr>");
    }
    out.println("t</tbody>");
%>
</table>
</div>

<script type="text/javascript">

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.EnhanceFromMarkup = new function() {
        var myColumnDefs = [
            <%
            for(int j=0; j<_cols; j++){
                out.print("t{key:""+j+"",label:"No "+j+"", sortable:true}");
                if(j != (_cols-1))
                    out.println(",");
                else
                    out.println("");
            }
            %>
        ];

        this.myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("accounts"));
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
        this.myDataSource.responseSchema = {
            fields: [

                    <%
                    for(int j=0; j<_cols; j++){
                        out.print("t{key:""+j+""}");
                        if(j != (_cols-1))
                            out.println(",");
                        else
                            out.println("");
                    }
                    %>
            ]
        };

        this.myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs, this.myDataSource,
                {caption:"Example: This is just the Table Title ;-)",
                sortedBy:{key:"0",dir:"desc"}});
        };

        this.parseNumberFromCurrency = function(sString) {
            // Remove dollar sign and make it a float
            return parseFloat(sString.substring(1));
        };
});

</script>

</body>
</html>

index.jsp (für die Tabelle)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Panel Demo</title>
<link rel="stylesheet" type="text/css" href="yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/container/container.js"></script>
</head>
<body>
Simple Panel

<div id="myPanel">
	<div>my little Demo Panel</div>
	<div>
	<ul>
	<li><a href="index.jsp">item one</a></li>
	<li><a href="index.jsp">item two</a></li>
	<li><a href="index.jsp">item tree</a></li>
	</ul>
	</div>
	<div>&copy; by me :-)</div>
</div>

<script type="text/javascript">
myPanel = new YAHOO.widget.Panel("myPanel", {
	width:"240px", 
	height:"480px", 
	fixedcenter: true, 
	constraintoviewport: true, 
	underlay:"shadow", 
	close:false, 
	visible:true, 
	draggable:true } );
myPanel.render();
myPanel.show();
</script>

</body>
</html>

menu.jsp (für das Panel)

Hierbei ist zu beachten, dass jeweils zwischen der JSP Code zu finden ist. Von der Syntax ist JSP sehr an Java angelehnt.
Ich werde die restlichen Tage der Woche benutzen, um das ganze auch auf meinem Laptop zum Laufen zu kriegen und dann schon mal versuchen, eine Verbindung zu einer MySQL Datenbank herzustellen.

Day of Bugs

Da ein recht wichtiger Teil, meiner Arbeit unter JSP in einem geeigneten Container ablaufen soll, dachte ich mir so, dass es im Open-Source Umfeld neben dem Tomcat Server auch eine geeignete IDE geben muss.

Da ich mit der Programmierung in PHP, dem Schreiben von HTML und natürlich bei dem Umgang mit Java mit Eclipse gute Erfahrungen gemacht habe, machte ich mich auf, ein gutes Plug-In zu finden.
Weil: Von der Tatsache eine funktionierende JSP Seite im ROOT Folder lauffähig zu haben, zu der Idee, eine wirkliche (wie heißt es noch so schön: deploybare) Anwendung zu erhalten, ist es noch ein weiter Weg. Angeblich (und ich schreibe das hier jetzt wirklich ganz bewußt) soll das vorhandene Plug-In (welches im WTP [1] Projekt enthalten ist) diese ganze Arbeit erleichtern.
Wären da nicht ein paar Kleinigkeiten, die mich heute über den gesamten Tag hinweg sehr viele Nerven gekostet haben:

  1. Eclipse + WTP laufen unter Java 6 – nett gesagt – instabil
  2. Tomcat 5.5 wird unter WTP nur durch sehr tiefe Eingriffe in den Eclipse Innereien unterstützt
  3. Starten/Beenden von Tomcat geht unter Linux so gar nicht (ich habe es mittlerweile nun auch mit verschiedener Rechtervergabe aufgegeben)

Immerhin weiß ich nun, dass ich bei meinem ganzen Frust und Problemen nicht alleine bin und es irgendwann zwischen jetzt und in drei Monaten einen Release Candidate von Eclipse geben wird, der das dann alles besser können soll.

Letztendlich bin ich jetzt dazu über gegangen, mir die notwendige Struktur in Ordner aufzubauen und das ganze entweder manuell zu kopieren oder per Export als WAR Datei [2] zu importieren.
Soviel zum Thema Tools, aber es geht und ist für mich zumindest vollständig nachvollziehbar.

preparing the tools

Damit ich dann auch recht bald loslegen kann, wenn das Konzept fertig ist, habe ich so allmählich meine Entwicklungsumgebung zusammengestellt:

  • Also Basis dient mir hierbei Ubuntu Linux 7.04, weil ich
    1. eh lieber mehr Linux/Unix lastig arbeite
    2. Ubuntu als das bessere Debian empfinde
  • Java Version 6 läuft (braucht man für die meisten nachfolgende Programme)
  • Tomcat läuft (der ist ein quasi Standard wenn es um die Entwicklung und den Betrieb von JSP Anwendungen geht)
  • Eclipse mit passenden Plugins ist ebenso installiert und lauffähig.

Die ersten Test mit dem Yahoo Framework waren auch schon erfolgreich und meine erstes Hello World Java Server Page steht auch schon.
Was ich heute eher durch Zufall fand sind die Yahoo Cheat Sheets. Ich könnte mir sowas gut also Poster vorstellen :-). Ich denke das wird mir noch mal sehr nützlich sein, wenn mir ein Befehl mal absolut nicht mehr einfallen will. Ich werde die nächsten Tage jetzt mal die Grundlegen Funktionen sammeln, meine Objekte bilden und dann schaun, dass ich schon mal erste Tests mit der Schnittstelle hinbekomme. Was ich bisher von JSP so gesehen habe, ist es gut on-the-fly zu lernen, wobei man die Besonderheiten – die sicherlich noch auftauchen werden – natürlich nicht unterschätzt werden sollten.

P.S.: Gruß an Tim:
[1] (Video)
Im letzten Drittel müsste es um das Zeichnen im Canvas gehen.
Siehe dazu auch: [2] (das schreiben sie bei Mozilla dazu)
Ich habs zwar bisher noch nie brauchen können, fand es aber nachhaltig höchst interessant…… Hm okay…. Grüße dann die anderen auch mal 🙂

simple iPhoto Gallery Script

Some time ago, i searched for a very simple possibility for publishing some photos online.
As a Mac User i am recently using iPhoto for collecting and organizing my photos.

I reused some old PHP code and create a simple Script, that searches through some iPhoto Web Exports to build a nice index page with folder previews:

phpGallery Screen1

The folder structure should be as the following:
phpGallery Screen2

As i do not have other language Versions of iPhoto, i do not know, if the scripts works also with other Versions of iPhoto.

Here you can download the very first version of the script:

PHP_Gallery_Script_for_iPhoto06_german

Beschreibung des Themas

Im Rahmen meiner Diplomarbeit möchte ich anhand eines Beispiels die Zusammenarbeit von einer client-seitigen Web 2.0 Technik (AJAX1)und der server-seitigen
Sprache JSP/Java-Servlets demonstrieren. Der Austausch der Daten soll entweder als Web Service2(über HTTPS)oder als XMLoder JSONformatiert, realisiert werden.
Die Darstellung auf Client Seite (also im Browser) soll eine Benutzerinteraktion möglichst ohne vollständiges Neuladen der Seite ermöglicht werden.
Es geht NICHT darum, etwa eine Art Email Programm zu entwickeln oder einen vollständige Kalenderanwendung zu bieten.
Der Focus liegt darin, terminliche Verpflichtungen aus unterschiedlichen Quellen, derart umzuformen, dass der Anwender in der Lage ist mit einem einzigen Blick eine Übersicht zu erhalten, was demnächst ansteht.

Hierbei soll dem Anwender eine Desktop-ähnliche Oberfläche auf Basis des Yahoo YUI Frameworks geboten werden.
Der Austausch zwischen Client und Server soll über das Atom Format stattfinden.
Das Atom Format ist eine auf HTTP und XML basierte Web Technik, die, die Möglichkeit bietet, Webinhalte zu bearbeiten und zu verbreiten. Siehe dazu Wikipedia Atoms Format
Die Serveranwendung selbst wird als Web Applikation auf JSP-Basis unter Apache Tomcat laufen. Hierbei unterteilt sich die Anwendung in eine Komponente zur Verarbeitung von eingehenden, anwendungsfremden Feeds, der Datenhaltung (Ablage, Suche und Änderung von Datensätzen) und der Vermittlung zwischen Client und Server Verkehr (siehe Schaubild).

FINALLY: Comments are working again

A friend of mine told me some minutes ago that the Comments function on this blog still produces some errors, when trying to post a comment. So i decided to stay with the spam and to disable the filter function until i have the time and the infos about the wordpress system to code my own plugin.

I found another project i worked on in the past years. I updated it a little bit and can now present some screen impressions:

First of all what is it?
So i have the big problem of to many files on to big disk space. As a result there is first the problem of finding files and second the high probability to save identical files on several places. Not only small files like the typical 1×1 spacer.png, but also some sound files, hi-res images or movie files. Just in case of the backup of a backup.

So i decided that i need a system, that organizes my files in that way, that i can have a quick view, i may search through all the files and that there is the safety, that a file is just saved onced and all the copies of it should be just links to the original ones.

I end up with a system design that scans a particular folder for new files and copy them into a special ordered file structure. The unique property of a file is its md5 sum. The original file/folder structure is mapped into a DB table.
The system is no at exactly this point. I created a easy low level plugin interface for examining the different file types.
Lateron i will create a class, that make sys links equivalent to the original folder structure and offer them e.g. as a samba share. Even the possibility of a file history is imaginable. At this point the main task is the imense low performance (due a big use of DB queries and redundant method calls) and the definition of a usefull interface.

Here are some screens of the current system:
File-Vault storage Folder
System File Storage

File-Vault picture Viewer
Picture Viewer

File-Vault mysql Viewer
SQL (Text) Viewer with Import Function

File-Vault PHP Viewer
PHP Viewer

File-Vault MP3 Viewer
MP3 Player