hi guys , i’m building a chat app who display different type of data on the same view (text, image, file, link etc), so i’m using while text to display a style depending on what kind of data it is, and using whiletrue and while false to separate message written by different users. this is what my code looks like
<ScrollView>
<StackPanel Alignment="Bottom">
<Each Items="{MessagesAll}">
<WhileString Equals="text" Value="{type}">
<WhileTrue Value="{dock}">
<DockPanel Margin="5">
<Circle Height="40" Width="40" Color="Black" Dock="Left"/>
<Panel Padding="20" Margin="10,0,10,0">
<Rectangle Layer="Background" CornerRadius="10" Opacity=".2" Color="Gray"/>
<Text Value="{text}" TextWrapping="Wrap" TextColor="Black" Alignment="CenterLeft" />
</Panel>
<AddingAnimation>
<Scale Factor="0" Duration=".5" Easing="QuinticIn" />
</AddingAnimation>
</DockPanel>
</WhileTrue>
<WhileFalse Value="{dock}">
<DockPanel Margin="5">
<Panel Padding="20" Margin="10,0,10,0">
<Rectangle Layer="Background" CornerRadius="10" Opacity=".9" Color="#f15f5f"/>
<Text Value="{text}" TextWrapping="Wrap" TextColor="White" Alignment="CenterLeft" />
</Panel>
<AddingAnimation>
<Scale Factor="0" Duration=".5" Easing="QuinticIn" />
</AddingAnimation>
</DockPanel>
</WhileFalse>
</WhileString>
<WhileString Equals="image" Value="{type}">
<WhileTrue Value="{dock}" >
<DockPanel Margin="5">
<Panel Padding="20" Margin="10,0,10,0">
<Rectangle Layer="Background" CornerRadius="10" Opacity=".12" Color="Green"/>
<Rectangle Height="200" Width="99%" CornerRadius="10">
<ImageFill Url="{image}" StretchMode="UniformToFill"/>
</Rectangle>
</Panel>
<AddingAnimation>
<Scale Factor="0" Duration=".5" Easing="QuinticIn" />
</AddingAnimation>
</DockPanel>
</WhileTrue>
<WhileFalse Value="{dock}">
<DockPanel Margin="5">
<Panel Margin="10,0,10,0">
<Rectangle Layer="Background" CornerRadius="10" Opacity=".9" />
<Rectangle Height="200" Width="99%" CornerRadius="10">
<ImageFill Url="{image}" StretchMode="UniformToFill"/>
</Rectangle>
</Panel>
<AddingAnimation>
<Scale Factor="0" Duration=".5" Easing="QuinticIn" />
</AddingAnimation>
</DockPanel>
</WhileFalse>
</WhileString>
</Each>
<LayoutAnimation>
<Move RelativeTo="PositionChange" Y="1" Duration=".5" Easing="QuinticInOut" />
</LayoutAnimation>
</StackPanel>
</ScrollView>
this is how i’m loading my data
function MessageForm(id, session, text, createdAt, sender, ParseObject, type, image)
{
var self = this;
this.id = id;
this.session = session;
this.text = text;
this.createdAt = createdAt;
this.sender = sender;
this.ParseObject= ParseObject;
this.dock = Observable(function(){
if(sender == Parse.User.current().id){
return false
}else {
return true
}
});
this.action = Observable(function(){
if(isDefined(ParseObject.get("action"))){
return ParseObject.get("action")
}else {
}
});
this.image = image
this.type = type;
}
function loadMessage()
{
var query = new Parse.Query("Messages")
query.equalTo("rooms", Parse.User.current().id)
query.find().then(function(results){
enable.value = false
MessagesAll.refreshAll(results,
function(oldItem, newItem){
return oldItem.id == newItem.id
},
function(oldItem, newItem){
oldItem.createdAt = newItem.get("createdAt")
},
function(newItem){
return new MessageForm(newItem.id, newItem.get("rooms"), newItem.get("text"), newItem.get("createdAt"), newItem.get("sender"), newItem, newItem.get("type"), newItem.get("photo"))
}
)
})
}
the problem is when my app doesn’t display the text and the image at the same time.
for displaying the text i need to not download the image, so in my MessageForm function i need to do this.image = image and not this.image = image.url(). for displaying image i need to download the url. both image and text have the same room and are not displayed at the same time
