How to style a vaadin component using css? - java

I get a vaadin project looking like this:
package com.example.myapplication;
import com.vaadin.annotations.StyleSheet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.label.LabelState;
import com.vaadin.ui.Button;
import com.vaadin.ui.Grid;
import com.vaadin.ui.Label;
#StyleSheet ("stylesheet.css")
#Theme("mytheme")
public class MyUI extends UI {
private static final long serialVersionUID = 1L;
#Override
protected void init(VaadinRequest vaadinRequest) {
Label lb = new Label("VAADIN PROJECT");
lb.setStyleName("mystyle");
layout.addComponent(lb);
setContent(layout);
}
#WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
#VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}
}
And a .css file that is situated in the same directory as the main file:
.mystyle {
color: red;
font-size: 180px;
pading-left: 30px;
}
When i'am trying to run the project,it's print only the text with no more changes. How can i fix it ?
MY RESULT

You can have a look at the basic starter of Vaadin. It imports a CSS file for the overall view and a CSS file for the specific view.
You can see that HelloWorldView has the annotation #CssImport("./styles/views/helloworld/hello-world-view.css"). This results in importing a CSS file only for this view.
The class MainView forms the parent/border for the other views. It also imports a CSS file with specific attributes for the MainView with the annotation #CssImport("./styles/views/main/main-view.css").
The respective files can be found in the frontend folder of the application.

Related

UndefinedStepException when run test using Cucumber JVM

I develop a test for the mobile application using Cucumber+Junit+Appium. When I try to run a test using cucumber and JUnit runner I receive: io.cucumber.junit.UndefinedStepException: The step "I install the application" is undefined. You can implement it using the snippet(s) below:
I tried some of the solutions from the medium blog and stack question, but this doesn't help.
I have a project structure:
src
|-main
|--java
|---{project-name}
|----config
|----models
|----screens
|----services
|-test
|--java
|---{project-name}
|----helpers
|----stepDefinitions
|-----LoginStep.java
|-----BaseStep.java
|-----LoginStep.java
|----RunCucumber.java
|--resources
|---feature
|----Login.feature
RunCucumber.java
package com.mobile.automation.framework;
import com.google.inject.Guice;
import com.mobile.automation.framework.module.ServiceModules;
import com.mobile.automation.framework.service.AppiumServer;
import com.mobile.automation.framework.config.drivers.DriverFactory;
import com.mobile.automation.framework.module.ScreensModule;
import io.appium.java_client.AppiumDriver;
import io.cucumber.junit.Cucumber;
import io.cucumber.junit.CucumberOptions;
import org.junit.After;
import org.junit.Before;
import org.junit.runner.RunWith;
#RunWith(Cucumber.class)
#CucumberOptions(
strict = true,
monochrome = true,
glue = "src.test.java.com.mobile.automation.framework.stepDefinition",
features = "src/test/resources/feature",
plugin = {"pretty", "html:target/cucumber-report/cucumber.html",
"json:target/cucumber-report/cucumber.json",
"junit:target/cucumber-report/cucumber.xml"})
public class RunCucumber {
public static AppiumDriver driver;
#Before
public void setUpDriver() {
init();
new AppiumServer().startServer();
driver = new DriverFactory().getDriver();
}
#After
public void tearDownDriver() {
if (driver != null) {
driver.quit();
new AppiumServer().stopServer();
}
}
private void init() {
Guice.createInjector(
new ScreensModule(driver),
new ServiceModules(driver)
).injectMembers(this);
}
}
Login.feature
Feature: Sign In feature
Background:
Given I install application
And I enable all network activity
Then I am on Sign Page
Scenario: Sign In scenario
Given I am go to the Login Page
And I fill valid user data using "Config"
And I click sign in button
Then I am login in the application
LoginStep.java
package com.mobile.automation.framework.stepDefinition;
import javax.inject.Inject;
import com.mobile.automation.framework.config.ProjectConfig;
import com.mobile.automation.framework.models.User;
import com.mobile.automation.framework.screens.DashboardScreen;
import com.mobile.automation.framework.screens.SignInScreen;
import io.cucumber.java.ParameterType;
import io.cucumber.java.en.And;
import io.cucumber.java.en.Given;
import io.cucumber.java.en.Then;
import static org.assertj.core.api.AssertionsForClassTypes.assertThat;
/**
* #author Tomash Gombosh
*/
public class LoginStep {
#Inject
private SignInScreen signInScreen;
#Inject
private DashboardScreen dashboardScreen;
#Given("^I am go to the Login Page$")
public void iAmGoToTheLoginPage() {
dashboardScreen.tapLogin();
}
#And("I fill valid user data using {string} {string}")
public void iFillValidUserDataUsing(String userName, String password) {
signInScreen.fillLogin(userName, password);
}
#And("I fill valid user data using {string}")
#ParameterType("Config")
public void iFillValidUserDataUsing() {
signInScreen.fillLogin(new User(data -> {
data.setEmail(new ProjectConfig().getBaseUser());
data.setPassword(new ProjectConfig().getBaseUserPassword());
}));
}
#And("I click sign in button")
public void iClickSignInButton() {
signInScreen.clickLogin();
}
#Then("I am login in the application")
public void iAmLoginInTheApplication() {
assertThat(signInScreen.isDisplayed()).isEqualTo(true);
}
}
Some of the steps on the Login class is missing, but that is because I want to put all the code to the question.
I expected to run that feature, but actually that is not work.
Typically src.test.java is not part of the package name. Try using:
glue = "com.mobile.automation.framework.stepDefinition",
And because Cucumber will search the runners package for glue by default can also remove the glue entirely.
New here myself working on Junit Runner, I agree with #M.P.Korstanje with classpath. Although I just had to change glue to refer the stepDefs with classpath too - wasn't getting recognized before.
So basically this is what I did to catch the necessary files to be triggered
feature = { "classpath:path-from-repo-root.feature" },
glue = { "classpath:reference-to-stepDef-folder" }
Bear in mind: for glue - I used to the reference to the folder containing the stepDefs and not the stepDef file itself. Hope this helps someone. Thanks

