Simpele tekst editor

9 apr

Ik heb zelf een simpele tekst editor aangemaakt voor mijn Eclipse RCP applicatie. Dit heb ik gedaan omdat als je de ingebouwde tekst editor van Eclipse zelf wilt gebruiken je een bundel van plugins moet toevoegen. Dit is van zichzelf al een hele uitzoekwerk plus je zit de halve structuur van Eclipse te importeren. Hier zat ik niet op te wachten. Dit moet makkelijker kunnen.

Voorbeeld van tekst editor

Tekst editor

Code voor TextEditor class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
package semantica.editor;

import org.eclipse.core.runtime.IProgressMonitor;
import org.eclipse.jface.viewers.StructuredSelection;
import org.eclipse.swt.SWT;
import org.eclipse.swt.custom.StyledText;
import org.eclipse.swt.graphics.Font;
import org.eclipse.swt.graphics.FontData;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.ui.IEditorInput;
import org.eclipse.ui.IEditorSite;
import org.eclipse.ui.PartInitException;
import org.eclipse.ui.part.EditorPart;
import semantica.editor.StringEditorInput;

public class TextEditor extends EditorPart {
    public static final String ID = "semantica.editor.textEditor";
    private String content ;
    private StyledText editor ;
   
    @Override
    public void doSave(IProgressMonitor monitor) {
    }

    @Override
    public void doSaveAs() {
    }
   

    @Override
    public void init(IEditorSite site, IEditorInput input) throws PartInitException {
        setSite(site);
        setInput(input);
        setPartName(input.getName());
        setTitleImage(input.getImageDescriptor().createImage());
        content = ((StringEditorInput)input).getContent();
    }
   
    @Override
    public boolean isDirty() {
        return false;
    }

    @Override
    public boolean isSaveAsAllowed() {
        return false;
    }

    @Override
    public void createPartControl(Composite parent) {
        GridLayout gridLayout = new GridLayout(1, false);
        parent.setLayout(gridLayout);
       
        editor = new StyledText(parent, SWT.None | SWT.BORDER | SWT.V_SCROLL);
        editor.setText(content);
        editor.setLayoutData(new GridData(GridData.FILL_BOTH));
        editor.setEditable(false);
       
        editor.setFont(JFaceResources.getTextFont());
    }

    @Override
    public void setFocus() {
        editor.setFocus();
        SourceProvider.get().setCurrent(new StructuredSelection(), TextEditor.this);
    }
}

Als je net als mij de “TextEditor” wilt gebruiken zonder een daadwerkelijk bestand te open, maar gewoon een string gebruik dan de “StringEditorInput”

Code voor StringEditorInput class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
package semantica.editor;

import org.eclipse.jface.resource.ImageDescriptor;
import org.eclipse.ui.IEditorInput;
import org.eclipse.ui.IPersistableElement;

public class StringEditorInput implements IEditorInput {
    private String name ;
    private String content ;
    private ImageDescriptor imageDescriptor ;
   
    public StringEditorInput(String name, String content, ImageDescriptor imageDescriptor) {
        this.name = name ;
        this.content = content ;
        this.imageDescriptor = imageDescriptor ;
    }
   
    @Override
    public boolean exists() {
        return false;
    }

    @Override
    public ImageDescriptor getImageDescriptor() {
        return imageDescriptor;
    }

    @Override
    public String getName() {
        return name;
    }

    @Override
    public IPersistableElement getPersistable() {
        return null;
    }

    @Override
    public String getToolTipText() {
        return name;
    }

    @Override
    public Object getAdapter(Class adapter) {
        return null;
    }

    public String getContent() {
        return content;
    }
}

Toevoegen van class TextEditor in plugin.xml

1. Open je plugin.xml
2. Ga naar extensions
3. Voeg extension point toe “org.eclipse.ui.editors”
4. Rechtermuis op “org.eclipse.ui.editors” dan naar new=>editor

Vul de volgende gegevens in:

id: semantica.editor.textEditor
name: TextEditor
class: semantica.editor.TextEditor
default: false



