I am brand new to twig and I have built some basic pages just to test, normally I use a layout system such as the Bootstrap grid system but how does it work with Twig, can you use such as system or does Twig use its own layout system?
Related
I am trying to use a 3rd party javascript control, Owl Carousel. The way I am reading the documentations is this:
In the zip file from Owl Carousel there is a folder called owlcarousel that contains the javascript and another folder that contains all the supporting files which need to be copied to /modules/base-accelerator/yacceleratorstorefront/web/webroot/_ui/responsive/common. Then I simply need to go into the javaScript.tag file and add this line towards the end of the file:
<script src="${commonResourcePathHtml}/owlcarousel/owl.carousel.min.js"></script>
Upon trying that, I get all sorts of loading errors and no images are display, even without using the control. So my question is:
What is the correct approach to include a 3rd party javascript?
Is there any way to control which pages actually get a javascript file or do simply ALL the pages get ALL the javascript includes?
See if "Storefront Web Application Deconstructed" will help: https://help.sap.com/viewer/4c33bf189ab9409e84e589295c36d96e/1905/en-US/8af03fda8669101491e4aac2acaeb2dd.html
web/webroot
_ui: Contains the JavaScript and CSS styling for the current theme.
shared/js: Shared JavaScript used by desktop and responsive pages.
responsive/common: Commonly used style sheets, JavaScript libraries and images.
responsive/theme-alpha: The blue theme definition.
responsive/theme-lambda: The black theme definition.
WEB-INF
_ui-src: Contains JS testing, full libraries, and the Less files used to generate the CSS for a theme.
common/tld: The tag library descriptor files for the CMS and ycommerce tags.
config: Spring application context files.
lib: The libraries required by the storefront.
messages: The localization files.
tags: The tags that are used within views.
views: The JSP pages, fragments and CMS components.
I am trying to create a different layout for a sub-section of my website using Orchard.
Let's say I wanted to give www.site.com/Shop a different layout from the rest of the website; how would I go about doing this?
I have tried looking for a way to do this using layers but have got stuck.
There are several ways to achieve different layout, since I don't know your specific needs I'll throw in some extra possible routes
Use url shape alternate (I guess you need this one)
You have to enable Url Alternates module and it lets you create shape alternates based on url. For example if your page is www.site.com/shop you can then create view under your theme Layout-url-Shop.cshtml and it will be used instead of default Layout.cshtml on your shop.
Orchard documentantion: URL and Widget Alternates
Use 1.x or wait for 1.9
There you can define dynamically different layout per content item aka page. But I find it good only for content not the base layout which is present in layout.cshtml
Create minisite
How to create a minisite inside your Orchard website
Does any nodejs template engine support the template inheritance function like PHP Smarty?
{block name=head}
default layout content
{/block}
{block name=head}
if page have customize the content it display the customize content, otherwise display the layout content
{/block}
Try the LinkedIn fork of dust.js: https://github.com/linkedin/dustjs
It will look something like this:
{+head}default layout content{/head}
dust.js also supports the following:
- async/streaming operation
- browser/node compatibility
- extended Mustache/ctemplate syntax
- clean, low-level API
- high performance
- composable templates
Is it possible to use the javafx.scene.effect.Reflection in CSS for a FXML file?
And something more general (I haven't found any answer for that yet): Can I do everthing with FXML and CSS that is available on the Java API (using JavaFX 2.2)?
Is it possible to use the javafx.scene.effect.Reflection in CSS for a FXML file?
Not for JavaFX 2.2 - only dropshadow and innershadow effects can be set via CSS.
Future JavaFX versions will probably add the ability to set more effects via CSS.
For now if you want an effect like that in combination with FXML, then you can use a Controller or define the effect in FXML without using CSS.
For example:
<Button layoutX="20.0" layoutY="32.0" text="Reflected Button">
<effect>
<Reflection />
</effect>
</Button>
To visually design and define your FXML based effects, use SceneBuilder, click on your Node, go to the Properties Pane and select an effect to customize from the Effect drop down box.
Can I do everthing with FXML and CSS that is available on the Java API (using JavaFX 2.2)?
You will still need to write some non-fxml embedded code to launch the app and load up your fxml.
If you use FXML's scripting feature you could do most of what can be done on the Java API. For ease of maintenance, I would however recommend using an FXML Controller or hosting script code external from your fxml files rather than embedding it in the fxml.
My objective is to generate a graphic layout (made of Richfaces components) based on some input configuration (like an XML file) and display it in my web app. The layout is composed of graphic symbols representing various entities in the system: each symbol should be mapped to an entity in the system, in order to display its state. The XML configuration file is used to define the symbol connections and positions within the layout, and their mapping rules to an entity. How can I achieve this?
I was thinking to create a symbol library in a technology such as SVG, where you can define both the aspect and the behaviour, and then simply "wrap" each SVG symbol in a dynamically created richfaces component, which would allow me to handle both the user interactions and the mapping rules defined in the symbol. Unfortunately JSF/Richfaces don't support SVG images, therefore I would have to use plain HTML without Richfaces features.
Another way to achieve that would be to simply define generic symbols in the XML file, each one of them with an attribute specifying the related image, the mapping rule, etc., and then generate the corresponding richfaces component from within the web-app. By doing so, would I be able to then display all the symbols in the right position and therefore generate the complete dynamic layout?
Could you suggest a better approach? Thank you very much.
I believe that HTML5 has direct support for SVG images, however it is still an embedded object in regular HTML after all. This too is something I have been waiting for however I don't believe any of the current JSF2 component libraries have an offerring for this yet.
Here is a good explanation of a possible workaround:
Getting started with SVG graphics objects in JSF 2.0 pages
Potentially you could build a custom facelet component utilizing this workaround?
My thought though is that when your only tool is a hammer, everything looks like a nail. I would try to utilize an RIA (Rich Internet Application) technology better suited for display and manipulation of vector graphics like HTML5, Flash+Flex, Silverlight, etc..