Java >> Java-zelfstudie >  >> Java

Voorbeeld van Vaadin-knop

Een knop is een grafisch element waarmee de gebruiker een gebeurtenis kan activeren. Het uiterlijk en het gedrag van knoppen is vergelijkbaar op verschillende platforms en een knop geeft een mogelijke gebruikersactie aan. Je kunt het gemakkelijk gebruiken als je een aanwijsapparaat zoals een muis hebt, maar een knop kan de meest complexe actie in een computersysteem activeren en het is beter om goed te bepalen waar en wanneer je deze moet plaatsen.

1. De hulpmiddelen

  • Java JDK 8
  • Laatste Eclipse Mars
  • Vaadin 7.6.4
  • Tomcat Server 8

2. Inleiding

In dit voorbeeld ga ik je laten zien hoe je de Vaadin-knop gebruikt, de Button class is eenvoudig en duidelijk, u maakt uw knop, plaatst deze in de gebruikersinterface en koppelt er een klikgebeurtenis aan, dat is alles!. Vaadin is een raamwerk aan de serverzijde en traditionele client-side-events zoals mouseover- en mouseout-gebeurtenislisteners creëren te veel overhead, alleen omdat elke uitgevoerde actie de server moet bereiken. Als u extra functionaliteit nodig heeft, kunt u een plug-in gebruiken of deze voor uzelf implementeren.

3. Vereisten

  • JDK geïnstalleerd
  • Eclipse Mars geïnstalleerd en werkt
  • Vaadin 7.6.4 plug-in geïnstalleerd
  • Tomcat 8 geïnstalleerd en actief

4. Zet het project op

Kies in het bestandsmenu Bestand -> Nieuw -> Overig

01 Nieuw project

Kies nu uit de lijst Vaadin 7 project

02 Vaadin-project

Druk op volgende en geef uw project een naam en druk vervolgens op voltooien.

5. Het voorbeeld coderen

5.1 De lay-out

Indeling

		final VerticalLayout layout = new VerticalLayout();
		layout.setWidth("100%");
		layout.setMargin(true);
		setContent(layout);
		
		GridLayout gridLayout = new GridLayout(3 ,6);
		gridLayout.setSpacing(true);

Een VerticalLayout is de hoofdlay-out en daarin plaats ik een GridLayout om de ui-widgets te plaatsen, het is een geneste lay-out.

5.2 Informatielabel

Informatielabel

		Label myLabel = new Label("No clicks yet...");
		myLabel.setCaption("Current Button");
		myLabel.addStyleName("h1");
		myLabel.addStyleName("mylabelstyle");
		myLabel.setWidth("100%");

Ik maak een label om te laten zien op welke knop wordt geklikt, ik zet er een aantal stijlen op om het uiterlijk te veranderen, de h1 style is als een H1 html-tag en is vooraf gemaakt in Vaadin.

5.2.1 Labelstijl

Ik heb mylabelstyle gemaakt , als uw project VaadinButton heet om de stijl te maken, opent u het bestand VaadinButton->WebContent->VAADIN->themes->vaadinbutton->vaadinbutton.scss

03 Stijlen bewerken

en voeg de volgende stijlen toe:

v-label-mylabelstyle

.v-label-mylabelstyle {
    color: white;
    text-align: center;
    background-color: black;	
    border-color: white;
    font-weight: bold;
}

Dit verandert de kleur van de tekst in wit, de achtergrond in zwart, centreer de tekst, maak het lettertype vet en de randen van het label wit.

5.3 Knop.ClickListener

Button.ClickListener

		Button.ClickListener myClickListener = new Button.ClickListener() {
			
			@Override
			public void buttonClick(ClickEvent event) {
				String btCaption = event.getButton().getCaption();
				myLabel.setValue(btCaption + " clicked");
			}
		};

Ik heb een enkele klik-listener gemaakt voor alle knoppen op de pagina, ik krijg de knop die de gebeurtenis heeft geactiveerd met event.getButton() en haal vervolgens het bijschrift op om de waarde van het label te wijzigen en te laten zien welke knop de gebeurtenis activeert.

5.4 De knoppen maken

5.4.1 Kleine knop

Kleine knop

		Button tinyButton = new Button("Tiny Button");
		tinyButton.addStyleName("tiny");
		tinyButton.addClickListener(myClickListener);

Een heel klein knopje, net klein genoeg om de tekst te lezen, voor situaties waarin je meer ruimte op het scherm nodig hebt. Het soort knop wordt gewijzigd met behulp van een vooraf gedefinieerde Vaadin-stijl voor knoppen, in dit geval is de stijl tinyButton.addStyleName("tiny"); , Ik heb de knop gemaakt en vervolgens de stijl toegevoegd, gewoon toevoegen, niet vervangen en de generieke knoplistener eraan koppelen.

