So I'm trying to get the orientationchange event in Adobe DTM to work and then fire an Adobe Analytics event. The built in orientationchange event in DTM is not working for me so I'm trying to implement my own solution. The code I've produced is:
(function () {
var width = screen.width,
height = screen.height;
setInterval(function () {
if (screen.width == height || screen.height == width) {
width = screen.width;
height = screen.height;
alert("Orientation Changed");
}
}, 50);
}());
This is working as long as I place it in the JavaScript section. As soon as I place it in the Adobe Analytics Custom Code section it ceases to work. Is there a way that I can get an Adobe Analytics event to fire from the JavaScript section (adding s.events="event11" didn't work for me) or get this code to work in the Adobe Analytics custom code section?
In order for data to be sent to Adobe Analytics, an image request must be fired. If you would like to send a specific event on orientation change, be sure to send an s.tl() request that triggers with the orientation event.
Keep in mind that this can potentially increase server calls to your site if someone decides they want to constantly change screen orientation.
Related
I'm building an Electron app, and the way I have the window sizes configured is to base itself on % of the monitor/display dimension.
However I quickly noticed an issue when the user has more than one monitor. The initial window dimensions are calculated and never re-calculated for when the user changes to the second monitor, and due to this in the case that the monitors aren't the same dimension, the window has the wrong size on the other monitor.
Essentially what I'm looking for here is any sort of event which will detect when the user changes the monitor he/she is using the app on, and in this way I will be able to re-calculate the window size based on the new monitor dimension.
You can use the move event of the BrowserWindow in combination with the screen API like such:
const {app, BrowserWindow} = require("electron");
let mainWindow;
app.on("ready", function() {
mainWindow = new BrowserWindow();
// Screen module must be imported after app is ready (as per docs)
const {screen} = require("electron");
mainWindow.on("move", () => {
const bounds = mainWindow.getBounds();
const currentDisplay = screen.getDisplayNearestPoint({x: bounds.x, y: bounds.y});
// Perform your actions here..
console.log(currentDisplay);
});
});
In the event handler, you can then obtain the display metrics and perform any actions you need based on that.
Note that the move event fires very frequently. You may check out the moved event or implement some form of debouncing yourself if needed.
I'm having some problems with how long a Titanium app I am making
takes to load a ScrollView.
Titanium SDK: 3.3.0.GA
I decided to run a test, comparing how long it would take for a titanium app
to load a similar view, and a native built version (iOS).
The test was loading 1000 textfields into a ScrollView.
For the natively built app, it took about 0.850 seconds to load
on an iPad mini (based on 3 trials).
For the titanium built app, it took about 59.3 seconds to load
on the same iPad mini (based on 3 trials).
Obviously, this is a significant difference. My code for the
Titanium build is below. Is there something I'm missing? Some option that
is making the ScrollView so slow?
59 seconds compared to 0.850 is pretty significant.
index.xml
<Alloy>
<Window class="container" >
<ScrollView id="scrollView" layout="vertical"></ScrollView>
</Window>
</Alloy>
index.tss
".container": {
backgroundColor:"white"
}
index.js
var startTime = new Date();
startTime = startTime.getTime() / 1000;
$.index.addEventListener('postlayout', calculateTimeToLoad);
loadThousandTextFields();
function calculateTimeToLoad() {
$.index.removeEventListener('postlayout',calculateTimeToLoad);
var endTime = new Date();
endTime = endTime.getTime() / 1000.0;
Ti.API.info("Total time taken:" + (endTime - startTime) + " seconds");
}
function loadThousandTextFields() {
for(var i = 0; i < 1000; i++) {
$.scrollView.add(Ti.UI.createTextField({
hintText: "Hint text"
}));
}
}
$.index.open();
Note: I am aware of Titanium's ListView, however, based on my experiments with it, it looks like it won't
work too well with the app I am making, as I need interaction between my various components and the ability to change
them based on that interaction. (For example, having a switch that, upon being turn off, would
clear a nearby textfield, or fill it with some text. ListViews seem to be very slow in updating views like that. If I'm wrong, please let me know).
Further Note: I tried running the same test on titanium sdk 3.2.3, and it took about 6 seconds as opposed to 59, on the same iPad mini. However, in the app that I am making, the scrollview actually took longer to load.
Thanks
In Mobile Application development. You have always remember Use low Memory or need to always clear unused memory.
Here you add approx 1000 textView at a time. That's why. your app going slow.
Please you try this Reference. In this example. when you scroll you table view then it will add next some row. and this will adding one by one according your display.
Example :- https://gist.github.com/mschmulen/805283
If a YouTube video is embed in a web page is there a way to have a small size (example 200 x 150) then have it re-size larger (example 400 x 300) when it is played. An example would be when a video is received in Gmail.
You can try binding a click event to the tag that will then resize the element to a larger size, but I'm guessing that the flash video player will hijack the click event and not bubble it up to the DOM.
Otherwise, you can have a poster image placeholder, and when that is clicked, you replace the image with the actual video player at whatever size you want.
You could try to let javascript listen to the player's onStateChange event, when state changes to "1" (playing), you change the width and height to the new size. Maybe something like this could work:
var player = document.getElementById("youtube-player");
function onPlayerStateChange(evt) {
if (evt.data == "1") {
player.style.width = "400px";
player.style.height = "300px";
}
}
player.addEventListener("onStateChange", onPlayerStateChange);
You can play around with the javascript api here: https://developers.google.com/youtube/youtube_player_demo And here is the reference: https://developers.google.com/youtube/iframe_api_reference#Events This assumes it's an embed on your on web page, I don't really get what you mean with "... video is recieved in Gmail".
I have a problem. I did the first example (Alternativa for dummies part I) and it runs fine but only fills 1/4 of the screen when using Air for iOS. How can I change the resolution?
Here is a screenshot:
http://tinypic.com/r/34yo86q/6
Are you using this code to set up the camera?
camera.view= new View (stage.stageWidth, stage.stageHeight);
The problem comes from the fact that those values are not constant during the whole life of the app. When the app starts, it's possible that the stage resizes, and thus you wouldn't be getting the right values.
First you could set those properties (I do this in 99% of my AS3 projects).
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
Then add an event listener for stage resize, and in the handler write the stageWidth and stageHeight values to some vars you could then use to init Alternativa's camera. Or maybe wait for the event to trigger before setting up the camera.
stage.addEventListener(Event.RESIZE, checkSize);
The handler
public function checkSize(e:Event):void {
realWidth = stage.stageWidth;
realHeight= stage.stageHeight;
}
Here is Adobe's documentation on the event, with examples on how to use it.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Stage.html#event:resize
Is anyone able to actually make it work properly in Flex SDK 4.6?
Here's a short snippet :
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
addedToStage="onAddedToStage(event)"
title="Title">
<fx:Script>
<![CDATA[
private function onAddedToStage(event:Event):void {
if (stage.autoOrients) {
stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGING, orientationChanging, false, 0, true);
}
}
private function orientationChanging(event:StageOrientationEvent):void {
if (event.afterOrientation == StageOrientation.DEFAULT || event.afterOrientation == StageOrientation.UPSIDE_DOWN) {
event.preventDefault();
}
}
]]>
</fx:Script>
</s:View>
What I'm trying to achieve is to support Landscape mode in both orientations, so if user turns the device 180 degress, the screen should also rotate. But there should be no action at all, when user rotates the device to one of portrait orientations. Instead, I'm seeing width changes to navigator action bar and sometimes content in portrait orientations, so apparently preventing the event is not enough. I'm using the "official" way Adobe suggests, but the problem is that it's not working very well. Granted, the stage does not change, but it seems that there's something firing in navigator anyway, since you can see the action bar width changing.
I had some success with explicitly setting layoutbounds to fixed width in handler method - this prevents changing the actionbar width, but it's only a temporary solution - if the view is a subject to a transition, or some other redraw - it will again render with bad sizes. As if there was something below that was telling it that it's in portrait mode, even though I'm trying to prevent it.
Before you detonate with some silly ideas like "autoOrient = false", don't. It's clearly not a solution for this problem. Obviously it's a bug with Flex SDK - did anyone find a way to fix it or a stable workaround?
EDIT: apparently others bumped into similar issue:
- http://forums.adobe.com/message/3969531 (the main topic is about something else, but read magic robots's comment)
- http://forums.adobe.com/message/4130972
I'm not sure if this is the right one, did I do something wrong in the end, but after a lot of struggle, I've found this one to be stable solution:
private function onAddedToStage(event:Event):void {
if (stage.autoOrients) {
stage.removeEventListener(StageOrientationEvent.ORIENTATION_CHANGING, orientationChanging);
stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGING, orientationChanging, false, 100, true);
}
}
private function orientationChanging(event:StageOrientationEvent):void {
event.stopImmediatePropagation();
if (event.afterOrientation == StageOrientation.DEFAULT || event.afterOrientation == StageOrientation.UPSIDE_DOWN) {
event.preventDefault();
}
}
First thing to note is that addedToStage fires few times (2-3) in mobile application. I don't know why, there's no addChild in my code, obviously. Maybe the AIR runtime does something else. So, to avoid adding unnecessary amount of handlers, the common technique is to remove handler first - it won't do anything, if such handler is not yet registered, but if there is, it will remove it, which will maintain the handler count on 1.
Second thing is the priority of the event - it won't work on 0, it has to be set on something big, to launch before stuff in AIR runtime.
Last thing - event.stopImmediatePropagation() - now, that we're the first to handle the event, we cant prevent this event to be sent further up in this particular scenario.
This together makes the orientation preventing working perfectly - for me the landscape and the reversed landscape (rotated_left, rotated_right) were working and transitioning, while portrait modes did not affect the view at all.
Now, there's danger here - you might want to remove the listener upon leaving the view (on transition animation end, view deactivate or something), because stopImmediatePropagation will prevent the event to be handled in other parts of your application.
I hope Adobe (or Apache now, actually) will take a closer look at this problem and trace my solution.
EDIT
There remaisn a last issue with this solution, which is if application starts while device is in DEFAULT or UPSIDE_DOWN orientation, in this case application will be in portrait mode.
To fix this, a solution is to change Aspect Ratio within addedToStage handler:
if(Stage.supportsOrientationChange) {
stage.setAspectRatio(StageAspectRatio.LANDSCAPE);
}
So I had the same problem you had. I think I finally figured out the solution. Heres what I did:
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
...blahblahblah...
width="1024"/>
protected function tabbedviewnavigatorapplication2_applicationCompleteHandler(event:FlexEvent):void {
stage.autoOrients=true;
preventOrient();
}
private function preventOrient():void {
if (stage.autoOrients) {
stage.removeEventListener(StageOrientationEvent.ORIENTATION_CHANGING, orientationChanging);
stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGING, orientationChanging, false, 100, true);
}
}
private function orientationChanging(event:StageOrientationEvent):void {
if(event.afterOrientation == StageOrientation.DEFAULT || event.afterOrientation == StageOrientation.UPSIDE_DOWN || event.afterOrientation == StageOrientation.UNKNOWN) {
event.preventDefault();
}
}
Worth noting is that in the application complete handler I set stage.autoOrients to true because in the app.xml file I have it set to false, due to having a splash screen and not wanting users to re-orient the screen during that time. Really the only thing I did different is account for the StageOrientation.UNKNOWN and prevent whatever that would do, set the width to 1024(for the iPad screen, might be different for other tablet devices) in the main mxml file, and removed the stopimmediatepropagation. Hope this helps.