GWP eggPlant - Component Architecture as a Xholon app

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Mon Jul 12 2021 08:34:50 GMT-0400 (Eastern Daylight Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: GWP eggPlant - Component Architecture as a Xholon app
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: d15015b01b36b7d8e9624b25ea9a0ee7
Keywords: 

My Notes
--------
Gatineau Wildflower Project (GWP eggPlant)
GWP eggPlant - Component Architecture as a Xholon app
Ken Webb
July 11, 2021

export d3 cp
------------
_d3,CirclePack
physicalSystem_45
{"shouldShowStateMachineEntities":false,"shouldIncludeDecorations":true,"sort":"default","filter":"--Behavior,Script","width":1000,"height":1000,"selection":"#xhgraph","mode":"new","labelContainers":true,"labelContainersOptions":"top","includeId":false,"includeClass":false,"shape":"circle","shapeParams":"5,5","maxSvg":50,"useIcons":false,"iconPos":"outside","useSymbols":false,"useAnno":false,"annoPos":"outside","maxChars":7,"fontSizeMultiplier":2.5,"marble":"","supportTouch":false,"_jsdata":false,"nonportPorts":true,"togglePortColors":true,"supportClick":true,"supportContextmenu":true,"supportDblclick":true}

JSX to XML
----------
The only change I needed to make in the GWP JSX code, were the following two changes in attribute contnets:
={  becomes  ="{
}>  becomes  }">
and other variations of these two

]]></Notes>  

<_-.XholonClass>
  <PhysicalSystem/>
  
  <Component>
    
    <!-- React Native and third-party components -->
    <App/>
    <View/>
    <ScrollView/>
    <FlatList/>
    <TouchableOpacity/>
    <Picker/>
    <Text superClass="Attribute_String"/>
    <Image/>
    <LocalizationContext.Provider/>
    <NavigationContainer/>
    <Stack.Navigator/>
    <Stack.Screen/>
    <ReactNativeZoomableView/>

    <!-- GWP components -->
    <Home/>
    <About/>
    <Contact/>
    <Links/>
    <Query/>
    <QueryPicker/>
    <Flowers/>
    <FlowerDetails/>
    <PhotoDetails/>
    <PhotoZoomPan/>
    
  </Component>

</_-.XholonClass>

<xholonClassDetails>
  
  <Avatar><Color>red</Color></Avatar>
  <Chameleon><Color>white</Color></Chameleon>
  <PhysicalSystem><Color>white</Color></PhysicalSystem>
  
  <Home><Color>green</Color></Home>
  <About><Color>green</Color></About>
  <Contact><Color>green</Color></Contact>
  <Links><Color>green</Color></Links>
  <Query><Color>green</Color></Query>
  <QueryPicker><Color>green</Color></QueryPicker>
  <Flowers><Color>green</Color></Flowers>
  <FlowerDetails><Color>green</Color></FlowerDetails>
  <PhotoDetails><Color>green</Color></PhotoDetails>
  <PhotoZoomPan><Color>green</Color></PhotoZoomPan>
  
  <View><Color>white</Color></View>
  <ScrollView><Color>white</Color></ScrollView>
  <TouchableOpacity><Color>orange</Color></TouchableOpacity>
  
<Home><DefaultContent><![CDATA[
  <View style="{styles.container}">
    <View style="{styles.buttons}">
      <TouchableOpacity
        style="{styles.button}"
        onPress="{() => this.props.navigation.navigate('About')}">
        <port name="navabout" connector="ancestor::PhysicalSystem/About"/>
        <Text style="{styles.buttontext}">{i18n.t('homebutton.1')}</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style="{styles.button}"
        onPress="{() => this.props.navigation.navigate('Contact')}">
        <port name="navcontact" connector="ancestor::PhysicalSystem/Contact"/>
        <Text style="{styles.buttontext}">{i18n.t('homebutton.2')}</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style="{styles.button}"
        onPress="{() => this.props.navigation.navigate('Links')}">
        <port name="navlinks" connector="ancestor::PhysicalSystem/Links"/>
        <Text style="{styles.buttontext}">{i18n.t('homebutton.3')}</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style="{styles.button}"
        onPress="{() => this.changeLanguage(languageSelected === 'en' ? 'fr' : 'en')}"
        >
        <Text style="{styles.buttontext}">{lang()[languageSelected === 'en' ? 0 : 1].label}</Text>
      </TouchableOpacity>
    </View>

    <TouchableOpacity
      style="{styles.button}"
      onPress="{() => this.props.navigation.navigate('Query')}">
      <port name="navquery" connector="ancestor::PhysicalSystem/Query"/>
      <Image
        source="{languageSelected === 'fr' ? require('../assets/gwp/GWP_WebPage_HomePageFR.png') : require('../assets/gwp/GWP_WebPage_HomePage.png')}"
        style = "{styles.image}"
      />
    </TouchableOpacity>

    <View style="{styles.copyright}">
      <Text style="{styles.copyrighttext}">© {i18n.t('homebutton.4')} 2021</Text>
      <Text style="{styles.copyrighttext}">v: 6 {i18n.t('floweringin.6').substring(0,3) } a</Text>
      <TouchableOpacity
        style="{styles.button}"
        onPress="{ ()=>{ Linking.openURL('https://www.primordion.com/Xholon/gwt/ShirkingPixies.html')}}"
        >
        <Text style="{styles.copyrighttext}">Shirking Pixies</Text>
      </TouchableOpacity>
    </View>
  </View>
]]></DefaultContent></Home>

