I want to use Facelets to build a static HTML prototype. This prototype will be sent out to people who do not have a running web application server such as Tomcat. Is there some way to compile a Facelets site at build-time (using Ant etc) into a set of flat HTML files?
In the simplest case we have two facelets like this:
<!-- layoutFacelet.xhtml -->
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:insert name="content" />
</ui:composition>
<!-- implementationFacelet.xhtml -->
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="layoutFacelet.xhtml">
<ui:define name="content">
HELLO WORLD
</ui:define>
</ui:composition>
The output would be a single html (e.g. "implementationFacelet.output.html") like:
HELLO WORLD
In other words, Facelets is running at build-time rather than render-time, in order to produce static flat-file prototypes.
I'm not sure about any ready to use solution for your problem. However I have a rather good idea how it could be implemented thanks to working on a build-time JSF EL validator, where I'm currently adding support for facelets. I'd do this:
Set up the backing beans etc. used in EL expressions - there are multiple ways to do it, I'd personally consider pluging in my "value faking EL resolver" but you may equally well just make sure that JSF can find your backing beans and somewhow ensure all the values needed are set
Compile a view manually and build its component tree (implemented - see ExperimentalFaceletsElFinder.verifyExpressionsViaComponentTree)
Render the component tree to HTML via UIViewRoot.encodeAll(context) - see org.apache.myfaces.view.facelets.FaceletViewHandler#renderView
So this is feasible but perhaps too much work for somebody who hasn't been working with these things before. Once I'm done with my Facelets support, I'll consider adding such functionality to the validator as it would be quite easy for me then.
Best regards, Jakub
Related
I'm testing an application written in .NET Backend and AngularJS front end.
Writing some automation tests using Selenium with specflow integration (C#).
I have done the initial setup but one of the biggest difficulties I face is detecting the dynamic web elements. Since the app is using Angular I can't easily identify most elements unless I try to use XPath. Selenium doesn't support the compound class names ie "class="ng-pristine ng-valid ng-touched"" and the IDs keep changing.
Is there a better way of doing this ? or a library I can use to make my life easier ?
Any input appreciated :)
For testing AngularJS application I'll recommend you to use Protractor. Which is an end-to-end test framework for AngularJS applications. The problem you are facing is very common when you are using any automation tool to automate Angular application and that's why Google has came up with Protractor.
For compound class use:
driver.findElement(By.cssSelector(".ng-pristine.ng-valid.ng-touched");
I agree with Shubhasmit Gupta. Only problem that the original Protractor is JavaScript based and it might be challenge start to use it. I would recommend to use Protractor.NET , also it will allow you to use SpecFlow with it.
Main benefits of Protractor that it allows to use specific angular locators: NgBy.Model, NgBy.Repeater, NgBy.Binding etc. and provides good synchronization mechanism.
And because Protractor is a wrapper around selenium, you can use all Selenium functions.
Shubhasmit Gupta is right about using Protractor for AngularJS apps.
But if you are not ready to go down that road, what's wrong with using xpath?
Using your example you can easily identify your objects with the class parameter like this, if you're sure, that there won't be any more dynamically loaded classes:
//*[#class='ng-pristine ng-valid ng-touched']
Or like this, if there is a probability that more classes could be loaded on that element dynamically:
//*[contains(#class='ng-pristine ng-valid ng-touched')]
Or, if even the order of your classes could change:
//*[contains(#class='ng-pristine') and contains(#class='ng-valid') and contains(#class='ng-touched')]
Of course this approach assumes that your element could be identified uniquely by this combination of class attributes or that you are searching for a group of objects or that you will use other attributes to make the identification unique.
AND Shubhasmit Guptas approach using cssSelector is generally regarded as the faster more precise approach IF you are able to identify an object just by this combination of classes. xpath is favored if you need potentially more attributes than just the class.
I'm using ui-router/stateProvider to load various views for a single page app. Additionally I'm following what appears to be best practice for structuring code by breaking my code into components so I have, for example;
Index.html
\Components
\Component1
\page1.html
\page1.css
\page1-controllers.js
\page1-directives.js
\Component2
\page2.html
\page2.css
\page2-controllers.js
\page2-directives.js
I have quite a few different views/components (10+) and my question really relates to how to manage the loading of the js files (and the CSS files for that matter). I can put the JS files all in tags in the index.html file and all works fine, but looks a bit messy as it is a very long list.
So my question is: How should I manage the inclusion of the various scripts for each view; should they all remain in the index.html file or is there a better way of managing them, such as loading only when each view is called via the ui-router?
Many Thanks
I think that you need to use RequireJs, I will include a couple of sites with the documentation that explain how implement that.
http://www.javascripthtml.com/load-dynamically-javascript-file-in-angularjs-with-requirejs/
https://cdnjs.com/libraries/backbone.js/tutorials/organizing-backbone-using-modules
For css you may want to add a single class to each view then use a single css file for all views. I keep the css organized into modules for easy access. This will also help load times as it will require less requests.
For js I would create a universal js file that contains any code that is required for ALL views, then create individual js files for individual views. There really isn't a "right" way per se but preferred ways depending on the developers you work with. Keep it simple and easy for other developers to read. :)
I have the same problem as you, I think that the only solution for us is to add the script in the "index.hmtl" page.
I was wondering to use paypal's React Engine (https://github.com/paypal/react-engine), but I have some doubts:
What are the benefits over other template engines like Handlebars?
Why upload .jsx files, and not (jsx precompiled/transformed) .js files? (This one should be faster because don't have to do deal with the transformation at the server).
I have been researching but I get confused.
Thanks
The main difference between react-engine and template engines is only when the browser enables the user to interact with the browser page. Nevertheless, it is important how machines have access to individual data.
Assuming we want to run a simple webpage. Just a scrolling and open text information. Using template engines, like Handlebars.js, typically, when the browser request hits to the server, it tries to figure it out how to respond and what to do. That said, the template engine may reference existing fetched data from files stored into a local and accessible source. Those are loading all the defined data regarding the site template file (i.e. head, meta, title, etc.), with a render of incomplete HTML string. This HTML is then sent back to the Browser and rendered.
The react-engine, on the same side it happens the use of the same rendering mechanism. However, instead of a template engine semantic, it uses JSX, or if we want, we can also use JavaScript. The JSX is, therefore, broader then template engines. A great article by Hajime Yamasaki Vukelic complies the separation of concerns from a different angle between JSX and HTML templates.
With template engines, you feed the library a string (usually but not
necessarily HTML), which is then converted into a piece of JavaScript
code which generates virtual DOM structures when executed. At design
time, templates are just strings, so we don’t have direct access to
the surrounding code. For instance, we can’t import helper functions,
or call methods. These things are only possible through abstractions
called directives (and possibly other names depending on where you are
coming from). Directives are the glue between the HTML and the
JavaScript.
So far so good, there is no relevant difference between both solutions. Links to next or previous simple webpage are just simple <a href="/webpage>Next</a> elements.
At the moment, when we decide to implement some interactions, react-engine will be the winner. While react-engine rendering does not require JavaScript to run on the client side, it will enable SEO over the search.
Template engines also have this SEO support, but with less impact. We can not run here all JavaScript to render HTML. Even libraries like jQuery require live access to the browser window object which cannot be mocked easily on the server side. So template engines become less productive.
In conclusion, template engines can do the same as react-engine rendering. Maybe not equally easy or equally fast but both tools are qualified. You can also read another great thread on this topic.
I'm supposed to develop a project using X3D. I have an idea to create a conversor of DXf file to X3D. however, to do that, I have to use Javascript to manage this properly, but I haven't found a way to integrate Javascript with X3D. Does someone know some way to do that?
Previously, I though in loading the dxf file, get the data I need, and save this as a X3D file, like writing the XML.
thanks in advance
X3D supports JavaScript natively in the Script node (and it is sometimes referred to via the standardization name EcmaScript). Script events are connected to a scene via ROUTE statements. This provides a bridge between declarative 3D models and programmatic events/computation. Lots more online:
http://x3dgraphics.com/examples/X3dForWebAuthors/Chapter09EventUtilitiesScripting
http://www.web3d.org/x3d/content/examples/Vrml2Sourcebook/Chapter30Scripts
http://www.web3d.org/x3d/content/examples/X3dSceneAuthoringHints.html#Scripts
http://www.web3d.org/x3d/content/X3dTooltips.html#Script
http://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/scripting.html#Script
In VRML you can integrate javascript using the Script node.
Here's an example:
DEF SCRIPT Script {
url ["javascript:
here goes your javascript code
"]
}
Considering that X3D started as the XML representation of VRML then I suppose there is support in X3D for the Script node.
Edit: Yes I can confirm the above.
Has anyone been able to get sitemesh and gaelyk working together? This seems to be possible as mentioned here http://blogs.bytecode.com.au/glen/2009/12/14/getting-sitemesh-running-on-google-app-engine.html. However I unable to get this working with a gaelyk template. I keep getting this error
"javax.servlet.ServletException:
Creation of template failed:
groovy.lang.GroovyRuntimeException:
Failed to parse template script (your
template may contain an error or be
trying to use expressions not
currently supported): startup failed:
SimpleTemplateScript3.groovy: 2:
expecting EOF, found 'prefix' # line
2, column 77.
phony.com/sitemesh/decorator"
prefix="de"
The decorator, main.gtpl, looks like:
<%# taglib
uri="http://www.opensymphony.com/sitemesh/decorator"
prefix="decorator" %>
If I rename the above to jsp, it works fine. Either taglibs do not work with gaelyk or I've got the syntax wrong.
Can someone point me in the right direction?
Cheers.
taglib does not work with gaelyk, because gaelyk does not rely on the JSP engine for the .gtpl pages.
If you want to use the JSP engine, you migth consider using the GSP pages as well.
Anyway, keep in mind that Gaelyk is just a tiny framework and that it may not be the rigth tool if you want to create a more elaborate project using template engines and such.
Have you tried the SiteMesh tags without defining the taglib? Indeed, as gizmo pointed out, Gaelyk/Groovy templates don't support JSP taglibs per se, but SiteMesh parses content (even pure HTML content!) an replaces the tags with the right content, etc. So it should just work pretty simply.
Also don't forget there's a Google Group dedicated to Gaelyk that you can access from the Gaelyk website.