Preview.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. MWF.require("MWF.widget.Common", null, false);
  2. MWF.require("MWF.widget.Panel", null, false);
  3. MWF.xApplication.process.FormDesigner.Preview = MWF.FCPreview = new Class({
  4. Extends: MWF.widget.Common,
  5. Implements: [Options, Events],
  6. options: {
  7. "style": "default",
  8. "previewPath": "../x_desktop/preview.html",
  9. "size": null,
  10. "mode": "pc"
  11. },
  12. initialize: function(form, options){
  13. this.setOptions(options);
  14. var href = window.location.href;
  15. if (href.indexOf("debugger")!=-1) this.options.previewPath = "../x_desktop/preview.html?debugger";
  16. this.path = "../x_component_process_FormDesigner/$Preview/";
  17. this.cssPath = "../x_component_process_FormDesigner/$Preview/"+this.options.style+"/css.wcss";
  18. this._loadCss();
  19. this.form = form;
  20. //this.data = Object.clone((form._getFormData) ? form._getFormData() : form._getPageData());
  21. this.data = Object.clone( this.form.data );
  22. //this.data = Object.clone((form._getFormData) ? form._getFormData() : form._getPageData());
  23. //this.form.reload();
  24. //this.data = Object.clone(data);
  25. },
  26. load: function(){
  27. var p = this.getPanelPostion();
  28. this.createPreviewNodes();
  29. this.createPanel(p);
  30. this.setEvent();
  31. this.loadForm();
  32. this.addActions();
  33. },
  34. getPanelPostion: function(){
  35. var size = this.form.designer.node.getSize();
  36. var x = size.x*0.7;
  37. var y = size.y*0.8;
  38. if (this.options.size){
  39. x = this.options.size.x;
  40. y = this.options.size.y;
  41. }
  42. var top = ((size.y-y)/2)*0.8;
  43. var left = (size.x-x)/2;
  44. return {"x": x, "y": y, "top": top, "left": left};
  45. },
  46. createPreviewNodes: function(){
  47. this.node = new Element("div", {"styles": this.css.contentNode});
  48. this.topActionAreaNode = new Element("div", {"styles": this.css.topActionAreaNode}).inject(this.node);
  49. this.formFrameNode = new Element("iframe", {"styles": this.css.formFrameNode}).inject(this.node);
  50. this.formJsonNode = new Element("div", {"styles": this.css.formJsonNode}).inject(this.node);
  51. },
  52. addActions: function(){
  53. this.showJsonAction = new Element("div", {
  54. "styles": this.css.actionButton,
  55. "text": "show json"
  56. }).inject(this.topActionAreaNode);
  57. this.showJsonAction.addEvent("click", function(){
  58. this.showJson();
  59. }.bind(this));
  60. this.showFormAction = new Element("div", {
  61. "styles": this.css.actionButton,
  62. "text": "show form"
  63. }).inject(this.topActionAreaNode);
  64. this.showFormAction.setStyle("display", "none");
  65. this.showFormAction.addEvent("click", function(){
  66. this.showForm();
  67. }.bind(this));
  68. },
  69. showForm: function(){
  70. this.formJsonNode.empty();
  71. this.formFrameNode.setStyle("display", "block");
  72. this.formJsonNode.setStyle("display", "none");
  73. this.showJsonAction.setStyle("display", "block");
  74. this.showFormAction.setStyle("display", "none");
  75. },
  76. showJson: function(){
  77. this.showJsonAction.setStyle("display", "none");
  78. this.showFormAction.setStyle("display", "block");
  79. this.formFrameNode.setStyle("display", "none");
  80. this.formJsonNode.setStyle("display", "block");
  81. var layout = this.formFrameNode.contentWindow.layout;
  82. MWF.require("MWF.widget.JsonParse", function(){
  83. this.json = new MWF.widget.JsonParse(layout.appForm.getData(), this.formJsonNode, null);
  84. this.json.load();
  85. }.bind(this));
  86. },
  87. createPanel: function(p){
  88. //alert(p.x);
  89. //alert(p.y);
  90. this.panel = new MWF.widget.Panel(this.node, {
  91. "style": "form",
  92. "title": this.data.json.name,
  93. "width": p.x,
  94. "height": p.y,
  95. "top": p.top,
  96. "left": p.left,
  97. "isExpand": false,
  98. "target": this.form.designer.node,
  99. "onQueryClose": function(){
  100. this.destroy();
  101. }.bind(this)
  102. });
  103. this.panel.load();
  104. },
  105. destroy: function(){
  106. this.node.empty();
  107. o2.release(this);
  108. },
  109. setEvent: function(){
  110. this.setFormFrameSize();
  111. this.panel.addEvent("resize", this.setFormFrameSize.bind(this));
  112. },
  113. setFormFrameSize: function(){
  114. var size = this.panel.content.getSize();
  115. var topSize = this.topActionAreaNode.getSize();
  116. var y = size.y-topSize.y-8;
  117. var x = size.x-8;
  118. this.formFrameNode.setStyle("height", ""+y+"px");
  119. this.formFrameNode.setStyle("width", ""+x+"px");
  120. this.formJsonNode.setStyle("height", ""+y+"px");
  121. this.formJsonNode.setStyle("width", ""+x+"px");
  122. },
  123. loadForm: function(){
  124. this.formFrameNode.store("preview",this);
  125. this.formFrameNode.set("src", this.options.previewPath+"?mode="+this.options.mode);
  126. //window.open(this.options.previewPath);
  127. //this.formDocument = this.formFrameNode.contentDocument;
  128. //this.formWindow = this.formFrameNode.contentWindow;
  129. //this.formFrameNode.preview = this;
  130. },
  131. loadFormData: function(node){
  132. MWF.getJSON("../x_desktop/res/preview/work.json", function(json){
  133. MWF.xDesktop.requireApp("process.Xform", "Form", function(){
  134. this.appForm = new MWF.APPForm(node, this.data);
  135. // this.appForm.businessData = {
  136. // "data": json.data,
  137. // "taskList": json.taskList,
  138. // "work": json.work,
  139. // "workCompleted": json.workCompleted,
  140. // "control": json.control,
  141. // "activity": json.activity,
  142. // "task": json.currentTask,
  143. // "workLogList": json.workLogList,
  144. // "attachmentList": json.attachmentList,
  145. // "status": {
  146. // //"readonly": (this.options.readonly) ? true : false
  147. // "readonly": json.readonly
  148. // }
  149. // };
  150. this.appForm.app = this.form.designer;
  151. this.appForm.load();
  152. }.bind(this));
  153. }.bind(this));
  154. }
  155. });