Jump to content

D&D from OS?


Guest tendon

Recommended Posts

Guest tendon

Does/will UniGui support Drag & Drop from the OS into the browser? e.g. dragging files from the desktop, mail program attachment, file managers, etc. into some drop area of a UniGui component?

Link to comment
Share on other sites

Guest tendon

Does/will UniGui support Drag & Drop from the OS into the browser? e.g. dragging files from the desktop, mail program attachment, file managers, etc. into some drop area of a UniGui component?

 

Replying to myself here... I get to the conclusion that UniGui does not support this out of the box.

 

Inspired by this: http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/

 

I wonder how to add your own custom JavaScript event listeners.

 

Say I have a panel called DropTarget. Can I add events by doing this?...

 

  DropTarget.ClientEvents.ExtEvents.Add(
   'Ondragenter=function dragEnter(e){e.stopPropagation();e.preventDefault();}'
 );
 DropTarget.ClientEvents.ExtEvents.Add(
   'Ondragexit=function dragExit(e){e.stopPropagation();e.preventDefault();}'
 );
 DropTarget.ClientEvents.ExtEvents.Add(
   'Ondragover=function dragOver(e){e.stopPropagation();e.preventDefault();}'
 );
 DropTarget.ClientEvents.ExtEvents.Add(
   'Ondrop=function drop(e){e.stopPropagation();e.preventDefault();'#13#10+
   'var files=e.dataTransfer.files;'#13#10+
   'var count=files.length;'#13#10+
   'if(count>0) alert(''Dropped ''+count+'' files'');}'
 );

and will this produce code equivalent to this JavaScript?:

 

	dropTarget.addEventListener("dragenter", dragEnter, false);
dropTarget.addEventListener("dragexit", dragExit, false);
dropTarget.addEventListener("dragover", dragOver, false);
dropTarget.addEventListener("drop", drop, false);

Naturally I need to set the DOM Id accordingly, so on the Pascal side I do a

 

  DropTarget.ExtControls.Id := 'dropTarget';

 

Does this make sense? (I cannot get it to work, though! Farshad, please advise!)

 

The real question is: Is it possible to add custom client events, as shown above; i.e. eventes which are not listed in the original UniGui component?

Link to comment
Share on other sites

  • Administrators

What is the type of DragDrop object?

DropTarget.ClientEvents.ExtEvents.Add(
   'Ondragenter=function dragEnter(e){e.stopPropagation();e.preventDefault();}'
 );

 

Ondragenter?? Is this event supported by Ext JS?

 

Your above syntax only works for predefined events in Ext JS. Besides your referred article is about D6D in HTML5 not in Ext JS.

Link to comment
Share on other sites

Guest tendon

What is the type of DragDrop object?

DropTarget.ClientEvents.ExtEvents.Add(
   'Ondragenter=function dragEnter(e){e.stopPropagation();e.preventDefault();}'
 );

 

Ondragenter?? Is this event supported by Ext JS?

 

Your above syntax only works for predefined events in Ext JS. Besides your referred article is about D6D in HTML5 not in Ext JS.

 

AFAIK ExtJS events are "normal" JavaScript events.

 

Then we have this:

 

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.dd.DragDrop-method-onDragEnter

 

(Of course, I know, it is for ExtJS 4...)

 

In general: if ClientEvents.ExtEvents does not list all possible events, is it possible to add new/missing ones simply by adding strings like I tried? (notwithstanding that I am still interested in knowing how to do DnD.)

Link to comment
Share on other sites

  • Administrators

AFAIK ExtJS events are "normal" JavaScript events.

 

Not always. Please note that your article is for HTML5 not regular DOM.

 

 

it is for Ext.dd.DragDrop component which currently have no equivalent in uniGUI.

 

In general: if ClientEvents.ExtEvents does not list all possible events, is it possible to add new/missing ones simply by adding strings like I tried? (notwithstanding that I am still interested in knowing how to do DnD.)

 

Ext JS implements almost all major events. It is not easy to extend JS new events from Delphi code.

Link to comment
Share on other sites

Guest tendon

Not always. Please note that your article is for HTML5 not regular DOM.

 

it is for Ext.dd.DragDrop component which currently have no equivalent in uniGUI.

 

Ext JS implements almost all major events. It is not easy to extend JS new events from Delphi code.

 

OK.

 

Let me split this in two questions then:

 

1) ExtJS 4 is generating HTML5. UniGui will be updated to ExtJS 4 before it is released, right? (Please confirm!). If this is indeed the case, how can one implement the DnD from the OS to the web browser, given that we have a UniGui generated page there. Is it possible? yes or no? If yes, how?

 

