I am trying to implement a background image on my webpage but it does not work.
here the code for the css:
backgroundimage {
body{
background: url("common/images/blue.jpg");
}
}
Here is the implementing code:
public class LogInView extends VerticalLayout implements View {
private Navigator navigator;
TextField txtusername = new TextField("Username: ");
PasswordField txtpassword = new PasswordField("Password: ");
Image image = null;
JDBCConnectionPool connectionPool;
public LogInView() {
setStyleName("backgroundimage");
}
}
try this css (without body selector):
.backgroundimage {
background: url("common/images/blue.jpg") !important;
}
and inspect layout in browser, ensure image path is correct.
Related
I'm using the class AppLayout in Vaadin. I wonder how I can change the background color in the navigation bar.
I know how to add CSS style in Vaadin, but I have trouble to access the navigation class.
Here is my code. As you see, I'm always using the method setClassName. But where can I find that method for the navigation bar?
#Viewport("width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes, viewport-fit=cover")
#PWA(name = "Hemsida", shortName = "Hem")
#Route("")
#CssImport("./CSS/MainView.css")
public class MainView extends AppLayout {
/**
*
*/
private static final long serialVersionUID = 1L;
public MainView() {
// Image bar
Image barImage = new Image("img/cropped-logo_liggande_rod.png", "Spektrakon Logo");
barImage.setClassName("barImage");
// Drawer
DrawerToggle drawerToggle = new DrawerToggle();
drawerToggle.setClassName("drawerToggle");
addToNavbar(barImage, drawerToggle);
Tabs tabs = new Tabs(new Tab("Hem"), new Tab("Produktutveckling"), new Tab("Industriell Design"), new Tab("System"), new Tab("Kvalitet"), new Tab("Om oss"), new Tab("Intrenet"));
tabs.setOrientation(Tabs.Orientation.VERTICAL);
addToDrawer(tabs);
}
}
From the Styling part you can see there is a navbar part. You can use it to style the navbar of a AppLayout
if navbarStyles.css has:
[part~="navbar"]{
background-color: red;
}
And imported to the view with :
#CssImport(value= "./styles/navbarStyles.css", themeFor = "vaadin-app-layout"), background color is changed
A complete example with using theme to distinguish from other AppLayout's
#Route("")
#CssImport(value= "./styles/navbarStyles.css", themeFor = "vaadin-app-layout")
public class AppLayoutPictures extends AppLayout {
public AppLayoutPictures(){
setPrimarySection(AppLayout.Section.DRAWER);
Image img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
img.setHeight("44px");
addToNavbar(new DrawerToggle(), img);
Tabs tabs = new Tabs(new Tab("Home"), new Tab("About"));
tabs.setOrientation(Tabs.Orientation.VERTICAL);
addToDrawer(tabs);
//Set to AppLayout, propageted to `parts`
getElement().setAttribute("theme","appLayout");
}
navbarStyles.css
:host([theme~="appLayout"]) [part~="navbar"]{
background-color: orange;
}
Result:
I am working on a project. In this project, I must have a shop that has a huge list of cards. I am also very new to JavaFX.
I made a custom class that inherits pane. It has an image view and some labels to show the name and description of card.
Know my problem is that how should I add them to scene to have an scrollable list of this items? What Components should my Scene have. (I omitted imports in the code below)
CardView.java ---- Custom component that loads an fxml
public class CardView extends Pane {
CardController cardController;
Node view;
public CardView() {
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("../FXMLFiles/Card.fxml"));
fxmlLoader.setControllerFactory(new Callback<Class<?>, Object>() {
#Override
public Object call(Class<?> param) {
return cardController = new CardController();
}
});
try {
view = (Node) fxmlLoader.load();
} catch (IOException ex) {
}
getChildren().add(view);
cardController.setNameAndDsc("Card", "This is A card", heroImg);
}
}
CardController.java
public class CardController {
#FXML
private Label name_lbl;
#FXML
private Label dsc_lbl;
#FXML
private ImageView card_img;
public void setNameAndDsc(String name, String dsc, Image img) {
name_lbl.setText(name);
dsc_lbl.setText(dsc);
card_img.setImage(img);
}
public void setName_lbl(Label name_lbl) {
this.name_lbl = name_lbl;
}
public void setDsc_lbl(Label dsc_lbl) {
this.dsc_lbl = dsc_lbl;
}
public void setCard_img(ImageView card_img) {
this.card_img = card_img;
}
}
Card.fxml
Overall View of Card.fxml:
Actually I want to have a huge list of this card that can be scrolled. How should I do that? What Components should I use. I must also note that I have access to JFoenix.
Use a listview. It's a virtual control so it only creates nodes that are in the visual bounds.
You can apply css to make background transparent.
I'm trying to implement a validation check for the contents of a TextField, displaying the validity as an icon next to it. However it doesn't seem to change the image. Here is the code I have so far, I've stripped out anything not related to the problem I'm experiencing.
Here's the view class:
package mypackage.view;
import mypackage.model.Foo;
// JavaFX imports
public class MyView extends VBox {
private final Foo model;
private final MyPresenter presenter;
HBox tokenValidationbox;
TextField tokentxt;
ImageView isValidimg;
public MyView(Foo model) {
this.model = model;
initFieldData();
layoutForm();
this.presenter = new MyPresenter(model, this);
}
private void initFieldData() {
tokenValidationbox = new HBox();
tokentxt = new TextField();
isValidimg = new ImageView();
}
private void layoutForm() {
tokenValidationbox.getChildren().addAll(tokentxt, isValidimg);
this.getChildren().add(tokenValidationbox);
}
}
And this is the presenter class that contains the logic:
package mypackage.view;
import mypackage.model.Foo;
// JavaFX imports
public class MyPresenter {
private final Foo model;
private final MyView view;
public MyPresenter(Foo model, MyView view) {
this.model = model;
this.view = view;
attachEvents();
}
private void attachEvents() {
view.tokentxt.setOnAction((ActionEvent event) -> {
view.isValidimg.setImage(new Image(validationImage(view.tokentxt.getText())))
});
}
public String validationImage(String token) {
String img = "dialog-error.png";
if(isValid(token)) img = "emblem-default.png";
return getClass().getClassLoader().getResource(img).toExternalForm();
}
private static boolean isValid(String token) {
// snip
}
}
As I understand this should check whether the entered token is valid whenever something is changed in the text field, and then load the corresponding image to display, however the image is not showing up.
emblem-default.png and dialog-error.png are located in the project resources folder and can be loaded statically (i.e. if I put an Image constructor inside the ImageView when initializing it, it works just fine)
Add a ChangeListener to the text property instead. onAction is only triggered, when Enter is pressed or similar.
Furthermore I recommend not recreating the images every time:
private static final Image VALID_IMG = new Image(MyPresenter.class.getClassLoader().getResource("emblem-default.png").toExternalForm());
private static final Image INVALID_IMG = new Image(MyPresenter.class.getClassLoader().getResource("dialog-error.png").toExternalForm());
public Image validationImage(String token) {
return isValid(token) ? VALID_IMG : INVALID_IMG;
}
view.tokentxt.textProperty().addListener((observable, oldValue, newValue) -> {
view.isValidimg.setImage(validationImage(newValue));
});
You could also use a Binding for this:
view.isValidating.imageProperty().bind(Bindings.createObjectBinding(() -> validationImage(view.tokentxt.getText()), view.tokentxt.textProperty()));
Which would update the image even before the text is modified.
I am new to Vaadin and trying to know if it can suit my needs for a webapp project migration.
Actually I'm already loosing my time on a simple goal: to have a layout with fixed headers and footers, and a scrollable content in the middle.
I made a very basic fiddle with what I want:
jsfiddle
Here is the main Vaadin class I came up with:
public class MyVaadinUI extends UI {
// attributes
#WebServlet(value = "/*", asyncSupported = true)
#VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, widgetset = "testvaadin.aep.com.AppWidgetSet")
public static class Servlet extends VaadinServlet {
}
#Override
protected void init(VaadinRequest request) {
buildMainLayout();
}
private void buildMainLayout() {
final VerticalLayout mainLayout = new VerticalLayout();
mainLayout.setSizeFull();
//HEADER
final VerticalLayout headerLayout = new VerticalLayout();
final Resource res = new ThemeResource("img/logo.png");
final Image image = new Image(null, res);
headerLayout.addComponent(image);
//CONTENT
final VerticalLayout contentLayout = new VerticalLayout();
for(int i=0; i<80; i++){
contentLayout.addComponent(new Button("TEST " + i));
}
//FOOTER
final VerticalLayout footerLayout = new VerticalLayout();
footerLayout.addComponent(new Label("--------------------------- footer --------------------------"));
mainLayout.addComponent(headerLayout);
mainLayout.addComponent(contentLayout);
mainLayout.addComponent(footerLayout);
mainLayout.setExpandRatio(contentLayout, 1);
setContent(mainLayout);
}
}
The displayed page is OK on startup, but when I scroll down, the footer also scrolls (it is not fixed).
On startup:
When scrolled:
I browsed a lot of pages on this topic, but I did never see any correct answer. This seems to be rather complicated in Vaadin, although it is very simple in HTML; Vaadin may not suit my needs.
Anyway, do you know how can I achieve this behaviour?
Thanks!
You can use a Panel to create a scrollable center content area. See the example below.
For the panel to work, everything in the component hierarchy must be setSizeFull (or equivalent) and the content of the panel must not (in the example mainLayout and contentPanel are 100%, but contentLayout is not (implicit))
#Grapes([
#Grab('org.vaadin.spring:spring-boot-vaadin:0.0.3'),
#Grab('com.vaadin:vaadin-client-compiled:7.4.0.beta1'),
#Grab('com.vaadin:vaadin-themes:7.4.0.beta1'),
])
import com.vaadin.ui.*
#org.vaadin.spring.VaadinUI
class MyUI extends UI {
protected void init(com.vaadin.server.VaadinRequest request) {
final headerLayout = new VerticalLayout(new Label('HEADER'))
final footerLayout = new VerticalLayout(new Label('FOOTER'))
final contentLayout = new VerticalLayout()
80.times{ contentLayout.addComponent(new Button("TEST $it")) }
// XXX: place the center layout into a panel, which allows scrollbars
final contentPanel = new Panel(contentLayout)
contentPanel.setSizeFull()
// XXX: add the panel instead of the layout
final mainLayout = new VerticalLayout(headerLayout, contentPanel, footerLayout)
mainLayout.setSizeFull()
mainLayout.setExpandRatio(contentPanel, 1)
setContent(mainLayout)
}
}
(runs standalone with spring run vaadin.groovy)
Hi everyone I have this layout:
Here is the class MainLayout:
public class MainLayout extends VerticalLayout {
/**
*
*/
private static final long serialVersionUID = 1L;
private VerticalLayout upperSection = new VerticalLayout();
private HorizontalSplitPanel lowerSection = new HorizontalSplitPanel();
private VerticalLayout menuLayout = new VerticalLayout();
private VerticalLayout contentLayout = new VerticalLayout();
public MainLayout() {
upperSection.addComponent(new Label("Header"));
menuLayout.addComponent(new Label("Menu"));
contentLayout.addComponent(new Label("Content"));
lowerSection.addComponent(menuLayout);
lowerSection.addComponent(contentLayout);
addComponent(upperSection);
addComponent(lowerSection);
showBorders();
setSizeFull();
lowerSection.setSizeFull();
// menuLayout.setSizeFull();
contentLayout.setSizeFull();
setExpandRatio(lowerSection, 1);
//lowerSection.setSplitPosition(30);
}
private void showBorders() {
String style = "v-ddwrapper-over";
setStyleName(style);
upperSection.setStyleName(style);
lowerSection.setStyleName(style);
menuLayout.setStyleName(style + "-menu");
contentLayout.setStyleName(style + "-content");
}
#SuppressWarnings("serial")
public void addMenuOption(String caption, final Component component) {
Button button = new Button(caption);
menuLayout.addComponent(button);
button.addClickListener(new ClickListener() {
#Override
public void buttonClick(ClickEvent event) {
contentLayout.removeAllComponents();
contentLayout.addComponent(component);
}
});
}
}
This layout class extends VerticalLayout and constructs the basic structure of the layout, the addMenuOption method adds a button to the left menu column and a click listener to it so that when the user clicks on the button the content layout on the right should switch its content from the current to the one bound with the button, now inside the init method of the UI:
protected void init(VaadinRequest request) {
MainLayout layout = new MainLayout();
layout.addMenuOption("Option 1", new Label("Component 1"));
layout.addMenuOption("Option 2", new Label("Component 2"));
setContent(layout);
}
Actually the result I obtain is this:
But my problem is that neither of the two buttons (Option 1, Option 2) are clickable.
Where is the problem?
Thanks for the attention!
You are right. Adding style "v-ddwrapper-over" to one of the components makes the buttons non-clickable. Lets take a look at definition of this style in style.css file.
.appName .v-ddwrapper-over:before, .so5 .v-ddwrapper-over:after {
content: "";
position: absolute;
z-index: 10;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 0 solid #197de1;
}
What's important is the fourth line with z-index. This brings a component (more specifficaly div in DOM) to the front covering all others components with less z-index value (usually they have 0).
If you really need this style to be applied to all your components (seems weird to me) consider adding additional style to the buttons with higher z-index value.
Learn more about z-index property here.