I have an issue after uploading an image. the image is not refreshed upon upload. The bean is session scoped, and after upload I need to refresh manually the page to see the new image. How can I refresh the graphical Image automatically after image/file upload? thank you
The following code could successfully upload the image but the previous image still visible and the new image could be visible only after refresh:
Platforms:
jsf 2.2
,tomcat 7.37
, primefaces 5.0
<h:form id="form" enctype="multipart/form-data">
<p:growl id="growl_1" showDetail="true"/>
<p:panelGrid id="pg_photo"
style="margin-bottom:10px;
width: 50em"
styleClass="panelGridCenter">
<f:facet name="header">
<p:row>
<p:column>
<p:graphicImage
id="gi_etud"
width="150"
height="120"
value="#{etudiantProfilView.imageEtudAsStream}"/>
</p:column>
<p:column>
<p:fileUpload id="fu_photo"
value="#{etudiantProfilView.imageEtudUF}"
mode="advanced"
dragDropSupport="true"
fileLimit="10"
sizeLimit="100000"
allowTypes="/(\.|\/)(gif|jpg|jpeg|gif|png|PNG|GIF|JPG|JPEG)$/"
auto="true"
update="growl_1 gi_etud"
fileUploadListener="#{etudiantProfilView.imageUploadListener}"
>
</p:fileUpload>
</p:column>
</p:row>
</f:facet>
</p:panelGrid>
</h:form>
The session bean:
#ManagedBean
#SessionScoped
public class EtudiantProfilView implements Serializable {
//some stuff
public void imageUploadListener(FileUploadEvent event) throws IOException {
//save the image to the hard disk
}
//some stuff
}
I have resolved the refresh issue by adding "reload" action to "oncomplete" attribute for uploadFile component:
<p:fileUpload id="fu_photo" value="#{etudiantProfilView.imageEtudUF}"
mode="advanced"
dragDropSupport="true"
fileLimit="10"
sizeLimit="200000"
allowTypes="/(\.|\/)(gif|jpg|jpeg|gif|png|PNG|GIF|JPG|JPEG)$/"
auto="true"
update="#form"
oncomplete="window.location.reload();"
fileUploadListener="#{etudiantProfilView.imageUploadListener}"
>
</p:fileUpload>
Related
I have a model view in wpf application that hosts url using chromium version 41.
The url is html page that has two text inputs and each text input has a directive (angular 1.5) that binds the 'touchstart' event to each input.
When I open the Url in chrome (with out the chromium wrapper) I can see that the touch events are working, and when I open the url under chromium the touch events are not being fired.
Does anyone has seen this issue before? is it possible that it's related to the chromium version?
my xaml:
<Window x:Class="CefSharpTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:CefSharpTest"
xmlns:cefSharp="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<cefSharp:ChromiumWebBrowser x:Name="MyBrowser" Address="http://localhost:9090/test.html"></cefSharp:ChromiumWebBrowser>
</Grid>
</Window>
my xaml code:
using System.Windows;
using CefSharp;
namespace CefSharpTest
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
MyBrowser.FrameLoadEnd += MyBrowser_FrameLoadEnd;
}
private void MyBrowser_FrameLoadEnd(object sender, CefSharp.FrameLoadEndEventArgs e)
{
MyBrowser.ShowDevTools();
}
}
}
my html:
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#txtTest").on("touchstart", function(e){
console.log("touch");
});
$("#txtTest").on("keydown", function(e){
console.log("key down");
});
});
</script>
<input id="txtTest" type="text" width="250px" height="250px" />
</body>
</html>
Thank you
I found a solution:
on chromium I registered to the TouchDown event, in the touch down event I executed async script that send the location (x,y) to the client relatively to the browser.
In the javascript function I get the element using
document.elementFromPoint(x, y); and if the element is input: text I'm arsing an event of touch.
I'm developing a web application with PrimeFaces 4.0.RC1 and i have problem with file upload,
exactly with the fileUploadListener; this listener doesn't invoke the method "handleFileUpload".
When i try to invoke this method with commandButton: the action in the commandButton work fine;
this is a pert of my web.xml:
<!-- Filter for the JSF uploder -->
<context-param>
<param-name>primefaces.UPLOADER</param-name>
<param-value>commons</param-value>
</context-param>
<filter>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<servlet-name>facesServlet</servlet-name>
</filter-mapping>
this my xhtml page:
<h:form enctype="multipart/form-data">
<p:growl id="kpiUploadNote" showDetail="true" sticky="true" />
<!-- Test with advanced fileUpload -->
<p:fileUpload
fileUploadListener="#{fileUploadController.handleFileUpload}"
mode="advanced" dragDropSupport="false" sizeLimit="100000"
update="kpiUploadNote" fileLimit="3" allowTypes="/(\.|\/)(csv|xlsx)$/" />
<!-- Test with commandButton to test the bean -->
<p:commandButton action="#{fileUploadController.handleFileUpload}"
update="kpiUploadNote" ajax="false" />
</h:form>
this my ManagedBean:
#Scope
#ManagedBean(name = "fileUploadController")
public class FileUploadController {
public void handleFileUpload(FileUploadEvent event) {
System.out.println("calling file upload...");
FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void handleFileUpload() {
FacesMessage msg = new FacesMessage("Succesful", " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
This my first Question in stack overflow and i hope you help me :),
Hi I have a primefaces tabView looks like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<p:messages />
<h:form id="form">
<p:tabView dynamic="true">
<p:tab title="Tab">
<p:inputText required="true" value="value"></p:inputText>
</p:tab>
<p:tab title="Select">
<p:selectOneMenu value="#{dummyController.selectedValue}" id="select" required="true" requiredMessage="Select is required">
<f:selectItem itemValue="1" itemLabel="asd"></f:selectItem>
<f:selectItem itemValue="2" itemLabel="qwe"></f:selectItem>
<f:selectItem itemValue="3" itemLabel="zc"></f:selectItem>
</p:selectOneMenu>
<p:message for="select" />
</p:tab>
<p:tab title="Tab">
<p:inputText required="true" value="value"></p:inputText>
</p:tab>
</p:tabView>
<h:commandButton action="#{dummyController.submit}" />
</h:form>
</h:body>
</ui:composition>
and it's controller
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
#ManagedBean
#ViewScoped
public class DummyController implements Serializable {
private static final long serialVersionUID = 1L;
private int selectedValue;
public void submit() {
}
public int getSelectedValue() {
return selectedValue;
}
public void setSelectedValue(int selectedValue) {
this.selectedValue = selectedValue;
}
}
it has a strange behaviour, follow the steps tp reproduce:
open the Select tab
open other tab
press Submit twice
the first press nothing happens as regular, the next press triggers required message for the select, though it always has a value
Please tell if something is missing or if there are any solutions
There's no direct solution to this, it's a bug in primefaces tabView, I came with this workaround and worked
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<p:messages />
<h:form id="form">
<p:tabView dynamic="true" activeIndex="#{dummyController.activeindex}" >
<p:tab title="Tab" id="tab1">
<p:inputText required="true" value="value"></p:inputText>
</p:tab>
<p:tab title="Select" id="selectTab">
<p:selectOneMenu disabled="#{dummyController.activeindex != 1}" value="#{dummyController.selectedValue}" id="select" required="true" requiredMessage="Select is required">
<f:selectItem itemValue="" itemLabel=""></f:selectItem>
<f:selectItem itemValue="1" itemLabel="asd"></f:selectItem>
<f:selectItem itemValue="2" itemLabel="qwe"></f:selectItem>
<f:selectItem itemValue="3" itemLabel="zc"></f:selectItem>
</p:selectOneMenu>
<p:message for="select" />
</p:tab>
<p:tab title="Tab" id="tab3">
<p:inputText required="true" value="value"></p:inputText>
</p:tab>
</p:tabView>
<h:commandButton action="#{dummyController.submit}" />
</h:form>
</h:body>
</ui:composition>
and the controller :
package com.ibm.sa.kap.ui.controller;
import java.io.Serializable;
#ManagedBean
#ViewScoped
public class DummyController implements Serializable {
private static final long serialVersionUID = 1L;
private int selectedValue;
private int activeindex;
public void submit() {
}
public int getSelectedValue() {
return selectedValue;
}
public void setSelectedValue(int selectedValue) {
this.selectedValue = selectedValue;
}
public int getActiveindex() {
return activeindex;
}
public void setActiveindex(int activeindex) {
this.activeindex = activeindex;
}
}
it's a conditional disabled according to the tab index, so that to prevent the tabview from resetting the value, how dirty !!
Unfortunatelly, the implementation of p:tabView with dynamic="true" is buggy. There are various issues: http://code.google.com/p/primefaces/issues/list?can=2&q=tabView+dynamic&colspec=ID+Type+Status+Priority+TargetVersion+Reporter+Owner+Summary&y=5000&cells=tiles but the most affected are the components such as p:selectOneMenu.
I've had this issue in my own project - the values from select lists were not submitted, if they were on the other tab as active. The solution is - don't use dynamic tabs, as long as they won't be fixed. There are too many bugs within.
Another thing that doesn't work, is to update the tab view from the ajax event onTabChange.
Because <p:selectOneMenu needs value to save element choosen.
Is it possible to show a pdf file in modalpopup with icefaces. Tried this but does not seem to work. Am new to icefaces too.
<ice:panelPopup autoCentre="true" visible="#{popup.visible}" modal="true">
<f:facet name="header"/>
<f:facet name="body">
<OBJECT DATA="/ICEfacesDevelopersGuide.pdf" TYPE="application/pdf" WIDTH="100%" HEIGHT="100%" />
<ice:commandButton value="Close" action="#{popup.close}" />
</f:facet>
</ice:panelPopup>
I ended up doing it the old way opening it on a new window or tab using output link and target attribute.
I'm embeding a flex application into a web page using the most recent version of swfobject.js. I've set wmode to transparent and all that but whatever I've enterd for the embeded objects default size, is then a white background within my application. I've set the application's backgroundAlpha to 0 and I know that part works because my aplication resizes after it has finished loading. The resized portion of the application is transparent but the rest still has the white background so it's obvious it has something to do with the application and not the html or javascript embedding it. How do i fix this?
Looking at the default application skin I noticed that it makes use of the backgroundColor style property to set the fill color for the backgroundRect of the applicaton. However, there's no mention of backgroundAlpha so I created a new application skin and added a single line of code which works!
Below this line:
bgRectFill.color = getStyle('backgroundColor');
Add the following:
bgRectFill.alpha = getStyle('backgroundAlpha');
In your application .mxml file set the skinClass property to:
skinClass="YourSkinsDirectory.YourApplicationSkin"
I have mine saved as ApplicationSkin.mxml in a folder called Skins
so mine looks like this: skinClass="Skins.ApplicationSkin"
Here's the full skin:
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for the Spark Application component.
#see spark.components.Application
#langversion 3.0
#playerversion Flash 10
#playerversion AIR 1.5
#productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
<fx:Metadata>
<![CDATA[
/**
* A strongly typed property that references the component to which this skin is applied.
*/
[HostComponent("spark.components.Application")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
/**
* #private
*/
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number) : void
{
bgRectFill.color = getStyle('backgroundColor');
bgRectFill.alpha = getStyle('backgroundAlpha');
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" />
<s:State name="disabledWithControlBar" />
</s:states>
<!-- fill -->
<!---
A rectangle with a solid color fill that forms the background of the application.
The color of the fill is set to the Application's backgroundColor property.
-->
<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0">
<s:fill>
<!--- #private -->
<s:SolidColor id="bgRectFill" color="#FFFFFF" alpha="1"/>
</s:fill>
</s:Rect>
<s:Group left="0" right="0" top="0" bottom="0">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<!---
#private
Application Control Bar
-->
<s:Group id="topGroup" minWidth="0" minHeight="0"
includeIn="normalWithControlBar, disabledWithControlBar" >
<!-- layer 0: control bar highlight -->
<s:Rect left="0" right="0" top="0" bottom="1" >
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" />
<s:GradientEntry color="0xD8D8D8" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 1: control bar fill -->
<s:Rect left="1" right="1" top="1" bottom="2" >
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xEDEDED" />
<s:GradientEntry color="0xCDCDCD" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: control bar divider line -->
<s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
<s:fill>
<s:SolidColor color="0x000000" />
</s:fill>
</s:Rect>
<!-- layer 3: control bar -->
<!--- #copy spark.components.Application#controlBarGroup -->
<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
<s:layout>
<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
</s:layout>
</s:Group>
</s:Group>
<!--- #copy spark.components.SkinnableContainer#contentGroup -->
<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
</s:Group>
</s:Skin>