Monday, March 21, 2016

CSS Trick - Alles Resizable

CSS Trick - Alles Resizable



Die Textfields kann man im Html standartmässig vergrössern oder verkleinern. Aber was ist mit anderen Elementen wie Divs oder iFrames oder Videos?

Dazu genügt es lediglich die property resize hinzuzufügen.

div{
    resize:both;
}

Daneben gibt es noch zwei weitere Möglichkeiten.
resize: vertical;
resize: horizontal;


Sunday, March 20, 2016

Analoge Uhr in Java

Analoge Uhr in Java


Wie programmiert man eigentlich eine analoge Uhr?
Ist eigentlich nicht so schwierig, jedoch braucht man dazu ein bisschen Trigonometrie und ein Verständnis von Thread. Das ergebnis dieses kleinen Tutorials sieht folgendermassen aus;



Wir werden dazu keine Engine,Library oder so was in der art verwenden. Wir überschreiben lediglich die Paint methode des Frames und zeichnen ganz normale Java Lines mit dem Graphic object. Dazu habe ich ein Modell erstellt mit dem Namen Clock, dieses gibt uns pro Sekunde die verschiedenen Coordinaten zum zeichnen, welche es berechnet hat.
Man muss also eine Formel haben die von Sekunden, Minuten und Stunden auf die Coordinaten der Zeiger kommt. Diese sieht wie folgt aus:
    private void calculateCorrs(){
        this.Sec = new Date().getSeconds();
        this.Minute = new Date().getMinutes();
        this.Hour = new Date().getHours();
        int xsecond = (int) (Math.cos(Sec * 3.14f / 30 - 3.14f / 2) * 120 + ORIGIN.x); 
        int ysecond = (int) (Math.sin(Sec * 3.14f / 30 - 3.14f / 2) * 120 + ORIGIN.y);
        this.secCorr = new Point(xsecond,ysecond);
        int xminute = (int) (Math.cos(Minute * 3.14f / 30 - 3.14f / 2) * 100 + ORIGIN.x); 
        int yminute = (int) (Math.sin(Minute * 3.14f / 30 - 3.14f / 2) * 100 + ORIGIN.y); 
        int xhour = (int) (Math.cos((Hour * 30 + Minute / 2) * 3.14f / 180 - 3.14f / 2) * 80 + ORIGIN.x); 
        int yhour = (int) (Math.sin((Hour * 30 + Minute / 2) * 3.14f / 180 - 3.14f / 2) * 80 + ORIGIN.y);
        this.minCorr = new Point(xminute,yminute);
        this.hourCorr = new Point(xhour,yhour);
    }




Der Punkt Origin ist der Punkt welche alle drei Zeiger gemeinsam haben. Nähmlich die Mitte unserer Uhr. In diesem Fall hat das Frame eine Grösse von 350 auf 350 und der Origin ist somit 175,175.

Jetzt noch die update und Paint Methode und das ganze sollte ziehmlich klar werden.

Update:
    @Override
    public void update(Observable o, Object arg) {
        zeichne = true;
        Clock c = (Clock)o;
        this.secCorr = c.getSecCorr();
        this.minCorr = c.getMinCorr();
        this.hourCorr = c.getHourCorr();
        this.repaint();
        this.revalidate();
    }


Paint:
@Override
    public void paint(Graphics g) {
        super.paint(g);
        Graphics2D g2 = (Graphics2D) g;
        if(zeichne){
            RenderingHints rh = new RenderingHints(this.renderHints);
            g2.setRenderingHints(rh);
            g2.setColor(Color.BLACK);
            g2.setColor(Color.red);
            g2.drawLine(Center.x, Center.y, secCorr.x, secCorr.y);
            g2.setColor(Color.WHITE);
            g2.drawLine(Center.x, Center.y, minCorr.x,minCorr.y);
            g2.drawLine(Center.x, Center.y, hourCorr.x, hourCorr.y);
            g2.drawLine(175,25,175,40);
            g2.drawLine(175, 335, 175, 350);
            g2.drawLine(0, 175, 15, 175);
            g2.drawLine(335, 175, 350, 175);
            g2.drawString("12",168,55);
            g2.drawString("3", 325,180);
            g2.drawString("6", 172,325);
            g2.drawString("9",20,180);
        }
    }