<About><DefaultContent><![CDATA[
  <View style="{styles.container}">
    <Text style="{cstyles.bodytext}">{i18n.t('abouttext.0')}</Text>
    <Text style="{cstyles.bodytext}">{i18n.t('abouttext.1')}</Text>
    <Text style="{cstyles.bodytext}">{i18n.t('abouttext.2')}</Text>
    <script>this.parent().parent().navback = this.xpath("ancestor::PhysicalSystem/Home")</script>
  </View>
]]></DefaultContent></About>

<Contact><DefaultContent><![CDATA[
  <View style="{styles.container}">
    <Text style="{cstyles.bodytext}">Contact information will go here.</Text>
    <script>this.parent().parent().navback = this.xpath("ancestor::PhysicalSystem/Home")</script>
  </View>
]]></DefaultContent></Contact>

<Links><DefaultContent><![CDATA[
  <View style="{styles.container}">
    <Text style="{cstyles.bodytext}">Links to other sources of information about wildflowers in Gatineau Park.</Text>
    <script>this.parent().parent().navback = this.xpath("ancestor::PhysicalSystem/Home")</script>
  </View>
]]></DefaultContent></Links>

<!-- QueryComponent.native.js and QueryComponent.web.js -->
<Query><DefaultContent><![CDATA[
  <View style="{styles.container}">
    <View style="{styles.containertop}">
      <TouchableOpacity
        style="{styles.containertopto}"
        onPress="{() => {
          const fltr = assembleFilters();
          props.navigation.navigate('Flowers', {
            filters: fltr
          });
        }}"
        >
        <port name="navflowers" connector="ancestor::PhysicalSystem/Flowers"/>
        <Text style="{styles.textsearch1b}">{`${resultsCount} ${i18n.t('queryresults')}`}</Text>
        <Text style="{styles.textsearch1c}">{i18n.t('querydone')}</Text>
      </TouchableOpacity>
    </View>

    <View style="{styles.containerfilters}">
      {/* colour */}
      <View style="{styles.pickerview}">
        <TouchableOpacity
          style="{[styles.button, styles.buttonOpen, styles.viewto]}"
          onPress="{() => props.navigation.navigate('QueryPicker', {
            pitems: ['colour', i18n.t('queryfiltername.0')]
          })}"
        >
          <port name="navquerypicker" connector="ancestor::PhysicalSystem/QueryPicker"/>
          <Text style="{[styles.textsearch2,cstyles.bodytextgreen]}">{i18n.t('queryfiltername.0')}</Text>
          <Text style="{[cstyles.bodytext]}">{getSelectedVal(colour[1])} {rightArrow}</Text>
        </TouchableOpacity>
      </View>
      {/* leaf */}
      {/* arrangement */}
      {/* floweringin */}
      {/* speciesname */}
      {/* commonname */}
      {/* familyname */}
    </View>
    <script>this.parent().parent().navback = this.xpath("ancestor::PhysicalSystem/Home")</script>
  </View>
]]></DefaultContent></Query>

<QueryPicker><DefaultContent><![CDATA[
  <View style="{styles.container}">
    <View style="{styles.containertop}">
      <Text style="{{fontSize: 20}}"> </Text>
    </View>
    <View style="{styles.centeredView}">
      <View style="{styles.modalView}">
        <ScrollView>
          {getPItems(props.route.params.pitems[0], setPostText)}
          NOTE: getPItems includes:
          <TouchableOpacity
            style="{[styles.button, styles.buttonClose]}"
            key="{namesEN[i]}"
            onPress="{() => {funk([namesEN[i] === allEN ? '*' : namesEN[i], item])}}"
          >
            <Text style="{[styles.textStyle3, cstyles.bodytextgreen]}">{item}</Text>
          </TouchableOpacity>
        </ScrollView>
      </View>
    </View>
    <script>this.parent().parent().navback = this.xpath("ancestor::PhysicalSystem/Query")</script>
  </View>
]]></DefaultContent></QueryPicker>

