For some reason the following html doesnt work inside safari on iphone 4.
Test Link</div>
it works on safari inside a regular browser. I am using senchatouch2 framework.
Thanks
The only way you can add events to dom elements in Sencha touch 2.0 that I know of, is to use their element events api. this is an example of it. Alot of events are available like tap, double tap and so on.
var el = Ext.get("test");
el.addListener( 'tap', function(e){
alert('it works!');
});
This goes after the panel is rendered.
I propose that you do not use such inline event handlers.
Not only is it better to separate markup and behavior, but you should let sencha touch handle the messy business of unifying events across browsers.
At the very least give your tag an id and do Ext.get('id').on('tap', function(){...})
But still better look into MVC features to avoid such low-level code altogether.
Related
We are working on tracking a site which has components built using Shadow DOM concepts, when we are creating a rule in launch to add tagging to these components it’s not working.
Can you guide us with best practice on tagging components in Shadow DOM?
I found unanswered questions about google analytics Google analytics inside shadow DOM doesn't work is this true for adobe analytics also?
Best Practice
Firstly, the spirit of using Shadow DOM concepts is to provide scope/closure for web components, so that people can't just go poking at them and messing them up. In principle, it is similar to having a local scoped variable inside a function that a higher scope can't touch. In practice, it is possible to get around this "wall" and have your way with it, but it breaks the "spirit" of shadow DOM, which IMO is bad practice.
So, if I were to advise some best practice about any of this, my first advice is to as much as possible, respect the spirit of web components that utilize shadow DOM, and treat them like the black box they strive to be. Meaning, you should go to the web developers in charge of the web component and ask them to provide an interface for you to use.
For example, Adobe Launch has the ability to listen for custom events broadcast to the (light) DOM, so the site developers can add to their web component, create a custom event and broadcast it on click of the button.
Note: Launch's custom event listener will only listen for custom event broadcasts starting at document.body, not document, so make sure to create and broadcast custom events on document.body or deeper.
"But the devs won't do anything so I have to take matters into my own hands..."
Sadly, this is a reality more often than not, so you gotta do what you gotta do. If this is the case, well, Launch does not currently have any native features to really make life easier for you in this regard (for the "core" part of the below stuff, anyways), and as of this post, AFAIK there are no public extensions that offer anything for this, either. But that doesn't mean you're SoL.
But I want to state that I'm not sure I would be quick to call the rest of this answer "Best Practice" so much as "It's 'a' solution..". Mostly because this largely involves just dumping a lot of pure javascript into a custom code box and calling it a day, which is more of a "catch-all, last resort" solution.
Meanwhile, in general, it's best practice to avoid using custom code boxes when it comes to tag managers unless you have to. The whole point of tag managers is to abstract away the code.
I think the TL;DR here is basically me reiterating this something that should ideally be put on the site devs' plate to do. But if you still really need to do it all in Launch because ReasonsTM, keep on reading.
'A' Solution...
Note: This is a really basic example with a simple open-mode shadow DOM scenario - in reality your scenario is almost certainly a lot more complex. I expect you to know what you're doing with javascript if you're diving into this!
Let's say you have the following on the page. Simple example of a custom html element with a button added to its shadow DOM.
<script>
class MyComponent extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({
mode: 'open'
});
var button = document.createElement('button');
button.id = 'myButton';
button.value = 'my button value';
button.innerText = 'My Button';
this._shadowRoot.appendChild(button);
}
}
customElements.define('my-component', MyComponent);
</script>
<my-component id='myComponentContainer'></my-component>
Let's say you want to trigger a rule when a visitor clicks on the button.
Quick Solution Example
At this point I should probably say that you can get away with doing a Launch click event rule with query selector my-component#myComponentContainer with a custom code condition along the lines of:
return event.nativeEvent.path[0].matches('button#myButton');
Something like this should work for this scenario because there are a lot of stars aligned here:
The shadow dom is open mode, so no hacks to overwrite things
There are easily identifiable unique css selectors for both light and shadow DOM levels
You just want to listen for the click event, which bubbles up and
acts like a click happened on the shadow root's light DOM root.
In practice though, your requirements probably aren't going to be this easy. Maybe you need to attach some other event listener, such as a video play event. Unfortunately, there is no "one size fits all" solution at this point; it just depends on what your actual tracking requirements are.
But in general, the goal is pretty much the same as what you would have asked the devs to do: create and broadcast a custom (light) DOM event within the context of the shadow DOM.
Better Solution Example
Using the same component example and requirement as above, you could for example create a rule to trigger on DOM Ready. Name it something like "My Component Tracking - Core" or whatever. No conditions, unless you want to do something like check if the web component's root light DOM element exists or whatever.
Overall, this is the core code for attaching the event listener to the button and dispatching a custom event for Launch to listen for. Note, this code is based on our example component and tracking requirements above. It is unique to this example. You will need to write similar code based on your own setup.
Add a custom js container with something along the lines of this:
// get the root (light dom) element of the component
var rootElement = document.querySelector('#myComponentContainer');
if (rootElement && rootElement.shadowRoot) {
// get a reference to the component's shadow dom
var rootElementDOM = rootElement.shadowRoot;
// try and look for the button
var elem = rootElementDOM.querySelector('button#myButton');
if (elem) {
// add a click event listener to the button
elem.addEventListener('click', function(e) {
// optional payload of data to send to the custom event, e.g. the button's value
var data = {
value: e.target.value
};
// create a custom event 'MyButtonClick' to broadcast
var ev = new CustomEvent('MyButtonClick', {
detail: data
});
// broadcast the event (remember, natively, Launch can only listen for custom events starting on document.body, not document!
document.body.dispatchEvent(ev);
}, false);
}
}
From here, you can create a new rule that listens for the custom event broadcast.
Custom Event Rule Example
Rule name: My Button clicks
Events
Extension: Core
Event Type: Custom Event
Name: MyButtonClick
Custom Event Type: MyButtonClick
Elements matching the CSS selector: body
Conditions
*None for this scenario*
From here, you can set whatever Actions you want (set Adobe Analytics variables, send beacon, etc.).
Note:
In this example, I sent a data payload to the custom event. You can reference the payload in any custom (javascript) code box with event.detail, e.g. event.detail.value. You can also reference them in Launch fields with the % syntax, e.g. %event.detail.value%.
I am very new to web based programming and have started with HTML5 from this week.
I have create a bunch of flow-chart diagrams on first canvas-1 programmatically by javascript and by using addflow (Lassange) HTML5 controls. Now I have another canvas-2 at its side on which I want the user to pick any given UI-control (from canvas-1) and drag-and-drop the same on canvas-2. BUT I am unable to achieve this.
I tried assigning draggable property to the programmatically created ui-control (canvas-1) and also made the canvas-1 draggable etc but I think this approach will not work. The UI-control does get dragged but ONLY within the boundaries of canvas-1. Now how do I ensure that an user can be able to do this... what should be my javascript coding approach at the html-page-behind?.
EDIT: Somebody who is acquainted with Lassalle's technologies -- 'AddFlow' HTML5 jscript component can be of more help here because I am using that HTML5 control to create two canvas and for filling the set of UI-controls as a 'pallet' into the canvas-1. But if somebody has achieved this through some native HTML5 javascripting or alike then still do reply.
In Safari on iOS, is there a CSS pseudo class for when a user is touching an element? Or do I have to use javascript?
Similar to how :hover works on desktop computers, it would be active while the finger is touching the element, and then be inactive as soon as the user stops touching the element.
CSS currently does not define any user-action pseudo-classes for touch paradigms.
You'll have to listen for events and handle them accordingly with JavaScript. In fact, Apple recommends this; see Handling Events in the Safari Web Content Guide for details. You'll want to look at the touchstart, touchend, touchmove and touchcancel events, for example.
Answered here: https://stackoverflow.com/a/8877902/520129
<body ontouchstart="">
...
</body>
Applied just once, as opposed to every button element seemed to fix
all buttons on the page. Alternatively you could use this small JS
library called '[Fastclick][1]'. It speed up click events on touch
devices and takes care of this issue too.
[1]:
http://assanka.net/content/tech/2011/08/26/fastclick-native-like-tapping-for-touch-apps/
I'm trying to setup automated unit tests for an iPhone application. I'm using a UIWebView and need to simulate clicks on different links. I've tried doing this with JavaScript, but it doesn't produce the same result as when I manually click on the links. The main problem is with links that have their target property set.
When you manually click on a standard "popup" link (e.g. <a href="http://example.com" target="_blank">), the UIWebView will ignore the click event and won't navigate to anything. If you then try clicking on this very same link automatically via the JavaScript dispatchEvent() method, the UIWebView will completely ignore the target attribute and will open up the link normally in the current page.
I need an my automatic unit testing to produce the exact same results as when you manually click a link.
I believe the only way for this automated unit test to work correctly is to simulate a mouse click at a specific x/y coordinate (i.e. where the link is located). Since the unit testing will only be used internally, private API calls are fine.
It seems like this should be possible since the iPhone app isimulate seems to do something similar.
Is there any way to do this in the framework?
I found a similar question titled Simulate mouse click to window instead of screen, however I'm guessing this method is only valid for OS X, and not for iPhone OS.
I suppose you could simulate the touches by calling the touchesBegan/touchesEnded methods directly on the UIView (check the UIResponder class).
The proper way to do this would be to construct your own UIEvent and then post this event to your UIApplication instance via its -sendEvent: method.
However, there doesn't appear to be a public API for constructing a UIEvent, so you might be out of luck.
Could you store the locations of the clicks in a data structure that you use in your tests and then simulate standard touch events as described here described here
--- Just spotted that you didn't have much luck with the example on this link. The only other options I can suggest would be to manipulate the html when running from a test to replace any _target links (you know that UIWebView handles these properly when clicking manually, so I think a small bodge is ok for the unit test?).
Nice walkthrough in this answer
For your specific case, it may be sufficient to test in the simulator and use a MacOS event generator to make the clicks.
The private calls for recording and sending events are part of GraphicServices/GSEvent.h with the standard use at your own risk disclaimers. Every UIEvent is really a UIInternalEvent that has a reference to a __GSEvent, so for recording you can use the _gsEvent property to get the underlying event.
#property (nonatomic,assign) struct __GSEvent *_gsEvent;
I have not used any of this stuff, but it looks like GSSendSystemEvent would be a good place to start.
I've got a UIWebView embedded in my iPhone app, and I'd like to keep a locked header and footer DIV on the page at all times, with a scrollable center DIV.
I know that I could do this using a header/footer that are UIView controls, but I want the header and footer to be HTML divs, as a pure HTML/JS/CSS solution will be easier to port to Android/PalmPre/AdobeAir, which is going to be on my todo list relatively soon.
I can do this using techniques like the one mentioned here:
http://defunc.com/blog/?p=94
But this requires that the user use 2 fingers to scroll the div, which is not satisfactory to me...
Any suggestions on how to do this?
Thanks,
Brad
I found someone that implemented a reusable solution for this, with a header and a footer:
http://cubiq.org/iscroll-4
I'm not too familiar with the UIWebView, so this may be a totally silly suggestion. But is there anything stopping you from having three UIWebViews on the page? One for the header, one for the body, and one for the footer. Because breaking it up sounds like the right idea.
Is this what you're looking for? Open this link on your iPhone device or simulator.
The index.html file has three div elements for "header", "container" and "footer" directly under the body, while all the work is done in the fixed.js file. The document is fixed in place by canceling the normal action for the "touchmove" event:
// Disable flick events
disableScrollOnBody : function() {
document.body.addEventListener("touchmove", function(e) {
e.preventDefault();
}, false);
},
Then, a lot of work goes into creating event listeners for the "touchstart", "touchmove" and "touchend" events which are attached to the "content" div under "container". The logic boils down to simply moving the "content" div up and down.
This solution is 100% HTML/CSS/JavaScript, however there is some WebKit proprietary CSS and JavaScript which may limit portability. It may take a bit of tweaking to work on another mobile device but this would be a good proof-of-concept to start from.
I did not create this awesome sample project, I'm merely bringing it to the community's attention. For more information and a link to the zipped project, read Richard "Doctyper" Herrara's entire post on Fixed positioning in Mobile Safari.
May be clunky, but you could reposition the header and footer over top of the div as the user scrolls. This way your main div doesn't need to be scrollable. No help for anything (still) using frames though.
This is one of the more irritating browser issues with the iPhone/touch, I wish you could just focus on part of the page like a normal browser.
For a CSS only reference the Safari CSS Reference probably has what you are looking for. You'll be especially interested in anything starting with "-webkit" or "-khtml" as those are extended properties only available with WebKit like 3D and touches. Should apply to Android as well.
With JavaScript the Introduction to WebKit DOM Programming Topics and WebKit DOM API Reference are go-to guides. Definately take a look at the light-table demo for some copy and paste javascript on handling your touches as that's how I would solve this.
I have implemented iScroll on iphone and it is really smooth and fast and you can do whatever you want. Disadvantages are that android (1.6) refuses to scroll how I wanted and sometimes block other javascript if there are any.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<div style="overflow: scroll">
Add those to your html code may solve your problem.