Die Striche von 6,12,3,9 sind hardcoded. Das ist in unserem Fall nicht problematisch, da das Fenster nicht resizeble ist.

Der weitere Code erklärt sich von selbst, diesen kann man unter meinem Github Profil finden.
Das Repo : https://github.com/marcin96/AnalogClock.git

Saturday, March 19, 2016

XML für Anfänger

XML für Anfänger


XML ist eine sehr beliebte Art Daten darzustellen. Es steht für Extensible Markup Language auf Deutsch für erweiterbare Auszeichnungssprache. In diesem Tutorial geht es darum wie man Xml braucht und wie die Konvention dafür aussieht.

Wo wird es gebraucht?

Xml hat sich in den Jahren vor allem im Web bereich durchgesetzt da es in seiner Syntax auch sehr an Html errinert. Wenn man jetzt zum Beispiel einen Blog schreibt, kann man die Daten relativ einfach also in dem Fall die Posts in XML speichern und so damit auch sehr Leserlich strukturieren mit einem Datum und dem Post Inhalt. 

Aufbau

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<personen>
    <person>
        <name>Müller</name>
        <vorname>Hans</vorname>
        <alter>30</alter>
        <Herkunft>Deutschland</Herkunft>
    </person>
</personen>¨

Die erste Zeile ist sehr wichtig, sie teilt dem Pasrser mit dass es sich hier um ein XML Dokument handelt. Oftmals führt ein Fehler in dieser Zeile dazu, das dass Xml Dokument vom Parser nicht verstanden wird und ein Fehler ausgegeben wird.

Dannach kommt der Root Tag, in diesem Fall die Personen, in jedem Xml Dokument gibt es genau einen Root Tag und nicht mehr. So ist die Konvention. Man versteht dadurch schnell was für Daten sich in diesem Dokument befinden. In unserem Fall sind dies Personen.

Und schlussendlich kommen wir noch zu den richtigen Daten. Zu den Personen. Diese sollten im Idealfall genau gleich aufgebaut werden. Wir sehen, jede Person hat einen Name, Vornamen und ein Alter. Dies wird auch so gespeichert.

Man sieht schon die grosse Ähnlichkeit von XML zu HTML, dass heisst auch Menschen die keine Programmierer sind, sonder sich viel mehr mit der strukturierung von einer Website befassen können XML verstehen.

Parsen

Beim Parsen gibt es zwei Möglichkeiten. Also zwei Vorgehensweisen. Das eine ist SAX und das andere DOM. 

Sax

Sax ist die schnellste Variante ein XML Dokument zu parsen, jedoch liegen die Daten, also der Baum nach dem Einlesen nicht mehr im Arbeitsspeicher. Sax betrachted nicht das ganze Dokument sondern nur die benötigten Teile und liefert uns nur die benötigten Daten.

Dom

Dom ist wesentlich langsamer als Sax, jedoch leigt der Tree, also unser Daten Baum dan immer noch im Abreitsspeicher und wir können auf jegliche Knoten zugreifen. Dom betrachted ein XML Dokument immer als ganzes. Dies lohnt sich oft sehr, jedoch muss man immer auf die Grösse unsere XML Files schauen. Da beim Parsen jedesmall der ganze Datenbaum eingelesen wird.

Beispiel

