<h:outputStylesheet> and relative references - css

I have a JSF project setup in the typical fashion:
myproject
|-- src/main/webapps
| |-- resources
| | |-- css
| | | |-- 3rdparty.css
| | |
| | |-- fonts
| | |
| | |-- myspecialfont.woff
| |
And then in my JSF html:
<h:outputStylesheet name="3rdparty.css" library="css"/>
This works well, since I can keep the directories consistent if I need to upgrade.
However, in this case, the 3rdparty.css file contains a relative reference:
#font-face {
font-family: 'Lato';
src: url('../fonts/myspecialfont.woff');
}
As h:outputStylesheet constructs the URI to use mywebapp/javax.faces.resource/3rdparty.css this will break the relative references inside it since that path will now refer to mywebapp/fonts/myspecialfont.woff.
Is there a good way to keep these locally hosted 3rd party libraries referenced by JSF to handle this kind of relative reference without resorting to manually changing the CSS?

You have two options:
Do not use outputStyleSheet and instead include it directly in your template
Modify the CSS file content (as TemarV suggested)
Unfortunately there isn't much else that can be done, because resources are rendered using a different path where-in the library & resource reference are specified as URL parameters instead of being part of the URL.
Edit: I would like to highlight a 3rd option as well - writing a custom ResourceHandler. I had to do something on these lines. You can read more about it at -
http://roguexz.blogspot.in/2013/10/jsf-2-returning-resource-url-that-is.html

Related

Sbt in project plugin, how to structure them?

We do have a custom plugin as a single file in our project folder:
acme-project
|- ...
|- project
| |- CustomPlugin.scala
object CustomPlugin extends AutoPlugin {
// ...
That was simple and easy until that plugin started to grow...
In the first step, we added more classes/objects to the same source file. However, it continues to grow and I would like to add more structure via packages.
acme-project
|- ...
|- project
| |- CustomPlugin.scala
| |- SupportingClass.scala
| |- acme
| | |- plugin
| | | |- PackagedClass.scala
My CustomPlugin seems to be able to use the SupportingClass from the folder, whenever this class declare another package. However, I cannot use the PackagedClass :
[error] /~/acme-project/project/CustomPlugin.scala:1:8: not found: object acme
[error] import mega.plugin.PackagedClass
[error]             ^
I tried to add one src/main/scala folder but have the same kind of import errors.
So, I would like to know if there are ways to create large/structured plugins inside a project without making a complete one?
I would like to keep the simplicity of this format where I do not have to publish my plugin. Having it inside a dedicated module would be ok.
Thanks
One way to do this is to restructure your plugin as its own sbt project, then load it as a module dependency in your project's plugins.sbt.
Move the code to its own directory. This can be anywhere you like, e.g.:
acme-project/project/my-custom-plugin/
acme-project/my-custom-plugin/
some-other-path/my-custom-plugin/
Write a my-custom-plugin/build.sbt with at least these settings:
enablePlugins(SbtPlugin)
sbtPlugin := true
scalaVersion := "2.12.16"
name := "my-custom-plugin"
Add it to your project as a module dependency in acme-project/project/plugins.sbt:
// For acme-project/project/my-custom-plugin/
val myCustomPlugin =
project in file("my-custom-plugin")
// For acme-project/my-custom-plugin/
val myCustomPlugin =
ProjectRef(file("../../my-custom-plugin"), "my-custom-plugin")
// For some-other-path/my-custom-plugin/
val myCustomPlugin =
ProjectRef(file("/path/to/my-custom-plugin", "my-custom-plugin")
dependsOn(myCustomPlugin)
You only need one of those val myCustomPlugin = lines, depending on where you put your my-custom-plugin/ directory.

Is it possible to add properties to multiple files after they have been uploaded to artifactory?

As the title says. Due to a lack of understanding about how best to query files in artifactory I now have a situation where I have a few hundred files I need to add the same properties to.
Can this be done in bulk?
the folder structure looks like this:
repository
|
|- main folder
|
|- type
|
|- language1
|
|-sub-folder1
|-sub-folder2
|-file1
|-file2
...
...
...
Each sub-folder can have around 5 files, each language folder can have many sub-folders.
Sure it is.
You have two main options.
The first one is to use the Set Item Properties REST API on the relevant folder with the "recursiveProperties=1".
The second option, which I believe is better, will be to use the JFrog CLI to set properties on existing artifacts. This options will provide you with the ability to define a more complex logic on setting the properties.

SCSS: Bem and recommended directory structure?

I have started updating my styling side wide to BEM. So far I am loving it, but I am having an issue separating the scss into a correct directory structure. BEM takes care of my naming conventions for my classes, but I wanted to try and get some order of why I am storing my scss.
I thought about two things, the directory structure could be separated by Component but maybe this doesn't fit well BEM considering there is not a 1 to 1 mapping between block level elements and components.
I presume there will be some sort of structure for storing _base, _variables, etc?
I'd recommend sitting your component files next to each other, like this;
├── src
| ├── _modules
| | └── link
| | ├── __tests__
| | | └── link.spec.js
| | ├── link.html
| | ├── link.js
| | └── link.scss
Which does fit very nicely with BEM way of thinking. I think the no 1 to 1 mapping you're talking about is the concept in BEM that you shouldn't try and replicate the DOM in your CSS. Anything that doesn't belong in a component folder, can live in a "core" component.
There's a very good Yeoman generator called Yeogurt https://github.com/larsonjj/generator-yeogurt that builds this type of structure (as well as a bunch of other things) for you.

Project Architecture

I was wondering if I did a good choice concerning my project conception. I am not an expert and it's the reason why I want to know the different views of the other developers.
My project is separate in two Bundles :
FrontOfficeBundle
BackOfficeBundle
I want to access my different objects from everywhere. Until now, I duplicated them, but I think it's not the best thing to do.
So how can I access an object at the front office if this one is implemented in the BackOfficeBundle ?
Can anyone enlighten me ? Thank you.
If you just use same classes in both bundles, you should use this architecture inspired from the symfony architecture
src
| myvendorname
|Bundles
| FrontOfficeBundle
| BackOfficeBundle
|Components
| MyMutualClasses1
| MyMutualClasses2
Or if you use the SAME services in both bundles, declare the services in your MutualBundle ( Be aware that FrontOfficeBundle has a depency toward MutualBundle. Same for BackOfficeBundle )
src
| myvendorname
|Bundles
| FrontOfficeBundle
| BackOfficeBundle
| MutualBundle

The relationship between namespace and actual files layer

OK, just as the title asked, I currently worked on a asp.net website, I found out that all the aspx and ascx files actually stay in one namespace, however there are different directory hierarchy between them. See below example.
Mainsite
| Dialogs
| | Help.ascx
| | Price.aspx
| Includes
| | QuickLink.acsx
| Members
| Orders
| Login.aspx
| Default.aspx
Like above example, all aspx ans ascx files belong to namespace Order, however Login.aspx and Price.aspx are in different directory. I mean by default when you create a aspx file in certain directory, the default namespace will inherit the directory information.
The thing is that I found at a frequently happened bug, is in Default.aspx there is ajax call to Dialogs/Price.aspx, then the error message can not find Dialogs/Dialogs/Price.aspx, it is weird.

Resources