Vaadin 7 : How to import JS files from custom path? - vaadin

I am using Vaadin-7 and this answer was not fix for me .
I am trying to import my js file under myproject/WebContent/js/test.js . I used #JavaScript in my UI class as below..
#Theme("myTheme")
#SuppressWarnings("serial")
#Title("VaadinTest")
#JavaScript("js/test.js")
public class VaadinTest extends UI {
#Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
}
}
But I got "NetworkError: 404 Not Found - http://localhost:8080/myproject/APP/PUBLISHED/js/test.js" error log in my firebug console.
So , how can I import js files from my custom directories ?
PS: Please don't be force me to create APP/PUBLISHED/ directory manually ! Thanks.

You can use app://:
#JavaScript({ "app://js/test.js" })
or use:
#JavaScript({ "vaadin://js/test.js" })
Generated url inside VAADIN folder:
http://localhost:8080/myproject/VAADIN/js/test.js

the file you refer to must be reachable by the classloader relative to the package you are using it in. according to your example, lets say your package of VaadinTest is com.example.app and you want to access it as js/test.js you have to put it in the directory com/example/app/js/test.js in a "root" for the classloader to find it (e.g. src/main/java,groovy or where resources are loaded from in your config).

Related

Vaadin #CssImport not working in jar dependency

I can't seem to get the #CssImport annotation working when the component class is in a separate jar. (Main web project is Vaadin 18)
I checked out the addon starter:
https://github.com/vaadin/addon-starter-flow
And adjusted the TheAddon class to add a css class name:
#CssImport("./theaddon.css")
public class TheAddon extends Div {
public TheAddon() {
setText("Hello");
addClassName("theaddon");
}
}
I then added the theaddon.css file to:
src\main\resources\META-INF\resources\frontend\theaddon.css
With the styles:
.theaddon {
color:Red;
}
However when I use the addon, I do not see the style applied. I do see the style if I extend the TheAddon class within my web project. So this leads me to believe there's some classpath magic that isn't happening correctly.
Argh - the issue was that the vaadin.whitelisted-packages property was set. Thus Vaadin was not scanning / finding the components when building the front-end. Correcting this property fixed it.

How to force vaadin AbstractJavaScriptComponent javascript to re-download when javascript file is changed

In my Vaadin project, I have a component which extends AbstractJavaScriptComponent. I have added the javascript of the component using #JavaScript annotation.
#JavaScript({"app://./VAADIN/js/my-comp-connector.js"})
public class MyComp extends AbstractJavaScriptComponent {
}
Whenever I do a change to my-comp-connector.js, I need to clean browser cache so that browser re-downloads the changed javascript.
How can I force re-download of the javascript when I do a change to it?
I got it fixed by adding a query parameter to javascript path specified in #JavaScript annotation.
#JavaScript({"app://./VAADIN/js/my-comp-connector.js?v=2"})
public class MyComp extends AbstractJavaScriptComponent {
}

Vaadin : How to change favicon?