Jetzt noch einmal zu unserem Beispiel von vorhin. Wir schreiben einen Blog und möchten unsere Posts in einem XML File speichern. Unser Dokument würde dann folgender massen aussehen:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Posts>
    <Post>
        <Titel>Erster Post</Titel>
        <Daten> Hall und wilkommen zum ersten Post...</Daten>
        <Author>Python</Author>
        <Datum>1.01.2016</Datum>
    </Post>
    <Post>
        <Titel>Zweiter Post</Titel>
        <Daten> Hall und wilkommen zum zweiten Post...</Daten>
        <Author>Python</Author>
        <Datum>1.04.2016</Datum>
    </Post>
</Posts>


Friday, March 18, 2016

Linux Commands für Anfänger

Linux Commands für Anfänger


Linux ist das beliebteste OS( Operationssystem) wenn man vom Open Source Bereich spricht. Es hat sich in den Jahre sehr stark auch für den normalen Benutzer durchgesetzt und bieted alle Funktionen die auch herkömmliche commerzielle OS bieten.
Ein grosse Vorteil ist die zur verfügung gestellte Shell. Mit dieser kann man ohne viel herum clicken zu müssen vieles auf einen Schlag erledigen. Mann muss nur wissen wie.
Dieses Tutorial ist vor allem für Einsteiger gedach und erläutert die wichtigsten Commands welche man für den Anfang kennen sollte.

  • cd /pfad : wechselt den Pfad
  • cat [filename] : Zeigt die Innereien eines Files
  • chmod [optionen] [filename]: Ändert die File Berechtigungen
  • chown [filename] : ändert den Besitzer eines Files
  • clear : Löscht den Consolen Inhalt
  • cp [source] [destination]: Kopiert Files
  • date [options]: Zeigt das Datum und die Zeit an
  • df [options]: Zeigt den belegten und freien Speicher
  • du [options]: Zeigt welches File wie viel Speicher belegt
  • file [options] [filename]: Zeigt was für eine art Daten im File sind.
  • find [Pfad] : Such ein File
  • grep [options]: Sucht ein File oder Output nach eine bestimmten Muster
  • kill [options] : Stopped einen Process
  • ln [oprions] [destination] : Erstellt eine Verknüpfung
  • locate [filename] : Sucht copien von einem File
  • lpr [options] : sendet einen druck Befehl
  • ls : Zeigt alle Daten in einem Verzeichniss
  • man [command]: Zeigt die Hilfe für einen Befehl an
  • mkdir [options]: Erstellt ein nuene Ordner
  • mv [options]: Bennent ein File um oder er verschiebt es.
  • passwd [name]; ändert das password oder ermöglicht das ändern des Passwords.
  • ps [options]: Zeigt die laufenden Processe
  • pwd: Zeigt den derzeitigen Pfad.
  • rm [options]: Löscht Files und Verzeichnisse
  • rmdir [options]: Löscht leere Verzeichnisse.
  • ssh [options] : verbinden sich mit einem anderen Computer per ssh.
  • su [options]: Wächselt den user.
  • tail [options]: zeigt die letzten n Zeilen von einem File.
  • tar [options]: entpackt oder packt in ein .tar Archiv
  • top : Zeigt die benutzten Ressource
  • touch [filename]: erstellt ein leeres File mit dem Namen.
  • who [options]: Zeigt wer eingellogt ist.

Thursday, March 17, 2016

MVC - Pattern mit Java

Das MVC Pattern #Java


Hinweis: Dieses Tutorial baut auf der Netbeans Entwicklungsumgebung und der Gui Library Swing auf.

MVC, was ist das?

Nun vielleicht zuerst was mvc überhaupt bedeuted. Und zwar Model View Controller. Dies ist ein Muster das verwendet wird um Software zu strukturieren. In den Jahren hat es sich sehr gut durchgesetzt da man somit viel besser mit anderen Programmieren zusammen arbeiten kann. Dieses Muster wie auch viele andere dienen dazu die Software Elemente klar und logisch voneinander zu trennen. Daraus ergeben sich viele Vorteile. Zum einen findet man so viel schneller einen Fehler, zum anderen ist man viel flexibler wenn es Fehler gibt, das heisst, das programm stürtzt nicht einfach ganz ab sondern nur ein teilbereich funktioniert nicht. Wenn man es richtig macht. Und zu guter letzt sorgt es für mehr Transparenz wenn man in einer Gruppe arbeitet.

