Created
September 25, 2015 11:55
-
-
Save mcvendrell/408ec0a3d00b24be9268 to your computer and use it in GitHub Desktop.
Chat with Alloy models failing test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
exports.definition = { | |
config: { | |
columns: { | |
"content": "String", | |
"date": "String", | |
"author": "String" | |
}, | |
adapter: { | |
type: "properties", | |
collection_name: "chat" | |
} | |
}, | |
extendModel: function(Model) { | |
_.extend(Model.prototype, { | |
transform: function transform() { | |
var message = this.toJSON(); | |
return message; | |
} | |
}); | |
return Model; | |
}, | |
extendCollection: function(Collection) { | |
return Collection; | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var chat = Alloy.Collections.chat = Alloy.createCollection('chat'); | |
function setTemplate(model) { | |
var transform = model.toJSON(); | |
transform.template = (transform.author == "Auth1") ? "messageOnTheRight" : "messageOnTheLeft"; | |
return transform; | |
} | |
function send(e) { | |
if (0 === $.typingArea.value.length) return; | |
var message = Alloy.createModel('chat', { | |
content: $.typingArea.value, | |
author: "Auth1", | |
date: new Date() | |
}); | |
$.typingArea.value = ""; | |
chat.add(message); | |
}; | |
$.win.addEventListener('close', function() { | |
$.destroy(); | |
}); | |
$.win.open(); | |
chat.fetch(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"#container" : { | |
height: Ti.UI.FILL, | |
width: Ti.UI.FILL | |
} | |
// LISTVIEW = messages | |
"#listView" : { | |
width: Ti.UI.FILL, | |
height: Ti.UI.FILL, | |
top: 0, | |
separatorColor: "transparent" | |
} | |
"ListItem[platform=ios]" : { | |
height: Ti.UI.SIZE, | |
selectionStyle: Ti.UI.iPhone.ListViewCellSelectionStyle.NONE // prevent weird feature on iOS (background strech) | |
} | |
".listItem" : { | |
width: Ti.UI.FILL, | |
height: Ti.UI.SIZE, | |
layout: "vertical" | |
} | |
".message-row" : { | |
width: Ti.UI.FILL, | |
height: Ti.UI.SIZE | |
} | |
".message-box" : { | |
width: "70%", | |
height: Ti.UI.SIZE, | |
borderRadius: 10, | |
top: 3, | |
bottom: 3 | |
} | |
".left" : { | |
left: 3, | |
backgroundColor: "#ddd" | |
} | |
".right" : { | |
right: 3, | |
backgroundColor: "#bbb" | |
} | |
".message" : { | |
top: 7, | |
right: 7, | |
bottom: 7, | |
left: 7, | |
width: Ti.UI.FILL, | |
height: Ti.UI.SIZE | |
} | |
".date" : { | |
width: Ti.UI.FILL, | |
height: Ti.UI.SIZE, | |
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER, | |
color: "#444", | |
font: { | |
fontSize: "10dp" | |
} | |
} | |
// NEW MESSAGE TEXT FIELD | |
"#chatTextFieldContainer": { | |
width: Ti.UI.FILL, | |
height: Ti.UI.SIZE, | |
bottom: 0, | |
backgroundColor: "#eee" | |
} | |
"#subSeparator" : { | |
width: Ti.UI.FILL, | |
height: Ti.UI.SIZE, | |
} | |
"TextArea" : { | |
width: Ti.UI.FILL, | |
height: Ti.UI.SIZE, | |
color: "#222", | |
backgroundColor: "white", | |
textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT, | |
focused: "false", | |
left: 4, | |
right: 58, // Since the 'send' button is 50 width, + margin 4, that's 58 | |
focused: "false" | |
} | |
"#btnWrapper" : { | |
bottom: 0, | |
right: 0, | |
width: 58, | |
height: 58 | |
} | |
"Button" : { | |
bottom: 4, | |
right: 4, | |
width: 50, | |
height: 50, | |
font: { | |
fontSize: "16dp" | |
}, | |
color: "white", | |
borderRadius: 25, | |
backgroundColor: "#00AA00", | |
backgroundFocusedColor: "#33CC33", | |
backgroundSelectedColor: "#33CC33" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<Alloy> | |
<Window id="win" title="Mensajes" layout="vertical"> | |
<View id="chatWrapper"> | |
<View id="container"> | |
<ListView id="listView"> | |
<Templates> | |
<ItemTemplate name="messageOnTheLeft"> | |
<View class="listItem"> | |
<View class="message-row"> | |
<View class="message-box left"> | |
<Label class="message" bindId="message" /> | |
</View> | |
</View> | |
<Label class="date" bindId="messageDate" /> | |
</View> | |
</ItemTemplate> | |
<ItemTemplate name="messageOnTheRight"> | |
<View class="listItem"> | |
<View class="message-row"> | |
<View class="message-box right"> | |
<Label class="message" bindId="message" /> | |
</View> | |
</View> | |
<Label class="date" bindId="messageDate" /> | |
</View> | |
</ItemTemplate> | |
</Templates> | |
<ListSection dataCollection="chat" dataFunction="renderMessages" dataTransform="setTemplate"> | |
<ListItem template="{template}" message:text="{content}" messageDate:text="{date}" /> | |
</ListSection> | |
</ListView> | |
<View id="chatTextFieldContainer"> | |
<TextArea id="typingArea" /> | |
<View id="btnWrapper"> | |
<Button id="sendBtn" title=">" onClick="send" /> | |
</View> | |
</View> | |
</View> | |
</View> | |
</Window> | |
</Alloy> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment