Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Live Product show page

  • Loading branch information...
commit ede937f59fb73e22d17a5cb27d971df86049ea3a 1 parent 73acaa6
@ceefour authored
View
24 paxwicketjava/core/src/main/java/com/hendyirawan/oui/paxwicketjava/core/Product.java
@@ -1,6 +1,8 @@
package com.hendyirawan.oui.paxwicketjava.core;
import java.io.Serializable;
+import java.math.BigDecimal;
+import java.util.Random;
/**
@@ -13,12 +15,16 @@
private String id;
private String slug;
private String name;
+ private BigDecimal price;
+ private String description;
public Product(String id, String slug, String name) {
super();
this.id = id;
this.slug = slug;
this.name = name;
+ this.description = "Keren dan nyaman sekali";
+ this.price = new BigDecimal(Math.round(new Random().nextDouble() * 10000) * 500);
}
public Product(String name) {
@@ -26,6 +32,8 @@ public Product(String name) {
this.id = name.toLowerCase();
this.slug = name.toLowerCase();
this.name = name;
+ this.description = "Keren dan nyaman sekali";
+ this.price = new BigDecimal(Math.round(new Random().nextDouble() * 10000) * 500);
}
public String getId() {
@@ -56,5 +64,21 @@ public void setName(String name) {
public String toString() {
return "Product [id=" + id + ", slug=" + slug + ", name=" + name + "]";
}
+
+ public BigDecimal getPrice() {
+ return price;
+ }
+
+ public void setPrice(BigDecimal price) {
+ this.price = price;
+ }
+
+ public String getDescription() {
+ return description;
+ }
+
+ public void setDescription(String description) {
+ this.description = description;
+ }
}
View
5 paxwicketjava/web/src/main/java/com/hendyirawan/oui/paxwicketjava/web/ProductPage.java
@@ -63,11 +63,14 @@ protected void populateItem(ListItem<Category> item) {
add(new Footer());
add(new Label("productName", product.getName()));
- add(new Label("productDescription", "Sangat bagus dan menarik"));
+ add(new Label("productPrice", "IDR " + product.getPrice().toString()));
+ add(new Label("productDescription", product.getDescription()));
// Add the Backbone data
add(new Label("categoriesData", "var categoriesData = " + JsonUtils.asJson(categories) + ";")
.setEscapeModelStrings(false));
+ add(new Label("productData", "var productData = " + JsonUtils.asJson(product) + ";")
+ .setEscapeModelStrings(false));
// Add the Backbone View classes
}
View
31 paxwicketjava/web/src/main/resources/com/hendyirawan/oui/paxwicketjava/web/ProductPage.html
@@ -85,8 +85,11 @@
<!--/span-->
<div class="span9">
- <h1 wicket:id="productName">Product Name</h1>
- <p wicket:id="productDescription">Bla bla bla</p>
+ <div class="product-view">
+ <h1 wicket:id="productName">Product Name</h1>
+ <p wicket:id="productPrice">IDR 99.500</p>
+ <p wicket:id="productDescription">Bla bla bla</p>
+ </div>
</div>
<!--/row-->
</div>
@@ -140,14 +143,16 @@ <h1 wicket:id="productName">Product Name</h1>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap-typeahead.js"></script>
<script type="text/javascript" src="/static/js/growl.js"></script>
- <script type="text/javascript" src="/static/js/sidebar.js"></script>
+ <script type="text/javascript" src="/static/js/productshow.js"></script>
<script type="text/javascript" wicket:id="categoriesData"></script>
+<script type="text/javascript" wicket:id="productData"></script>
<script type="text/javascript">
// Define Model classes
var ProductCategory = Backbone.Model.extend({});
var ProductCategoryList = Backbone.Collection.extend({
model: ProductCategory});
+var Product = Backbone.Model.extend();
// TODO: should be convertable directly from Wicket Markup, or defined manually
// per component
@@ -189,14 +194,32 @@ <h1 wicket:id="productName">Product Name</h1>
}
});
+var productTemplate = '<h1><%- product.get("name") %></h1> \
+ <p>IDR <%- product.get("price") %></p> \
+ <p><%- product.get("description") %></p>';
+var ProductView = Backbone.View.extend({
+ initialize: function() {
+ _.bindAll(this, 'render');
+ this.model.on('change', this.render);
+ },
+ render: function() {
+ var html = _.template(productTemplate, {product: this.model});
+ this.$el.html(html);
+ return this;
+ }
+});
+
// create Model instances and reset before view is attached
var productCategories = new ProductCategoryList(categoriesData);
+var product = new Product(productData);
// create View instances
var categoriesSidebarView = new CategoriesSidebarView({el: jQuery('.sidebar-nav ul.nav'),
model: productCategories});
var categoriesNavbarView = new CategoriesNavbarView({el: jQuery('.navbar ul.nav'),
- model: productCategories})
+ model: productCategories});
+var productView = new ProductView({el: jQuery('.product-view'),
+ model: product});
</script>
View
209 paxwicketjava/web/src/main/webapp/js/productshow.js
@@ -0,0 +1,209 @@
+// Stomp via SockJS
+jQuery(document).ready(function() {
+
+ WebSocketStompMock = SockJS;
+ client = Stomp.client('http://' + window.location.hostname + ':55674/stomp');
+ client.debug = function(x) { console.debug(x); };
+ //client.debug = pipe('#second');
+
+ //var print_first = pipe('#first', function(data) {
+ // client.send('/topic/test', {}, data);
+ //});
+ client.connect('guest', 'guest', function(x) {
+ client.subscribe("/topic/product_category", function(d) {
+ var message = JSON.parse(d.body);
+ console.debug('product_category push', message);
+ if (message['@class'] == 'org.soluvas.push.CollectionAdd') {
+ productCategories.add(message.entry);
+ }
+ if (message['@class'] == 'org.soluvas.push.CollectionUpdate') {
+ productCategories.get(message.entryId).set(message.entry);
+ }
+ if (message['@class'] == 'org.soluvas.push.CollectionDelete') {
+ productCategories.remove(message.entryId);
+ }
+ });
+
+ client.subscribe("/topic/product", function(d) {
+ var message = JSON.parse(d.body);
+ console.debug('product push', message);
+ if (message['@class'] == 'org.soluvas.push.CollectionUpdate' && message.entryId == product.id) {
+ product.set(message.entry);
+ }
+ // HUH?
+// if (message['@class'] == 'org.soluvas.push.CollectionDelete') {
+// featuredProducts.remove(message.entryId);
+// }
+ });
+
+ });
+
+});
+
+// Models
+// var commentTemplate = '<strong><%=authorName%></strong>\
+// <div class="body"> \
+// <%=body%> &#183; <span style="color: #888; font-size: 80%;"><%=lastModified%></span></div> \
+// <div class="editor" style="display: none"> \
+// <input type="text"/> \
+// <button class="btn save"><i class="icon-ok"></i></button> \
+// </div> \
+// <div class="controls" style="position: absolute; top: 0; right: 0; display: none;"> \
+// <button class="btn edit" title="Edit"><i class="icon-edit"></i></button> \
+// <button class="btn delete" title="Delete"><i class="icon-remove"></i></button> \
+// </div>';
+// var Comment = Backbone.Model.extend({
+// defaults: {
+// authorName: 'Hendy Irawan',
+// body: 'Untitled comment',
+// created: new Date(),
+// lastModified: new Date()
+// }
+// });
+// var CommentList = Backbone.Collection.extend({
+// model: Comment,
+// url: apiUri + 'comment',
+// initialize: function() {
+// this.on('reset', this.onReset);
+// this.on('add', this.onAdd);
+// this.on('change', this.onChange);
+// },
+// onChange: function(arg) {
+// console.log('comment list changed', arg);
+// },
+// onAdd: function(comment) {
+// console.log('comment list added', comment);
+// var view = new CommentView({model: comment}).render();
+// view.$el.hide();
+// jQuery('#comment-stream').append(view.el);
+// view.$el.fadeIn('slow');
+// // comment.view = view;
+// // comment.on('destroy', this.removeView);
+// },
+// onReset: function(comments) {
+// console.log('comment list reset', this.length);
+// jQuery('#commentStream').html('<p>Eh lucu</p>');
+// this.each(function(comment) {
+// console.log("Process comment", comment);
+// var view = new CommentView({model: comment}).render();
+// jQuery('#comment-stream').append(view.$el);
+// });
+// }
+// });
+//
+// var NotificationCount = Backbone.Model.extend({
+// defaults: {count: 0},
+// initialize: function(args) {
+// _.bindAll(this, 'render');
+// this.on('change', this.render);
+// },
+// render: function() {
+// console.info('notificationCount render', this.get('count'));
+// var template = '';
+// if (this.get('count') > 0)
+// template = _.template('<span style="background: red; color: white"> <%=count%> </span>', {count: this.get('count')});
+// jQuery('#notification-count').html(template);
+// }
+// });
+// var notificationCount = new NotificationCount;
+//
+// var CommentView = Backbone.View.extend({
+// tagName: 'li',
+// className: 'comment',
+// initialize: function(args) {
+// _.bindAll(this, 'render', 'fadeAndRemove', 'remove');
+// this.model.on('change', this.replaceEntry, this);
+// this.model.on('destroy', this.fadeAndRemove, this);
+// },
+// events: {
+// 'mouseenter' : 'showControls',
+// 'mouseleave' : 'hideControls',
+// 'click .edit' : 'startEditing',
+// 'click .save' : 'saveEdit',
+// 'click .cancel' : 'cancelEdit',
+// 'click .delete' : 'deleteEntry',
+// 'keypress .editor': 'editorKeypress'
+// },
+// render: function() {
+// var template = _.template(commentTemplate,
+// {authorName: this.model.get('authorName'), body: this.model.get('body'), lastModified: this.model.get('lastModified')});
+// this.$el.html(template);
+// return this;
+// },
+// showControls: function() {
+// this.$('.controls').show();
+// },
+// hideControls: function(e) {
+// this.$('.controls').hide();
+// },
+// startEditing: function() {
+// console.log('Edit', this.model);
+// this.$('.body').hide();
+// this.$('.controls').hide();
+// this.$('.editor').show();
+// this.$('.editor input').focus();
+// this.$('.editor input').val(this.model.get('body'));
+// },
+// editorKeypress: function(e) {
+// if (e.which == 13) {
+// e.preventDefault();
+// this.saveEdit();
+// }
+// },
+// saveEdit: function() {
+// this.model.set('body', this.$('.editor input').val());
+// this.model.save();
+// },
+// cancelEdit: function() {
+// this.$('.editor').hide();
+// this.$('.body').show();
+// },
+// deleteEntry: function() {
+// console.log('Delete', this.model);
+// this.model.destroy();
+// },
+// fadeAndRemove: function() {
+// this.$el.fadeOut('slow', this.remove);
+// },
+// replaceEntry: function() {
+// var view = this;
+// this.$el.slideUp('fast', function(){ view.render(); view.$el.slideDown('slow'); });
+// }
+// });
+//
+// var freshComment = new Comment;
+//
+// var comments = new CommentList;
+//
+// function stripCdata(str) {
+// return (str+'').replace(/\<\!\[CDATA\[|\]\]\>/g, '');
+// }
+// function convertTemplate(str) {
+// return str.replace(/\{\{/g, '<%=').replace(/\}\}/g, '%>');
+// }
+//
+// jQuery(document).ready(function() {
+//
+// console.info("Fetching comments...");
+// comments.fetch();
+//
+// // Bind
+// jQuery('#commentBtn').bind('click', function() {
+// var commentText = jQuery('#commentBox').val();
+// console.log("Comment yaaa", commentText);
+// comments.create({body: commentText}, {wait: true}); // wait is needed, otherwise duplicate because Atmosphere usually got here first
+// });
+// jQuery('#commentBox').bind('keypress', function(e) {
+// if (e.which == 13) {
+// e.preventDefault();
+// jQuery('#commentBtn').trigger('click');
+// }
+// });
+// jQuery('#test-push').bind('click', function() {
+// jQuery('#growl-container').notify('create', {title: 'Wah keren', text: 'Maknyus gan'});
+// });
+// jQuery('#notification-count').bind('click', function() {
+// notificationCount.set('count', 0);
+// });
+//
+// });
Please sign in to comment.
Something went wrong with that request. Please try again.