Wie funktioniert es?

In diesem Abschnitt möchte ich klären für was die einzelnen Bestandteile zuständig sind.

Model:

Im Model befindet sich jegliche Programmlogik, darunter versteht man die verarbeitung von Daten, sei es um Berechnungen anzustellen oder einen Text zu filtern. Wenn man jetzt ein Programm auf mehreren Platformen realieseren möchte, kann man dank diesem Pattern die Logik nur einmal schreiben und sie dann immer wieder verwenden.

View:

Die View ist für jegliche Darstellung der Daten zuständig. Sie verwalted die Gui( Graphische Benutzeroberfläche). In Java gehen darunter jegliche librarys wie swing, awt oder das neuste Kind JavaFx.

Controller:

Der Controller steuert das ganze. Er ist für die Steuerung verantwortlich. Das heisst er nimmt jegliche Benutzereingaben oder mehr abstract gesagt signale entgegen und verarbeited diese. Die werden an das Model übergeben, unsere Datan werden angepasst und die Gui wir upgadated mit den neuen Daten.

Wieso benutzt man es?

Wie schon vorher erwähnt versteht man das MVC pattern als einen Bestandteil der professionellen Softwareentwicklung.

In Verbindung mit Java

Jetzt kommen wir zu unserem Beispiel.
Wir möchten ein Programm realisieren das mit dem MVC pattern arbeited.
Und was soll dieses Porgramm können?
Nun, machen wir es doch so einfach wie möglich um uns auf das Hauptthema zu konzentrieren.
Unser kleines Java-Programm so anhand von einem click Hallo Welt schreiben.

Zuerst aber sollten wir unsere Packages auch dementsprechend strukturieren, das ganze sollte so aussehen:
Gut jetzt fangen wir mit dem simplen Model an. Für diese Applikation werden wir nur eines brauchen.



Nichts weltbewägendes.
Das Model muss aber von Observable erben. Und wie wir sehen gibt es uns den String "Hallo Welt" zurück. Wichtig ist noch das wir bei jeder veränderung der zu anzuzeigenden Daten immer den Observer benachrichtigen müssen. Mit den zwie Zeile, this.setChanged(); und this.notifyObservers();

Jetzt gehen wir rüber zu unserem View. Dort fügen wir ein JLabel ein und bennen es halloText.
Und natürlich auch einen Button, den halloButton.

So sollte es aussehen.
Die Klasse muss so angepasst werden, dass sie Observer implementiert. Dadurch muss sie auch die Methode update überschreiben.


Und natürlich unsere update Methode:
Wir kasten das Observable objekt nach unserem Model und updaten quasi den Text unsere Labels.

Natürlich müssen wir auf die reaktion irgendwie reagiere, Dafür brauchen wir einen Controller.


Jetzt müssen wir das View noch einmal bearbeiten bevor wir alles verknüpfen, wir brauchn dort eine Methode die unseren Controller registriert. Nennen wir sie auch gleich "registerController".



Zu guter letzt müssen wir noch alles in der main Methode verknüpfen und dan ist es schon fertig.
Der Code sieht so aus:


Jetzt funktioniert unsere Applikation.








Wednesday, March 16, 2016

Clean Code

Clean Code



Clean Code ist the best book when you want to learn code in a clean way, Of course all conventions are shown together with samples. And the humor of the author is also very specific for geeks.

DOWNLOAD LINK:

Clean Code (German)

Clean Code



Clean Code ist das Buch wens um schönen Code geht. Besprochen werden alle nötigen Konventionen natürlich anhand von Beispielen. Mir persöhnlich hat dieses Buch sehr geholfen meinen Code schöner und verständlicher zu gestalten.

Download Link: