<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>semantic-void.net &#187; Webapplikation</title>
	<atom:link href="http://www.semantic-void.net/tag/webapplikation/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.semantic-void.net</link>
	<description>ab und zu Blog</description>
	<lastBuildDate>Sun, 25 Oct 2009 10:42:03 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>JavaFX Testdrive und Pseudo-Tutorial :-)</title>
		<link>http://www.semantic-void.net/blog/26_erste-schritte-mit-javafx/</link>
		<comments>http://www.semantic-void.net/blog/26_erste-schritte-mit-javafx/#comments</comments>
		<pubDate>Thu, 21 Aug 2008 14:01:05 +0000</pubDate>
		<dc:creator>Sebastian</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Coding]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[JavaFX]]></category>
		<category><![CDATA[RIA]]></category>
		<category><![CDATA[Webapplikation]]></category>

		<guid isPermaLink="false">http://www.semantic-void.net/?p=26</guid>
		<description><![CDATA[Rich Internet Applications (RIAs) sind (urspr&#252;nglich) Webapplikationen, die aber Benutzeroberfl&#228;chen, Look &#38; Feel und Funktionalit&#228;ten &#228;hnlich einer Desktop-Applikation bieten. Stichworte sind kein neuerliches Laden einer Seite, wenn sich die Inhalte &#228;ndern, Drag &#38; Drop, Animation usw.

Sun springt mit JavaFX auch auf diesen Zug auf. Ende Juli 2008 wurde eine erste Preview SDK auf der Produktseite [...]]]></description>
			<content:encoded><![CDATA[<p>Rich Internet Applications (RIAs) sind (urspr&#252;nglich) Webapplikationen, die aber Benutzeroberfl&#228;chen, Look &amp; Feel und Funktionalit&#228;ten &#228;hnlich einer Desktop-Applikation bieten. Stichworte sind kein neuerliches Laden einer Seite, wenn sich die Inhalte &#228;ndern, Drag &amp; Drop, Animation usw.</p>
<p>Sun springt mit JavaFX auch auf diesen Zug auf. Ende Juli 2008 wurde eine erste Preview SDK auf der <a title="JavaFX Produktseite" href="http://www.javafx.com/" target="_blank">Produktseite</a> ver&#246;ffentlicht. Mit JavaFX m&#246;chte Sun eine komplette Produktlinie zur Verf&#252;gung stellen, um RIAs zu entwickeln. Hierzu geh&#246;ren sowohl Tools zur Programmierung bzw. zum Skripten (Netbeans IDE), als auch Werkzeuge zur Content-Erstellung (Project Nile).</p>
<p>Einer der wichtigsten Bestandteile der Produktlinie ist JavaFX Script. Diese Skriptsprache dient der Definition des Aussehens und Verhaltens einer Benutzeroberfl&#228;che. JavaFX Script ist damit vergleichbar zu <a title="Wikipedia: ActionScript" href="http://de.wikipedia.org/wiki/ActionScript" target="_self">ActionScript</a>, wie es in Adobe Flash / Flex / Air Verwendung findet. Zun&#228;chst stellt sich die Frage, warum man &#252;berhaupt eine neue Skriptsprache braucht. Schlie&#223;lich wurde beispielsweise mit <a title="Groovy" href="http://groovy.codehaus.org/" target="_blank">Groovy</a> eine eingef&#252;gt. Einer der Hauptgr&#252;nde ist wohl, dass es dem Benutzer m&#246;glichst einfach gemacht werden soll, dynamische Benutzeroberfl&#228;chen zu definieren.</p>
<p>Dann wollen wir mal schauen, ob das Ganze was taugt <img src='http://www.semantic-void.net/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<hr />
<h4>JavaFX Preview SDK und Netbeans herunterladen</h4>
<p>Netterweise gibt es von Sun ein Paket, dass JavaFX und die Entwicklungsumgebung Netbeans b&#252;ndelt. Einfach <a title="JavaFX Preview SDK Download" href="https://cds.sun.com/is-bin/INTERSHOP.enfinity/WFS/CDS-CDS_Developer-Site/en_US/-/USD/ViewProductDetail-Start?ProductRef=netbeans-6.1-javafx-1.0-pre1-oth-JPR@CDS-CDS_Developer">herunterladen</a> und installieren. Zurzeit gibt es dieses Paket f&#252;r Windows und Mac OS X.</p>
<h4>Neues JavaFX Projekt anlegen</h4>
<p>Nachdem Netbeans gestartet wurde, legt man ein neues Projekt &#252;ber &#8220;File &gt; New Project&#8221; an. Als Vorlage w&#228;hlt man &#8220;JavaFX Script Application&#8221; in der Kategorie &#8220;JavaFX&#8221;. Noch schnell einen Projektnamen (z.B. TestdriveJavaFX) und schon geht&#8217;s ans Eingemachte. Wir erhalten nun ein leeres Projekt.</p>
<div id="attachment_28" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.semantic-void.net/wp-content/uploads/2008/08/empty_project.png"><img class="size-medium wp-image-28" title="Leeres JavaFX Projekt" src="http://www.semantic-void.net/wp-content/uploads/2008/08/empty_project-300x187.png" alt="Leeres JavaFX Projekt" width="300" height="187" /></a><p class="wp-caption-text">Leeres JavaFX Projekt</p></div>
<h4>Weiter geht&#8217;s</h4>
<p>Im Projekt wurde bereits eine Datei &#8220;Main.fx&#8221; angelegt. Dies ist das JavaFX Script. Zurzeit sollte die Datei ungef&#228;hr so aussehen:</p>

<div class="wp_syntax"><div class="code"><pre class="java"><span style="color: #666666; font-style: italic;">/*
 * Main.fx
 *
 * Created on 21.08.2008, 17:14:46
 */</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">testdrivejavafx</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.application.Frame</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.application.Stage</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.text.Text</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.Font</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.FontStyle</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">/**
 * @author Sebastian
 */</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// place your code here</span></pre></div></div>

<p>Auf der rechten Seite des Netbeans Fenster findet sich die Palette. Hier k&#246;nnen visuelle Elemente per Drag &amp; Drop dem Skript hinzugef&#252;gt werden. Zun&#228;chst ben&#246;tigen wir ein Frame aus dem Bereich &#8220;Applications&#8221; der Palette. Dies definiert ein Fenster, in dem sp&#228;ter die Inhalte der Applikation angezeigt werden. Durch ziehen des Frames in das Code-Fenster unter <strong><code>//place your code here</code></strong> wird das entsprechende Code-Segment eingef&#252;gt. Das Ganze sollte jetz so aussehen:</p>

<div class="wp_syntax"><div class="code"><pre class="java"><span style="color: #666666; font-style: italic;">/*
 * Main.fx
 *
 * Created on 21.08.2008, 17:14:46
 */</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">testdrivejavafx</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.application.Frame</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.application.Stage</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.text.Text</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.Font</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.FontStyle</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">/**
 * @author Sebastian
 */</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// place your code here</span>
<span style="color: #003399;">Frame</span> <span style="color: #009900;">&#123;</span>
    title<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;MyApplication&quot;</span>
    width<span style="color: #339933;">:</span> <span style="color: #cc66cc;">200</span>
    height<span style="color: #339933;">:</span> <span style="color: #cc66cc;">200</span>
    closeAction<span style="color: #339933;">:</span> function<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        java.<span style="color: #006633;">lang</span>.<span style="color: #003399;">System</span>.<span style="color: #006633;">exit</span><span style="color: #009900;">&#40;</span> <span style="color: #cc66cc;">0</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    visible<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">true</span>
&nbsp;
    stage<span style="color: #339933;">:</span> Stage <span style="color: #009900;">&#123;</span>
        content<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Die Werte nach <strong><code>title</code></strong>, <strong><code>width</code></strong> und <strong><code>height</code></strong> beschreiben nat&#252;rlich die Attribute Titel, Breite und H&#246;he des Fensters.</p>
<p>Ein Klick auf den Run-Button <a href="http://www.semantic-void.net/wp-content/uploads/2008/08/run_button.png"><img class="alignnone size-medium wp-image-29" title="Run-Button" src="http://www.semantic-void.net/wp-content/uploads/2008/08/run_button.png" alt="" width="15" height="22" /></a> gen&#252;gt zum Starten der Applikation. Ohne eine Zeile Code selbst zu schreiben, wurde ein Fenster ge&#246;ffnet. Wer Swing kennt wei&#223;, dass das ziemlich schnell ging f&#252;r Java <img src='http://www.semantic-void.net/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' /> </p>
<h4>Ein Fenster&#8230; und jetzt?</h4>
<p>Jetzt k&#246;nnte man anfangen, das Fenster mit Inhalt zu f&#252;llen. Versucht doch mal einige Elemente in die eckigen Klammern von <code><strong>content: []</strong></code> aus der Palette zu ziehen. Auf diese Weise k&#246;nnen sehr schnell Texte und einfache geometrische Formen in das Fenster plaziert werden. Experimentiert <img src='http://www.semantic-void.net/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>Das ist nat&#252;rlich noch ziemlich wenig. Interessant wird es erst, wenn es in den Bereich Animation und die Verzahnung mit regul&#228;ren Java Code geht. Das hebe ich mir aber f&#252;r sp&#228;ter auf (muss das erstmal selbst lernen)&#8230;</p>
<h4>Wie&#8230; das war&#8217;s schon?!</h4>
<p>Na ja, so ziemlich. Wer sich Appetit holen will, dem empfehle ich das folgende Video von der diesj&#228;hrigen JavaOne Konferenz. Es werden einige interessante JavaFX Demos gezeigt.</p>
<p><iframe src="http://sunfeedroom.sun.com/linking/index.jsp?skin=oneclip&#038;fr_story=FRdamp267558&#038;rf=ev&#038;hl=true" width="322" height="278" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" ></iframe></p>
<p>Weitere Videos zu JavaFX finden sich auf der <a title="Videos JavaOne 2008" href="http://java.sun.com/javaone/sf/sessions/general/index.jsp">entsprechenden Konferenzseite</a>.</p>
<p>So long&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.semantic-void.net/blog/26_erste-schritte-mit-javafx/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
