Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
meryapps
Posts: 3
Registered: ‎07-31-2012
My Device: Playbook
Accepted Solution

HTML5 on Playbook

[ Edited ]

Hi Guys,

 

I try a simple HTML5 Drag and drop script with Ripple on Chrome browser / Playbook Emulator - which works well and when I create the bar file and tested from PlayBook - not working !

 

What could be the possible reason ? I am using the latest BlackBerry WebWorks SDK for TabletOS 2.2.0.5 and my PlayBook running on 2.0.1

 

Thanks in Advance.

Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,557
Registered: ‎04-12-2010
My Device: BlackBerry Z10

Re: HTML5 on Playbook

Hi there,

 

Are you possibly implementing the drag/drop through mouse events (PC) as opposed to touch events (PlayBook)? That's all I have off the top of my head :smileyhappy:

 

Would you be able to post a code sample of an application?


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
New Contributor
meryapps
Posts: 3
Registered: ‎07-31-2012
My Device: Playbook

Re: HTML5 on Playbook

[ Edited ]

Yes Erik, you got the point.

 

What need to be done in order to work for playbook -> touch events - and I may have to refer to the below URL : :Rolleyes:

 

http://blackberry-webworks.github.com/WebWorks-API-Docs/WebWorks-API-Docs-tablet/view/Element.html

 

Thanks,

Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,557
Registered: ‎04-12-2010
My Device: BlackBerry Z10

Re: HTML5 on Playbook

You got it, that's a great article to start with. As a quick comparison, a mouse event may look something like this:

 

image.onmousedown= function (e) {
	console.log('X: ' + e.clientX);
	console.log('Y: ' + e.clientY);
};

Whereas a touch event may look like this:

 

image.ontouchstart = function (e) {
	console.log('X: ' + e.touches[0].clientX);
	console.log('Y: ' + e.touches[0].clientY);
};

Note that for the event, we need to retrieve the specific touch point (i.e. 0 refers to the first touch point, this is assuming the user has one finger on the screen.) We then retrieve the X and Y coordinates of the touch. This is a very basic sample, that URL you noted will provide much more detail.

 

In general though, each mouse event has a corresponding touch event. Examples:

- mousedown : touchstart

- mouseup : touchend

- mouseover : touchmove / touchenter

- mouseout : touchleave

 

The key hurdle with touch event is being aware that there may be multiple touch points at a given moment. If you want to just stick with the first touch point, then the above sample with touches[0] would do that.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
New Contributor
meryapps
Posts: 3
Registered: ‎07-31-2012
My Device: Playbook

Re: HTML5 on Playbook

[ Edited ]

Thanks Eric :Clap:

 

This is the script i am looking for :

 

<script type="text/javascript">
function dragStart(ev) {
   ev.dataTransfer.effectAllowed='move';
   ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
   ev.dataTransfer.setDragImage(ev.target,0,0);
   return true;
}
function dragEnter(ev) {
   event.preventDefault();
   return true;
}
function dragOver(ev) {
    return false;
}
function dragDrop(ev) {
   var src=ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(src));
   ev.stopPropagation();
   return false;
}

 

Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,557
Registered: ‎04-12-2010
My Device: BlackBerry Z10

Re: HTML5 on Playbook

That one gets a little more tricky. There may be some frameworks out there you could leverage, though perhaps invoking the functions you already have may work. For example:

 

image.ontouchstart= function (e) {
	e.preventDefault();
	dragStart(e);
};

The one issue that I'm seeing with the above is that the dragStart function requires a dataTransfer child that has various properties. It may be necessary to create and attach a dataTransfer child to the e variable before calling dragStart.

 

That being said, it looks like you're already using some framework here, is that right? There may simply be a way to "turn on" touch events with that framework. I've seen it as pretty common practice to not have mouse or touch enabled unless explicitly set during initialization. Though this would depend on the framework.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.