<!-- added additional fragments and navigator from FlowersComponent.js -->
<Flowers><DefaultContent><![CDATA[
  <View style="{styles.container}">
    <View>
      <FlatList
        style="{styles.flatlistfltr}"
        data="{this.props.route.params.filters}"
        renderItem="{this.renderFilter}"
        keyExtractor="{(item, index) => Number(index).toString()}"
        horizontal="{true}"
      />
      renderFilter = ({ item }) => {
        return (
          <Text style="{styles.searchcriteria}">{item[Object.getOwnPropertyNames(item)[0]].split(",")[1]}</Text>
        )
      }
    </View>
    <View style="{{flex: 1}}">
      <FlatList
        style="{{flex: 1}}"
        data="{this.plants}"
        renderItem="{this.renderPlant}"
        keyExtractor="{item => item.species}"
        numColumns="{1}"
        contentContainerStyle="{{ paddingBottom: 0 }}"
      />
      renderPlant = ({ item, index }) => {
        return (
          <View style="{styles.viewplant}">
            <TouchableOpacity
            onPress="{() => this.handlePlantPress(item)}"
            >
              <port name="navflowerdetails" connector="ancestor::PhysicalSystem/FlowerDetails"/>
              <Image
                source="{
                  item.photos[0].imageLink
                }"
                style="{styles.plantimage}"
                resizeMode='contain'
              />
              <Text style="{styles.imagetext}">{item.species}</Text>
            </TouchableOpacity>
          </View>
        )
      };
      handlePlantPress = (item) => {
        this.props.navigation.navigate('FlowerDetails', {
          plant: item
        });
      };
    </View>
    <View style="{styles.viewfinal}"/>
    <script>this.parent().parent().navback = this.xpath("ancestor::PhysicalSystem/Query")</script>
  </View>
]]></DefaultContent></Flowers>

<FlowerDetails><DefaultContent><![CDATA[
  <View style="{styles.container}">

    <PhotoDetails photos="{props.route.params.plant.photos}" />

    <View style="{styles.containerlabel}">
      <Text style="{cstyles.imagelabel}">{Plant.species}</Text>
    </View>

    <View style="{styles.containerdetails}">

      <View style="{styles.detailview}">
        <Text style="{cstyles.bodytext}">{i18n.t('flowerdetailslabels.0')}   </Text>
        <Text style="{cstyles.bodytext}">{Plant.name[language]}</Text>
      </View>

      <View style="{styles.detailview}">
        <Text style="{cstyles.bodytext}">{i18n.t('flowerdetailslabels.1')}   </Text>
        <Text style="{cstyles.bodytext}">{Plant.family[language]}</Text>
      </View>

       <View style="{styles.detailview}">
        <Text style="{cstyles.bodytext}">{i18n.t('flowerdetailslabels.2')}</Text>
        <Text style="{cstyles.bodytext}">{Plant.native === true ? i18n.t("yes") : i18n.t("no")}</Text>
      </View>

       <View style="{styles.detailview}">
        <Text style="{cstyles.bodytext}">{i18n.t('flowerdetailslabels.3')}</Text>
        <Text style="{cstyles.bodytext}">{en2other(i18n.t('colour', {locale: "en"}), i18n.t('colour'), Plant.colour)}</Text>
      </View>

       <View style="{styles.detailview}">
        <Text style="{cstyles.bodytext}">{i18n.t('flowerdetailslabels.4')}</Text>
        <Text style="{cstyles.bodytext}">{en2other(i18n.t('leaf', {locale: "en"}), i18n.t('leaf'), Plant.leaf)}</Text>
      </View>

       <View style="{styles.detailview}">
        <Text style="{cstyles.bodytext}">{i18n.t('flowerdetailslabels.5')}</Text>
        <Text style="{cstyles.bodytext}">{en2other(i18n.t('arrangement', {locale: "en"}), i18n.t('arrangement'), Plant.arrangement)}</Text>
      </View>

      <View style="{styles.detailview}">
        <Text style="{cstyles.bodytext}">{i18n.t('flowerdetailslabels.6')}   </Text>
        <Text style="{cstyles.bodytext}">{dayOfYear2monthName(Plant.flowering.start, true, language)}–{dayOfYear2monthName(Plant.flowering.end, false, language)}</Text>
      </View>

       <View style="{styles.detailview}">
        <Text style="{cstyles.bodytext}">{i18n.t('flowerdetailslabels.7')}</Text>
        <Text style="{cstyles.bodytext}">{calcNumPhotos(Plant.photos)}</Text>
      </View>

    </View>

    <script>this.parent().parent().navback = this.xpath("ancestor::PhysicalSystem/Flowers")</script>
  </View>
]]></DefaultContent></FlowerDetails>