2) In general, you have a customCSS property somewhere... why not add a customJS property too, where you could hook in your own JS. Or is there any simpler way to "inject" a script tag referencing some .js file?

Link to comment
Share on other sites

  • Administrators

OK.

 

Let me split this in two questions then:

 

1) ExtJS 4 is generating HTML5. UniGui will be updated to ExtJS 4 before it is released, right? (Please confirm!). If this is indeed the case, how can one implement the DnD from the OS to the web browser, given that we have a UniGui generated page there. Is it possible? yes or no? If yes, how?

 

2) In general, you have a customCSS property somewhere... why not add a customJS property too, where you could hook in your own JS. Or is there any simpler way to "inject" a script tag referencing some .js file?

 

1) No. Ext4 generates conventional DOM. Ext.dd.DragDrop is also available in Ext3. One may be able to implement it. I can't say yes or no at this stage because I can't dedicate much time to investigate possibility of D&D in Ext JS or uniGUI.

 

2) We have Script property in UniForm where you can put custom JS code.

Link to comment
Share on other sites

simply put this code in an UniHtmlFrame:

 

<script type="text/javascript">


function dragEnter(evt) {
 evt.stopPropagation();
 evt.preventDefault();
}

function dragExit(evt) {
 evt.stopPropagation();
 evt.preventDefault();
}

function dragOver(evt) {
 evt.stopPropagation();
 evt.preventDefault();
}

function drop(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 var files = evt.dataTransfer.files;
 var count = files.length;
 // Only call the handler if 1 or more files was dropped.
 if (count > 0)
   handleFiles(files);
}


function handleFiles(files) {
 var file = files[0];
 document.getElementById("droplabel").innerHTML = "Processing " + file.name;
 var reader = new FileReader();
 // init the reader event handlers
 reader.onload = handleReaderLoad;
 // begin the read operation
 reader.readAsDataURL(file);
}


function handleReaderLoad(evt) {
 var img = document.getElementById("preview");
 img.src = evt.target.result;
}


function initEventHandlers() {
 var dropbox = document.getElementById("dropbox")
 dropbox.addEventListener("dragenter", dragEnter, false);
 dropbox.addEventListener("dragexit", dragExit, false);
 dropbox.addEventListener("dragover", dragOver, false);
 dropbox.addEventListener("drop", drop, false);
}

</script>


<div id="dropbox" style="background-color: #00AAFF; height: 40px">
<span id="droplabel">Drop file here...</span>
</div>

<br/>

<img id="preview" src="" alt="[ preview will display here ]" />


<script type="text/javascript">
initEventHandlers();
</script>

Link to comment
Share on other sites

Guest tendon

simply put this code in an UniHtmlFrame:

 

Morsch... that's brilliant. Thanks!

 

I didn't think about using the UniHtmlFrame for hosting a script; but in hindsight it is obvious!

Link to comment
Share on other sites

  • 2 years later...

simply put this code in an UniHtmlFrame:

 

<script type="text/javascript">


function dragEnter(evt) {
  evt.stopPropagation();
  evt.preventDefault();
}

function dragExit(evt) {
  evt.stopPropagation();
  evt.preventDefault();
}

function dragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
}

function drop(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  var files = evt.dataTransfer.files;
  var count = files.length;
  // Only call the handler if 1 or more files was dropped.
  if (count > 0)
    handleFiles(files);
}


function handleFiles(files) {
  var file = files[0];
  document.getElementById("droplabel").innerHTML = "Processing " + file.name;
  var reader = new FileReader();
  // init the reader event handlers
  reader.onload = handleReaderLoad;
  // begin the read operation
  reader.readAsDataURL(file);
}


function handleReaderLoad(evt) {
  var img = document.getElementById("preview");
  img.src = evt.target.result;
}


function initEventHandlers() {
  var dropbox = document.getElementById("dropbox")
  dropbox.addEventListener("dragenter", dragEnter, false);
  dropbox.addEventListener("dragexit", dragExit, false);
  dropbox.addEventListener("dragover", dragOver, false);
  dropbox.addEventListener("drop", drop, false);
}

</script>


<div id="dropbox" style="background-color: #00AAFF; height: 40px">
<span id="droplabel">Drop file here...</span>
</div>

<br/>

<img id="preview" src="" alt="[ preview will display here ]" />


<script type="text/javascript">
initEventHandlers();
</script>

 

Works perfect!

 

How could I send the image to server or a dataset (BLOB Field)?

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...