Including css in spring based project with vaadin

Trying to include simple css file to a vaadin route
Using spring boot and have a maven project.
When i load the page on the client i get this error:
Refused to apply style from
'http://localhost:8080/frontend/css/msas_login_page.css' because its MIME
type ('text/html') is not a supported stylesheet MIME type, and strict MIME
checking is enabled.
And when i try to access the above url, i get redirected to this html error page
Could not navigate to 'css/msas_login_page.css'
Reason: Couldn't find route for 'css/msas_login_page.css'
Here's my code:
package com.msas.MSAS.UIControllers;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.MessageSource;
import org.springframework.web.context.annotation.SessionScope;
import com.msas.MSAS.UIControllers.Authentication.MSASLoginForm;
import com.vaadin.flow.component.dependency.StyleSheet;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.AfterNavigationEvent;
import com.vaadin.flow.router.AfterNavigationObserver;
import com.vaadin.flow.router.Route;
#Route("loginPage")
#VaadinSessionScope
#StyleSheet("css/msas_login_page.css")
public class MSASLoginPage extends HorizontalLayout implements
AfterNavigationObserver {
private static final long serialVersionUID = 8673461297922218502L;
private MSASLoginForm loginForm;
private VerticalLayout container;
public MSASLoginPage(#Autowired MessageSource messageSource) {
super();
this.initComponents(messageSource);
}
private void initComponents(MessageSource messageSource) {
this.loginForm = new MSASLoginForm(messageSource);
this.container = new VerticalLayout();
this.container.setDefaultHorizontalComponentAlignment(Alignment.CENTER);
this.container.add(this.loginForm);
this.addClassName("login-page-container");
this.setDefaultVerticalComponentAlignment(Alignment.CENTER);
this.setHeightFull();
this.add(this.container);
}
#Override
public void afterNavigation(AfterNavigationEvent event) {
boolean isError = event.getLocation().getQueryParameters()
.getParameters().containsKey("error");
this.loginForm.setError(isError);
}
}
Here's my project structure:
src
main
java
...
resources
...
webapp
frontend
css
msas_login_page.css
This is css file content:
.login-page-container{
}
Fixed the problem.
I was using a multi-modules maven project, and the main method which contains the #SpringBootApplication and which runs the entire application was not in the same module where the vaadin frontend folder.
Solution was to move the main class to the same maven module as the one used for vaadin.

Create customize file report name in #CucumberOptions

