Component control

Official Content
This documentation is valid for:

Components are available in the GeneXus Toolbox for Panel objects or Work With objects.

Like Web Components, Components are controls that can contain Panel objects or Work With objects without losing any of their characteristics and they can also run independently. This feature provides GeneXus applications designers a high degree of reusability.

The main difference with Web Components is that Components don't need any additional property like Type property (in Web Panels and Transactions).

 

Components for Smart Devices - Final result
Final result on EventDay sample

 

Simple usage example

In EventDay, suppose you want to view tweets while you are reading session content.

To do this, you create a Panel called "SessionsWithTweets" and drag two Component controls from the toolbox.

Components for Smart Devices - Usage example - Toolbox

Then, you must set both Component controls with WorkWith object for Sessions and the Panel of Tweets as shown below:

Components for Smart Devices - Usage example - Set Object

Finally, the layout results as shown below.

Components for Smart Devices - Usage example - Layout result

 

Methods

Refresh

  Causes an object embedded into a Component to execute the Refresh event.

  Return value: None

  Parameters: None

  Note: Differences between Refresh methods/commands and how to use them:

  • To refresh an object and all its components (including forms, grids, etc), use the Refresh command command. 
  • To refresh the full screen, use the Refresh Form command.
  • To refresh a Grid in an object, use the Grid Refresh method.
  • To refresh an object embedded in a Component (and all its descendants) use the method described here.

 

Event trigger sequence with multiple Components

The event trigger order in a Panel with multiple Components is analogous to Detail and Sections in Work With for Smart Devices. If you have C1...CN  Components in a Panel P, schematically the execution order will be:

Client Start (P)
Start (P)
Refresh (P)
Load (P)

     ClientStart (C1)
     Start (C1)
     Refresh (C1)
     Load (C1)

     <...>

     ClientStart (CN)
     Start (CN)
     Refresh (CN)
     Load (CN)

 

Action Bar behavior

When using multiple Components, the Action Bar behavior will be the combination of actions for each Component.

 

Advance usage example

Continuing with the previous example, suppose you want to read the tweets minute. To do this, you must write an event associated with a Timer variable (invisible in Panel and with Chronometer control set) and refresh the screen when the elapsed time exceeds 60 seconds.

i2016_01_20_17_28_173_png

Event ClientStart
    // Init timer
    &Timer = 0
Endevent

Event &Timer.Tick
    // If one minute elapsed, refresh component
    If Mod(&Timer,60) = 0
        Component2.Refresh()
    EndIf
EndEvent

Finally, substitute the invocation to Sessions on the dashboard, delete the Tweets node and run the application.


Notes

  • Components controls cannot be drawn into a Grid Control.
  • To synchronize the components at run-time programmatically, you can use  Global Events.
  • The Object property is available at design-time, and also available at run-time programmatically for Dynamic Component Creation

 

Scope

  Objects PanelWork With for Smart Devices.
  Generators: Apple, Android.

 

Availability

This property is available as of GeneXus 15.
 Dynamic Component Creation is available as of  GeneXus 15 upgrade 12.