Aanroepen tekst editor

1
2
3
4
ImageDescriptor imageDescriptor = Activator.getImageDescriptor("icons/txt.png");
StringEditorInput editor = new StringEditorInput("Naam", "Dit is de tekst", imageDescriptor );
IWorkbenchPage page = PlatformUI.getWorkbench().getActiveWorkbenchWindow().getActivePage();
page.openEditor(editor, "semantica.editor.textEditor");

Waarschijnlijk geen nieuwe Eclipse logo

1 apr

Er komt waarschijnlijk geen nieuw Eclipse logo.

Er hebben 1196 mensen meegedaan aan de 2de stemronde voor het nieuwe logo, 875 stemmen zijn gegaan naar één van de nieuwe ontwerpen. De uitslag van de top-twee ontwerpen lagen zeer dicht bij elkaar, namelijk 30,8% vs 29,9%.

Het doorvoeren van een nieuw logo kost een aanzienlijke hoeveelheid inspanning. Aangezien 26,8% van de mensen nog tevreden is met het huidige logo en er geen duidelijke winnaar is voor het nieuwe ontwerp, is er besloten voorlopig geen actie te ondernemen.

Lees hier het oorspronkelijke bericht.

Kolommen in Wordpress pagina’s en posts

24 mrt

Ik heb een Wordpress plugin geschreven om kolommen te maken in pagina’s en posts. Er zijn al soortgelijke plugins beschikbaar voor Wordpress maar deze voldeden niet aan mijn verwachting. Het doel van deze plugin is om op zo simpel mogelijke wijze kolommen aan te brengen.

Het maken van kolommen is super simpel, je kan simpelweg het kolom-scheidingsteken (standaard /---/) aanbrengen in de tekst van de pagina of post.

HTML Code wordt gegenereerd met verschillende CSS-classes om de kolommen gemakkelijk op te maken via de stylesheet.

Voorbeeld

1
2
3
4
5
Deze tekst komt in de eerste kolom.
/---/
Deze tekst komt in de tweede kolom.
/---/
Deze tekst komt in de derde kolom.

Zal de volgende HTML code opleveren:

1
2
3
4
5
<div class="wpcolumn-wrapper wpcolumn-wrapper-3">
<div class="wpcolumn wpcolumn-1 wpcolumn-first">Deze tekst komt in de eerste kolom.</div>
<div class="wpcolumn wpcolumn-2 wpcolumn-other">Deze tekst komt in de tweede kolom.</div>
<div class="wpcolumn wpcolumn-3 wpcolumn-last">Deze tekst komt in de derde kolom.</div>
</div>

Door gebruik te maken van de dynamische CSS-classes die toegekend worden aan de kolommen kunnen verschillende kolom-layouts gemakkelijk, op verschillende manieren, opgemaakt worden in de stylesheet.

Het kolom scheidingsteken en de CSS-class kunnen ingesteld worden op de “WP Columns Settings” pagina.

WP Column Settings

Hieronder staat een voorbeeld zoals kolommen opgemaakt kunnen worden.

Voorbeeld van een kolom layout

Deze CSS code is gebruikt om het bovenstaande resultaat te bereiken.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.wpcolumn-clearfix {
    clear: both;
}
.wpcolumn-wrapper-3 .wpcolumn {
    float: left;
    margin: 10px 4% 15px 0;
    width: 46%;
}
.wpcolumn-wrapper-3 .wpcolumn-last {
    margin-right: 0;
}
.wpcolumn-wrapper-3 .wpcolumn-1 {
    color: #888888;
    font-family: ’Lucida Grande’,Verdana,Arial,sans-serif;
    font-size: 16px;
    float: none;
    width: auto;
}

Download & installatie

Klik hier om de “WP Columns Plugin” te downloaden & installeren

Gebruik van iconen

18 mrt

Iconen kunnen een zeer krachtig hulpmiddel zijn bij het ontwikkelen van applicaties of websites. Mensen zijn visueel ingesteld, iconen kunnen gebruikers helpen om snel bepaalde functies te herkennen.