I am trying to customize the extent report which is a third party reporting tool added to my cucumber framework where I want to customize the name of the report.html to "Outputfilename".html which I unable to do as the value of "Outputfilename " is coming from my config file.
here is my testrunner code
#RunWith(Cucumber.class)
#CucumberOptions(
features = ".//src//test//java//FeatureList",glue = "stepDefinations",
plugin = { "com.cucumber.listener.ExtentCucumberFormatter:target/cucumber-reports/"+Outputfilename+".html",
"junit:target/cucumber-results.xml"},
tags="#smoke",
monochrome = true
)
public class TestRunner {
private static final String Outputfilename = FileReader.getInstance().getConfigReader().getReportPath();
I would really appreciate your help.
Finally I fixed it-
So basically we need to change the runner class something like this-
package runners;
import PageObjectRep.CF;
import com.cucumber.listener.ExtentProperties;
import com.cucumber.listener.Reporter;
import cucumber.api.CucumberOptions;
import cucumber.api.junit.Cucumber;
import managers.FileReader;
import org.apache.log4j.PropertyConfigurator;
import org.junit.AfterClass;
import org.junit.BeforeClass;
import org.junit.runner.RunWith;
import java.io.File;
#RunWith(Cucumber.class)
#CucumberOptions(
features = ".//src//test//java//FeatureList",glue = "stepDefinations",
plugin = { "com.cucumber.listener.ExtentCucumberFormatter:",
"junit:target/cucumber-results.xml"},
tags="#test",
monochrome = true
)
public class TestRunner {
static String ReportName= CF.ReportName(); //function which creates file name as per the execution and saved in string.
#BeforeClass
public static void setup() {
ExtentProperties extentProperties = ExtentProperties.INSTANCE;
extentProperties.setReportPath("target/cucumber-reports/"+ReportName+".html"); //used same string name to create the file with the same name.
PropertyConfigurator.configure(".//src//log4j.properties");
}

AEM 6.3 - Creating Event handler using OSGi R6 annotations

I have created an Event handler by following https://github.com/nateyolles/aem-osgi-annotation-demo/blob/master/core/src/main/java/com/nateyolles/aem/osgiannotationdemo/core/listeners/SampleOsgiResourceListener.java and it works fine. However, I get the warning "The field SlingConstants.TOPIC_RESOURCE_ADDED is deprecated". I did some searching and found this thread :https://forums.adobe.com/thread/2325819
Here are the challenges that I am facing:
1) I want to create a separate configuration interface for my event handler. I tried this and it isn't working
package com.aem.sites.interfaces;
import org.apache.sling.api.SlingConstants;
import org.osgi.service.event.EventConstants;
import org.osgi.service.metatype.annotations.AttributeDefinition;
import org.osgi.service.metatype.annotations.AttributeType;
import org.osgi.service.metatype.annotations.ObjectClassDefinition;
#ObjectClassDefinition(name = "Temperature Listener Configuration")
public #interface TemperatureListenerConfiguration {
#AttributeDefinition(
name = EventConstants.EVENT_FILTER,
description = "Configurable paths for temperature event listener",
type = AttributeType.STRING
)
String getPaths() default "/content/aemsite/en/jcr:content/root/responsivegrid/banner";
#AttributeDefinition(
name = EventConstants.EVENT_TOPIC,
description = "Event types",
type = AttributeType.STRING
)
String[] getEventTypes() default {SlingConstants.TOPIC_RESOURCE_ADDED,SlingConstants.TOPIC_RESOURCE_CHANGED, SlingConstants.TOPIC_RESOURCE_REMOVED};
}
package com.aem.sites.listeners;
import org.osgi.service.component.annotations.Activate;
import org.osgi.service.component.annotations.Component;
import org.osgi.service.component.annotations.Modified;
import org.osgi.service.event.Event;
import org.osgi.service.event.EventHandler;
import org.osgi.service.metatype.annotations.Designate;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import com.aem.sites.interfaces.TemperatureListenerConfiguration;
#Component(immediate=true,
service=EventHandler.class,
configurationPid = "com.aem.sites.listeners.EventHandler")
#Designate(ocd=TemperatureListenerConfiguration.class)
public class TemperaturePropertyListener implements EventHandler{
private final Logger logger = LoggerFactory.getLogger(getClass());
#Override
public void handleEvent(Event event) {
logger.info("*********************Event handler*****************************");
}
#Activate
#Modified
public void activate(TemperatureListenerConfiguration config) {
//config.getPaths();
logger.info("**************************TemperaturePropertyListener******************activate**********************");
}
}
I also want the solution for SlingConstants deprecated issue. Not sure if ResourceChangeListener is the answer to my problem and if yes then how everything is going to work together in the code.
Thanks in advance
===============================
Latest Code
package com.aem.sites.listeners;
import java.util.List;
import org.apache.sling.api.resource.observation.ResourceChange;
import org.apache.sling.api.resource.observation.ResourceChangeListener;
import org.osgi.service.component.annotations.Activate;
import org.osgi.service.component.annotations.Component;
import org.osgi.service.component.annotations.Modified;
import org.osgi.service.metatype.annotations.Designate;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import com.aem.sites.interfaces.TemperatureListenerConfiguration;
#Component(immediate=true,
service=ResourceChangeListener.class,
configurationPid = "com.aem.sites.listeners.TemperaturePropertyListener")
#Designate(ocd=TemperatureListenerConfiguration.class)
public class TemperaturePropertyListener implements ResourceChangeListener{
private final Logger logger = LoggerFactory.getLogger(getClass());
#Override
public void onChange(List<ResourceChange> changes) {
for (final ResourceChange change : changes) {
logger.info("**************************TemperaturePropertyListener******************change type**********************"+change.getType());
}
}
#Activate
#Modified
public void activate(TemperatureListenerConfiguration config) {
//config.getPaths();
logger.info("**************************TemperaturePropertyListener******************activate**********************");
}
}
The Interface
package com.aem.sites.interfaces;
import org.apache.sling.api.resource.observation.ResourceChangeListener;
import org.osgi.service.metatype.annotations.AttributeDefinition;
import org.osgi.service.metatype.annotations.AttributeType;
import org.osgi.service.metatype.annotations.ObjectClassDefinition;
#ObjectClassDefinition(name = "Temperature Listener Configuration")
public #interface TemperatureListenerConfiguration {
#AttributeDefinition(
name = ResourceChangeListener.PATHS,
description = "Configurable paths for temperature event listener",
type = AttributeType.STRING
)
String[] getPaths() default {"/content/aemsite/en/jcr:content/root/responsivegrid/banner"};
#AttributeDefinition(
name = ResourceChangeListener.CHANGES,
description = "Event types",
type = AttributeType.STRING
)
String[] getEventTypes() default {"ADDED","REMOVED","CHANGED","PROVIDER_ADDED", "PROVIDER_REMOVED"};
}
Looking at the Javadoc for org.apache.sling.api.SlingConstants in sling 9 documentation here: http://sling.apache.org/apidocs/sling9/org/apache/sling/api/SlingConstants.html
it tells you specifically that TOPIC_RESOURCE_ADDED is deprecated:
Deprecated. Register a ResourceChangeListener instead
Read the documentation for ResourceChangeListener, additionally, you can take a look at a sample SCR service impl from ACS Samples:
It should not be hard to convert that to R6 declarative service.
Also, here are two examples from the sling project ResourceBackedPojoChangeMonitor and OsgiObservationBridge
Try to mimic those classes with the properties in the same class.

