.. index:: Scolvo script .. _component_communication: 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 :ref:`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. .. code-block:: scolvoscript :caption: New inputField definition :linenos: 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 :ref:`createValueChangeSourceEvent()` built-in function at the appropriate display() function call as described in the previous lesson, where the extended parameter list of the :ref:`display()` built-in function is used: .. code-block:: scolvoscript :caption: Opening DeatilPage with action events :linenos: function onNavigationButtonClicked(originId) { var actionEvents = [ createValueChangeSourceEvent("DetailInputField", "DetailInputFieldValueChange") ]; display(DetailPage, {}, originId, actionEvents); } .. As final step we can define the logic of function: .. code-block:: scolvoscript :caption: Definition of the onDetailInputFieldValueChange function :linenos: 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 :ref:`Builder functions` section of the API documentation for details). To change the value of a *label* element the :ref:`createValueChangeTargetEvent()` function can be used, where the first parameter defines the id of the element, the second defines the new value: .. code-block:: scolvoscript :caption: Changing the value of the label :linenos: 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. .. _component_communication_result: Final form of the code ~~~~~~~~~~~~~~~~~~~~~~ After performing the changes descibed above, the final form of the mobile.scolvo file should be as defined below: .. code-block:: scolvoscript :caption: mobile.scolvo :linenos: 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: .. code-block:: properties :caption: mobile_dictionary_en.properties :linenos: 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 .. Component communication screen shots ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The UI resulted of the above code on different client types should look as below: Component communication - HelloWold page ---------------------------------------- **Using browser with light theme** .. image:: images/lesson_3_browser_light.png :width: 600 The result of HelloWorld page in browser with light theme **Using browser with dark theme** .. image:: images/lesson_3_browser_dark.png :width: 600 The result of HelloWorld page in browser with dark theme **Using mobile browser with light theme** .. image:: images/lesson_3_mobile_browser_light.png :width: 300 The result of HelloWorld page in **mobile browser** with **light** theme **Using mobile browser with dark theme** .. image:: images/lesson_3_mobile_browser_dark.png :width: 300 The result of HelloWorld page in **mobile browser** with **dark** theme **Using mobile with light theme** .. image:: images/lesson_3_mobile_light.png :width: 300 The result of HelloWorld page in **mobile** with **light** theme **Using mobile with dark theme** .. image:: images/lesson_3_mobile_dark.png :width: 300 The result of HelloWorld page in **mobile** with **dark** theme Component communication - Detail page ------------------------------------- **Using browser with light theme** .. image:: images/lesson_3_detail_browser_light.png :width: 600 The result of Detail page in browser with light theme **Using browser with dark theme** .. image:: images/lesson_3_detail_browser_dark.png :width: 600 The result of Detail page in browser with dark theme **Using mobile browser with light theme** .. image:: images/lesson_3_detail_mobile_browser_light.png :width: 300 The result of Detail page in **mobile browser** with **light** theme **Using mobile browser with dark theme** .. image:: images/lesson_3_detail_mobile_browser_dark.png :width: 300 The result of Detail page in **mobile browser** with **dark** theme **Using mobile with light theme** .. image:: images/lesson_3_detail_mobile_light.png :width: 300 The result of Detail page in **mobile** with **light** theme **Using mobile with dark theme** .. image:: images/lesson_3_detail_mobile_dark.png :width: 300 The result of Detail page in **mobile** with **dark** theme