5.4.2 Kleine knop

Kleine knop

		Button smallButton = new Button("Small Button");
		smallButton.addStyleName("small");
		smallButton.addClickListener(myClickListener);

Een knop die net iets groter is dan de kleine knop, de stijlnaam is small

5.4.3 Normale knop

Normale knop

		Button normalButton = new Button("Normal Button");
		normalButton.addClickListener(myClickListener);

De normale voorgedefinieerde Vaading normale knop, dit is de knop die Vaadin gebruikt wanneer je geen stijlen opgeeft, is de volgende in grootte na de kleine knop.

5.4.4 Grote knop

Grote knop

		Button largeButton = new Button("Large Button");
		largeButton.addStyleName("large");
		largeButton.addClickListener(myClickListener);

Een grote knop die iets groter is dan de normale knop, de stijl is large .

5.4.5 Enorme knop

Grote knop

		Button hugeButton = new Button("Huge Button");
		hugeButton.addStyleName("huge");
		hugeButton.addClickListener(myClickListener);

De enorme knop is voor deze situatie waarin je moet zeggen "hier is een knop", de grootste vooraf gemaakte knop is en de gebruikte stijl is huge .

5.4.6 Knop Uitgeschakeld

Uitgeschakelde knop

		Button disabledButton = new Button("Disabled Button");
		disabledButton.setDescription("This button cannot be clicked");
		disabledButton.setEnabled(false);

Wanneer je moet voorkomen dat de gebruiker op een knop klikt dan deactiveer je deze, in dit geval wordt er geen stijl gebruikt en kun je een knop aan/uitzetten met de methode setEnabled() , waarbij true wordt gebruikt om de knop in te schakelen en false om deze uit te schakelen.

5.4.7 Gevaarknop

Gevaarsknop

		Button dangerButton = new Button("Danger Button");
		dangerButton.addStyleName("danger");
		dangerButton.addClickListener(myClickListener);

De gevarenknop wordt gebruikt wanneer de beoogde actie belangrijk of potentieel gevaarlijk is, is een rode knop en rood betekent gevaar, dus gebruik deze wanneer u belangrijke taken gaat uitvoeren met een klik op de knop, om te voorkomen dat de gebruiker speciale aandacht nodig heeft voor de actie. de stijl danger wordt in dit geval gebruikt.

5.4.8 Vriendelijke knop

Vriendelijke knop

		Button friendlyButton = new Button("Friendly Button");
		friendlyButton.addStyleName("friendly");
		friendlyButton.addClickListener(myClickListener);

Een groene knop wanneer je een knop wat kleur moet geven om de aandacht van de gebruiker te trekken, in dit geval betekent groen een vriendelijke actie die zonder risico kan worden uitgevoerd, friendly is de gebruikte stijl.

5.4.9 Primaire knop

Primaire knop

		Button primaryButton = new Button("Primary Button");
		primaryButton.addStyleName("primary");
		primaryButton.addClickListener(myClickListener);

De primaire knop is over het algemeen de standaardknop op een pagina, de knop die de focus krijgt als je op enter drukt op je toetsenbord, primary stijl wordt gebruikt.

5.4.10 Native-knop

Native-knop

		NativeButton nativeButton = new NativeButton("Native Button");
		nativeButton.addClickListener(myClickListener);

De native knop krijgt de look en feel van de hostmachine waarop je applicatie draait, in Windows krijg je native Windows-knoppen, in OSX krijg je OSx native-knoppen, in Linux krijg je GTK, KDE, ... native knoppen enzovoort. De native knop heeft zijn eigen klasse en om deze te maken moet je instanties van de NativeButton . gebruiken klas.

5.4.11 Pictogram Rechter Knop

Icoon Rechter Knop

		Button iconRightButton = new Button("Icon Align Right Button");
		iconRightButton.setIcon(FontAwesome.ALIGN_RIGHT);
		iconRightButton.setWidth("250px");
		iconRightButton.addStyleName("icon-align-right");
		iconRightButton.addClickListener(myClickListener);

U kunt een pictogram aan uw knop toevoegen met de setIcon methode, in dit geval gebruik ik een FontAwesome-pictogram, waarbij ik het pictogram rechts de stijl icon-align-right laat zien is gebruikt.

5.4.12 Pictogram linkerknop

Pictogram linkerknop

		Button iconLeftButton = new Button("Icon Align Left Button");
		iconLeftButton.setIcon(FontAwesome.ALIGN_LEFT);
		iconLeftButton.addClickListener(myClickListener);

Standaard wordt het pictogram toegevoegd aan de linkerkant van de knop, dus het is niet nodig om een ​​extra stijl toe te voegen, voeg gewoon het pictogram toe aan de knop en het wordt toegevoegd aan de linkerkant van de tekst.

