Created
April 27, 2012 13:07
-
-
Save elsewhat/2509035 to your computer and use it in GitHub Desktop.
SAPUI5 beta - Simple feed
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> | |
| <title>SAPUI5 sap.ui.ux3.Feed</title> | |
| <script src="/sapui5/resources/sap-ui-core.js" | |
| type="text/javascript" | |
| id="sap-ui-bootstrap" | |
| data-sap-ui-libs="sap.ui.core,sap.ui.ux3,sap.ui.commons" | |
| data-sap-ui-theme="sap_goldreflection" | |
| data-sap-ui-areas="feed" > | |
| </script> | |
| <script type="text/javascript"> | |
| //EVENT HANDLERS | |
| //should show information about the user | |
| function handleSenderClicked(oEvent){ | |
| alert("Chunk "+ oEvent.oSource.getId() + ": click on sender"); | |
| } | |
| //called when a comment has been added by the user | |
| function handleCommentAdded(oEvent){ | |
| var oComment = oEvent.getParameter('comment'); | |
| alert("Comment --"+ oComment.getText() + "-- added"); | |
| oComment.attachSenderClicked(handleSenderClicked); | |
| } | |
| //called when a new post has been added by the user | |
| function handleChunkAdded(oEvent){ | |
| var oChunk = oEvent.getParameter('chunk'); | |
| alert("Chunk --"+ oChunk.getText() + "-- added"); | |
| oChunk.attachSenderClicked(handleSenderClicked); | |
| } | |
| //called when the filtering value is updated by the user | |
| function handleFilterChange(oEvent){ | |
| alert("Filter changed: "+ oEvent.getParameter('newValue')); | |
| } | |
| //called if the end-user searches | |
| function handleSearch(oEvent){ | |
| alert("Search triggered: "+ oEvent.getParameter('query')); | |
| } | |
| //Create the Feed component | |
| //In this example we set the posts(chunks) directly in the constructor | |
| var oFeed = new sap.ui.ux3.Feed("Feed1", | |
| { | |
| feederThumbnailSrc: '/demokit/test-resources/sap/ui/ux3/img/feeder/w_01.png', | |
| feederSender: 'Dagfinn Parnas', | |
| filterItems: [ new sap.ui.core.ListItem('FilterItem1',{key: 'item1',text: 'Display all updates'}), | |
| new sap.ui.core.ListItem('FilterItem2',{key: 'item2',text: 'Display business objects'})], | |
| filterChange: handleFilterChange, | |
| search: handleSearch, | |
| chunkAdded: handleChunkAdded, | |
| chunks: [ new sap.ui.ux3.FeedChunk("Chunk1", { | |
| thumbnailSrc: "/demokit/test-resources/sap/ui/ux3/img/Account_48.png", | |
| sender: "Sales order #42", | |
| text: "Sales order between Bouvet and ACME has been updated.\nNew forecast 12 months in 17 000 000 NOK\nOld forecast 12 months in 14 000 000 NOK", | |
| timestamp: "2 hours ago", | |
| flagged: true, | |
| favorite: true, | |
| shared: true, | |
| senderClicked: handleSenderClicked, | |
| commentAdded: handleCommentAdded, | |
| comments: | |
| [ new sap.ui.ux3.FeedChunk("commentChunk1", | |
| { | |
| commentChunk: true, | |
| sender: "Dagfinn Parnas", | |
| thumbnailSrc: "http://si0.twimg.com/profile_images/477878955/teched_mentor_2008_small_reasonably_small.png", | |
| text: "We've finally landed the much awaited contract, so forecast is increased!", | |
| timestamp: "1 hour ago", | |
| })], | |
| }), | |
| new sap.ui.ux3.FeedChunk("Chunk2", { | |
| thumbnailSrc: "http://si0.twimg.com/profile_images/477878955/teched_mentor_2008_small_reasonably_small.png", | |
| sender: "Sales order #42", | |
| text: "contract meeting with ACME. The prospect of receiving it is very high.", | |
| timestamp: "3 days ago", | |
| flagged: true, | |
| favorite: true, | |
| shared: true, | |
| senderClicked: handleSenderClicked, | |
| commentAdded: handleCommentAdded, | |
| }), | |
| ] | |
| }); | |
| //bind the component to the HTML DIV element with id feed | |
| oFeed.placeAt("feed"); | |
| </script> | |
| </head> | |
| <body class="sapUiBody" id="body"> | |
| <div id="feed" style="width:80%;"> </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment