Using JSF and PrimeFaces I try to use java script external library (Highcharts) in order to display an image generated dynamically. Data used by the image is loaded from database. Image should be refreshed every n seconds.
In JSF I know that I can run java script function by
< h:outputScript name="js/volatilityChart.js">
but I have to somehow put parameters in order to appropriately display this function. I know there is possibility of calling execute() from RequestContext but I have no idea how to display an image generated in such a way. If knew I could probably use p:poll in order to refreshing it. I've searched the web but couldn't find proper solution.
Any advice will be appreciated.
Edited:
As followed BalusC suggestion and after some digging I managed to create something that suits me (simply speaking accessing bean fields and methods inside javascript code within xhtml). In XHTML I put:
<script>
//<![CDATA[
$(function () {
$('#container_portfolio').highcharts('StockChart', {
chart: {
alignTicks: false
},
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 1
},
title: {
text: ''
},
series: [{
type: 'column',
name: 'Volatility',
data: #{statisticsView.getStatistic()},
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}]
});
});
//]]>
</script>
Above function works and gives what I expected. However, I would like to insert many similar calls. Is it somehow possible to extract them to separate files? It would dramatically increase manageability of the code. Thanks in advance.
Related
I would like to know how can I minimize a prime ng dialog box. I read this but it is not working in Angular 7.
Also, as per their site here, the property minimizable is not present
Also I am using the dialogService of primeng. Is there any way that I can minimize the dialog and continue working.
Demo code for reference where I am using dialog service to open the angular component:
showPopup(header: string, groupName: string, controlName: string) {
const dialogRef = this.dialogService.open(StandardParagrahPopupComponent, {
header: header,
width: '60%',
closable: true,
data: {
groupName: groupName
}
});
dialogRef.onClose.subscribe(comments =>
this.onPopupClose(comments, controlName)
);
}
Minimize is not working in PrimeNG for Angular.
It is only working in Primefaces for JavaServletFaces.
The first link you provides leads to Primefaces Showcase, the second to PrimeNG showcase. So it is correct that on the second link you can´t find the minimize feature.
I am trying to create multiple jBoxes using the data-attributes and I want to feed them with content from other elements.
I assumed this wouldn't be possible (out of the box), so I used a data-jbox-content-from attribute which is supposed to be point to the element with the content.
But I'm confused now: I know that I should be creating a single jBox only - but I do not see how that is doable when on the other hand I need distinct calls per element to provide the content?
And to confirm my uncertainty...the fiddle isn't working. So I hope someone will find a way to do this either my fixing bugs in my "ugly" approach (eaching over the controls) or a smarter use of JS/jBox.
$("[data-jbox-content-from]").each(function() {
new jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip_" + $(this).attr("id"),
getTitle: "data-jbox-title",
content: $($(this).attr("data-jbox-content-from")),
attach: "#" + $(this).attr("id")
}).attach();
});
Complete fiddle here
You approach is correct. But you need to put your code into domready:
$(document).ready(function () {
$("[data-jbox-content-from]").each(function() {
new jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip_" + $(this).attr("id"),
getTitle: "data-jbox-title",
content: $($(this).attr("data-jbox-content-from")),
attach: "#" + $(this).attr("id")
});
});
});
Also notice that I removed the .attach() method after new jBox. jBox does that when it initializes.
See updated fiddle: https://jsfiddle.net/StephanWagner/kqgxcda1/1/
I'm using Kentico 9 and I'd like to be able to use different CK Editor style sets on different pages. I have added a style set to the styles.js file as follows.
CKEDITOR.stylesSet.add("mystyles", [{ name: "testone", element: "p" }]);
Then in the page I've added some JS as per the CK Editor web site.
if (CKEDITOR.currentInstance) {
CKEDITOR.currentInstance.config.stylesSet = "mystyles";
}
When I load the page containing the CK Editor, the style drop down contains the default style set, not the custom one I defined.
Does anyone know how to achieve this?
If I remember it right you need to define your new toolbarset in config.js (CMSAdminControls/CKEditor/config.js) dropdown.
Something like:
config.toolbar_Basic = [
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'InsertLink', 'Unlink']
];
The other thing - you need to add new option to this dropdown in Webparts application > EditableText webpart> Properties > HTMLAreaToolbar > DataSource
Here's the documentation you need to read.
The dropdown styles are defined in CMS\CMSAdminControls\CKeditor\styles.js, such as:
{ name: 'Italic Title', element: 'h2', styles: { 'font-style': 'italic' } },
You define the name of the style (the name appears in the dropdown), and then the element and style(s) that should be applied.
After editing the file, make sure you clear your browser cache.
As most Kentico admin interface pages are nested and iframe'd, the caching is pretty agressive, and your styles might not appear until cache is cleared.
Well, it's just javascript after all, so you can simply check the url in some if statement or in some switch-case and then apply styles you need. Do you need some code example? You should be able to find many of them on the internet :)
Here is how I solved my issue. I added the following to styles.js:
CKEDITOR.stylesSet.add("my-styles", [
{ name: "Paragraph", element: "p" },
{ name: "Heading 1", element: "h1" }
]);
Then, in the master page for the area of my site that needs to use the "my-styles" style set, I added:
<script>window.ckstyleset = "my-styles"</script>
Finally, in config.js I added:
var styleset = window.ckstyleset ? window.ckstyleset : "default";
config.stylesSet = styleset;
Using this approach I was able to customise the styles listed in the drop down depending on what master page was is use.
I'm displaying a list of articles in a page that are fetched using the Ember Data RESTAdapter. I need to implement a bootstrap'esque paginator (see: http://twitter.github.com/bootstrap/components.html#pagination) and cant seem to find a sane pattern for returning pagination data such as, page count, article count, current page, within a single request.
For example, I'd like the API to return something like:
{
articles: [{...}, {...}],
page: 3,
article_count: 4525,
per_page: 20
}
One idea was to add an App.Paginator DS.Model so the response could look like:
{
articles: [{...}, {...}],
paginator: {
page: 3,
article_count: 4525,
per_page: 20
}
}
But this seems like overkill to hack together for something so trivial. Has anyone solved this problem or found a particular pattern they like? Is there a simple way to manage the RESTAdapter mappings to account for scenarios such as this?
Try to use Ember Pagination Support Mixin and provide your own implementation of the following method. Instead of loading all the content, you can fetch the required content when the user is navigating the pages. All what you need initially is the total account of your records.
didRequestRange: function(rangeStart, rangeStop) {
var content = this.get('fullContent').slice(rangeStart, rangeStop);
this.replace(0, this.get('length'), content);
}
With ember-data-beta3 you can pass a meta-property in your result. The default RESTSerializer looks for that property and stores it.
You can access the meta-data like this:
var meta = this.get("store").metadataFor("post");
If you are not able to change the JSON returned from the server you could override the extractMeta-hook on the ApplicationSerializer (or any other Model-specific serializer).
App.ApplicationSerializer = DS.RESTSerializer.extend({
extractMeta: function(store, type, payload) {
if (payload && payload.total) {
store.metaForType(type, { total: payload.total }); // sets the metadata for "post"
delete payload.total; // keeps ember data from trying to parse "total" as a record
}
}
});
Read more about meta-data here
I am using Struts 2 and want to include an editable server side paging and sorting grid.
I need to sublclass the QueryReadStore to implement the write and notification APIs. I do not want to inlcude server side REST services so i do not want to use JsonRest store. Any idea how this can be done.? What methods do i have to override and exactly how. I have gone through many examples but i am not getting how this can be done exactly.
Also is it possible to just extend the ItemFileWriteStore and just override its methods to include server side pagination? If so then which methods do i need to override. Can i get an example about how this can be done?
Answer is ofc yes :)
But do you really need to subclass ItemFileWriteStore, does it not fit your needs? A short explaination of the .save() follows.
Clientside does modify / new / delete in the store and in turn those items are marked as dirty. While having dirty items, the store will keep references to those in a has, like so:
store._pending = { _deletedItems: [], _modifiedItems: [], _newItems: [] };
On call save() each of these should be looped, sending requests to server BUT, this does not happen if neither _saveEverything or _saveCustom is defined. WriteStore simply resets its client-side revert feature and saves in client-memory.
See source search "save: function"
Here is my implementation of a simple writeAPI, must be modified to use without its inbuilt validation:
OoCmS._storeAPI
In short, follow this boiler, given that you would have a CRUD pattern on server:
new ItemFileWriteStore( {
url: 'path/to/c**R**ud',
_saveCustom: function() {
for(var i in this._pending._newItems) if(this._pending._deletedItems.hasOwnProperty(i)) {
item = this._getItemByIdentity(i);
dxhr.post({ url: 'path/to/**C**rud', contents: { id:i }});
}
for(i in this._pending._modifiedItems) if(this._pending._deletedItems.hasOwnProperty(i)) {
item = this._getItemByIdentity(i);
dxhr.post({ url: 'path/to/cr**U**d', contents: { id:i }});
}
for(i in this._pending._deletedItems) if(this._pending._deletedItems.hasOwnProperty(i)) {
item = this._getItemByIdentity(i);
dxhr.post({ url: 'path/to/cru**D**', contents: { id:i }});
}
});
Now; as for paging, ItemFileWriteStore has the pagination in it from its superclass mixins.. You just need to call it with two setups, one being directly on store meaning server should only return a subset - or on a model with query capeabilities where server returns a full set.
var pageSize = 5, // lets say 5 items pr request
currentPage = 2; // note, starting on second page (with *one* being offset)
store.fetch({
onComplete: function(itemsReceived) { },
query: { foo: 'bar*' }, // optional filtering, server gets json urlencoded
count: pageSize, // server gets &count=pageSize
start: currentPage*pageSize-pageSize // server gets &start=offsetCalculation
});
quod erat demonstrandum