How can I change favicon of my pages in Vaadin ? I would like to change favicon of my pages but I have no idea where is the place to change it ? Has somebody experience on it ?
First, create a theme directory: /WebContent/VAADIN/themes/mynewtheme
Then, put your custom favicon.ico in this directory. You also need to set theme property in your application :
public class MyNewApplication extends Application {
#Override
public void init() {
...
...
setTheme("mynewtheme");
}
}
Here is a more detailed version of the similar Answer posted by Greg Ballot. My Answer here relates to Vaadin 7, current as of 7.5.3.
Custom Theme
In Vaadin 7.5, you can drop your favicon graphics image file into your own custom theme. If using the Vaadin plugin for various IDEs (NetBeans, Eclipse) or the Maven archetypes, a custom theme named mytheme should have already been created for you. Drop your image file into that mytheme folder.
The main part of your Vaadin 7 app, your subclass of UI, must specify that it uses your custom theme. Again, if using the IDE plugins and/or Maven archetype, this should have already been configured for you. The easiest way is an Java Annotation on the UI subclass.
#Theme ( "mytheme" ) // Tell Vaadin to apply your custom theme, usually a subclass of the Valo or Reindeer theme.
#Title ( "PowerWrangler" ) // Statically specify the title to appear in web browser window/tab.
#SuppressWarnings ( "serial" ) // If not serializing such as "sticky sessions" and such, disable compiler warnings about serialization.
#Push ( PushMode.AUTOMATIC ) // If using Push technology.
public class MyVaadinUI extends UI
{
…
Favicon Usage/Behavior Not Standard
Remember that favicon behavior is not standardized. Favicons developed haphazardly, mostly out of a sense of fun. The exact behavior depends on the particular browser and particular server. Other than the particular folder location, none of this is special to Vaadin.
Image File Formats
Originally the ICO file format was used exclusively. Since then most browsers have evolved to accept any of several formats including JPEG, TIFF, and PNG.
Image Size/Resolution
Originally favicons were intended to be very small bitmap icons. Some browsers have made various uses of the favicon in situations where you may want to provide a higher-resolution image. But remember that smaller files load faster without keeping your users waiting.
Favicon File Name
Some browsers or servers may handle other file names or name extensions, but I've found it easiest to name my file exactly favicon.ico -- even if using a different format! I usually use a PNG file but name it with the .ico extension. While I cannot guarantee this practice works one every server and browser, I’ve not encountered any problem.
Existing Favicon File
Recent versions of Vaadin have included a Vaadin-related icon in a favicon.ico file in a configured project. So you must replace that file with your own. In Vaadin 7.5.3 the file contains four sizes, the largest looking like this:
Older versions did not add a file, so you drop in your own.
IDE Screen Shots
Here are a pair of screen shots. One is the project (logical) view in NetBeans 8, while the other is a files (physical) view.
In case of custom icon name (Vaadin 7):
public class MyServlet extends VaadinServlet implements SessionInitListener {
#Override
protected void servletInitialized() throws ServletException {
super.servletInitialized();
getService().addSessionInitListener(this);
}
#Override
public void sessionInit(SessionInitEvent event) throws ServiceException {
event.getSession().addBootstrapListener(new BootstrapListener() {
#Override
public void modifyBootstrapPage(BootstrapPageResponse response) {
response.getDocument().head()
.getElementsByAttributeValue("rel", "shortcut icon")
.attr("href", "./VAADIN/themes/mynewtheme/custom.ico");
response.getDocument().head()
.getElementsByAttributeValue("rel", "icon")
.attr("href", "./VAADIN/themes/mynewtheme/custom.ico");
}
#Override
public void modifyBootstrapFragment(BootstrapFragmentResponse response) {
}
});
}
}
EDIT
It is better to use the BootstrapListener as a static nested class: link
Vaadin 23.x (plain spring/war application, no springboot!):
Derive an implementation of com.vaadin.flow.component.page.AppShellConfigurator:
#Theme(value = "mytheme")
#PWA(name = "My application", shortName = "MyApp", iconPath = "icons/favicon.ico" )
public class AppShellConfiguratiorImpl implements AppShellConfigurator {
#Override
public void configurePage(AppShellSettings settings) {
settings.addFavIcon("icon", "icons/favicon.ico", "16x16");
}
}
And put your favicon.ico into src\main\webapp\icons (in order that it is encluded in <war-root>/icons/favicon.ico)
A servlet container (3.0 plus, e.g. Tomcat 8.5) will pick up this class automagically and load it.

Orchard - Can't find the Resource defined in ResourceManifest.cs

I have a custom there, where I try to require some of my css and js files via the ResourceManifest.cs file - I keep into running a quite weird issue tough.
I get the following error:
a 'script' named 'FoundationScript' could not be found
This is my ResourceManifest.cs:
using Orchard.UI.Resources;
namespace Themes.TestTheme
{
public class ResourceManifest : IResourceManifestProvider
{
public void BuildManifest(ResourceManifestBuilder builder)
{
var manifest = builder.Add();
manifest.DefineStyle("Foundation").SetUrl("foundation.min.css");
manifest.DefineScript("FoundationScript").SetUrl("foundation.min.js");
}
}
}
In the Layout.cshtml, I have following:
#{
Script.Require("ShapesBase");
Script.Require("FoundationScript");
Style.Include("site.css");
Style.Require("Foundation");
}
What am I missing here?
The issue here is, that the project Themes has a problem with the dynamic compile mechanism of Orchard (i don't know what is wrong exactly) because it resides in folder Themes. Even if you define a class inside the Themes assembly, it will result in an error telling you there is no such class in that assembly.
solution :
Try re-generating your theme with /CreateProject:true and /IncludeInSolution:true parameters as follows:
codegen theme TestTheme /CreateProject:true /IncludeInSolution:true /BasedOn :TheThemeMachine
It will create your theme in a separate project and orchard will pick your registered ResourceManifest.
Hope this helps.

Internal Error:... ambiguous reference: 'DataGrid' is defined in library web/DataGrid.dart and also in web/out/DataGrid.dart

I created a bare-bones datagrid using web-ui for testing and had it working just fine. Then I decided to try to declare it as a component. I changed around the library references and now it is giving me the above error when I try to run the application. You can see my file structure below. The reason I am getting the "ambiguous reference" message when I try to run it is that when I went into the auto-generated DataGrid.dart file in the out directory, it had the following declaration
import 'DataGrid.dart';
...
import '../DataGrid.dart';
I am confused as to why the generated code imports them both. One thing that I considered is that it could be because the DataGridPage.html file instantiates my DataGrid component and my DataGridPage.dart file imports DataGrid.dart so that it can have references to DataGridColumn (it needs to set the columns for the DataGrid). In DataGridPage.dart, I also attach to certain DataGrid events such as SortColumnChanged and SelectionChanged so I need to request a copy of my DataGrid instance in DataGridPage.dart (I don't think there is a way to attach to events from the web component instantiation in DataGridPage.html).
Any ideas about what I am doing wrong?
Here is my file structure:
DataGrid.dart
--------------------------------------------
library datagrid;
...
part 'DataGridColumn.dart';
part 'DataGridRow.dart';
class DataGrid extends WebComponent{...}
DataGridRow.dart
--------------------------------------------
part of datagrid;
class DataGridRow {...}
DataGridColumn.dart
--------------------------------------------
part of datagrid;
class DataGridColumn {...}
DataGrid.html
--------------------------------------------
[contains the component declaration UI]
DataGridPage.html
-----------------------------------------
...
<div is="s-datagrid" id="myDataGrid" ItemsSource="{{app.Assets}}" Columns="{{app.Columns}}"></div>
...
DataGridPage.dart
--------------------------------------------
import 'DataGrid.dart';
import 'Asset.dart';
void main() {
}
DataGridApp _app;
DataGridApp get app {
if (_app == null) {
_app = new DataGridApp();
}
return _app;
}
class DataGridApp{
//provides ItemsSource and DataGridColumn data
}
jmesserly has answered this on the github site. He said that you need to remove the component import in your main dart file. So in my example I would remove the import 'DataGrid.dart' statement from the DataGridPage.dart. The IDE will give you a warning but you can ignore it because it will actually be run from the out folder.
GitHub Web-UI Issue 342

Resources