Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Embed ReactJS into GWT

    Hi IS team,
    Currently, we us reactJS to build web portal component and embedded it into App smartGWT. We use storm-react-diagram to build widgets for our js lib what can drap and drop. when we embed into APP smartGWT, our widgets can not drap and drop althrough they still have "draggable=true". I think SmartGWT is disable drop and drop for all widget by default? do you have any suggestion in this case? Thanks

    #2
    You would need to at least set canDrag and canDrop on the SmartGWT widget that contains the React controls.

    However, this overall approach is probably a really bad idea. Mixing React and SmartGWT controls has all the same drawbacks we explain in the FAQ for mixing core GWT controls with SmartGWT controls: no possibility for drag and drop between the different widget types, issues with accessibility/tab order, modality, inconsistent appearance etc. These issues apply to mixing any two component frameworks, whether SmartGWT is one of them or not; SmartGWT is actually a much better host than most than most other frameworks (see DOM Integration overview).

    A better approach would be to simply build an equivalent of your React UI using SmartGWT components.

    Comment


      #3
      Isomorphic,

      Thanks for your reply. In our case, we need to use react to build diagram and embedded into SmartGWT app. For now drap and drop worked well. However, I set canDrag and can Drop on the SmartGWT widget that contains the React controls, when I move react component, SmartGWT widget also move as well. we just need react component moving, not SmartGWT widget move. This make some unexpected behaviors. Do you have any suggestion for this case?
      Last edited by dinhbrave@gmail.com; 16 Mar 2018, 01:43.

      Comment


        #4
        You also need to set the dragOperation to "custom" or you are going to get the default drag, which is a reposition.

        note that SmartGWT also has diagramming / vector graphics (see DrawPane); please see previous post about the severe disadvantages inherent in mixing any two frameworks.

        Comment


          #5
          Thank you for your reply.
          This is my code:

          public VLayout getWorkflowFormLayout() {
          workflowFormLayout = new VLayout();
          workflowFormLayout.setID(mainLayout.getNavHelper().findPageById(PageIDs.ADMIN_WORK_FLOW.getId()).getLayoutId());
          workflowFormLayout.setWidth100();
          workflowFormLayout.setHeight100();
          workflowFormLayout.setStyleName("whitebg");
          workflowFormLayout.setCanDrag(true);
          workflowFormLayout.setCanDrop(true);
          workflowFormLayout.setUseNativeDrag(true);
          workflowFormLayout.setCanAcceptDrop(true);
          workflowFormLayout.addDropHandler(new DropHandler() {

          @Override
          public void onDrop(DropEvent event) {
          Canvas target = EventHandler.getDragTarget();
          HTMLFlow htmlFlow = new HTMLFlow(DOM.getElementById("mainId"));
          htmlFlow.addChild(target);
          };
          });

          workflowFormLayout.addChild(new RenderReact());
          return workflowFormLayout;
          }

          And here is RenderReact widget code:

          public class RenderReact extends Composite {
          private final HLayout hLayout;
          public RenderReact() {
          hLayout = new HLayout();
          hLayout.setID("hLayout1");
          initWidget(hLayout);
          }

          public static native String renderReact(String containerId) /*-{
          return $wnd.renderComponent(containerId);
          }-*/;

          @Override
          public void onAttach() {
          super.onAttach();
          HTMLFlow htmlFlow = new HTMLFlow(renderReact(this.getElement().getId()));
          hLayout.addMember(htmlFlow);
          }
          }

          and rendered UI screenshot attached 'Untitled.jpg'. Please take a look.

          my problem is: For now I can drag a react widget from left navigation to "mainId" layout via using 'addDropHandler' event. However, when I re-drag that react widget in 'mainId' to other position in 'mainId' layout, the execution occurs that is for dragging ''workflowFormLayout'', it does not understand that is: I want to move 'react widget' in ''mainId'' layout what included in workflowFormLayout , not moving workflowFormLayout. I just want to move react widget and smartGWT layout independently

          would you please take a look and give me suggestion?

          Thank you so much!.
          Attached Files
          Last edited by dinhbrave@gmail.com; 16 Mar 2018, 19:11.

          Comment


            #6
            It looks like you may have missed our previous post, as we just explained how to solve this.

            Comment


              #7
              Hi,
              I can not find dragOperation method in smartGWT lib to set to SmartGWT component or you can details about "you are going to get the default drag, which is a reposition."?

              Comment


                #8
                We see a couple of other problems in your code:
                1. you are setting useNativeDrag. Read the docs for what this does; it's totally unrelated to what you want. Don't set this
                2. you are mixing a GWT Composite component with SmartGWT components. Don't do this; see FAQ. Read the DOM Integration overview for the correct approach for embedding third-party components into SmartGWT.

                Comment


                  #9
                  If I just set setCanDrag on smartGWT components, react widget were included in it that not work. I think because I used some HTML5 drag and drop function in react components as onDrag, onDragStart....As recommendation. I re-wrote our code as below:

                  import com.smartgwt.client.widgets.Canvas;

                  public class RenderWorkflow extends Canvas {

                  public static native void renderReact(String containerId) /*-{
                  $wnd.renderComponent(containerId);
                  }-*/;

                  public RenderWorkflow() {
                  setCanDrag(true);
                  setCanDrop(true);
                  setUseNativeDrag(true);
                  setCanAcceptDrop(true);
                  setRedrawOnResize(false);
                  }

                  @Override
                  public String getInnerHTML() {
                  return "<div id='" + getID() + "_wf' style='width:100%;height:100%'></div>";
                  }

                  @Override
                  protected void onDraw() {
                  RenderWorkflow.renderReact(getID() + "_wf");
                  }
                  }

                  the code still got the issue as I mentioned in previous post.
                  Here is code for react components what react widget will be dragged and drop into it: (div id=mainid)
                  import React from "react";
                  import _ from "lodash";
                  import {
                  DiagramWidget,
                  } from 'storm-react-diagrams';

                  import NodeWidget from "./NodeWidget";
                  import DecisionNodeModel from "./model/DecisionNodeModel";
                  import StartNodeModel from "./model/StartNodeModel";
                  import StopNodeModel from "./model/StopNodeModel";
                  import ReportNodeModel from "./model/ReportNodeModel";
                  import TaskNodeModel from "./model/TaskNodeModel";
                  import {tabContent} from "./events/TabAction"
                  import NodeAttributes from "./attributes/NodeAttributes"


                  export default class BodyWidget extends React.Component<> {

                  constructor(props) {
                  super(props);
                  this.state = {
                  node:{},
                  type: ""
                  };
                  this.attributesAction = this.attributesAction.bind(this);
                  }

                  attributesAction(type, node) {
                  this.setState({node:node,type: type});
                  }

                  renderAttributes() {
                  return (
                  <NodeAttributes type={this.state.type} node={this.state.node}/>
                  )
                  }

                  render() {
                  var nodes = this.props.app.getDiagramEngine().getDiagramModel();
                  console.log(nodes.getNodes());
                  return (
                  <div className="body">
                  <div className="content">
                  <div className="sidenav" id="sidenavId">
                  <div className="tab">
                  <button className="tablinks" onClick={(event) => tabContent(event,'primitive')}>Primitive
                  </button>
                  <button className="tablinks" onClick={(event) => tabContent(event,'attributes')}>
                  Attributes
                  </button>
                  </div>
                  <div id="primitive" className="tabcontent">
                  <NodeWidget model={{type: "start"}} name="Start"/>
                  <NodeWidget model={{type: "decision"}} name="Decision"/>
                  <NodeWidget model={{type: "task"}} name="Task"/>
                  <NodeWidget model={{type: "report"}} name="Report"/>
                  <NodeWidget model={{type: "stop"}} name="Stop"/>
                  </div>
                  <div id="attributes" className="tabcontent">
                  {this.renderAttributes()}
                  </div>

                  </div>
                  <div
                  className="main"
                  id="mainId"
                  onDrop={event => {
                  try {
                  var data = JSON.parse(event.dataTransfer.getData("storm-diagram-node"));
                  var nodesCount = _.keys(nodes.getNodes()).length;
                  var node = null;

                  console.log("start log data==============");
                  console.log(data);
                  console.log("end log data===========");

                  if (data.type === "start") {
                  node = new StartNodeModel((nodesCount + 1).toString(),
                  nodes,
                  "Tool tip will display the full description.",
                  data.type,
                  this.attributesAction('start', nodes.getNodes()));
                  }
                  if (data.type === "decision") {
                  node = new DecisionNodeModel((nodesCount + 1).toString(),
                  "Tool tip will display the full description.",
                  data.type,
                  this.attributesAction('decision', nodes.getNodes()));
                  }
                  if (data.type === "stop") {
                  node = new StopNodeModel((nodesCount + 1).toString(),
                  "Tool tip will display the full description.",
                  data.type,
                  this.attributesAction('stop', nodes.getNodes()));
                  }
                  if (data.type === "report") {
                  node = new ReportNodeModel((nodesCount + 1).toString(),
                  "Tool tip will display the full description.",
                  data.type,
                  this.attributesAction('report', nodes.getNodes()));
                  }
                  if (data.type === "task") {
                  node = new TaskNodeModel((nodesCount + 1).toString(),
                  "Tool tip will display the full description.",
                  data.type,
                  this.attributesAction('task', nodes.getNodes()));
                  }

                  var points = this.props.app.getDiagramEngine().getRelativeMousePoint(event);
                  node.x = points.x;
                  node.y = points.y;
                  this.props.app
                  .getDiagramEngine()
                  .getDiagramModel()
                  .addNode(node);
                  this.forceUpdate();
                  }catch(ex) {
                  console.log("start log event exception==============");
                  console.dir(event);
                  console.log("end log event exception===========");
                  }

                  }}
                  onDragOver={event => {
                  event.preventDefault();
                  }}
                  >
                  <DiagramWidget diagramEngine={this.props.app.getDiagramEngine()}/>
                  </div>
                  </div>
                  </div>
                  );
                  }
                  }
                  i Please help!
                  Last edited by dinhbrave@gmail.com; 18 Mar 2018, 00:12.

                  Comment


                    #10
                    I solved issue by myself. Thanks for your help!.

                    Comment


                      #11
                      That's great news. For the benefit of others, can you let us know what the problem was - was it simply getting rid of the call to setUseNativeDrag(true), as we mentioned previously?

                      Comment

                      Working...
                      X