What does the PF function do in Primefaces? - jsf-2

On many places one can find usage of a function PF with Primefaces. For example in this answer
From what I have seen so far it seems to be a magic "make it work a little better" function. But I don't believe in this kind of stuff so:
What does this function do?
And where can I find documentation about it?

PF is a Javascript function.
In Primefaces 4.0 the Javascript scope of widgets changed. Prior to version 4.0 you could open a dialog widget with widgetVar.show();.
In Primefaces 4.0 and above the widgets are stored in a Javascript widget array. When you call PF('widgetVar') it is looking for the widget in the array and returning it.
PF=function(d){
var c=b.widgets[d];
if(!c){
if(a.console&&console.log){
console.log("Widget for var '"+d+"' not available!")
}
b.error("Widget for var '"+d+"' not available!")
}
return c
};
I could not find much on this either this is what I was able to decipher using Chrome's developer tools.

The PF function is a part of PrimeFaces's JavaScript API. It looks up a Javascript object that is the backbone of the JSF component on the client-side. Here is its definition (source):
PF = function(widgetVar) {
var widgetInstance = PrimeFaces.widgets[widgetVar];
if (!widgetInstance) {
PrimeFaces.error("Widget for var '" + widgetVar + "' not available!");
}
return widgetInstance;
};
PF is a shortcut for PrimeFaces.widgets['someWidgetId'], which just looks-up a Javascript object in global scope, and so the Javascript object can also be retrieved using window['someWidgetId'].
The PrimeFaces's Javascript API has no official documentation online, so to understand what you can really "do" with the Javascript object, you'll need to take a deep dive into PrimeFaces.
See also
"Intro To PrimeFaces widgetVar" blog post
PrimeFaces source code

For other Primefaces users coming here when upgrading to version 4.0 and above, it's possible to bypass the need to use PF('yourWidgetVar').someFunction() and just use yourWidgetVar.someFunction() directly as you would have before version 4.0. You just need the following configuration in web.xml:
<context-param>
<param-name>primefaces.LEGACY_WIDGET_NAMESPACE</param-name>
<param-value>true</param-value>
</context-param>
From the Primefaces User Guide:
Enables window scope so that widgets can be accessed using
widgetVar.method() in addition to default PF namespace approach like
PF('widgetVar').method().
Obviously you'd be susceptible to the namespace clash/pollution this feature was created to avoid, but it's useful if you want to migrate to a new version in little steps and isolate what incompatibilities the new version has introduced.

Related

Vaadin : How to get Element by ID?

How to get HTML Elmement (or DOM) in Vaadin ?In GWT I can use as DOM.getElementById("myId");
I can set id attribute on my Vaadin components by setId() method. For example:
Button button = new Button("Say Hello");
button.setId("myButton");
So, how can I retrieve this DOM Element in Vaadin ?
You can use this:
public static Component findComponentById(HasComponents root, String id) {
for (Component child : root) {
if (id.equals(child.getId())) {
return child; // found it!
} else if (child instanceof HasComponents) { // recursively go through all children that themselves have children
Component result = findComponentById((HasComponents) child, id);
if (result != null) {
return result;
}
}
}
return null; // none was found
}
Source: https://vaadin.com/forum/#!/thread/3199995/3199994
Vaadin 10 (Vaadin Flow)
The new Vaadin Flow generation replaces the internal use of GWT for Web Components.
This new architecture provides us with easy direct access to the DOM from the Java-based server-side, if you so desire. You can read the DOM, and you can manipulate elements in the DOM. Read about the new Element API in the manual.
Vaadin 6, 7, & 8 (Vaadin Framework)
This Answer expands on the comment by Vaadin expert, Henri Kerola.
Vaadin is a server-side app framework. It's purpose is to shield the app developer from the details of HTML, CSS, JavaScript, DOM, GWT, HTTP, WebSocket, and such web technologies. The app developer writes in pure Java (and maybe a tiny touch of CSS for tweaking). Vaadin transparently and auto-magically generates the HTML-CSS-JavaScript-GWT-DOM necessary to render a representation of the app’s user-interface within a web browser.
So there is no way to access the DOM from that Java server-side, nor any need to do so generally.
If you want to take control of the web technologies then Vaadin is probably not the best framework for you.
In Vaadin8 you may try this:
JavaScript.getCurrent().execute("document.getElementById('refreshButton').click()");

HTMLDocument object from HTTP read()

