Touch UI v/s Classic UI in AEM - aem

How do we check whether the html page in Adobe Experience Manager/CQ5 is opened in touch mode or classic mode?

You can add dependency to /libs/wcm/foundation/components/utils/AuthoringUtils.js and then call AuthoringUtils.isTouch and AuthoringUtils.isClassic to check whether it is currently in touch or the classic mode. For e.g., your JS Use API would look something like below.
"use strict";
use(["/libs/wcm/foundation/components/utils/AuthoringUtils.js"], function (AuthoringUtils) {
if (AuthoringUtils.isTouch) {
// do something
} else {
// do something else
}
// rest of the things
}

Related

Samsung Smart Tv Return Button

I created the app for the samsung smart tv. I tested my app using the Remote test system. All the functionalities are working properly except the return key. When i press the return button it is returning to the home screen but i want my app to return to the previous screen of my app. This is working correctly while i test this in the emulator.
I checked this by giving alers in the return key functionality. It is alerting that after it is returning to the homw screen.
Can anyone help me in this
RETURN and EXIT key are followed by default behavior to closing application and going back to smart hub or tv broadcast screen.
You should implement prevent default behavior, please look at this page: http://samsungdforum.com/Guide/ref00009/sfkey_preventdefault.html
In Samsung Smart TV, RETURN default action is return to Home, as you can see in SDK documentation:
http://www.samsungdforum.com/Guide/
You must to include this line in your code:
sf.key.preventDefault();
Before your code to customize RETURN button action.
For example (case from a Switch):
case tvKey.RETURN :
sf.key.preventDefault();
window.history.go(-1);
break;
I was facing the same problem for a basic Javascript project. I resolved it by adding event.preventDefault();, for example:
Main.keyDown = function()
{
var keyCode = event.keyCode;
case tvKey.KEY_RETURN:
case tvKey.KEY_PANEL_RETURN: event.preventDefault();
}
For Apps Framework you can use this function:
sf.key.preventDefault();

Is it possible to set a subject to the mail app in Windows 8 metro application, if I am using share contract and sharing files?

First of all, I am sharing the content from my windows 8 metro application to another app (for example Mailto app) so:
Now I am sharing files to mailto app using share contract and sharing files from my application,
I wanted to know if: -
Can I set the subject to the mailto app to which I am sharing files as an attachement to that mailto app, if so please let me know how can I do this?
If not, please let me know what is the work around?
As of now, it's not possible.
Windows 8 recently introduced a new API called protocol activation. With Protocol activation, you can launch other windows 8 apps from your application and pass in data. Microsoft worked on Maps app and you can now pass information to the Map app as shown here (URI Scheme for maps application) http://msdn.microsoft.com/en-us/library/windows/apps/jj635237.aspx
See a code walkthrough at http://blog.jerrynixon.com/2012/10/walkthrough-using-windows-8-custom.html
Now, i am sure very soon, you will see some custom parameters for Mail app that you can pass from your app using protocol activation.
Just my 2 cents
No, it isn't possible to do this at the moment.
I may not be understanding the question correctly but if all you want to do is have the ability to click the "Share" button on the Charms Bar, then select the "Mail" app and have the ability to populate the subject line shown when the "Mail" app's share fly-out is displayed then you can follow this approach:
private DataTransferManager dataTransferManager; //class member
// put the following code block wherever you need it:
// Register as a share source
if (this.dataTransferManager == null)
{
this.dataTransferManager = DataTransferManager.GetForCurrentView();
this.dataTransferManager.DataRequested -= this.OnDataRequested;
try
{
this.dataTransferManager.DataRequested += new TypedEventHandler<DataTransferManager, DataRequestedEventArgs>(this.OnDataRequested);
}
catch
{
};
}
private void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs e)
{
DataRequest request = e.Request;
DataRequestDeferral deferal = request.GetDeferral();
try
{
// this property will set your subject line
// it will also be shown on the Share fly-out (right below the main
// heading that says 'Share'
request.Data.Properties.Title = GetCustomMailSubjectLine();
if (string.IsNullOrEmpty(request.Data.Properties.Title))
{
request.FailWithDisplayText("An operation failed. Please try again.");
}
else
{
// this will also be shown on the Share fly-out, right below the 'Title'
// property set above
request.Data.Properties.Description = GetMyAppsSharingDesciption();
// use request.Data.SetDataProvider() if your data needs to be asynchronously retrieved
// otherwise directly use request.Data.SetData() (or one of the other
//methods depending on what you need)
request.Data.SetDataProvider(StandardDataFormats.Html, RetrieveSharedData);
}
}
finally
{
deferal.Complete();
}
}
private async void RetrieveSharedData(DataProviderRequest request)
{
DataProviderDeferral deferal = request.GetDeferral();
try
{
// this will set your email's body
request.SetData(await GetCustomMailBodyAsync());
}
finally
{
deferal.Complete();
}
}

GWT - Fullscreen

