Component communication lesson¶

In this lesson we describe communication of components in more detail.

Application code at start¶

At first check the code basis of the application, this should look like the code resulted in the previous lesson’s The code at the end session.

Adding an inputField¶

Tho be able to discover the communication possibilities of the UI elements we extend the existing DetailPage. At first we add an inputField element to capture new value for the existing DetailPageLabel label.

New inputField definition¶

page DetailPage {
  layout: vertical;
  template: general;

  inputField DetailInputField {
    template: text;
    inputType: text;
  }

  label DetailPageLabel {
    template: display1Primary;
    alignment: left;
  }
}

The DetailInputField inputField element has attributes with name inputType and template defining the type of the component (check the details in the API documentation).

Binding function to onValueChange event¶

Every time when the content of an inputField is changed an onValueChange event is fired. This event contains the new value of the inputField, so a function has to be bound to this event to be able to capture the new value. To bind a function we can use the createValueChangeSourceEvent() built-in function at the appropriate display() function call as described in the previous lesson, where the extended parameter list of the display() built-in function is used:

Opening DeatilPage with action events¶

function onNavigationButtonClicked(originId) {
  var actionEvents = [
    createValueChangeSourceEvent("DetailInputField", "DetailInputFieldValueChange")
  ];
  display(DetailPage, {}, originId, actionEvents);
}

As final step we can define the logic of function:

Definition of the onDetailInputFieldValueChange function¶

function onDetailInputFieldValueChange(originId) {
  var value = $IN.data.message;
}

As you can see the new value of the inputField can be read from the context using $IN.data.message reference.

Changing the value of a label element¶

The behavior of the elements on the UI can be changed using Target Events (check Builder functions section of the API documentation for details).

To change the value of a label element the createValueChangeTargetEvent() function can be used, where the first parameter defines the id of the element, the second defines the new value:

Changing the value of the label¶

function onDetailInputFieldValueChange(originId) {
  fireEvent(createValueChangeTargetEvent("DetailPageLabel", $IN.data.message), originId);
}

From now on when the user changes the content of the inputField, then the new value is immediately set as value of the label element.

Final form of the code¶

After performing the changes descibed above, the final form of the mobile.scolvo file should be as defined below:

mobile.scolvo¶

menu defaultItem HelloWorld {
  item HelloWorld
}

function onHelloWorld(originId) {
  var actionEvents = [
    buildSourceClickedEvent("NavigationButton", "NavigationButtonClicked")
  ];
  display(HelloWorldPage, {}, originId, actionEvents);
}

page HelloWorldPage {
  layout: vertical;
  template: general;
  settingsVisible: true;
  scolvoMenuVisible: true;

  label HelloWorldLabel {
    template: display1Primary;
    alignment: left;
  }

  spacer {
    span: 20;
  }

  button NavigationButton {
    template: primary;
  }
}

function onHelloWorldPageLoaded(originId) {}

function onNavigationButtonClicked(originId) {
  var actionEvents = [
    createValueChangeSourceEvent("DetailInputField", "DetailInputFieldValueChange")
  ];
  display(DetailPage, {}, originId, actionEvents);
}

page DetailPage {
  layout: vertical;
  template: general;

  inputField DetailInputField {
    template: text;
    inputType: text;
  }

  label DetailPageLabel {
    template: display1Primary;
    alignment: left;
  }
}

function onDetailPageLoaded(originId) {}

function onDetailInputFieldValueChange(originId) {
  fireEvent(createValueChangeTargetEvent("DetailPageLabel", $IN.data.message), originId);
}

As we have defined new UI elements, the dictionary file of the application has to be extended with the new keys:

mobile_dictionary_en.properties¶

menu_HelloWorld_label=HelloWorld
page_HelloWorldPage_HelloWorldLabel_defaultText=Hello world!
page_HelloWorldPage_NavigationButton_label=Display details

page_DetailPage_headerText=Details
page_DetailPage_DetailInputField_label=Deatils Input
page_DetailPage_DetailPageLabel_defaultText=Details label