I need to call at server side, an URL and work with the HTML content off the response. For this I'm using the HTTP library from Dart like this :
http.read('myUrl').then((contents) {
//contents to HTMLDocument format //Need to transform the String contents to HTML object
});
And I want to convert the response to a HTMLDocument (or other object I don't know) to be able to retrieve element in it by HTML tag or CSS class, like with JQuery for example.
Does anybody have an idea to perform this ?
You canuse html5lib package from pub. It allows to parse HTML and present it DOM like element tree on server side. The element tree will eventually "be compatible with dart:html, so the same code will work on the client and the server" in the future. See the readme for a getting started example.
"I need to call at server side"
Not sure exactly what you mean.
If you are running in the browser and calling the server you could try using a DocumentFragment. Something like this:
http.read(url).then((html) {
var fragment = new DocumentFragment(html);
var element = fragment.query('.foo');
// code here...
});
Otherwise if you're running server side, as the other answer mentions, html5lib is the way to go. Last time I looked the query() method in html5lib only supported tagname queries not classes, or ids.

Override jQuery UI DatePicker _generate HTML Function

In jQuery UI 1.7, I had successfully overridden the datepicker._generateHTML function running a script in the form:
jQuery.datepicker._generateHTML = function(inst) {
...revised code...
};
When I attempted to upgrade to version 1.8 using the same approach, I encountered a problem. Version 1.8 added a datepicker closure scope variable dpuuid, which is referenced in the new version of the '...revised code...'. datepicker._generateHTML now fails with a dpuuid is not defined' error.
I'm still new enough to Javascript to not understand all the subtle aspects of the language. So my first question is: 'Can a function which references a closure scope variable be overridden and still access the original closure scope?'
I found the answer in Thomas' answer for jQuery DatePicker how to disable auto day selection while browsing calendar?
Adding the following to the top of my '...revised code...':
if (!inst.dpuuid) {
for (attr in window) {
if(/^DP_jQuery_/.test(attr)) {
inst.dpuuid = attr.replace(/^DP_jQuery_([0-9]+)/, '$1');
}
}
}
var dpuuid = inst.dpuuid;
eliminated the dpuuid is not defined' error. I had seen in FireBug that the closure scope was visible from the window object, but had no idea how to extract values from it.
Thanks Thomas!!

JIRA layout per-project

Would it be possible to use a project-specific stylesheet for JIRA projects?
For example, if I would like to include project X in an iframe, I'd like to hide the logo and possibly the JIRA toolbar - for specific user groups for example (it's only for viewing purpose, it is not a security feature)
Granted that I'd have to implement this myself (through the webservice api for example) - are there templates for the standard issue page?
Thanks in advance!
There is a (currently undocumented) plugin point in JIRA for inserting top navigation components, <top-navigation>.
You can use this plugin point to add your own navigation bar, and perhaps hide the normal bar using an inline CSS stylesheet. The following example triggers this behavior by using a ?hideit=true query parameter, which is the simplest way to approach the "embed in iframe" problem. You could make that "sticky" by storing it in a session or cookie.
Once you have created a plugin that plugins into the <top-navigation>, hiding the top bar is simple. Here is a velocity script that does it:
#if ($hideHeaderHack)
<style>
\#header {display:none;}
</style>
HIDDEN (remove this message eventually)
#else
NORMAL (remove this message eventually)
#end
To create such a plugin, use the Atlassian Plugin SDK (use atlas-create-jira-plugin). Your atlassian-plugin.xml should look like:
<atlassian-plugin key="${project.groupId}.${project.artifactId}" name="${project.name}" plugins-version="2">
<plugin-info>
<description>${project.description}</description>
<version>${project.version}</version>
<vendor name="${project.organization.name}" url="${project.organization.url}" />
</plugin-info>
<top-navigation key="standard-navigation-top"
name="Tigerblood"
class="com.madbean.topnavhack.TopNav" state='enabled'>
<resource type="velocity" name="view" location="topnav.vm"/>
<order>5</order>
</top-navigation>
</atlassian-plugin>
Your top-navigation implementation class (called com.madbean.topnavhack.TopNav above) should look like:
public class TopNav implements PluggableTopNavigation {
private TopNavigationModuleDescriptor descriptor;
public void init(TopNavigationModuleDescriptor descriptor)
{
this.descriptor = descriptor;
}
public String getHtml(HttpServletRequest request) {
Map<String,Object> params = new HashMap<String, Object>();
params.put("hideHeaderHack", "true".equals(request.getParameter("hideit")));
return descriptor.getTopNavigationHtml(request, params);
}
}
Your plugin will be laid out something like:
./pom.xml
./src/main/java/com/madbean/topnavhack/TopNav.java
./src/main/resources/atlassian-plugin.xml
./src/main/resources/topnav.vm
Disclaimer I work for Atlassian as a developer in the JIRA team.
I don't believe this functionality is exposed directly, and you don't state what JIRA version you are using, but in 4.x in \atlassian-jira\includes\decorators there is a file called bodytop.jsp the has the following fragment that renders the top level navigation and toolbar elements:
// Render all the top nav plugins
for (Iterator iterator = topNavPlugins.iterator(); iterator.hasNext();) {
TopNavigationModuleDescriptor topNavModuleDescriptor = (TopNavigationModuleDescriptor) iterator.next();
PluggableTopNavigation pluggableTopNavigation = (PluggableTopNavigation) topNavModuleDescriptor.getModule();
%>
<%= pluggableTopNavigation.getHtml(request) %>
<%
}
%>
If you wanted to you could create a version of the dashboard rendering jsp that calls a modified bodytop.jsp that renders none of the usual nav elements.
I would be tempted to write a basic plugin to do this.
Take a look at http://confluence.atlassian.com/display/JIRA/Web+Resource+Plugin+Module
If you have yet to write a jira plugin, now might be the time to try it out http://confluence.atlassian.com/display/DEVNET/Developing+your+Plugin+using+the+Atlassian+Plugin+SDK .
I'm currently running Jira 4.2.2 and wrote a plugin that implements PluggableTopNavigation for a custom navigation bar. Unfortunately, this functionality, as detailed in the awarded question, is now depreciated.
My plugin added a div to the top of the Jira header that created a nice menu for use with our development pages. The source of the menu was hard-coded into the plugin and located as a static menu.html file on our server for sharing across different pages.
Since I'd have to completely redesign the plugin for Jira 5.2, I started searching for different ways to re-implement the menu. Here's what I settled on. It's not pretty, but it makes it so you don't have to write a plugin.
Change your announcement banner (quickly get there by typing 'gg', then search for announcement banner) to the following:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery.get("http://path.to.server/menu.html", function(data){
jQuery("#header").prepend('<nav class="global" role="navigation">'+data+'</nav>');
jQuery("#top-level-id-of-navbar a").css("color", "white")
});
});
</script>
Replace the menu.html link with your own link. The color of the header was inherited by the links in my menu, so I had to change them back to white after inserting the html page.
The result looks identical to Jira 4.2.2, so I'm happy.