5.4.13 Pictogram bovenste knop

Pictogram bovenste knop

		Button iconTopButton = new Button("Icon Align Top Button");
		iconTopButton.setIcon(FontAwesome.STAR);
		iconTopButton.addStyleName("icon-align-top");
		iconTopButton.addClickListener(myClickListener);

Als u een pictogram boven de tekst nodig heeft, is de gebruikte stijl icon-align-top

5.4.14 Knop zonder rand

Knop zonder rand

		Button borderlessButton = new Button("BorderLess Button");
		borderlessButton.addStyleName("borderless");
		borderlessButton.addClickListener(myClickListener);

Een knop zonder randen in die gevallen waarin u een schoner scherm nodig heeft, het toont de randen wanneer u erop klikt, de gebruikte stijl is borderless .

5.4.15 Link-knop

Koppelingsknop

		Button linkButton = new Button("Link Button");
		linkButton.addStyleName("link");
		linkButton.addClickListener(myClickListener);

Een link-knop om een ​​traditionele html-link te simuleren, de gebruikte stijl is link .

5.4.16 Stille knop

Stille knop

		Button quietButton = new Button("Quiet Button");
		quietButton.addStyleName("quiet");
		quietButton.addClickListener(myClickListener);

Een knop waarvan de randen zichtbaar zijn als je er met de muis over beweegt, quiet stijl wordt in dit geval gebruikt.

5.4.17 Aangepaste knop

Aangepaste knop

		Button customButton = new Button("Custom Button");
		customButton.addStyleName("mystyle");
		customButton.addClickListener(myClickListener);

U kunt ook uw eigen knoppen maken met vaadin met behulp van stijlen, deze knop heeft de look en feel die is gedefinieerd in de stijl mystyle , in hetzelfde bestand dat is geopend om de labelstijl te maken, definieert u deze stijl:

mijn stijl

.v-button-mystyle {
    background-color: lightblue;	
    font-size: 12pt;
    font-weight: bold;
    color: red;
    border-color: black;
    border-radius: 0px;
    border-width: 4px;
    background-image: none;	    	
}

De achtergrondkleur is lichtblauw, de lettergrootte is 12 pt en is een vet lettertype van rode kleur, ik verwijder de randradius en de achtergrondafbeelding om een ​​vierkante platte knop te krijgen, ook de rand vergroot om een ​​lelijke retro-knop te krijgen, Over het algemeen gebruik ik de voorgemaakte knoppen van Vaadin die zijn gemaakt door ontwerpers en een mooi uiterlijk en vulling hebben, maar als je meer controle nodig hebt in de applicatiestijlen, kun je dat heel eenvoudig doen.

5.4.18 Aangepaste afbeeldingsknop

Aangepaste afbeeldingsknop

		Button customImageButton = new Button("Custom Image Button");
		customImageButton.setIcon(new ThemeResource("images/photo.png"));
		customImageButton.addClickListener(myClickListener);

Je kunt ook je eigen afbeeldingen maken en deze gebruiken in de Vaadin-knoppen, de bron laden met de themabron en de setIcon gebruiken methode, bevindt de afbeelding zich in de map WebContent->VAADIN->themes->vaadinbutton->images.

04 Aangepaste afbeelding

6. De volledige broncode

VaadinbuttonUI.java

package com.example.vaadinbutton;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.FontAwesome;
import com.vaadin.server.ThemeResource;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.GridLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.NativeButton;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@SuppressWarnings("serial")
@Theme("vaadinbutton")
public class VaadinbuttonUI extends UI {

	@WebServlet(value = "/*", asyncSupported = true)
	@VaadinServletConfiguration(productionMode = false, ui = VaadinbuttonUI.class)
	public static class Servlet extends VaadinServlet {
	}

