{"elementName":"ObjectSchema","name":"DesignerWhitePaper","containers":[{"name":"container","elementName":"Container","style":{"top":0,"left":0,"height":847,"width":759,"position":"relative"},"props":{"startOnNewPage":false,"unbreakable":false},"boxes":[{"name":"HtmlBox","elementName":"Core.HtmlBox","style":{"top":3,"left":202,"transform":{}},"props":{"content":"<h2 style=\"text-align: center;\"><strong>React designer</strong></h2>\n<p style=\"text-align: center;\"><em>tool for creating <strong>documents natural to human</strong></em></p>\n<p>&nbsp;</p>"}},{"name":"Copy HtmlBox","elementName":"Core.HtmlBox","style":{"top":585,"left":0,"transform":{}},"props":{"content":"<p><strong>Top&nbsp;features</strong></p>\n<ul>\n<li><strong>created for</strong>&nbsp;<strong>developers</strong> - thanks to modularity developers can create their own designers</li>\n<li><strong>immediate feedback</strong>\n<ul>\n<li>when <strong>creating content</strong> - writing, drawing, cutting, resizing, moving object positions, rotating, stretching, cropping, layering, moving up and down in object hierarchy and even programming</li>\n<li>when <strong>consuming content </strong>- reactivness to user inputs (drag, click, typing, touching)</li>\n</ul>\n</li>\n<li><strong>framework agnostic</strong>\n<ul>\n<li>logical component tree is framework agnostic</li>\n<li>componets are framework dependend - components are typically framework dependend - (react and angular components can have different properties or they implement them&nbsp;visually differently fr the same properties)</li>\n</ul>\n</li>\n</ul>"}},{"name":"ImageBox","elementName":"Core.ImageBox","style":{"top":136,"left":34},"props":{"url":"http://react-documets.rhcloud.com/assets/images/designer.png","border":{"radius":90}}},{"name":"Copy ImageBox","elementName":"Core.ImageBox","style":{"top":135,"left":300,"transform":{}},"props":{"url":"http://react-documets.rhcloud.com/assets/images/publisher.png","border":{"radius":90}}},{"name":"Copy Copy ImageBox","elementName":"Core.ImageBox","style":{"top":137,"left":540,"transform":{}},"props":{"url":"http://react-documets.rhcloud.com/assets/images/api.png","border":{"radius":90}}},{"name":"TextBox","elementName":"Core.TextBox","style":{"top":270,"left":44,"transform":{}},"props":{"content":"Design","font":{"fontFamily":"Times New Roman","fontSize":30,"bold":true,"italic":true}}},{"name":"Copy TextBox","elementName":"Core.TextBox","style":{"top":273,"left":320,"transform":{}},"props":{"content":"Play","font":{"fontFamily":"Times New Roman","fontSize":30,"bold":true,"italic":true}}},{"name":"Copy Copy TextBox","elementName":"Core.TextBox","style":{"top":275,"left":545,"transform":{}},"props":{"content":"Program","font":{"fontFamily":"Times New Roman","fontSize":30,"bold":true,"italic":true}}},{"name":"HtmlBox","elementName":"Core.HtmlBox","style":{"top":320,"left":0,"width":200,"transform":{}},"props":{"content":"<p style=\"text-align: center;\">WYSIWYG editor for easy content creation with comfortable user experience</p>","font":{"italic":true,"underline":false}}},{"name":"Copy HtmlBox","elementName":"Core.HtmlBox","style":{"top":320,"left":260,"width":200,"transform":{}},"props":{"content":"<p style=\"text-align: center;\">App that enables to view, explore and print documents with basic support for filling in data and validation</p>","font":{"bold":false,"italic":true}}},{"name":"Copy HtmlBox","elementName":"Core.HtmlBox","style":{"top":320,"left":510,"width":200,"transform":{}},"props":{"content":"<p style=\"text-align: center;\">API to enable to view, fill in and print documents for third party applications</p>","font":{"italic":true,"underline":false}}},{"name":"Alert","elementName":"react-bootstrap.Alert","style":{"top":433,"transform":{}},"props":{"bsStyle":"danger","content":"<p><strong>Warning: It is a prototype&nbsp;application</strong></p>\n<p>It is a technical challange to create genaral purpose tools for content creation that designers will use in a simple, intuitive and comfortable way.&nbsp;React designer is prototype tool that demonstrates&nbsp;it may be possible and even on the web platform, but it is far from being production ready. &nbsp;</p>"}}],"containers":[]},{"name":"container","elementName":"Container","style":{"top":0,"left":0,"height":347,"width":749,"position":"relative"},"props":{"startOnNewPage":false,"unbreakable":true},"boxes":[{"name":"ImageCarousel","elementName":"Core.ImageCarousel","style":{"top":24,"left":0,"width":350,"height":300,"transform":{}},"props":{"width":160,"height":250,"slides":{"path":"slides.guides","converter":{"code":"return {\n  format: box.customCode.convertToImages\n}","compiled":"\"use strict\";\n\n(function () {\n  return {\n    format: box.customCode.convertToImages\n  };\n})();"},"mode":"OneWay"},"settings":{"arrows":true,"autoplay":true,"autoplaySpeed":2000,"centerMode":false,"dots":true,"infinite":true,"slidesToShow":2,"slidesToScroll":2,"variableWidth":false,"adaptiveHeight":false}}},{"name":"BioMeachnic","elementName":"Core.TextBox","style":{"top":-4,"left":94},"props":{"content":"Technical guides","font":{"bold":true}}},{"name":"Copy Reports examples","elementName":"Core.TextBox","style":{"top":0,"left":501},"props":{"content":"Reports","font":{"bold":true}}},{"name":"Copy ImageCarousel","elementName":"Core.ImageCarousel","style":{"top":27,"left":388,"width":350,"height":300,"transform":{}},"props":{"width":160,"height":250,"slides":{"path":"slides.reports","converter":{"code":"return {\n  format: box.customCode.convertToImages\n}","compiled":"\"use strict\";\n\n(function () {\n  return {\n    format: box.customCode.convertToImages\n  };\n})();"},"mode":"OneWay"},"settings":{"arrows":true,"autoplay":true,"autoplaySpeed":2000,"centerMode":false,"dots":true,"infinite":true,"slidesToShow":2,"slidesToScroll":2,"variableWidth":false,"adaptiveHeight":false}}}],"containers":[]},{"name":"Copy container","elementName":"Container","style":{"top":0,"left":0,"height":347,"width":749,"position":"relative"},"props":{"startOnNewPage":false,"unbreakable":true},"boxes":[{"name":"ImageCarousel","elementName":"Core.ImageCarousel","style":{"top":24,"left":0,"width":350,"height":300,"transform":{}},"props":{"width":160,"height":250,"slides":{"path":"slides.tutorials","converter":{"code":"return {\n  format: box.customCode.convertToImages\n}","compiled":"\"use strict\";\n\n(function () {\n  return {\n    format: box.customCode.convertToImages\n  };\n})();"},"mode":"OneWay"},"settings":{"arrows":true,"autoplay":true,"autoplaySpeed":2000,"centerMode":false,"dots":true,"infinite":true,"slidesToShow":2,"slidesToScroll":2,"variableWidth":false,"adaptiveHeight":false}}},{"name":"BioMeachnic","elementName":"Core.TextBox","style":{"top":-4,"left":94},"props":{"content":"Tutorials","font":{"bold":true}}},{"name":"Copy Reports examples","elementName":"Core.TextBox","style":{"top":0,"left":501},"props":{"content":"Image Gallery","font":{"bold":true}}},{"name":"Copy ImageCarousel","elementName":"Core.ImageCarousel","style":{"top":27,"left":388,"width":350,"height":300,"transform":{}},"props":{"width":160,"height":250,"slides":{"path":"slides.images","converter":{"code":"return {\n  format: box.customCode.convertToImages\n}","compiled":"\"use strict\";\n\n(function () {\n  return {\n    format: box.customCode.convertToImages\n  };\n})();"},"mode":"OneWay"},"settings":{"arrows":true,"autoplay":true,"autoplaySpeed":2000,"centerMode":false,"dots":true,"infinite":true,"slidesToShow":2,"slidesToScroll":2,"variableWidth":false,"adaptiveHeight":false}}}],"containers":[]},{"name":"Copy Copy container","elementName":"Container","style":{"top":0,"left":0,"height":347,"width":749,"position":"relative"},"props":{"startOnNewPage":false,"unbreakable":true},"boxes":[{"name":"ImageCarousel","elementName":"Core.ImageCarousel","style":{"top":24,"left":0,"width":350,"height":300,"transform":{}},"props":{"width":160,"height":250,"slides":{"path":"slides.leaflets","converter":{"code":"return {\n  format: box.customCode.convertToImages\n}","compiled":"\"use strict\";\n\n(function () {\n  return {\n    format: box.customCode.convertToImages\n  };\n})();"},"mode":"OneWay"},"settings":{"arrows":true,"autoplay":true,"autoplaySpeed":2000,"centerMode":false,"dots":true,"infinite":true,"slidesToShow":2,"slidesToScroll":2,"variableWidth":false,"adaptiveHeight":false}}},{"name":"BioMeachnic","elementName":"Core.TextBox","style":{"top":-4,"left":94},"props":{"content":"Marketing leaflets","font":{"bold":true}}},{"name":"Copy Reports examples","elementName":"Core.TextBox","style":{"top":-2,"left":488},"props":{"content":"Business documents","font":{"bold":true}}},{"name":"Copy ImageCarousel","elementName":"Core.ImageCarousel","style":{"top":27,"left":388,"width":350,"height":300,"transform":{}},"props":{"width":160,"height":250,"slides":{"path":"slides.contracts","converter":{"code":"return {\n  format: box.customCode.convertToImages\n}","compiled":"\"use strict\";\n\n(function () {\n  return {\n    format: box.customCode.convertToImages\n  };\n})();"},"mode":"OneWay"},"settings":{"arrows":true,"autoplay":true,"autoplaySpeed":2000,"centerMode":false,"dots":true,"infinite":true,"slidesToShow":2,"slidesToScroll":2,"variableWidth":false,"adaptiveHeight":false}}}],"containers":[]},{"name":"container","elementName":"Container","style":{"top":0,"left":0,"height":51,"width":738,"position":"relative"},"props":{"startOnNewPage":true,"unbreakable":false},"boxes":[{"name":"HtmlBox","elementName":"Core.HtmlBox","style":{"top":0,"left":0,"transform":{}},"props":{"content":"<p>React designer is relative&nbsp;<strong>modular app</strong> and consists a set of<strong>&nbsp;basic components and features.</strong></p>"}}],"containers":[]},{"name":"container","elementName":"Container","style":{"top":0,"left":0,"height":485,"width":729,"position":"relative"},"props":{"startOnNewPage":false,"unbreakable":true},"boxes":[{"name":"HtmlBox","elementName":"Core.HtmlBox","style":{"top":0,"left":0,"transform":{}},"props":{"content":"<p>Basic components</p>\n<ul>\n<li>Workplace\n<ul>\n<li>Container</li>\n<li>Box</li>\n</ul>\n</li>\n<li>ObjectPropertyGrid\n<ul>\n<li>Html editor - TinyMCE</li>\n<li>Code editor - CodeMirror</li>\n<li>Color picker - react-color-picker</li>\n<li>Other editors (number, text, select, etc.)</li>\n</ul>\n</li>\n<li>ObjectBrowser</li>\n<li>Preview\n<ul>\n<li>HtmlPagesRenderer</li>\n<li>HtmlBookRenderer</li>\n</ul>\n</li>\n</ul>"}},{"name":"Copy HtmlBox","elementName":"Core.HtmlBox","style":{"top":3,"left":346,"transform":{}},"props":{"content":"<p>Basic features</p>\n<ul>\n<li>layouting\n<ul>\n<li>moving component&nbsp;positions</li>\n<li>resizing&nbsp;component&nbsp;sizes</li>\n<li>moving up and down object hierarchy</li>\n<li>copying, deleting</li>\n</ul>\n</li>\n<li>component editing\n<ul>\n<li>strech, rotate, transform</li>\n<li>property editing via various editors (html, code, colour, number, etc.)</li>\n</ul>\n</li>\n<li>workplace\n<ul>\n<li>undo - redo</li>\n<li>preview</li>\n<li>component chooser</li>\n<li>import/export definition</li>\n</ul>\n</li>\n</ul>"}},{"name":"Alert","elementName":"react-bootstrap.Alert","style":{"top":338,"left":0,"transform":{}},"props":{"bsStyle":"info","content":"<p><strong>Tip: Create your own designer for your domain problem.&nbsp;</strong></p>\n<p>Do you need to program image gallery software that generates pages of images and you need to allow user to move images between pages. Try it with react-designer-core component. It is open sourced.</p>"}}],"containers":[]},{"name":"container","elementName":"Container","style":{"top":0,"left":0,"height":350,"width":741,"position":"relative"},"props":{"startOnNewPage":false,"unbreakable":true},"boxes":[{"name":"HtmlBox","elementName":"Core.HtmlBox","style":{"top":0,"left":0,"transform":{}},"props":{"content":"<p><strong>How it works</strong></p>\n<p>It is based on components and layout separation between</p>\n<ul>\n<li>logical component tree - Page Transform Tree (PTT) - it is framework agnostic definition designed to support dynamic rendering of pages in different sizes (A4,A3,Letter,...) and in various formats (html,pdf).</li>\n<li>visual component tree - React virtual DOM - rendering to DOM so that it maps each component (terminal node) from logical tree to react component and its properties</li>\n</ul>\n<p>Document is defined in JSON. This JSON is a simple document description that contains logical component tree and component &nbsp;names with its various properties.</p>\n<p>The visual component tree is created on the fly differently based for purpuse of&nbsp;</p>\n<ul>\n<li>content creator - designer application - renders flow of logical component tree (no pages)</li>\n<li>content consumer - various viewer applications\n<ul>\n<li>HTMLPagesRenderer - renders sequence of pages</li>\n<li>HTMLBookRenderer - renders pages in book format</li>\n</ul>\n</li>\n</ul>"}}],"containers":[]},{"name":"Copy Copy container","elementName":"Container","style":{"top":0,"left":0,"height":206,"width":752,"position":"relative"},"props":{"startOnNewPage":false,"unbreakable":true},"boxes":[{"name":"Copy HtmlBox","elementName":"Core.HtmlBox","style":{"transform":{}},"props":{"content":"<p><strong>Component properties resolution</strong></p>\n<p>&nbsp;The property value is resolved by using this value resolution strategy.</p>\n<ol>\n<li>Binding Value - value from data using data-binding</li>\n<li>Local Value - value set up directly at component instance</li>\n<li>Style Value - value set up at the style at the root of document</li>\n<li>Default Value - value set up at the component class - the same for all component instances</li>\n</ol>"}}],"containers":[]},{"name":"Copy container","elementName":"Container","style":{"top":0,"left":0,"height":138,"width":755,"position":"relative"},"props":{"startOnNewPage":false,"unbreakable":true},"boxes":[{"name":"HtmlBox","elementName":"Core.HtmlBox","style":{"top":0,"left":0,"transform":{}},"props":{"content":"<p><strong>Data binding</strong></p>\n<p>There are tools that enables designers<strong>&nbsp;</strong>to draw static graphics, but there are minimal tools that enables to draw dynamic graphics whose&nbsp;properties are&nbsp;<strong>data-dependent. </strong>This is typically the task for programmer to make graphics alive.</p>\n<p>&nbsp;</p>"}}],"containers":[]},{"name":"Copy Copy Copy container","elementName":"Container","style":{"top":0,"left":0,"height":487,"width":766,"position":"relative"},"props":{"startOnNewPage":false,"unbreakable":true},"boxes":[{"name":"Copy HtmlBox","elementName":"Core.HtmlBox","style":{"transform":{}},"props":{"content":"<p><strong>Data binding</strong></p>\n<p>I do not think data binding (espacially two-way) is an antipattern. What is data binding.</p>\n<p>Data binding is a declarative way how to set up which data should be displayed in UI. Typically you use path to set up data binding expression (PermanentAddress.Street, TemporaryAddress.City). That is great and it is very simple and declarative way how to say synchronize this data item with UI. (I do not know any better.)</p>\n<p>Data binding is also called the implementation of how to synchronize the data item with UI. This implementation can be different (digest cycle (angular), observable wrapper objects (knockout), event delegation, event agregators, etc.). Some implementation do not prevent cascading updates (properties can be dependend on each other) and the update cycle can go in the worst case forever (cycling) or in the better case to the point where the model stabilisied (no input modefies any other output in one update cycle).</p>\n<p>Cascading updates is an antipattern, but not the data binding itself (as declarative way to defined what data field is synchronized with UI).</p>\n<p>React designer supports exprimentally property data binding for some component properties</p>\n<ul>\n<li>local data - synchronous - using react-binding\n<ul>\n<li>one-way</li>\n<li>two-way</li>\n</ul>\n</li>\n<li>remote data - asynchronous - using falcor\n<ul>\n<li>one-way</li>\n</ul>\n</li>\n</ul>\n<p>&nbsp;</p>"}}],"containers":[]},{"name":"Copy container","elementName":"Container","style":{"top":0,"left":0,"height":181,"width":769,"position":"relative"},"props":{"startOnNewPage":false,"unbreakable":false},"boxes":[{"name":"ImageBox","elementName":"Core.ImageBox","style":{"top":7,"left":635},"props":{"url":"https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQH1mXLPLnPPZIgZ7yP0Ut87bNEnycft3LMS1F1E3n3VQ6uWdcADY5ezA","border":{"radius":20}}},{"name":"HtmlBox","elementName":"Core.HtmlBox","style":{"top":0,"left":0,"transform":{}},"props":{"content":"<p><strong>Who is behind</strong></p>\n<p>Roman Samec, front-end developer.</p>"}}],"containers":[]}],"props":{"defaultData":{"slides":{"guides":{"name":"bikery","pages":7},"tutorials":{"name":"DesignerWhitePaper","pages":4},"images":{"name":"Images","pages":3},"leaflets":{"name":"Flowers","pages":3},"reports":{"name":"Charts_pages","pages":3},"contracts":{"name":"orders","pages":6}}},"context":{"code":{"code":"return {\n  convertToImages:function(value){\n    var path = 'http://render-pergamon.rhcloud.com/data/images/';\n    var pages =[];\n    for (var i=0;i!=value.pages;i++){\n       pages.push(i);\n    }    \n    return pages.map(function(image,i){return {src:path + value.name + \"_\"+  +  i + '.png'}});\n  }\n}","compiled":"'use strict';\n\n(function () {\n  return {\n    convertToImages: function convertToImages(value) {\n      var path = 'http://render-pergamon.rhcloud.com/data/images/';\n      var pages = [];\n      for (var i = 0; i != value.pages; i++) {\n        pages.push(i);\n      }\n      return pages.map(function (image, i) {\n        return { src: path + value.name + \"_\" + +i + '.png' };\n      });\n    }\n  };\n})();"}}}}