can't get a ff extension to work in v3.0.5

Does anyone know what might have changed since v3.0.5 that would enable extensions to work? Or, maybe I'm missing a setting somewhere? I wrote this add-on that works fine with newer versions, but I can't get it to launch in older ones. Specifically, I can't even get this part to work (this is in my browser overlay.xul):
<html:script>
<![CDATA[
var Cc = Components.classes;
var Ci = Components.interfaces;
var obSvc = Cc["#mozilla.org/observer-service;1"].getService(Ci.nsIObserverService);
gBrowser.consoleService = Cc["#mozilla.org/consoleservice;1"].getService(Ci.nsIConsoleService);
gBrowser.log = function(msg){
this.consoleService.logStringMessage(msg);
}
gBrowser.newObj= new MyAddOn();
gBrowser.log("initializing...");
function regListener()
{
obSvc.addObserver(gBrowser.newObj, "http-on-modify-request", false);
}
function unregListener()
{
obSvc.removeObserver(gBrowser.newObj, "http-on-modify-request");
}
window.addEventListener("load", regListener, false);
window.addEventListener("unload", unregListener, false);
]]>
This should attach listeners to the new obj (defined by a linked .js) However, I'm not even getting the "initializing..." message in the console. Any ideas?
Don't use <html:script>, use <script> (assuming you have xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" on your root <overlay> element).
Don't register an application-global listener (http-on-modify-request) from a window overlay. Doing so will make your code run one time in each window the user may have open. Use an XPCOM component instead - https://developer.mozilla.org/en/Setting_HTTP_request_headers
Don't pollute common objects (like gBrowser or the global object (with var Cc)) with your own properties. If everyone did that, no two extensions would work together. Put all your code properties on your own object with a unique name.
accessing gBrowser before the load event is probably what's causing your specific problem.
Set up your environment and check the Error Console to debug problems.
Don't waste time trying to support Firefox 3. It's not supported by Mozilla itself for over a year and shouldn't be used to access the web.
It looks like gBrowser.log is not defined, or at least is not a function, as the error console will probably tell you. I've never heard of it either. Maybe it was added in Fx 3.5?

Resources