	@Override
	protected void init(VaadinRequest request) {
		final VerticalLayout layout = new VerticalLayout();
		layout.setWidth("100%");
		layout.setMargin(true);
		setContent(layout);
		
		GridLayout gridLayout = new GridLayout(3 ,6);
		gridLayout.setSpacing(true);

		Label myLabel = new Label("No clicks yet...");
		myLabel.setCaption("Current Button");
		myLabel.addStyleName("h1");
		myLabel.addStyleName("mylabelstyle");
		myLabel.setWidth("100%");
		
		Button.ClickListener myClickListener = new Button.ClickListener() {
			
			@Override
			public void buttonClick(ClickEvent event) {
				String btCaption = event.getButton().getCaption();
				myLabel.setValue(btCaption + " clicked");
			}
		};
		
		
		Button tinyButton = new Button("Tiny Button");
		tinyButton.addStyleName("tiny");
		tinyButton.addClickListener(myClickListener);
		
		Button smallButton = new Button("Small Button");
		smallButton.addStyleName("small");
		smallButton.addClickListener(myClickListener);

		Button normalButton = new Button("Normal Button");
		normalButton.addClickListener(myClickListener);

		Button largeButton = new Button("Large Button");
		largeButton.addStyleName("large");
		largeButton.addClickListener(myClickListener);

		Button hugeButton = new Button("Huge Button");
		hugeButton.addStyleName("huge");
		hugeButton.addClickListener(myClickListener);

		Button disabledButton = new Button("Disabled Button");
		disabledButton.setDescription("This button cannot be clicked");
		disabledButton.setEnabled(false);

		Button dangerButton = new Button("Danger Button");
		dangerButton.addStyleName("danger");
		dangerButton.addClickListener(myClickListener);

		Button friendlyButton = new Button("Friendly Button");
		friendlyButton.addStyleName("friendly");
		friendlyButton.addClickListener(myClickListener);

		Button primaryButton = new Button("Primary Button");
		primaryButton.addStyleName("primary");
		primaryButton.addClickListener(myClickListener);

		NativeButton nativeButton = new NativeButton("Native Button");
		nativeButton.addClickListener(myClickListener);

		Button iconRightButton = new Button("Icon Align Right Button");
		iconRightButton.setIcon(FontAwesome.ALIGN_RIGHT);
		iconRightButton.setWidth("250px");
		iconRightButton.addStyleName("icon-align-right");
		iconRightButton.addClickListener(myClickListener);
		
		Button iconLeftButton = new Button("Icon Align Left Button");
		iconLeftButton.setIcon(FontAwesome.ALIGN_LEFT);
		iconLeftButton.addClickListener(myClickListener);
		
		Button iconTopButton = new Button("Icon Align Top Button");
		iconTopButton.setIcon(FontAwesome.STAR);
		iconTopButton.addStyleName("icon-align-top");
		iconTopButton.addClickListener(myClickListener);

		Button borderlessButton = new Button("BorderLess Button");
		borderlessButton.addStyleName("borderless");
		borderlessButton.addClickListener(myClickListener);

		Button linkButton = new Button("Link Button");
		linkButton.addStyleName("link");
		linkButton.addClickListener(myClickListener);

		Button quietButton = new Button("Quiet Button");
		quietButton.addStyleName("quiet");
		quietButton.addClickListener(myClickListener);

		Button customButton = new Button("Custom Button");
		customButton.addStyleName("mystyle");
		customButton.addClickListener(myClickListener);
		
		Button customImageButton = new Button("Custom Image Button");
		customImageButton.setIcon(new ThemeResource("images/photo.png"));
		customImageButton.addClickListener(myClickListener);
		
		gridLayout.addComponent(myLabel, 0, 0, 2, 0);
		gridLayout.addComponent(tinyButton);
		gridLayout.addComponent(smallButton);
		gridLayout.addComponent(normalButton);
		gridLayout.addComponent(largeButton);
		gridLayout.addComponent(hugeButton);
		gridLayout.addComponent(dangerButton);
		gridLayout.addComponent(friendlyButton);
		gridLayout.addComponent(primaryButton);
		gridLayout.addComponent(disabledButton);
		gridLayout.addComponent(nativeButton);
		gridLayout.addComponent(iconRightButton);
		gridLayout.addComponent(iconLeftButton);
		gridLayout.addComponent(iconTopButton);
		gridLayout.addComponent(borderlessButton);
		gridLayout.addComponent(linkButton);
		gridLayout.addComponent(quietButton);
		gridLayout.addComponent(customButton);
		gridLayout.addComponent(customImageButton);
		layout.addComponent(gridLayout);
		
	}

}

vaadinbutton.scss

@import "../valo/valo.scss";

@mixin vaadinbutton {
  @include valo;

  // Insert your own theme rules here

.v-label-mylabelstyle {
    color: white;
    text-align: center;
    background-color: black;	
    border-color: white;
    font-weight: bold;
}

.v-button-mystyle {
    background-color: lightblue;	
    font-size: 12pt;
    font-weight: bold;
    color: red;
    border-color: black;
	border-radius: 0px;
	border-width: 4px;
	background-image: none;	    	
}


}

7. Het voorbeeld uitvoeren

Klik met de rechtermuisknop op de projectmap en kies Uitvoeren als -> Uitvoeren op server, kies Tomcat 8-server en klik op voltooien.

8. Resultaten

Zoals je in de afbeelding kunt zien, heeft Vaading elke knop die je ooit nodig hebt:

05 Resultaten

9. Download de broncode

Dit was een voorbeeld van Vaadin Button.Vaadin

Java-tag