I am working on a Webapp using PrimeFaces. I am very close to a solution, but am stuck with trying to update the chart as new data is calculated.
I have 3 tabs: Inputs, Outputs & Charts.
On the Inputs Tab, I have textboxes and a Submit button.
On the Outputs Tab, I have a datachart to display the data that is calculated after inputs are entered and submit is clicked. I have verified that data is populated correctly.
On the Charts Tab, I have a chart (will be multiple later) that is to display data from the calculation as well.
Here is my relevant code:
public void createNewChart() {
FileInputStream fis = null;
try {
//Graphic Text
BufferedImage bufferedImg = new BufferedImage(100, 25, BufferedImage.TYPE_INT_RGB);
Graphics2D g2 = bufferedImg.createGraphics();
g2.drawString("This is a text", 0, 10);
ByteArrayOutputStream os = new ByteArrayOutputStream();
ImageIO.write(bufferedImg, "png", os);
graphicText = new DefaultStreamedContent(new ByteArrayInputStream(os.toByteArray()), "image/png");
//Chart
File chartFile = new File("C:\\Desktop\\Temp", "Chart" + Math.round(Math.random() * 1000000) + ".png");
chartData = calculateValuesServlet.getChartData();
calculateDataSets();
XYSeriesCollection xyDataset = new XYSeriesCollection();
xyDataset.addSeries(minumumLine);
xyDataset.addSeries(maximumLine);
xyDataset.addSeries(optimumLine);
xyDataset.addSeries(ratingPoint);
chart = ChartFactory.createXYLineChart("Chart Title", xAxis.getAxisLabel(), yAxis.getAxisLabel(), xyDataset, PlotOrientation.VERTICAL, true, false, false);
fixRenderings();
ChartUtilities.saveChartAsPNG(chartFile, chart, 375, 300);
fis = new FileInputStream(chartFile);
chartContent = new DefaultStreamedContent(fis, "image/png");
calculateValuesServlet.setNewChartNeeded(false);
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (fis != null) {
fis.close();
}
} catch (IOException ex) {
Logger.getLogger(DataChart.class.getName()).log(Level.SEVERE, null, ex);
}
}
}
Also, in my index.html:
<p:tab title="Charts">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage id="outputChart1" value="#{dataChart.chartContent}" />
</h:panelGrid>
</p:tab>
And for completeness, this is from DataChart.java:
public StreamedContent getChartContent() {
if (chartData != null && !chartData.isEmpty() && calculateValuesServlet.isNewChartNeeded()) {
createNewChart();
}
return chartContent;
}
I have started saving the charts to Desktop\Temp so that I can view the charts. The ones that are created in my Temp folder are correct, but the one that appears on the webapp is not. I also tried setting cache="FALSE" in the graphicImage, but then I get a broken image icon instead of the graph.
I realize this tells me that the webapp is not getting that latest image, but why?
I'm facing problem on image not refresh too.
Try to change the scope to #RequestScoped and add in cache="false" on p:graphicImage
Related
In my project I'm using javafx and there is a TableView in which there are four columns i.e source, target, score, date and I want either a single word in the column or the whole row to be bold or italic and to change the font size.
public void readtextfile(String data) //data contains the location of the file
{
data1 = FXCollections.observableArrayList();
tab = new Tab("new" + (tabPaneTableview.getTabs().size() + 1));//create a new tab every time loaddatabase() is called
tabPaneTableview.getTabs().add(tab);//tab is added in tabpane
tabPaneTableview.getSelectionModel().select(tab);//the particular tab is selected
tv_new = new TableView<>();
tc_id = new TableColumn<File, Integer>("Id");
tc_source = new TableColumn<File, String>("Source");
tc_target = new TableColumn<File, String>("Target");
tc_score = new TableColumn<File, String>("Score");
// tcUsername=new TableColumn<File,String>("Creation User");
//tcCurrentdate=new TableColumn<File,String>("Date/Time");
tcNote = new TableColumn<File, String>("Note");
tcStatus = new TableColumn<File, String>("Status");
//tcConfirm=new TableColumn<File,String>("Confirm");
//tcLock=new TableColumn<File,String>("Lock");
//tcStatus.getColumns().addAll(tcConfirm,tcLock);
//tcPostag=new TableColumn<ExcelFile,String>("Pos Tag");
tv_new.getColumns().addAll(tc_id, tc_source, tc_target, tc_score, tcNote, tcStatus);
tab.setContent(tv_new);
tv_new.setPrefHeight(250);
tv_new.setRowFactory(new Callback<TableView<File>, TableRow<File>>() {
#Override
public TableRow<File> call(TableView<File> param) {
final TableRow<File> row = new TableRow<File>() {
#Override
protected void updateItem(File row, boolean empty) {
super.updateItem(row, empty);
if (!empty)
styleProperty().bind(Bindings.when(row.selectedProperty())
.then("-fx-font-weight: bold; -fx-font-size: 16;")
.otherwise(""));
}
};
return row;
}
});
public boolean getSelected() {return selected.get();}
public BooleanProperty selectedProperty(){return selected;}
I'm using this code but it doesn't yield the desired result.
Maybe this is not the solution that you are looking for but this might help you.
.table-row-cell:hover {
-fx-border-color: red; /* Vertical Lines*/
-fx-control-inner-background: #c1c1c1;
-fx-border-width: 1;
}
This is a fragment of code that I have provided because I think that changing the text font, just selecting a row is a bit complicated because you have to keep in mind that the text is linked by the column or cell that is focused.
This piece of code has to be included in the css file and from sceneBuilder or from the code you have to include the stylesheet. Good luck.
How to display popup exceptions instead of the one with a red dot on the row for the line items? I was able to have them in RowInserting for a little bit but after a series of code changes I get the red dot one instead. It even did not create a new row as I wanted but now it does. RowInserting event:
protected virtual void SOLine_RowInserting(PXCache sender, PXRowInsertingEventArgs e)
{
var listMissingOEdesc = new List<int>();
var select = Base.Transactions.Select();
foreach (SOLine row in select)
{
var isOEDesc = IsOEDescEnabled(sender, row);
var rowExt = PXCache<SOLine>.GetExtension<SOLineExt>(row);
if (isOEDesc == true)
if (rowExt.UsrOedesc == null)
listMissingOEdesc.Add(row.SortOrder.Value);
}
if (listMissingOEdesc.Count > 0)
{
throw new PXException("Line items with sort order {0} do not have OE Desc filled out. Cannot add a new line.", string.Join(", ", listMissingOEdesc));
}
else
Base.Actions.PressSave();
}
Thanks!
There is no easy way, if any at all, to display popup exception and prevent the grid from inserting a new row. The way the framework is designed, PXGrid first inserts a new row on the webpage. After that PXGrid sends a callback to the application server either requesting default field values for the new row (if PXGrid's Mode has InitNewRow="True") or sends all values captured from the webpage to the application server, so the new row can be inserted in the PXCache. Whenever an event handler, on the field or row level, gets invoked, the new row will still be visible to the user on the web page. Even if you invoke Ask method on the Transactions data view within one of the event handlers, the new row won't disappear from the webpage.
With all that said, the best and probably the only way to display popup exception and prevent the grid from inserting a new row is by replacing the standard Add New Row button on PXGrid with a custom action, which will first run the validation and display popup exception, if necessary. Otherwise, a new row will be inserted into PXGrid. It's also required to enable or disable the custom NewSOTran action based on the state of the standard PXGrid's Insert button.
public class SOOrderEntryExt : PXGraphExtension<SOOrderEntry>
{
public void SOOrder_RowSelected(PXCache sender, PXRowSelectedEventArgs e)
{
NewSOTran.SetEnabled(Base.Transactions.AllowInsert);
}
public PXAction<SOOrder> NewSOTran;
[PXButton(CommitChanges = true)]
[PXUIField]
protected void newSOTran()
{
var listMissingOEdesc = new List<SOLine>();
var select = Base.Transactions.Select();
foreach (SOLine row in select)
{
var isOEDesc = !string.IsNullOrEmpty(row.TranDesc);
if (isOEDesc == true)
listMissingOEdesc.Add(row);
}
if (listMissingOEdesc.Count > 0)
{
throw new PXException("Cannot add a new line.");
}
var newTran = Base.Transactions.Insert();
Base.Transactions.Cache.ActiveRow = newTran;
}
}
In Aspx there will required 3 major chages:
SyncPositionWithGraph property set to True for PXGrid:
<px:PXGrid ID="grid" runat="server" DataSourceID="ds" Width="100%" TabIndex="100"
SkinID="DetailsInTab" StatusField="Availability" SyncPosition="True" Height="473px"
SyncPositionWithGraph="True" >
the standard AddNew action must be replaced by a custom NewSOTran action:
<ActionBar>
<Actions>
<AddNew ToolBarVisible ="False" />
</Actions>
<CustomItems>
<px:PXToolBarButton CommandName="NewSOTran" CommandSourceID="ds"
DisplayStyle="Image">
<Images Normal="main#AddNew" />
<ActionBar GroupIndex="0" Order="2" />
</px:PXToolBarButton>
...
</CustomItems>
</ActionBar>
AllowAddNew property set to false in the Mode section of PXGrid to prevent the standart Insert button from execution when users use keyboard shortcuts or double-click on PXGrid:
<Mode InitNewRow = "True" AllowFormEdit="True" AllowUpload="True" AllowDragRows="true"
AllowAddNew="false" />
To select new records’ first cell and switch it to the edit mode (unless the first cell is read-only), it's also required to subscribe to the Initialize and ToolsButtonClick client events of PXGrid:
<ClientEvents Initialize="initTransactionsGrid"
ToolsButtonClick="transactionsGriduttonClick" />
and define the following JavaScript functions:
var isInitEvents = false;
function initTransactionsGrid(a, b) {
if (isInitEvents) return;
isInitEvents = true;
a.events.addEventHandler("afterRepaint", editNewSOTran);
}
function editNewSOTran() {
if (lastActiveRowIndex != null) {
var grid = px_alls["grid"];
if (grid.activeRow) {
var activeRowIndex = grid.rows.indexOf(grid.activeRow);
if (activeRowIndex != lastActiveRowIndex) {
grid.activeRow.activateCell(0, false);
grid.beginEdit();
}
}
lastActiveRowIndex = null;
}
}
var lastActiveRowIndex;
function transactionsGriduttonClick(sender, args) {
if (args.button && args.button.commandName == "NewSOTran") {
if (sender.activeRow)
lastActiveRowIndex = sender.rows.indexOf(sender.activeRow);
else
lastActiveRowIndex = -1;
return;
}
lastActiveRowIndex = null;
}
To package custom JavaScript code into customization, in Layout Editor you can drag and drop a Java Script element from the Add Controls tab and copy your entire JavaScript code into the Script property.
Good morning!
I'm using the iText library to create a pdf template and Primefaces to display the content on a web application.
When I ran the first test to see if all the libraries were all set, it was displayed normally. But then I made some changes, and it seems that something is caching my first test in memory and it is the only thing displayed, no matter what changes I make it keeps the same first content. I´ve already cleaned up my netbeans project, closed the IDE and also restarted the computer.
Thats is my tag on the jsf page:
<p:media value="#{atividadeController.pdfContent}" player="pdf" width="100%" height="700px"/>
And here is my method in the managed bean, which is a SessionScoped:
public String preparePdf()
{
try {
ByteArrayOutputStream output = new ByteArrayOutputStream();
Font fontHeader = new Font(Font.FontFamily.HELVETICA, 20, Font.BOLD);
Font fontLine = new Font(Font.FontFamily.TIMES_ROMAN, 14);
Font fontLineBold = new Font(Font.FontFamily.TIMES_ROMAN, 14, Font.BOLD);
Document document = new Document();
PdfWriter.getInstance(document, output);
document.open();
//Writing document
Chunk preface = new Chunk("GERAL", fontHeader);
document.add(preface);
Calendar cal = Calendar.getInstance();
cal.setTime(current.getData());
int year = cal.get(Calendar.YEAR);
int month = 1 + cal.get(Calendar.MONTH);
int day = cal.get(Calendar.DAY_OF_MONTH);
String dateStr = day+"/"+month+"/"+year;
Paragraph dataAndHour = new Paragraph(dateStr, fontLine);
document.add(dataAndHour);
document.close();
pdfContent = new DefaultStreamedContent(new ByteArrayInputStream(output.toByteArray()), "application/pdf");
} catch (Exception e) {
e.printStackTrace();
}
return "/views/view_atividade_pdf";
}
There is no exception on the server log.
I really aprecciate any help. Thanks in advance
I am working with JavaFX2.0.I need to show the thumbnail images in listview.I am writing the code as below.
ObservableList<BufferedImage> imageList = FXCollections.observableArrayList();
try {
for (int i = 1; i <= pdf.getPageCount(); i++) {
BufferedImage pageImage = pdf.getPageAsImage(i);
imageList.add(pageImage);
} catch (PdfException e) {
_logger.error("Error :" + e.getMessage());
}
thumbnailsList.setItems(imageList);
Here thumbnailsList is the fx:id of the listview.But if i use this code i am getting image object and not an image.Can any one tell me that how can i get the image in listview.
Thank You.
You could use a sample from
http://docs.oracle.com/javafx/2/ui_controls/list-view.htm
which is called "Example 11-4 Creating a Cell Factory".
You have to set custom cell factory. And instead of Rectangle, put an ImageView there.
I'm uploading image to server and when image is uploaded it should show me a thumb of uploaded image. Thumbnail is not saved on hard disc I use InputStream and OutputStream. For upload i'm ustig tomahawk.
my index.jsp:
<h:form id="uploadForm" enctype="multipart/form-data">
<t:inputFileUpload id="fileupload"
accept="image/*"
storage="file"
value="#{fileUpload.uploadedFile}"
styleClass="fileUploadInput"
required="true"
validator="epacient.FileUploadValidator"
requiredMessage="Obvezna izbira datoteke."
/>
<br />
<h:message for="fileupload" infoStyle="color: green;"
errorStyle="color: red;" />
<br />
<h:commandButton value="Upload" id="fileUploadButton"
action="#{fileUpload.upload}" />
<h:message for="uploadForm" style="color: red;" />
<h:graphicImage value="#{fileUpload.thumb}"
rendered="#{fileUpload.uploaded}" />
</h:form>
fileUpload.upload calls function String preview()
private String thumb ;
public String preview() throws IOException{
HttpServletResponse response = (HttpServletResponse)FacesContext
.getCurrentInstance().getExternalContext().getResponse();
try {
FacesContext context = FacesContext.getCurrentInstance();
Map requestMap = context.getExternalContext().getApplicationMap();
byte[] bytes = (byte[])(requestMap.get("fileupload_bytes"));
// returns byte[]
byte[] testByte = createThumbnail(bytes, 200);
// here thumbnail is created
} catch (Exception ex) {
ex.printStackTrace();
}
}
createThumbnail:
public static byte[] createThumbnail( byte[] orig, int maxDim) {
try {
ImageIcon imageIcon = new ImageIcon(orig);
Image inImage = imageIcon.getImage();
double scale = (double) maxDim / (double) inImage.getWidth(null);
int scaledW = (int) (scale * inImage.getWidth(null));
int scaledH = (int) (scale * inImage.getHeight(null));
BufferedImage outImage = new BufferedImage(scaledW, scaledH, BufferedImage.TYPE_INT_RGB);
AffineTransform tx = new AffineTransform();
if (scale < 1.0d) {
tx.scale(scale, scale);
}
Graphics2D g2d = outImage.createGraphics();
g2d.drawImage(inImage, tx, null);
g2d.dispose();
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(outImage, "JPG", baos);
byte[] bytesOut = baos.toByteArray();
return bytesOut;
} catch (IOException e) {
System.out.println("Erro: " + e.getMessage());
e.printStackTrace();
}
return null;
}
Now I have my thumbnail but it is in byte[] can any body tell me how to show my thumb with <h:graphicImage> tag? Or any other way.
Thank you !
The images counts each as a separate request. You cannot process both the HTML response (of JSF) and the image in a single request/response cycle. You need to store the image/thumb somewhere in a datastore which lives longer than a request, e.g. the server's local disk file system (temp folder? webcontent folder?), or a database (temp table?), or in the session.
First, replace
<h:graphicImage value="#{fileUpload.thumb}" ...
by
<h:graphicImage value="thumbs/#{fileUpload.thumbId}" ...
so that it get generated as
<img src="thumbs/123" ...
(the src should namely point to a valid URL)
Then, create a HttpServlet which is mapped on an url-pattern of /thumbs/* and implement doGet() roughly like follows:
Long thumbId = Long.valueOf(request.getPathInfo().substring(1)); // 123
byte[] thumb = getItFromDiskOrDatabaseOrSessionByThumbId(thumbId);
String filename = getOriginalFilenameOfUploadedImageOrInventOne();
response.setContentType(getServletContext().getMimeType(filename));
response.setContentLength(thumb.length);
response.setHeader("Content-Disposition", "inline; filename=\"" + filename + "\"");
BufferedInputStream input = null;
BufferedOutputStream output = null;
try {
input = new BufferedInputStream(new ByteArrayInputStream(thumb));
output = new BufferedOutputStream(response.getOutputStream());
byte[] buffer = new byte[8192];
int length;
while ((length = input.read(buffer)) > 0) {
output.write(buffer, 0, length);
}
} finally {
if (output != null) try { output.close(); } catch (IOException logOrIgnore) {}
if (input != null) try { input.close(); } catch (IOException logOrIgnore) {}
}
That's it. More servlet hints can be found in this article.
The graphicImage tag generates an img tag in the HTML response. So you need to provide the URL of an image in the value attribute of the graphicImage tag, which will correspond to the src attribute of the img tag.
You can either:
Write the thumbnail on the filesystem in a path that is accessible form the outside through HTTP. You can then reference the image directly in the value attribute in the graphicImage, e.g. /myapp/thumbnail/12345.
Write a servlet that serves the image when requested. The servlet can either read the image from memory (HttpSession), the filesystem, or a database, or generate it each time. In this case you need to pass a parameter to the servlet, e.g. /myapp/thumbnail.do?filename=12345
In short, you will need to store your byte[] thumbnail somewhere (session, filesystem, database), to be able to serve it as regular resource, either directly or through a servlet.
Richfaces has abstracted this for you. Check <a4j:mediaOutput> - you just write your byte[] to an OutputStream provided by the component.
Thanks ewernli. I've reused your createThumbnail util method. I added this little enhancement so that the original image is returned if its width is less than the stipulated maxDim width. I did this because I ran into a situation where the method returned an image that was bigger than the original, padded with black pixels.
ImageIcon imageIcon = new ImageIcon(orig);
Image inImage = imageIcon.getImage();
int origWidth = inImage.getWidth(null);
if(origWidth < maxDim) {
return orig;
}
...