Examples with StateNode com.vaadin.client.flow.StateNode used on opensource projects

Example 1 with StateNode

use of com.vaadin.client.flow.StateNode in project flow by vaadin.

the class SimpleElementBindingStrategy method listenToSubPropertiesChanges.

private void listenToSubPropertiesChanges(Element htmlNode, String polymerModelPath, int subNodeIndex, Object item) {
    if (item instanceof StateNode) {
        StateNode stateNode = (StateNode) item;
        NodeMap feature = null;
        if (stateNode.hasFeature(NodeFeatures.ELEMENT_PROPERTIES)) {
            feature = stateNode.getMap(NodeFeatures.ELEMENT_PROPERTIES);
        } else if (stateNode.hasFeature(NodeFeatures.BASIC_TYPE_VALUE)) {
            feature = stateNode.getMap(NodeFeatures.BASIC_TYPE_VALUE);
        }
        if (feature != null) {
            feature.addPropertyAddListener(event -> {
                Command command = () -> PolymerUtils.setListValueByIndex(htmlNode, polymerModelPath, subNodeIndex, PolymerUtils.convertToJson(event.getProperty()));
                invokeWhenNodeIsConstructed(command, stateNode);
            });
        }
    }
}

Example 2 with StateNode

use of com.vaadin.client.flow.StateNode in project flow by vaadin.

the class SimpleElementBindingStrategy method setSubProperties.

private void setSubProperties(Element htmlNode, MapProperty property, String path) {
    String newPath = path.isEmpty() ? property.getName() : path + "." + property.getName();
    NativeFunction setValueFunction = NativeFunction.create("path", "value", "this.set(path, value)");
    if (property.getValue() instanceof StateNode) {
        StateNode subNode = (StateNode) property.getValue();
        if (subNode.hasFeature(NodeFeatures.TEMPLATE_MODELLIST)) {
            setValueFunction.call(htmlNode, newPath, PolymerUtils.convertToJson(subNode));
            addModelListChangeListener(htmlNode, subNode.getList(NodeFeatures.TEMPLATE_MODELLIST), newPath);
        } else {
            NativeFunction function = NativeFunction.create("path", "value", "this.set(path, {})");
            function.call(htmlNode, newPath);
            bindModelProperties(subNode, htmlNode, newPath);
        }
    } else {
        setValueFunction.call(htmlNode, newPath, property.getValue());
    }
}

Example 3 with StateNode

use of com.vaadin.client.flow.StateNode in project flow by vaadin.

the class GwtTemplateBinderTest method testNgFor_notRecreate.

public void testNgFor_notRecreate() {
    TestElementTemplateNode parent = TestElementTemplateNode.create("div");
    String textVar = "text";
    String collectionVar = "items";
    // create 3 children for the parent: <div/><li
    // *ngFor>{{text}}</li><span/>
    StateNode modelNode = createNgForModelNode(parent, "div", "li", "span", collectionVar, textVar);
    StateNode childNode1 = new StateNode(2, tree);
    childNode1.getMap(NodeFeatures.TEMPLATE_MODELMAP).getProperty(textVar).setValue("foo");
    modelNode.getList(NodeFeatures.TEMPLATE_MODELLIST).add(0, childNode1);
    Element parentElement = createElement(parent);
    Reactive.flush();
    Element firstLi = parentElement.querySelector("li");
    assertEquals("LI", firstLi.getTagName());
    firstLi.setAttribute("class", "custom");
    StateNode childNode2 = new StateNode(2, tree);
    childNode2.getMap(NodeFeatures.TEMPLATE_MODELMAP).getProperty(textVar).setValue("foo");
    modelNode.getList(NodeFeatures.TEMPLATE_MODELLIST).add(1, childNode2);
    Reactive.flush();
    // Original DOM element should not have been recreated
    firstLi = parentElement.querySelector("li");
    assertEquals("LI", firstLi.getTagName());
    assertEquals("custom", firstLi.getAttribute("class"));
    // Remove one item from index 1
    modelNode.getList(NodeFeatures.TEMPLATE_MODELLIST).splice(1, 1);
    Reactive.flush();
    // Original DOM element should not have been recreated
    firstLi = parentElement.querySelector("li");
    assertEquals("LI", firstLi.getTagName());
    assertEquals("custom", firstLi.getAttribute("class"));
}

Example 4 with StateNode

use of com.vaadin.client.flow.StateNode in project flow by vaadin.

the class GwtTemplateBinderTest method testBindOverrideNode_attributes_afterBind.

public void testBindOverrideNode_attributes_afterBind() {
    TestElementTemplateNode templateNode = TestElementTemplateNode.create("div");
    int id = 45;
    StateNode overrideNode = createSimpleOverrideNode(id);
    Element element = createElement(templateNode, id);
    NodeMap props = overrideNode.getMap(NodeFeatures.ELEMENT_ATTRIBUTES);
    props.getProperty("foo").setValue("bar");
    Reactive.flush();
    assertEquals("bar", element.getAttribute("foo"));
}

Example 5 with StateNode

use of com.vaadin.client.flow.StateNode in project flow by vaadin.

the class GwtTemplateBinderTest method testNgFor.

public void testNgFor() {
    TestElementTemplateNode parent = TestElementTemplateNode.create("div");
    String textVar = "text";
    // create 3 children for the parent: <div/><li
    // *ngFor>{{text}}</li><span/>
    StateNode modelNode = createNgForModelNode(parent, "div", "li", "span", "items", textVar);
    StateNode varNode = new StateNode(2, tree);
    varNode.getMap(NodeFeatures.TEMPLATE_MODELMAP).getProperty(textVar).setValue("foo");
    modelNode.getList(NodeFeatures.TEMPLATE_MODELLIST).add(0, varNode);
    Element element = createElement(parent);
    Reactive.flush();
    assertEquals("DIV", element.getTagName());
    JsArray<Node> childNodes = DomApi.wrap(element).getChildNodes();
    assertTrue(childNodes.length() > 1);
    assertEquals("DIV", ((Element) childNodes.get(0)).getTagName());
    assertEquals("SPAN", ((Element) childNodes.get(childNodes.length() - 1)).getTagName());
    Element li = ((Element) childNodes.get(childNodes.length() - 2));
    assertEquals("LI", li.getTagName());
    assertEquals(4, childNodes.length());
    // comment
    assertEquals(Node.COMMENT_NODE, childNodes.get(1).getNodeType());
    assertEquals("foo", li.getTextContent());
}