block8.diff

export class AfjsFirstScreen extends AppFormer.Screen {

+ private counter: CounterCard;
  
  constructor() {
    super("AfjsFirstScreen");
    this.af_isReact = true;
    this.af_componentTitle = "AppFormer.js First Screen";
  }

+ public af_onClose(): void {
+   alert("AppFormer.js First Screen was closed.");
+ }
+
+ private resetCounter() {
+   this.counter.reset();
+ }


  public af_componentRoot() {
-    return <div>I am alive!</div>;
+    return (
+        <>
+          <div className={"library container-fluid"}>
+            <div className={"row page-content-kie"}>
+              <div className={"toolbar-pf"}>
+                <div className={"toolbar-pf-actions"}>
+                  <div className={"toolbar-data-title-kie"}>
+                    AppFormer.js First Screen
+                  </div>
+                  <div className={"btn-group toolbar-btn-group-kie"}>
+                    <button
+                      className={"btn btn-default"}
+                      onClick={() => this.resetCounter()}
+                    >
+                      Reset counter
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div className={"container-fluid"}>
+                <div className={"library container-fluid container-cards-pf"}>
+                  <div className={"row row-cards-pf"}>
+                    <CounterCard exposing={self => (this.counter = self)} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      );
+    }
}