Yes, right. I am really looking forward to all this stuff. Sounds just great :)
2010/5/28 Ali Ok <[email protected]> > Ok, I will put these on a cwiki page. > But please not that these are not publish-quality stuff, they are just for > getting your feedback. > > We'll not need them after 3 month GSoC period, we'll have example > application, Javadoc, Tlddoc and some wiki (and a presentation hopefully). > So just for better readability, I can put them. > > > On Fri, May 28, 2010 at 7:04 PM, Jakob Korherr <[email protected]>wrote: > >> Hi Ali, >> >> +1 on putting this on a cwiki space - it will be more readable! >> >> Regards, >> Jakob >> >> 2010/5/28 Matthias Wessendorf <[email protected]> >> >> Hi Ali, >>> >>> a very few comments, after a first quick look: >>> => I think I prefer dropTarger over 'dropZone' >>> >>> -Another example may be dropping files from your desktop, but what to >>> do with them? We'll have <hx:inputFileUpload> for DnD file uploading. >>> => that's an interesting idea, IMO worth to investigate here >>> => exactly sure yet about the mimetype things... >>> >>> * <hx:panel> >>> => please no dependency to Tomahawk ;-) >>> >>> For the JS, I think we should do some namespacing ;-) >>> (yeah I saw your comment) >>> >>> Question: Do you mind to publish all the documentation to the new cwiki >>> space? >>> I think that will be easier for "future" overhauls of these >>> pages/prototypes. >>> >>> -Matthias >>> >>> >>> On Fri, May 28, 2010 at 3:16 PM, Ali Ok <[email protected]> wrote: >>> > Hi all, >>> > >>> > I've prepared DnD related protoypes. We'll have <fx:dragSource> >>> > <fx:dropZone> behaviors and <hx:Panel> for wrapping non-draggable >>> components >>> > (like h:panelGrid). >>> > >>> > Since these are complex enough for prototyping, I passed drag image >>> > concept. We can think about it later. >>> > >>> > Don't care about namespace and syntax of Javascript please. Those will >>> be >>> > extracted into some .js file. >>> > >>> > Here is what other component libraries handle this: >>> > >>> > http://www.primefaces.org:8080/prime-showcase/ui/draggableBasic.jsf >>> > >>> > http://www.primefaces.org:8080/prime-showcase/ui/droppableBarca.jsf >>> > >>> > >>> http://component-showcase.icefaces.org/component-showcase/showcase.iface >>> > >>> > >>> http://download.oracle.com/docs/cd/E15523_01/apirefs.1111/e12419/toc.htm#DragDrop >>> > >>> > http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport.jsf >>> > >>> > >>> > >>> > =============================== >>> > >>> > ==========<fx:dragSource>====== >>> > >>> > =============================== >>> > >>> > REFS: >>> > >>> > [0] >>> > >>> http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dnd >>> > >>> > [1] >>> > >>> http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data >>> > >>> > [2] >>> https://developer.mozilla.org/En/DragDrop/Drag_and_Drop >>> > >>> > [3] https://developer.mozilla.org/En/DragDrop/DataTransfer >>> > >>> > [4] >>> > https://developer.mozilla.org/En/DragDrop/Recommended_Drag_Types >>> > >>> > [5] >>> https://developer.mozilla.org/En/DragDrop/Drag_Operations >>> > >>> > >>> > >>> > EXTENDS: >>> > >>> > ClientBehavior >>> > >>> > ATTRIBUTES: >>> > >>> > action (required): Allowed DnD drag action from this >>> source. Can >>> > be comma separated set or String[] or Collection<String> of copy, >>> copyLink, >>> > copyMove, link, linkMove, move, all. >>> > >>> > dropZoneTypes (optional): With this property, we can >>> specify >>> > which types of drop zones we can make DnD from this source. Can be >>> comma >>> > separated set or String[] or Collection<String> >>> > >>> > param(optional): Parameter to be sent to server when drop >>> > operation is done. >>> > >>> > NOTES: >>> > >>> > May use "custom non-visible data" [1], "data-*" when at >>> least >>> > one browser starts supporting it >>> > >>> > >>> > >>> > =============================== >>> > >>> > ==========<fx:dropZone>======== >>> > >>> > =============================== >>> > >>> > REFS: >>> > >>> > [0] >>> > >>> http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dnd >>> > >>> > [1] >>> > >>> http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data >>> > >>> > [2] http://html5demos.com/drag-anything >>> > >>> > [3] http://apirocks.com/html5/html5.html#slide13 >>> > >>> > [4] >>> https://developer.mozilla.org/En/DragDrop/Drag_and_Drop >>> > >>> > [5] https://developer.mozilla.org/En/DragDrop/DataTransfer >>> > >>> > [6] >>> > https://developer.mozilla.org/En/DragDrop/Recommended_Drag_Types >>> > >>> > [7] >>> https://developer.mozilla.org/En/DragDrop/Drag_Operations >>> > >>> > >>> > >>> > EXTENDS: >>> > >>> > AjaxBehavior >>> > >>> > >>> > >>> > ATTRIBUTES: >>> > >>> > actions (required): Allowed DnD actions. Can be comma >>> separated >>> > set or String[] or Collection<String> of copy, copyLink, copyMove, >>> link, >>> > linkMove, move, all. >>> > >>> > If action of dragEvent are not one of these, DnD will >>> > stop. >>> > >>> > dropListener (required): Listener method to handle DnD >>> operation >>> > on server side. >>> > >>> > rerender (optional): same with <f:ajax> rerender attribute. >>> > >>> > types (optional): Used in conjunction with >>> <fx:dragSource>'s >>> > dropZoneTypes attribute. Types of this dropZone. >>> > >>> > Can be comma separated set or String[] or >>> > Collection<String>. >>> > >>> > acceptMimeTypes: If this is set, only content dropped into >>> this >>> > zone with defined mime type will be accepted and sent to server-side >>> drop >>> > listener. >>> > >>> > HTML5 DnD allows us to drop anything into drop >>> zone[2]: >>> > files from desktop, images on some other document[3], etc. So this >>> property >>> > is a filter. >>> > >>> > If value is "*" any content dropped into this zone >>> will be >>> > accepted. All type info and data of dropped stuff will be sent to >>> > dropListener. >>> > >>> > For example, if this is true and we drag&drop some >>> image >>> > on any Html page(even not generated by JSF), dropListener will be >>> triggered >>> > with the following data: >>> > >>> > content-type / value >>> > >>> > ------------ >>> > -------------------------------- >>> > >>> > text/uri-list / >>> > http://example.org/someImage.png >>> > >>> > Text / >>> > http://example.org/someImage.png >>> > >>> > text/plain / >>> > http://example.org/someImage.png >>> > >>> > URL / >>> > http://example.org/someImage.png >>> > >>> > >>> > >>> > Another example may be dropping files from your >>> desktop, >>> > but what to do with them? We'll have <hx:inputFileUpload> for DnD file >>> > uploading. >>> > >>> > So better not to accept files, or even they're >>> accepted, >>> > we'd better not to send their information to server. >>> > >>> > Mime type can be something like >>> > "text/x-myfaces-html5-dnd-source" for MyFaces generated components. >>> > >>> > Default to "text/x-myfaces-html5-dnd-source", thus >>> only >>> > MyFaces generated components can be dropped into this zone. >>> > >>> > NOTES: >>> > >>> > >>> > >>> > =============================== >>> > >>> > ==========<hx:panel>======== >>> > >>> > =============================== >>> > >>> > REFS: >>> > >>> > >>> > >>> > EXTENDS: >>> > >>> > <t:div> or something (I don't think a dependency to >>> Tomahawk is >>> > good. So, need to rewrite that stuff or copy them, preferably with >>> > maven-dependency-plugin) >>> > >>> > >>> > >>> > ATTRIBUTES: >>> > >>> > ondragstart, ondragend, ondragenter, ondragover, ondrop, >>> other >>> > DnD behavioral attributes >>> > >>> > dragStartStyle, dragStartStyleClass: CSS stuff to set when >>> this >>> > component is being dragged >>> > >>> > dragOverStyle, dragOverStyleClass: CSS stuff to set when >>> > something is dragged onto this component >>> > >>> > >>> > >>> > other stuff that wrapped components don't support (not >>> clear >>> > yet!) >>> > >>> > >>> > >>> > NOTES: >>> > >>> > This is just like <t:div> or <rich:panel>. For example DnD >>> does >>> > not work with components that dont support "dragstart" clientbehavior >>> event. >>> > >>> > That is why <hx:panel> is necessary. We can wrap those >>> > components (ie. h:inputText, h:panelGrid) with <hx:panel>. >>> > >>> > >>> > >>> > <!-- - - - - - - - - -usage: <fx:dragSource> with dropZoneType - >>> - - - >>> > - - - - - - - - - - - - - - - - - - --> >>> > >>> > <hx:panel id="draggable1" > >>> > >>> > <!-- SOME CONTENT --> >>> > >>> > <fx:dragSource action="copy" >>> > dropZoneTypes="#{someBean.optionalDropZoneTypes}" >>> > >>> > param="#{someBean.dndParamToSendToServer}"/> >>> > >>> > </hx:panel> >>> > >>> > >>> > >>> > <!-- expected HTML5 code--> >>> > >>> > <div id="draggable1" draggable="true" >>> > >>> > ondragstart="return dragStart(event, 'copy', >>> > {'firstDropZoneType','secondDropZoneType'}, >>> > 'literalDndParamToSendToServer')" >>> > >>> > > >>> > >>> > <!-- RENDERED CONTENT --> >>> > >>> > </div> >>> > >>> > >>> > >>> > >>> > >>> > <!-- - - - - - - - - -usage: <fx:dragSource> with event handler >>> chains >>> > - - - - - - - - - - - - - - - - - - - - - - --> >>> > >>> > <hx:panel id="draggable2" >>> > >>> > ondragstart="log('dragging');" >>> > >>> > ondragend="alert('Drag ended. May not have been >>> dropped >>> > succesfully though!')"> >>> > >>> > <!-- SOME CONTENT --> >>> > >>> > <fx:dragSource action="move" >>> > param="anotherDndParamToSendToServer" /> >>> > >>> > </hx:panel> >>> > >>> > >>> > >>> > <!-- expected HTML5 code--> >>> > >>> > <div id="draggable2" draggable="true" >>> > >>> > ondragstart="log('dragging'); return dragStart(event, >>> > 'move', null, 'secondDndValueToSendServer')" >>> > >>> > ondragend="alert('Drag ended. May not have been >>> dropped >>> > succesfully though!')" >>> > >>> > > >>> > >>> > <!-- RENDERED CONTENT --> >>> > >>> > </div> >>> > >>> > >>> > >>> > <!-- - - - - - - - - -usage: <fx:dragSource> within >>> <hx:inputText> >>> > (allowed with HTML5, doesn't make sense though) - - - - - - - - - - - >>> - - - >>> > - - - - - - - - --> >>> > >>> > <hx:inputText id="draggableInputText"> >>> > >>> > <fx:dragSource action="move"/> >>> > >>> > </hx:panel> >>> > >>> > >>> > >>> > <input type="text" id="draggableInputText" draggable="true" >>> > >>> > ondragstart="return dragStart(event, 'move')" /> >>> > >>> > >>> > >>> > >>> > >>> > >>> > >>> > <!-- - - - - - - - - -usage: <fx:dropZone> with type and rerender >>> - - >>> > - - - - - - - - - - - - - - - - - - - - --> >>> > >>> > <hx:panel id="dropZone1"> >>> > >>> > <!-- SOME CONTENT --> >>> > >>> > <fx:dropZone actions="move" >>> > dropListener="#{someBean.dropListener}" >>> > >>> > rerender="draggable1" types="firstDropZoneType"/> >>> > >>> > </hx:panel> >>> > >>> > >>> > >>> > <div id="dropZone1" >>> > >>> > >>> ondragenter="dragEnter(event,{'move'},{'firstDropZoneType'}), >>> > {'text/x-myfaces-html5-dnd-source'}" >>> > >>> > ondragover="dragOver(event)" >>> > >>> > ondrop="drop(event, 'stuff necessary to trigger >>> > someBean.dropListener and rerender draggable1 using >>> jsf.ajax.request')"> >>> > >>> > <!-- RENDERED CONTENT --> >>> > >>> > </div> >>> > >>> > >>> > >>> > >>> > >>> > >>> > >>> > <!-- - - - - - - - - -usage: <fx:dropZone> with handler chaining >>> - - - >>> > - - - - - - - - - - - - - - - - - - - --> >>> > >>> > <hx:panel id="dropZone2" >>> > >>> > ondragover="makeRedBorder();" >>> > >>> > ondragleave="clearRedBorder();" >>> > >>> > ondrop="makeGreenBorder();" >>> > >>> > > >>> > >>> > <!-- SOME CONTENT --> >>> > >>> > <fx:dropZone actions="copy,move" >>> > dropListener="#{someBean.dropListener}" /> >>> > >>> > </hx:panel> >>> > >>> > >>> > >>> > <div id="dropZone2" >>> > >>> > ondragenter="dragEnter(event,{'copy','move'}), null, >>> > {'text/x-myfaces-html5-dnd-source'}" >>> > >>> > ondragover="makeRedBorder(); dragOver(event)" >>> > >>> > ondragleave="clearRedBorder();" >>> > >>> > ondrop="makeGreenBorder();drop(event)"> >>> > >>> > <!-- RENDERED CONTENT --> >>> > >>> > </div> >>> > >>> > >>> > >>> > >>> > >>> > >>> > >>> > <!-- - - - - - - - - -usage: <fx:dropZone> that accepts some >>> specified >>> > mime typed content - - - - - - - - - - - - - - - - - - - - - - --> >>> > >>> > <hx:panel id="dropZone3"> >>> > >>> > <!-- SOME CONTENT --> >>> > >>> > <fx:dropZone actions="copy" >>> > dropListener="#{someBean.dropListener}" acceptMimeTypes="text/plain, >>> URL" /> >>> > >>> > </hx:panel> >>> > >>> > >>> > >>> > <div id="dropZone3" >>> > >>> > ondragenter="dragEnter(event,{'copy','move'}, null, >>> > {'text/plain', 'URL'})" >>> > >>> > ondragover="dragOver(event)" >>> > >>> > ondrop="drop(event)"> >>> > >>> > <!-- RENDERED CONTENT --> >>> > >>> > </div> >>> > >>> > >>> > >>> > <script><!-- >>> > >>> > >>> > >>> > var paramMimeType = 'text/x-myfaces-html5-dnd-param'; >>> > >>> > var myFacesComponentSourceMimeType = 'text/x-myfaces-html5-dnd-source'; >>> > >>> > var dropZoneMimeType = 'text/x-myfaces-html5-drop-zone-type'; >>> > >>> > var myFacesComponentSourceConstant = 'org.apache.myfaces'; >>> > >>> > >>> > >>> > /* >>> > >>> > * This function is only used by MyFaces generated draggable elements, >>> the >>> > ones that have <fx:dragSource> behavior. >>> > >>> > */ >>> > >>> > function dragStart(event, effectAllowed, paramToSendToServer, >>> dropZoneTypes) >>> > { >>> > >>> > >>> > >>> > //set allowed effect >>> > >>> > event.dataTransfer.effectAllowed = effectAllowed; //only allow >>> some >>> > specific event >>> > >>> > >>> > >>> > //with this, drop zone will understand that source of this dnd >>> > operation is some MyFaces component >>> > >>> > event.dataTransfer.setData(myFacesComponentSourceMimeType, >>> > myFacesComponentSourceConstant); >>> > >>> > >>> > >>> > //this will be set if we want to send an optional parameter to >>> the >>> > server-side drop listener >>> > >>> > if(paramToSendToServer) >>> > >>> > event.dataTransfer.setData(paramMimeType, >>> > valueToSendToServer); >>> > >>> > >>> > >>> > //this will be set if we want to make the drop only into specific >>> > dropzones with specific types >>> > >>> > if(dropZoneType) >>> > >>> > event.dataTransfer.setData(dropZoneMimeType, >>> dropZoneTypes); >>> > //in fact, dropZoneTypes is an array. need to iterate >>> > >>> > >>> > >>> > return true; >>> > >>> > } >>> > >>> > >>> > >>> > function dragEnter(event, allowedEffects, dropZoneTypes, >>> acceptedMimeTypes) >>> > { >>> > >>> > //check allowed mime types first >>> > >>> > var found = false; >>> > >>> > var foundTypes = acceptedMimeTypes.filter(function (mimeType) >>> > event.dataTransfer.types.contains(mimeType)); >>> > >>> > >>> > >>> > //if even one of the event mime types are not allowed, stop DnD >>> > >>> > if(foundTypes.length == 0) >>> > >>> > return true; //don't cancel the event, thus stop DnD >>> > >>> > >>> > >>> > //check allowed effect >>> > >>> > //changeIt: allowedEffects is an array in fact, so need to >>> iterate >>> > >>> > if (event.dataTransfer.effectAllowed != allowedEffect) >>> > >>> > return true; //don't cancel the event, thus stop DnD >>> > >>> > >>> > >>> > //check drop zone type >>> > >>> > //changeIt: in fact these are arrays too. need to iterate or use >>> > contains() function >>> > >>> > if (event.dataTransfer.getData(dropZoneMimeType) != >>> dropZoneTypes) >>> > >>> > return true; //don't cancel the event, thus stop DnD >>> > >>> > >>> > >>> > //cancel the event. this is necessary for DnD execution >>> > >>> > if (event.preventDefault) >>> > >>> > event.preventDefault(); >>> > >>> > >>> > >>> > return false; >>> > >>> > } >>> > >>> > >>> > >>> > function dragOver(event){ >>> > >>> > //don't check source, allowedEffect and dropZoneType, since they >>> are >>> > checked at dragEnter function >>> > >>> > >>> > >>> > //show same user hint effect specified by drag source >>> > >>> > event.dataTransfer.dropEffect = event.dataTransfer.effectAllowed; >>> > >>> > >>> > >>> > //cancel the event, so effect on screen is updated >>> > >>> > if (event.preventDefault) >>> > >>> > event.preventDefault(); >>> > >>> > >>> > >>> > return false; >>> > >>> > } >>> > >>> > function drop(event, jsf_ajax_request_necessary_stuff){ >>> > >>> > //cancel the event. this is necessary for DnD execution >>> > >>> > if (event.preventDefault) >>> > >>> > event.preventDefault(); >>> >>> >>> >>> -- >>> Matthias Wessendorf >>> >>> blog: http://matthiaswessendorf.wordpress.com/ >>> sessions: http://www.slideshare.net/mwessendorf >>> twitter: http://twitter.com/mwessendorf >>> >> >> >> >> -- >> Jakob Korherr >> >> blog: http://www.jakobk.com >> twitter: http://twitter.com/jakobkorherr >> work: http://www.irian.at >> > > > > -- > My Blog: http://blog.aliok.com.tr > Twitter: http://twitter.com/aliok_tr > > -- Jakob Korherr blog: http://www.jakobk.com twitter: http://twitter.com/jakobkorherr work: http://www.irian.at