Het is voor een nette gebruikersinterface niet verstandig om de plaatjes overal en nergens vandaan te halen. Als de iconen van verschillende bronnen afkomstig zijn dan geeft dit snel een heel rommelige interface.

Fugue Icons

Yusuke Kamiyamane, een designer uit Japan heeft een zeer geslaagde en complete icon set “Fugue Icons” gemaakt met meer dan 2600 iconen. Alle iconen zijn 16×16 pixels groot. Recent zijn er ook bonus iconen toegevoegd die een grootte hebben van 24×24 pixels.

Persoonlijk vind ik het prima dat de iconen alleen in 16×16 pixels beschikbaar zijn, wat je tegenwoordig vaak ziet zijn grote iconen met veel detail, dit heeft echter wel vaak een negatief effect op de duidelijkheid van de kleine iconen.

De iconen zijn uitgebracht onder de Creative Commons Attribution 3.0 license. Dit wil zeggen dat de iconen gratis gebruikt en aangepast mogen worden zolang je een verwijzing opneemt naar de maker.

Van de iconen zijn ook de PhotoShop (PSD) bestanden te downloaden zodat je ze ook gemakkelijk kunt aanpassen. Verder heeft Yusuke ook een zoek-interface gemaakt zodat je gemakkelijk op zoek kan naar een specifiek icoon.

Klik hier om hier om de iconen te downloaden.

Stemronde 2 voor het nieuwe Eclipse logo

11 mrt

Zoals hier te lezen is, is stemronde 1 voor het nieuwe Eclipse logo al afgerond. Een aantal logo’s, toevallig degene met de meeste stemmen doen niet meer mee met de volgende ronde. Dit komt omdat deze niet helemaal voldoen aan de richtlijnen voor het  nieuwe logo. Eén van de belangrijkste richtlijnen is de herkenbaarheid, een Eclipse gebruiker moet het opgefriste logo direct herkennen als Eclipse logo.

Stemronde 2 is nu van start gegaan, je kan tot 17 maart je mening geven over een nieuw Eclipse logo. Als je vind dat het oude nog prima voldoet kan je dat ook aangeven.

Klik hier om je stem uit te brengen op een van de onderstaande logo’s.

Swing Loading Animation

9 mrt

Ik heb een “bezig met laden” component gemaakt voor Swing.

Screenshot Circle Animation

De features:

  • Werkt niet met afbeeldingen
  • Past zich aan aan de Look And Feel van het OS
  • Past zich automatisch aan aan de grootte van het component

Klik hier om de jar te downloaden

Met de volgende code kan de demo gestart worden:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import javax.swing.JFrame;
import semantica.util.swing.CircleAnimation;

public class CircleAnimationTest {
    public static void main(String[] args) {
        JFrame f = new JFrame();
        f.getContentPane().add(new CircleAnimation());
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setTitle("Circle Animation");
        f.pack();
        f.setLocationRelativeTo(null);
        f.setVisible(true);
    }
}

Eerste blog post

5 mrt

Het moest er toch een keer van komen, de eerste blog post!

Het werd toch echt tijd om onze expertise te delen met de buitenwereld. Je kent dat wel, je loopt tegen een probleem aan en na uren hoe-kan-dat-nou’en, debuggen, zweten en zoeken heb je het eindelijk opgelost. Uiteindelijk was het dat ene kleine regeltje code! Soms vind je de oplossing voor een probleem op het internet maar het gebeurt ook vaak dat er niets te vinden is. Door middel van een blog willen wij onze expertise delen met de buitenwereld en hopen wij dat we andere mensen kunnen helpen.

“In huis” worden er toch ook vaak utilities ontwikkeld die handig zijn om te delen met anderen, je heb dan ook weer geen zin om voor alles een open-source project aan te maken. Deze utilities zullen hier ook gedeeld worden en kunnen vrijblijvend gebruikt of aangepast worden.