<PhotoDetails><DefaultContent><![CDATA[
  <View style="{styles.container}">
    <View style="{styles.containerphotos}">
      <ScrollView horizontal="{true}" style="{styles.flatlistfltr}">
        {
          props.photos.filter(item => item.photo_id).map(
            item => (
              <View key="{item.photo_id}">
              <TouchableOpacity onPress="{() => handlePhotoPress(item)}">
                <port name="navphotozoompan" connector="ancestor::PhysicalSystem/PhotoZoomPan"/>
                <Image
                  source="{
                    item.imageLink
                    }"
                  style="{styles.plantimage}"
                  resizeMode='contain'
                />
                </TouchableOpacity>
              </View>
            )
          )
        }
      </ScrollView>
    </View>
  </View>
]]></DefaultContent></PhotoDetails>

<PhotoZoomPan><DefaultContent><![CDATA[
  <View style="{styles.container}">
    <View style="{styles.containerphotos}">
      <ScrollView horizontal="{true}" style="{styles.flatlistfltr}">
        {
          props.photos.filter(item => item.photo_id).map(
            item => {
              return (
              <View key="{item.photo_id}" style="{{ flex: 1 }}">
              <ReactNativeZoomableView
               maxZoom="{2.5}"
               minZoom="{0.5}"
               zoomStep="{0.5}"
               initialZoom="{1.0}"
               bindToBorders="{true}"
              >
                <Image
                  source="{
                    item.imageLink
                  }"
                  style="{styles.plantimageZoom}"
                  resizeMode='contain'
                />
                </ReactNativeZoomableView>
              </View>
            )}
          )
        }
      </ScrollView>
    </View>
    <script>this.parent().parent().navback = this.xpath("ancestor::PhysicalSystem/FlowerDetails")</script>
  </View>
]]></DefaultContent></PhotoZoomPan>

</xholonClassDetails>

<PhysicalSystem>
  
  <!-- see Xml2Xholon - DefaultContent only works if I include RoomModel somewhere before I need to use DefaultContent -->
  <RoomModel/>
  
  <Home/>
  <About/>
  <Contact/>
  <Links/>
  
  <Query/>
  <QueryPicker/>
  <Flowers/>
  <FlowerDetails/>
  <!--<PhotoDetails/>--> <!-- NOTE: PhotoDetails is contained within FlowerDetails -->
  <PhotoZoomPan/>
  
  <Animate selection="#xhanim" xpath="PhysicalSystem" duration="1.0" cssStyle=".d3cpnode circle {stroke-width: 0px;} .d3cpleaf circle {stroke-width: 0px;}" tweenScript="xhSvgTween" efParams="{
 &quot;selection&quot;:&quot;#xhanim&quot;,
 &quot;sort&quot;:&quot;disable&quot;,
 &quot;width&quot;:2000,
 &quot;height&quot;:1000,
 &quot;mode&quot;:&quot;tween&quot;,
 &quot;maxChars&quot;:-11,
 &quot;labelContainers&quot;:true,
 &quot;labelContainersOptions&quot;:&quot;top&quot;,
 &quot;includeId&quot;:false,
 &quot;includeClass&quot;:false,
 &quot;shape&quot;:&quot;circle&quot;,
 &quot;maxSvg&quot;:50,
 &quot;useIcons&quot;:false,
 &quot;iconPos&quot;:&quot;outside&quot;,
 &quot;useSymbols&quot;:false,
 &quot;useAnno&quot;:false,
 &quot;annoPos&quot;:&quot;outside&quot;,
 &quot;fontSizeMultiplier&quot;:2.5,
 &quot;supportTouch&quot;:false,
 &quot;_jsdata&quot;:false,
 &quot;nonportPorts&quot;:true,
 &quot;togglePortColors&quot;:true,
 &quot;supportClick&quot;:true,
 &quot;supportContextmenu&quot;:true,
 &quot;supportDblclick&quot;:true,
 &quot;shouldShowStateMachineEntities&quot;:false,
 &quot;shouldIncludeDecorations&quot;:true
}"/>
  
</PhysicalSystem>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<!--<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Home</title>
    <rect id="PhysicalSystem/Home" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>About</title>
      <rect id="PhysicalSystem/About" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>-->
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>