Hi there AppWorks fans,
Welcome to a new installment of AppWorks tips.
For this post we dive into the 20% of knowledge to start with something cool. Why 20%? Well, that should be sufficient to trigger our mindset and creativity to use this language somewhere in the future. I was not aware that “Less” was an option on the AppWorks platform until I did a little resource on the ‘Theme’ type of document…Interesting stuff, but what is a CSS preprocessor (what “Less” is!)? Well, simple! It makes your CSS stylesheets dynamic, you can build logic in a stylesheet, and you can write less 😜 CSS. What you write in “Less” will eventually generate to a real CSS stylesheet in runtime; that’s why it’s called a pre-processor.
What this post is NOT: A “Less” tutorial; There are more advanced tutorials on the interwebs. This is my list of resources:
Just for you to know: Next to “Less”, you will also find Syntactically Awesome Style Sheets (Sass) as CSS-preprocessor; I leave it out of scope for this post (the platform does not use it as far as I could see), but has a similar mindset!
Let get right into it…
First of all,…”Less” stands for: Leaner Style Sheets, but where can we find “Less” on our AppWorks platform? Well, dive into your solution (or create a new one). From the folder structure, create a folder with name
theme, and create a new document of type ‘Theme’ with a fancy name
thm_main. From this document, you can dive into the ‘Advanced’ tab where we’ll see our first “Less” language lines of code. Here is a copy of the default generated code on my
AWP 22.3 environment. When you publish this new ‘Theme’ document, you will find the result in runtime behind this URL:
So, what oddities do I (as non-CSS-guru-but-understand-it) see compared to a regular CSS file? Well, let’s start with the top
@... statements; Those are just global variable you can use in the rest of the “Less” file; have a search yourself. One interesting global variable is this one
@logo: $logoData;!? This
$logoData result magically into a Base64 encoded SVG-image string
data:image/svg+xml;base64,PHN2Z...; I don’t have a clue how, but let’s find out. Another interesting answer to find out are the
& signs!? And what about the
:not(...) function…Is it default CSS? I don’t know. Finally, let’s also find out if other “Less” features have support on our platform? It will be an interesting post!
The $logoData trick
Well, after 2 hours of decompiling-code, checking database entries, and running method-entry remote JVM debug session from the IntelliJ IDE to TomEE, I give up! Looks like the platform is not cooperative with me this time, but it was a wonderful experience again with…
- The database got entries on this query:
SELECT * FROM xds_document WHERE "content" LIKE '%data:image/svg+xml;base64,PHN2Z%';
- These are the Jar-files close in the combat field of my IDE:
- Debug on method entry:
ThemeBuildOutputFactory.createCss(); It triggers a remote debug session! Only,
$logoDataalready has a valid value at this moment! Please, comment me if you have a clue…
- I also saw the abstract class
Theme_Base_passing by where the Base64 string passes by in a constant field!
- Debug on method entry:
- You will see encoded data passing by…You can decode it here
- I also decompiled the JAR files and tried a search in the content on
logoData, but I found nothing!? 😔
…Too bad, but it’s time to continue my life! Let’s see what the future will bring at a better moment in time!
An answer to the &-sign
&-sign is a real Less-thing called a Parent Selector. This will happen for our Less-part of the platform:
So, it does exactly what it supposes to do…Grab the parent selector and paste it in the correct locations in the CSS…I never viewed it like this before, but indeed reduces the amount off boilerplate CSS code.
The :not(…) function explained
Is it “Less”, or
:not(...)!? A quick Google search tells me it is just plain CSS code. It works the same as a generic NOT-logic operator. So, a simple selector like this:
Will style all
<p>-elements; Except the ones that have the class
This is my resource on that one!
So, now back to our AppWorks example as “what the hell!?” is this Less-CSS-selector selecting from our Less-part:
body results-filter bs-drop-button .btn-primary:not(.btn-micro)? Well, have a look at this simple HTML extraction:
What do you think gets a style in this case? Exactly! All
<bs-drop-button>-elements within a
<results-filter>-elements, and within a
<body>-element that have the class
btn-primary applied; Except the ones that also have the class
btn-micro applied. Have also a look at this JSFiddle example
Great, I at least learned something here…Next one!
Other “Less” functions
For this section of the post, I’m very curious to write logic with if-statements via “Less” functions. For this I enter my ‘Theme’ document again and in the end of the ‘Advanced’ tab (after this last
}), I try these Less-parts…
After a publication to runtime, I just validate the custom.css for the outcome (including commented failures!)
Nice…finally some interesting “Less” examples we can use in our own advantage! 😎
Just a question in between…
What is the version supported for “Less” in our platform? Well, it must be at lease
v2.2.0 according to my supported function calls, but we’re definitely not above
v3.0.0 because of the failure scenarios!
For a “Less” release overview…Take a look here
During my exploration on all the fancy “Less” functions, I passed by an interesting section with header Properties as Variables. In this section I see a related thing passing by…Smells like my failed
$logoData-issue in the beginning of this post!? Would it, or would it not? Let’s do a call like this:
Too bad…No relation! OpenText really does a magic trick on that
$logoData thing; unexplainable from my side now. 😥
!!UPDATE; UPDATE, READ ALL ABOUT!!
I had an inspiration to search the server like this:
sudo find /opt -name less -type d. Guess what…a simple result brought me to this file:
/opt/opentext/AppWorksPlatform/defaultInst/webroot/shared/thirdparty/less/less.min.js. And guess again…
Why making things complex when it’s just in front of you! Where did I hear that statement before? 😔 But did we learn something…HELL YEAH! 😜
Great, I leave it with all this “Less” information. It’s always interesting to see how things work and with this little knowledge we now have a better understanding (20%) on how to extend a ‘Theme’ type of document with new “Less” code. Never stop learning new information, but you’re already in the correct place reading this blog post! I see you in the next one on other AppWorks Tips…Cheers.
Don’t forget to subscribe to get updates on the activities happening on this site. Have you noticed the quiz where you find out if you are also “The AppWorks guy”?