GWT #UiHandler dont work

I'm using GWT UiBinder... but I cant use #UiHandler because it not work.
xml
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:Button ui:field="btn" text="btn"></g:Button>
</ui:UiBinder>
Java
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
public class HowToHelp extends Composite {
interface HowToHelpUiBinder extends UiBinder<Widget, HowToHelp> {
}
private static HowToHelpUiBinder uiBinder = GWT
.create(HowToHelpUiBinder.class);
#UiField
Button btn;
public HowToHelp() {
initWidget(uiBinder.createAndBindUi(this));
}
#UiHandler("btn")
void handleClick(ClickEvent e) {
Window.alert("Hello, AJAX");
}
}
the Window.alert("Hello, AJAX"); never is called. I did exactly what was passed on the official GWT: http://www.gwtproject.org/doc/latest/DevGuideUiBinder.html
There is a complect project with some error zip
From the linked zip, code missing from the question:
package source.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
public class UiHandlerTest implements EntryPoint {
#Override
public void onModuleLoad() {
RootPanel.getBodyElement().appendChild(new TheHandlerTest("My Button").getElement());
}
}
The problem is that you are adding a widget to another widget without actually doing the add part of it ;). Instead, you are appending the contents of the uibinder-widget to the contents of the RootPanel widget.
Instead, do this (it is shorter/simpler, and won't have this bug):
RootPanel.get().add(new TheHandlerTest("My Button"));

Categories