Skip to content

Instantly share code, notes, and snippets.

@kenwebb
Last active Jul 12, 2021
Embed
What would you like to do?
GWP eggPlant - Component Architecture as a Xholon app
<?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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment