Does qx.ui.container.Resizer send events? - events

Is it possible to get some events with current size during resizing of the qx.ui.container.Resizer?
The resize event is not fired nor changeWidth.

I found a solution for my problem:
To get resize events during resizing process one firstly need to get resizing frame widget: qx.ui.container.Resizer _getResizeFrame() (this is protected function so writing own class which inherits from Resizer may be needed). Then adding listener for resize event will do the job.

Try this. It works fine in the playground.
var resizer = new qx.ui.container.Resizer().set({
width: 200,
height: 100
});
resizer.setLayout(new qx.ui.layout.Canvas());
var text = new qx.ui.form.TextArea("Resize me\nI'm resizable");
resizer.add(text, {edge: 0});
this.getRoot().add(resizer);
resizer.addListener('resize',function(e){
this.debug(resizer.getWidth());
},this);
You can try the demo in the qooxdoo playground

Related

OpenTok Screenshare - View full screen on subscriber side

I am using OpenTok v2.14.0.0, for screen share. Streaming etc are working seamlessly. The only problem is, on the subscriber side, I am not able to see the complete Publisher's screen. On resizing the subscriber window (in which the streaming is happening), the video inside stretches maintaining the aspect ratio.
I have tried changing my WPF UI element control to Grid and UniformGrid, but did not work. Hence, I believe this has something to do with my subscriber's configurations. On js side, there is a property fitMode, I am looking for a similar setting on windows side.
Here is the video where one can see that the publisher (he is publishing his chrome window), gets stretched outside the bounds.
xaml control:
<Grid x:Name="SubscriberGrid"/>
when I receive the stream:
var uiElement = ((UIElement)subscriber.VideoRenderer);
SubscriberGrid.Children.Add(uiElement);
I had this issue and for me it was because I had set the fitMode property to 'cover' instead of 'contain'. Changing fitMode to 'contain' fixed the issue:
var subscriber = session.subscribe(event.stream, 'subscribers', {
insertMode: 'append',
width: "100%",
height: "100%",
fitMode: "contain"
}, function (error) {
if (error) {
console.error('Failed to subscribe', error);
}
});

Kendo UI chart not resizing?

I have a Kendo ui chart which displays a column chart from a dynamic data source. But occassionally, the chart opens half the size of the available space. When I click on some links or change the date, it resizes itself. Any idea why its causing it?
In the datasource change event, its showing the container div's width as 0 when it shows this behaviour. I can give more details if needed
I tried the refresh method as given in one of the answers but its not of help
This happens generally when you open a chart in a animated window before it is finished expanding.
My suggestion is to redraw the chart when you are sure everything is loaded and fully opened.
$("#myChart").data("kendoChart").redraw();
If you have not disabled animations you may want to do that before this and re-enable them after.
$("#myChart").data("kendoChart").options.transitions = false;
When you have got all the necessary data in the controller you can call a Javascript CallBack function in which you can set the transition to false and then redraw the chart and set transition to true, also you can hide the chart by default and make it visible on Javascript CallBack function
Try this
var chart=$("#chart").data("kendoChart");
//to check the chart exist or not if exist then redraw it..
if(chart)
{
chart.redraw();
}
Thanks
This is what I using for my charts:
if($("#areaChart").data("kendoChart")) {
$("#areaChart svg").width(Number($('.k-content').width()));
$("#areaChart svg").height(Number($('.k-content').height()));
$("#areaChart").data("kendoChart").refresh();
}
Taken from here
Have you checked the resize() Method?
I fixed it by adding a small delay after calling the CreateChart() function as below:
CreateChart(this.id, this.id + " this week", "week", null);
sleep(1000);
its working fine now
$("#divSensingData").kendoChart({
chartArea: {
width: 900,
height: 500
},
i did face same problem after resize kendo chart.
$(window).resize(function () { $("#chart").data("kendoChart").refresh(); });
it's working

How to dispatch scroll UIEvent on an IFrame in a Firefox addon?

I need to emulate the scroll event on an iframe in my Firefox addon. I used the code below, but it doesn't work and iframe scroll won't move. And another question for me is how initUIEvent knows which direction scroll event must be dispatched for? (Horizontally or Vertically)
var windows = require("window-utils"),
selectedBrowser = windows.activeBrowserWindow.gBrowser.selectedBrowser,
contentWindow = selectedBrowser.contentWindow,
document = selectedBrowser.contentDocument;
obj = document.getElementById("scrollable_frame");
evt = document.createEvent("UIEvents");
evt.initUIEvent("scroll", true, true,
windows.activeBrowserWindow.gBrowser.selectedBrowser.contentWindow, 2);
obj.dispatchEvent(evt);
I think that your code dispatches the event just fine. But it doesn't help solve your problem because it's the frame scrolling that triggers the scroll event, not the other way round. If what you need is to scroll the frame then you can choose the direct route: use window.scrollByLines or window.scrollByPages:
obj = document.getElementById("scrollable_frame");
obj.contentWindow.scrollByLines(1);
To scroll horizontally you can use window.scrollBy. This code will also trigger the scroll event as a side-effect.

Using headerPullView in appcelerator

I'm using a tableView with a headerPullView.
It works fine, but i want to show the headerPullView when i open the tab so the user can see that new data is loaded.
Can't find any information on google or appcelerator docs.
I only found this: http://developer.appcelerator.com/blog/2010/05/how-to-create-a-tweetie-like-pull-to-refresh-table.html
but this only shows how to update when the tab is already loaded. I'm looking for a way to show that loading headerPullView when i open that window.
You can't simulate a scroll with the headerPullView but you can fire an event of scroll.
Anyways what I would advise is to create a headerView and set the table height smaller and away from the top. Attache a listener to the open event.
var headerView = Ti.UI.createView({
top: 0,
height: 60
});
Ti.UI.currentWindow.addEventListener('open', function(e) {
tableView.top = 60;
tableView.height = 400;
Ti.UI.currentWindow.add(headerView);
Ti.UI.currentWindow.add(tableView);
});
Then just set it all back the way you need it when you scroll the table the first time.
var scrolled = 0;
tableView.addEventListener('scroll', function(e) {
if(!scrolled) {
tableView.top = 0;
tableView.height = 460;
Ti.UI.currentWindow.remove(headerView);
scrolled = 1;
}
// scroll code
});
I'm not so sure why you need to do this however. After facebook replaced "shake to refresh" with this method I've started seeing it in almost all table apps and have come to just expect it. I assume many other users feel the same way about this?
you can use listView instead of tableView, it supports pull view already
check this
http://docs.appcelerator.com/titanium/3.0/#!/guide/ListViews-section-37521650_ListViews-PulltoRefresh
or you can use this modules
https://github.com/jolicode/Alloy-PullToRefresh

GoogleMapAPIv3 Streetview Loaded Event

im creating a website and am using a streetview panorama on it. Now some of my target users may not have the fastest internet available so what i want to do is display a pretty loading screen while the panorama fully loads. however i couldnt find any events that fire once a streetview panorama loads.
Is there one? or if not, how would i create a faux event that fires when a panorama is fully loaded
Thanks
As noted on this question the StreetView SDK doesn't fire any event when the street view is finished loading.
I do it and it works like a charm.
There is actually one way to achieve "loaded" event by using the Streetview service like this:
// Handle loaded-like event
var sv = new google.maps.StreetViewService();
sv.getPanorama({location: camera.eye, radius: 50}, function (data, status) {
if (status !== 'OK') {
console.log(`Streetview processSVData status = ${status}`);
return;
}
alert(`Streetview loaded! — processSVData status = ${status}`);
}

Resources