Hummer Cross-Platform Framework

The Base class is the foundation for all view nodes in Tenon. It provides built-in support for:

• Element Reference: The element property points to the underlying native Hummer component instance.
• Lifecycle Hooks: onMounted() and onDestoryed() (note the spelling in the source) for managing component lifecycle.
• Attribute Management: setAttribute(key, value) handles standard props, including data- attributes and class updates. Developers can override _setAttribute(key, value) for custom logic.
• Event Binding: addEventListener(event, func) and removeEventListener(event, func) bridge Tenon events to the native element.
• Node Operations: Methods like _appendChild, _removeChild, and _insertBefore manage the tree structure and trigger lifecycle events on children.
• Animations: handleAnimation(animation) supports various animation types (Keyframe, Basic, Step).

When a native component (like a Scroller or Map) expects specific sub-views to be passed via specialized properties or methods rather than standard child appending, you must intercept them in the _appendChild or _insertBefore methods.

Implementation Pattern

Instead of calling this.element.appendChild(child.element) for every child, check the child's properties (e.g., a type prop) to identify special sub-views. If a match is found, call the corresponding native method instead of appending it to the standard DOM tree.

Example: Intercepting a custom marker in a Map component

_appendChild(child: any) {
  // ... standard tree management logic ...

  if (this.element && child.element) {
    if (child.props.type === 'custom-marker') {
      // Intercept: Pass the element to the native method instead of appending
      this.element.addCustomMarker(child.element);
    } else {
      // Standard: Append as a normal child
      this.element.appendChild(child.element);
      child._onMounted();
      child.onMounted();
    }
  }
}

To expose Java objects to JavaScript, use the Hummer annotation processor.

1. Configure HUMMER_MODULE_NAME in your module's gradle file.
2. Add com.didi.hummer:hummer-compiler as an annotationProcessor dependency.
3. Annotate your class with @Component("Name") and its properties/methods with @JsProperty or @JsMethod respectively.

// 1. Module gradle configuration
android {
    defaultConfig {
        ...
        javaCompileOptions {
            annotationProcessorOptions {
                arguments = [HUMMER_MODULE_NAME: project.getName()]
            }
        }
    }
}

// 2. Add annotation processor dependency
dependencies {
    ...
    annotationProcessor 'com.didi.hummer:hummer-compiler:0.2.15'
}

// 3. Define the exported class
@Component("TestExportModel")
public class TestExportModel {
    @JsProperty("text")
    public String text;
 
    @JsProperty("floatValue")
    public float floatValue;

    public float getFloatValue() {
        return floatValue;
    }
 
    @JsProperty("style")
    private Map<String, Object> style;

    public void setStyle(Map<String, Object> style) {
        this.style = style;
    }

    public Map<String, Object> getStyle() {
        return style;
    }
 
    @JsProperty("array")
    private List<String> array;
    public void setArray(List<String> array) {
        this.array = array;
    }
 
    public List<String> getArray() {
        return array;
    }
 
    @JsMethod("getElementById")
    public String getSubview(String viewID, int index, Long test, HashMap<String, String> testMap, ArrayList<Object> testList) {
        return "getSubview func, " + viewID + ", map: " + testMap + ", list: " + testList;
    }
}