<mx:VBox horizontalAlign="right" verticalAlign="top" height="100%">
    <mx:Label text="Profielschets"
              height="{profielGUI.height}" />
    <mx:Label text="Persoonlijke eigenschappen"
              height="{pers_eig_GUI.height}" />
    <mx:Label text="Profielschets (aanvullend)"
              height="{vaardighedenGUI.height}" />
    <mx:Label text="Interesses"
              height="{interessesGUI.height}" />
</mx:VBox>
<mx:VBox width="100%" height="100%">
    <gui:XmlTextArea restClient="{restClient}"
                     objectXml="{getProfielXml(cvXml, CVtool.selectedLocaleInfo)}"
                     propertyName="profiel"
                     width="100%" height="40%" id="profielGUI" />
    <gui:XmlTextArea restClient="{restClient}"
                     objectXml="{getProfielXml(cvXml, CVtool.selectedLocaleInfo)}"
                     propertyName="persoonlijke_eigenschappen"
                     width="100%" height="30%" id="pers_eig_GUI" />
    <gui:XmlTextArea restClient="{restClient}"
                     objectXml="{getProfielXml(cvXml, CVtool.selectedLocaleInfo)}"
                     propertyName="vaardigheden"
                     width="100%" height="20%" id="vaardighedenGUI" />
    <gui:XmlTextArea restClient="{restClient}"
                     objectXml="{getProfielXml(cvXml, CVtool.selectedLocaleInfo)}"
                     propertyName="interesses"
                     width="100%" height="10%" id="interessesGUI" />
</mx:VBox>

<Stack>
    <Text variant="xxLarge">Welkom bij de <Title height="24em"/></Text>
    <Pivot linkSize={PivotLinkSize.large}>
        <PivotItem itemIcon="Emoji" headerText="Personalia" itemCount={42}>
            <Personalia/>
        </PivotItem>
        <PivotItem itemIcon="Emoji2" headerText="Profiel">
            <TextField label="Profielschets"
                       multiline
                       autoAdjustHeight
                       value={props.profielschets}
                       onChange={props.onChangeProfielschets}/>
            <TextField label="Persoonlijke eigenschappen"
                       multiline
                       autoAdjustHeight
                       value={props.persoonlijkeEigenschappen}
                       onChange={props.onChangePersoonlijkeEigenschappen}/>
            <TextField label="Interesses"
                       multiline
                       autoAdjustHeight
                       value={props.interesses}
                       onChange={props.onChangeInteresses}/>
        </PivotItem>
    </Pivot>
    <Stack.Item align="center">
        <PrimaryButton text="Afmelden" onClick={props.requestLogout}/>
    </Stack.Item>
</Stack>

// My message:
const message = {
    text: 'Hello world!',
}

$('#msg').html(message.text);

console.log(message);

var obj = {
  anArray: [10, 11, 12],
  aString: "dertien"
};


function storeText(text) {
  return {
    type: "STORE_TEXT",
    payload: text
  };
}



// EC6: classes in Javascript!
class MyComponent extends React.Component {
  
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <TextField value={this.props.myValue}, onChange={this.props.onChange}/>
    );
  }
}

function mapStateToProps(state) {
  return {
    myValue: state.someValue
  };
}

function mapDispatchToProps(dispatch) {
  return {
    onChange: function(event) { dispatch(storeText(event.target.value)); }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

const storeText = (text) => ({
  type: "STORE_TEXT",
  payload: text
});



const MyComponent = (props) => ({
  <TextField value={props.myValue}, onChange={props.onChange}/>
});

const select = (state) => ({
  myValue: state.someValue
});

const mapDispatchToProps = (dispatch) => ({
  onChange: (event) => dispatch(storeText(event.target.value))
});

export default connect(select, mapDispatchToProps)(MyComponent)