I'm using primeface timeline .first my timeline shows just loading then its displaying after I include code
<form prepenId="false" >
<p:timeline value="#{bean.value} />
</form>
.but my issue is the timeline shows just focus date in starting...and i cannot scroll or move content of timeline.the timeline is displaying just same content which s starting of my timeline (starting with focus date).but cannot move ...to left n right...cannot view others . ruler appears but its not moving the content of timeline.
It's available zooming and navigate on timeline component default on primefaces extension. Be sure that you use newest version of "primefaces-extension" component instead of old "primefaces" timeline component. Primefaces transferred development of timeline to primefaces extension. Send your all of your bean and facelts code please.
But there is an other way to set the options of original timeline plugin which framework use.
Set widgetVar attribute of timeline component:
<pe:timeline id="timeline" value="#{bean.events}"
eventStyle="box"
widgetVar="timelineWidget">
Then put or run this javascript on your facelet page:
<script type="text/javascript">
timelineWidget.jq.timeline(timelineWidget.cfg.dataSource,{"zoomable":"true"});
</script>
With this method, also you can set other properties which is javascript plugin support. Primefaces-Extension provide limited attributes of plugin.
Hope It'll help.
Related
I migrate a small application from JSF 1.2 RF 3.3.3 to JSF 2.1 and PF 7.0. (Reason for 2.1 is JBoss EAP 6.1 which allows only java 7)
The look should not be changed, so I use no theme (Theme none in web.xml). Most problems can be solved with some CSS, but for the p:dataTable I need sort icons, with theme=none there are none present.
Is there a way to use some default sort icons out of primefaces without adding some icons to the application? And when yes, how do I use it? I tried some stuff with PrimeIcons, but did not get it working.
The icons are bundled with PrimeFaces, which you can manually load like:
<h:outputStylesheet library="primefaces" name="primeicons/primeicons.css" />
This will allow you to use icons like:
<i class="pi pi-xxx"></i>
But this is not what the PrimeFaces components use. The components are based on jQuery UI icons, so classes like ui-icon ui-icon-xxx. So you need to create a custom style sheet taking care of the UI icons. You don't need to start from scratch, because you can find all of them in (for example) the Nova Light theme.
In the theme linked above, find all the rules containing .ui-icon and especially the ones like:
.ui-icon-xxx:before {
content: "...";
}
(content defines which glyph from the PrimeIcons font is used) and incorporate then into your style sheet. Unfortunately there is no section you can copy and paste, so it will be a painstaking task.
Follow-up to How to embed SVG graphics properly in JSF application using OmniFaces
I'm using the OmniFaces 2.1 snapshot in order to output SVG files from byte[] arrays. I need to suffix #a on SVG URL's in order to activate a CSS style inside the SVG.
Example img:
<img src="/web/javax.faces.resource/ApplicationBean_getImageById_svg.xhtml?ln=omnifaces.graphic&v=0&p=106.1%23a">
As you can see, my #a is appended at the right side of the URL as %23a.
If this had been a regular URL it would be
<img src="106.1.svg#a" />
It would then pick the CSS style and, in my case, paint the background of this sign yellow.
I'm really hoping BalusC comes to my rescue here. Heh. :)
As per this commit, the <o:graphicImage> got a new fragment attribute. This should enable you to pass SVG view modes via URL fragment identifier. It's available in today's 2.1 SNAPSHOT.
E.g.
<o:graphicImage value="#{bean.svg(imageId)}"
type="svg" fragment="svgView(viewBox(0,200,1000,1000))" />
I have a requirement for an application in a Domino version 9.x deployment for a carousel like interface similar to what Netflix and others use to allow continuous scrolling. I got the jQuery jCarousel code working from here. But that lacks the pizzazz the user wants since the swiping feature is not available. I also used 100% computed HTML instead of being able to intersperse XPages controls within the carousel code.
So I found dojox/mobile/carousel (examples here) but all implementations, including the basic examples are not working well. The number of elements does not seem to be flexible and the positioning of them is much lower than I would think the should be. I fiddled with the CSS to see if I could fix things but have not found the right combination.
Here is the entire custom control I am using for this test (I captured the images from the demo and added them as image resources):
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
dojoParseOnLoad="true">
<xp:this.resources>
<xp:metaData
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
</xp:metaData>
<xp:metaData
name="apple-mobile-web-app-capable"
content="yes">
</xp:metaData>
<xp:styleSheet
href="/.ibmxspres/dojoroot/dojox/mobile/themes/iphone/iphone.css">
</xp:styleSheet>
<xp:dojoModule
name="dojox/mobile"></xp:dojoModule>
<xp:dojoModule
name="dojox/mobile/parser"></xp:dojoModule>
<xp:dojoModule
name="dojox/mobile/Carousel"></xp:dojoModule>
</xp:this.resources>
<xp:panel>Above it</xp:panel>
<div
id="carousel1"
data-dojo-type="dojox/mobile/Carousel"
data-dojo-props='height:"150px", navButton:false, numVisible:2, title:"Category"'>
<!-- View #1 -->
<div
data-dojo-type="dojox/mobile/SwapView">
<div
data-dojo-type="dojox/mobile/CarouselItem"
data-dojo-props='src:"dish1.jpg", value:"dish", headerText:"dish"'></div>
<div
data-dojo-type="dojox/mobile/CarouselItem"
data-dojo-props='src:"glass1.jpg", value:"glass", headerText:"glass"'></div>
</div>
<!-- View #2 -->
<div
data-dojo-type="dojox/mobile/SwapView">
<div
data-dojo-type="dojox/mobile/CarouselItem"
data-dojo-props='src:"stone1.jpg", value:"stone", headerText:"stone"'></div>
<div
data-dojo-type="dojox/mobile/CarouselItem"
data-dojo-props='src:"shell1.jpg", value:"shell", headerText:"shell"'></div>
</div>
</div>
<xp:panel>Below it</xp:panel>
</xp:view>
in the sample in the documentation it has this comment followed by the inclusion of a JavaScript file.
<!-- Need to load the theme files for Carousel and PageIndicator as well as the base theme file -->
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"
data-dojo-config="mblThemeFiles: ['base','Carousel','PageIndicator']"></script>
Not having this step done may be my problem but I cannot see how to do that within the XPages environment.
The dojo carousel exists since 1.7 Notes 8.5.3 comes with 1.6 (i dont know the dojo version of Notes9), so you maby have to update your dojo or implement a newer dojo lib in your application.
I did a short experiment on it, i disabled the build in dojo adding xsp.client.script.libraries=none to my xsp.properties and importet the dojo 1.9 in my application under WEB-INF/dojo/... then add the dojo to my xPage as ClientSide script resource. As soon i finished this the programatic Example from the dojo homepage worked immediately with out bigger errors (forgot to change the image sources =) ..).
The problem when adding xsp.client.script.libraries=none to your xsp.properties is that you also disable the XSP. library and some other xPage features wich you have to rebuild using the newer dojo version.
I realy prefer using dojo over jquery but in this case If you dont want to update your dojo i recomend you to maby stay at the jquery Library for this or look for other solutions.
I have a calendar web part in my SharePoint site which works fine in Firefox and IE but does not work in chrome browser.
This is the same situation i am facing.
http://answers.flyppdevportal.com/categories/sharepoint2010/sharepoint2010programming.aspx?ID=9dde800d-7ce0-4069-93d7-2adf2c53d94b
Any suggestions ?
One more thing to add here is that , I have a content Query web part which will rotate the Promotions using JQuery cycle plug in. It is on the same page where I have put the list and library web part with calendar Month view as a default view.
If I remove that CQWP with Promotions everything works fine but if it there it wont work
Any suggestions? I have checked for the Jquery conflicts but could not find any of them .
Thanks
I think that I have find the root cause of my problem
There is one CQWP placed on the same page with this Calendar view list.
This CQWP ha call to jquery cycle plugin which will cycle the content after some interval , due to this JQuery conflicts my calendar control is not working in chrome.
Whem I Remove this CQWP everything works like a charm!!!
1st, try to revert back to the OOB v4.master to see if the problem disappears. If it works as expected, this mean that your masterpage have some issue.
One of the most ridiculous bug in SP is that if you don't have the SiteAction control declared before the ribbon control, some javascript codes will fails.
In one of my custom master page, I have to create a second siteactions control, just before the ribbon control. I've put it into a invisible DIV to completely hide it from the user.
It ends with something like this :
<SharePoint:SPRibbon ID="SPRibbon1" runat="server" PlaceholderElementId="RibbonContainer"
CssFile="">
<SharePoint:SPRibbonPeripheralContent ID="SPRibbonPeripheralContent1" runat="server"
Location="TabRowLeft" CssClass="ms-siteactionscontainer s4-notdlg">
<!-- Here is the hidden site actions control -->
<div style="display: none">
<SharePoint:SiteActions runat="server" AccessKey="<%$Resources:wss,tb_SiteActions_AK%>"
ID="SiteActionsMenuMain" PrefixHtml="" SuffixHtml="" MenuNotVisibleHtml=" ">
<CustomTemplate>
</CustomTemplate>
</SharePoint:SiteActions>
</div>
<asp:ContentPlaceHolder ID="PlaceHolderGlobalNavigation" runat="server" Visible="false">
<SharePoint:PopoutMenu
runat="server"
>
.... Removed for readability ....
</SharePoint:PopoutMenu>
<div class="s4-die">
<asp:ContentPlaceHolder ID="PlaceHolderGlobalNavigationSiteMap" runat="server" Visible="false">
</asp:ContentPlaceHolder>
</div>
</asp:ContentPlaceHolder>
</SharePoint:SPRibbonPeripheralContent>
<SharePoint:SPRibbonPeripheralContent runat="server" Location="TabRowRight" ID="RibbonTabRowRight"
CssClass="s4-trc-container s4-notdlg">
.... Removed for readability ....
</SharePoint:SPRibbonPeripheralContent>
</SharePoint:SPRibbon>
For your information, this behavior is due to one the inner control of the site action (PublishingConsole if I'm right). This inner control will produces some javascript global variable declaration (language and one another). This global variables are required by the ribbon control to works as expected.
I am using ace:daaTable and other ice component on the same xhtml page .
when I click oמ ice:commandButton the page style is changing.
I tried to define "rime" style on the web.xml but it doesn't help.
when I defined "none" style
param-name :org.icefaces.ace.theme
param-value:none
the clicking on the ice:commandButton save the page style, but I am failing to change the table style to "styleClass="oddRow, evenRow" (that was the style I used on ice:dataTable in my previos IceFaces 1.8 project with"xp" style. )
can someone please explain how to define this styleClass on the table,without changing the page style on each click.
and give me an example that show how to use styleClass on the ace:component
thanks
Tami
To include rime.css you can include below line in you head section.
<link rel="stylesheet" type="text/css"
href="./xmlhttp/css/rime/rime.css" />
If you want to specify your own styleclass you can use like this.
<ace:dataTable style="width:200px; height:200px; cellspacing: 1px;
cellpadding:1px;" ></ace:dataTable>
If you want to use styleclass attribute then you specify external css and include the name.