Is there a way to start a gwt-app in fullscreen mode (without toolbar, navigation)?
I found only a hint to open a new window:
Window.open("SOMEURL","SOMETITLE",
"fullscreen=yes,hotkeys=no,scrollbars=no,location=no,menubar=no,status=no,
toolbar=no,resizable=no");
Is this the only way?
If yes, what's the best way to use the "Window.open" (Example)?
This works for me:
private native void requestFullscreen() /*-{
var element = $doc.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}-*/;
This isn't really a GWT question - this is a browser-provided API that GWT happens to wrap for you.
It's worth noting that modern browsers have a tendency to ignore some or all of these flags. For example, good luck getting Chrome to hide its address bar. The reason for this is that if they honoured all of the flags, you could write a web app which looked exactly like a desktop app and the user wouldn't know it - which is exactly what you sound like you're trying to do!
or use https://github.com/wokier/gwt-fullscreen
Caffeinate response has been used as a basis. I also added an event to be notified of fullscreen state change.

Native HTML5 Drag and Drop in Mobile Safari (iPad, iPod, iPhone)?

I've successfully implemented native HTML5 Drag and Drop for moving HTML elements inside a page (just, say, a div from one place to another, nothing related to interacting with the host OS' files whatsoever). This works fine in Chrome and Safari on a PC but I can't start a drag operation in my iPad's Safari.
I've found this so far:
Using Drag and Drop From JavaScript
Safari, Dashboard, and WebKit-based
applications include support for
customizing the behavior of drag and
drop operations within your HTML
pages.
Note: This technology is supported
only on desktop versions of Safari.
For iPhone OS, use DOM Touch,
described in Handling Events (part of
Safari Web Content Guide) and Safari
DOM Additions Reference.
Here. But it's outdated (2009-06-08).
Doe's anyone know if it is possible to use native HTML5 in Mobile Safari? (I don't want javascript-framework like solutions like jQuery UI).
Thanks!
I've just been trying to get native drag&drop working in ios safari (ipad pro with 14.0.1), and I'm updating this answer as it kept coming up as my first google result (and no other q&a seems to be up to date).
Following https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html
I have found native html5 drag&drop now works in safari, with a few specific notes;
You MUST set some data in OnDragStart's event; (the effect settings seem to be optional) Event.dataTransfer.setData('text/plain', 'hello');
you MUST Event.preventDefault(); in OnDrop otherwise safari will load the data you added (unless that's your intention)
OnDragOver event handler needs Event.preventDefault(); otherwise drop fails (unless intended, as docuemnted)
On ios safari, if you set OnDragStart's Event.dataTransfer.dropEffect='copy' and in OnDragOver's Event.dataTransfer.dropEffect='link' the drop fails (no OnDrop()); Seems to be the only combination that fails
I thought you required
CSS -webkit-user-drag: Element; and `-webkit-user-drop: element;
or if you prefer
Element.style.setProperty('webkitUserDrag','element');
Element.style.setProperty('webkitUserDrop','element');
but it seems just the usual draggable attribute is enough
Element.setAttribute('draggable',true);
This seems to be the bare minimum to drag & drop an element
Element.setAttribute('draggable',true);
function OnDragOver(Event)
{
Element.setAttribute('DragOver',true);
Event.stopPropagation(); // let child accept and don't pass up to parent element
Event.preventDefault(); // ios to accept drop
Event.dataTransfer.dropEffect = 'copy';// move has no icon? adding copy shows +
}
function OnDragLeave(Event)
{
Element.removeAttribute('DragOver');
}
function OnDrop(Event)
{
Element.removeAttribute('DragOver');
Event.preventDefault(); // dont let page attempt to load our data
Event.stopPropagation();
}
function OnDragStart(Event)
{
Event.stopPropagation(); // let child take the drag
Event.dataTransfer.dropEffect = 'move';
Event.dataTransfer.setData('text/plain', 'hello');
}
Element.addEventListener('dragstart',OnDragStart);
Element.addEventListener('drop',OnDrop);
Element.addEventListener('dragover',OnDragOver);
Element.addEventListener('dragleave',OnDragLeave);
Touch events do work now on Safari too (including Mobile). This article has nice code snippets that you can start from:
http://www.html5rocks.com/en/mobile/touch/

How to Bind Load event for Image in jQueryMobile

I have a mobile website running jQuery Mobile 1.0a2 and I'm currently testing in Mobile Safari for Firmware 4.1 via the iPhone Simulator.
I cannot seem to bind to the load event for an image.
I have a simple gallery of thumbnails and a large image. When you click on a thumbnail it changes the src attribute of the main img
The js for that uses the live('click' method to bind and it works just fine.
$('.gallery-navigation img').live('click',function() {
// change source of main image to new
$.mobile.pageLoading(); // show jquerymobile loading message
});
My problem is that I need feedback on this click, so I wanted to show a loading message (provided by jquerymobile) and then hide it once the image loads.
Where #gallery_image_large is the actual <img> where the src is changing, I tried the following:
$("#gallery_image_large").bind("load", function () {
$.mobile.pageLoading(true); // hide jquerymobile loading message
});
This works in Safari on my desktop but does not in the iPhone Simulator mentioned above.
For reference:
jQuery Mobile Loading Message Methods
UPDATE: I am experimenting with JQuery Image load fails on MobiOne iPhone simulator, which explains how to implement the .load manually by "checking .complete".
I changed the structure of my jquery and it's seemed to have fixed it!
$('#gallery_image_large').one('load',function() {
try { // a grade
$.mobile.pageLoading(true);
} catch(err) { // low grade
}
}).attr('src',full_src);
(as you can see, I opt'd for a try { .. } catch { .. } to verify jquerymobile is available.
Although I didn't use the solution (directly) from JQuery Image load fails on MobiOne iPhone simulator, the manual firing of load via .complete is probably a good solution for anyone else out there!