<?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>Splatch's devblog &#187; JFace</title>
	<atom:link href="http://blog.dywicki.pl/category/jface/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.dywicki.pl</link>
	<description>Pragmatyzm kontrolowany</description>
	<lastBuildDate>Thu, 01 Dec 2011 15:47:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=abc</generator>
		<item>
		<title>Form Layout</title>
		<link>http://blog.dywicki.pl/2007/06/07/swt-jface-form-layout/</link>
		<comments>http://blog.dywicki.pl/2007/06/07/swt-jface-form-layout/#comments</comments>
		<pubDate>Thu, 07 Jun 2007 08:58:34 +0000</pubDate>
		<dc:creator>Łukasz Dywicki</dc:creator>
				<category><![CDATA[Eclipse]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[JFace]]></category>
		<category><![CDATA[SWT]]></category>

		<guid isPermaLink="false">http://blog.dywicki.pl/?p=139</guid>
		<description><![CDATA[Jakiś czas temu Michał Mech pisał o tym jak można rozkładać komponenty w Swingu przy pomocy Group Layoutu. Dzisiejszego dnia mam zamiar pokazać Wam drugą stronę medalu &#8211; mianowicie Form Layout, który można wykorzystać przy tworzeniu aplikacji w SWT. Ogólnie w Eclipse dominuje, chyba podobnie jak w Swingu, layout oparty na tworzeniu siatki &#8211; Grid [...]]]></description>
			<content:encoded><![CDATA[<p>Jakiś czas temu <a href="http://michalmech.pl">Michał Mech</a> <a href="http://michalmech.pl/index.php/2007/05/23/manager-layoutu-grouplayout-w-java/">pisał</a> o tym jak można rozkładać komponenty w <a href="http://java.sun.com/docs/books/tutorial/uiswing/index.html">Swingu</a> przy pomocy <a href="http://java.sun.com/javase/6/docs/api/javax/swing/GroupLayout.html">Group Layoutu</a>. Dzisiejszego dnia mam zamiar pokazać Wam drugą stronę medalu &#8211; mianowicie <a href="http://help.eclipse.org/help31/nftopic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/layout/FormLayout.html">Form Layout</a>, który można wykorzystać przy tworzeniu aplikacji w <a href="http://eclipse.org/swt/">SWT</a>.<br />
<span id="more-139"></span><br />
Ogólnie w Eclipse dominuje, chyba podobnie jak w Swingu, layout oparty na tworzeniu siatki &#8211; <a href="http://help.eclipse.org/help31/nftopic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/layout/GridLayout.html">Grid Layout</a>. Jest on w miarę elastyczny (zrobisz w nim wszystko to, czego potrzebujesz). Niestety wprowadzanie zmian w układzie (dodanie nowego elementu, zmiana pozycji istniejącego) wiąże się z przepisaniem większości kodu na nowo, ponieważ w &#8220;siatce&#8221; ma znaczenie kolejność dodawania. Gdy mamy siatkę dwukolumnową to trzeci komponent, który dodajemy wyląduje w drugim wierszu niezależnie od nas.</p>
<p><a href="http://blog.dywicki.pl/wp-content/uploads/2007/06/form-layout1.PNG" title="Nasza pierwsza kontrolka!" rel="lightbox"><img src="http://blog.dywicki.pl/wp-content/uploads/2007/06/form-layout1.PNG" alt="Nasza" rel="lightbox" style="border: 0px none ; margin: 10px" align="left" /></a><a href="http://help.eclipse.org/help31/nftopic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/layout/FormLayout.html">Form Layout</a> odrywa nas od siatki dając pełną dowolność w rozkładaniu kontrolek. Każdy komponent możemy ją pozycjonować na dwa sposoby &#8211; albo względem konturów kontenera (może to być okno, bądź grupa, w której się znajdujemy) albo względem innego komponentu. No, ale może po kolei.<br />
<a href="http://eclipse.org">SWT</a> jest zorganizowane inaczej niż Swing/AWT. Tutaj, by stworzyć jakiś komponent w większości przypadków jest potrzebny przodek, podczas gdy w Swingu nie potrzeba w sumie nic (wynika to z trzymania się specyfikacji <a href="http://java.sun.com/products/javabeans/">JavaBeans</a>, która zakłada, że fasolki powinny mieć puste konstruktory). Dodatkowo każdemu tworzonemu komponentowi należy nadać styl przy użyciu stałych z <a href="http://help.eclipse.org/help31/nftopic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/SWT.html">klasy SWT</a>. Jeśli nie chcemy żadnych dodatkowych efektów dajemy po prostu <em>SWT.NONE</em>. Może kilka przykładów</p>
<pre class="brush: java;">
FormData data = new FormData();
data.right = new FormAttachment(0, 50);

Label name = new Label(&lt;em&gt;parent&lt;/em&gt;, SWT.NONE);
name.setText(&quot;Nazwa&quot;);
name.setLayoutData(data);
</pre>
<p>Powyższy fragment kodu spowoduje przyciągnięcie etykiety tekstowej do 50 piksela.</p>
<p>[
<pre class="brush: java;">
FormData data = new FormData();
// przyklejamy pole do inntch komponentów
data.left = new FormAttachment(name);
data.right = new FormAttachment(righttable);
Text field = new Text(&lt;em&gt;parent&lt;/em&gt;, SWT.SINGLE);
field.setText(&quot;Krotki opis&quot;);
field.setLayoutData(data);
</pre>
<p>Ten kawałek kodu spowoduje przyciągnięcie komponentu z lewej do etykiety tekstowej a z prawej do tabelki.</p>
<pre class="brush: java;">
FormData data = new FormData();
// ściągamy przycisk prawie na dno, bez 5px
data.bottom = new FormAttachment(100, -5);
// z prawej strony przycisk będzie 5px od środka kontenera
data.right = new FormAttachment(50, -5);

Button no = new Button(&lt;em&gt;parent&lt;/em&gt;, SWT.NONE);
no.setText(&quot;Nie&quot;);
no.setLayoutData(data);

FormData data = new FormData();
data.bottom = new FormAttachment(100, -5);
// odsuwamy o 5px od środka - pierwszy przycisk jest o -5px od środka,
// więc dajemy 5, żeby dojść do 50% i 5 na rzeczywisty offset od centrum
data.left = new FormAttachment(no, 10);

Button yes = new Button(&lt;em&gt;parent&lt;/em&gt;, SWT.NONE);
yes.setText(&quot;Tak&quot;);
yes.setLayoutData(data);
</pre>
<p>Ten fragment kodu spowoduje umieszczenie dwóch przycisków w odległości 10 pikseli od siebie. Przyznacie, że kod nie jest skomplikowany, prawda? :) Jest go troszkę, ale nie jest on ani trudny ani zawiły. Zmiany, które wprowadzamy najczęściej sprowadzają się do zmiany kilku FormAttachmentów.</p>
<p>Kompletny kod kontrolki widocznej na załączonym obrazku:</p>
<pre class="brush: java;">package jug;

import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.FormAttachment;
import org.eclipse.swt.layout.FormData;
import org.eclipse.swt.layout.FormLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Table;
import org.eclipse.swt.widgets.Text;

/**
 * Kontrolka prezentująca możliwości {@link FormLayout} wraz z modyfikacjami
 * wprowadzonymi podczas prelekcji.
 *
 * @author Łukasz Dywicki
 */
public class FormLayoutDemo {

	private Display display;
	private Shell shell;

	public FormLayoutDemo() {
		display = new Display();
		shell = new Shell(display);
		pack();
	}

	/**
	 * Inicjowanie komponentów i układu okienka
	 */
	private void pack() {
		// główny bohater:
		FormLayout layout = new FormLayout();
		// dorzucamy marginesy
		layout.marginTop = 5;
		layout.marginLeft = 5;
		layout.marginRight = 5;
		layout.spacing = 5;

		shell.setLayout(layout);

		// tworzymy wszystkie komponenty
		Label name = new Label(shell, 0);
		Text field = new Text(shell, SWT.SINGLE | SWT.BORDER);
		Label description = new Label(shell, 0);
		Text area = new Text(shell, SWT.MULTI | SWT.BORDER);
		Button no = new Button(shell, SWT.PUSH);
		Button yes = new Button(shell, SWT.PUSH);
		Table righttable = new Table(shell, SWT.BORDER | SWT.V_SCROLL
				| SWT.H_SCROLL);

		// konfiguracja i pozycjonowanie elementów
		FormData data = new FormData();
		data.right = new FormAttachment(0, 50);

		name.setText(&quot;&amp;Nazwa&quot;);
		name.setLayoutData(data);

		data = new FormData();
		data.left = new FormAttachment(name);
		data.right = new FormAttachment(righttable);

		field.setText(&quot;Krotki opis&quot;);
		field.setLayoutData(data);

		data = new FormData();
		data.right = new FormAttachment(0, 50);
		data.top = new FormAttachment(field, 5);

		description.setText(&quot;Napis&quot;);
		description.setLayoutData(data);

		data = new FormData();
		data.left = new FormAttachment(description); // przypięcie w danym
														// kierunku do danego
														// pola
		data.right = new FormAttachment(righttable);
		data.top = new FormAttachment(field, 5);
		data.bottom = new FormAttachment(yes); // przycisk pod polem

		area.setText(&quot;Witamy!&quot;);
		area.setLayoutData(data);

		data = new FormData();
		data.bottom = new FormAttachment(100, -5);
		data.right = new FormAttachment(50, -5);

		no.setText(&quot;Ni&amp;e&quot;);
		no.setLayoutData(data);

		data = new FormData();
		data.bottom = new FormAttachment(100, -5);
		data.left = new FormAttachment(no, 10);

		yes.setText(&quot;Ta&amp;k&quot;);
		yes.setLayoutData(data);

        data = new FormData();
        data.right = new FormAttachment(100);
        data.bottom = new FormAttachment(yes);
        // albo przyciągnięcie prawie do dna
        // data.bottom = new FormAttachment(100, -5);
        data.top = new FormAttachment(0);
        data.left = new FormAttachment(75);
        righttable.setLayoutData(data);
    }

    public void show() {
        shell.setBounds(50, 50, 300, 200);
        shell.open();
        while (!shell.isDisposed()) {
            if (!display.readAndDispatch())
                display.sleep();
        }
        display.dispose();
    }

    public static void main(String[] args) {
        new FormLayoutDemo().show();
    }
}</pre>
<p><a href="http://blog.dywicki.pl/wp-content/uploads/2007/06/axis.PNG" title="Osie.." rel="lightbox"><img src="http://blog.dywicki.pl/wp-content/uploads/2007/06/axis.PNG" alt="Osie.." align="right" style="border: 0px; margin: 10px" rel="lightbox" /></a>Może jeszcze o tym jak w FormLayout zachowują się FormAttachemnty. Wszystkie komponenty pozycjonujemy w dwóch kierunkach (oś X, Y) przy użyciu 4 dostępnych stron. Jeśli jakiś element ma być rozciągnięty na całą szerokość kontrolki (oś X) to z lewej dajemy FormAttachment(0) a z prawej FormAttachment(100). Są to jak wcześniej wspominałem, wartości procentowe z osi X.<br />
Jeżeli chcemy aby komponent był rozciągnięty na całą wysokość kontrolki postępujemy analogicznie - góra 0, dół 100. I teraz ważna informacja o offsetach. Gdy przesuwamy komponent zgodnie z grotem danej osi jest on dodatni, jeśli przeciwnie jest on ujemny. Offsety są podawane w pikselach jako drugi (opcjonalny) argument, zarówno przy pozycjonowaniu absolutnym jak i relatywnym. No i na koniec obrazek pokazujący osie. :)</p>
<p>Na koniec dorzucam <a href="http://blog.dywicki.pl/wp-content/uploads/2007/06/swt-i-jface-slajdy.pdf" title="swt i jface slajdy.pdf">link do slajdów</a>, których użyłem <a href="http://groups.google.com/group/warszawa-jug/browse_thread/thread/e8a80ea94a8cf599">podczas prelekcji</a> poprowadzonej w ramach spotkań <a href="http://warszawa.jug.pl">Warszawskiego JUGu</a>.</p>
<p>Ps. Ostatnimi czasy WordPress zaczął zachowywać się bardzo dziwnie. Po wskoczeniu do jakiejś notki generował kanał <acronym title="Really Simple Syndication">RSS</acronym>.. jeszcze nie wiem jaka jest tego przyczyna (podejrzewam aktualizację softu na serwerze), póki co zmieniły się linki. Proszę o aktualizację adresów do kanałów w swoich czytnikach. :)</p>]]></content:encoded>
			<wfw:commentRss>http://blog.dywicki.pl/2007/06/07/swt-jface-form-layout/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

