README in masterview-0.1.5 vs README in masterview-0.2.0

- old
+ new

@@ -3,18 +3,24 @@ MasterView is a ruby/rails optimized HTML/XHTML friendly template engine. It is designed to use the full power and productivity of rails including layouts, partials, and rails html helpers while still being editable/styleable in a WYSIWYG HTML editor. -MasterView is distributed as a gem or a plugin. You may install it as a gem and then generate a lightweight plugin which mainly refers to the gem *or* you can simply install as a plugin which is self contained. I personally prefer installing as a gem for ease of management, however if you are running at a shared hosting environment you might not have authority to install this gem so you may install as a self contained plugin. +MasterView is distributed as a gem or a plugin. You may install it as a gem and +then generate a lightweight plugin which mainly refers to the gem *or* you can +simply install as a plugin which is self contained. I personally prefer installing +as a gem for ease of management, however if you are running at a shared hosting +environment you might not have authority to install this gem so you may install +as a self contained plugin. If you are interested in the background story behind all this, it is at the end of this page. Author:: Jeff Barczewski Email:: jeff.barczewski @ gmail.com -Rubyforge project:: masterview +Primary developers:: Jeff Barczewski, Deb Lewis Website:: http://masterview.org +Rubyforge project:: masterview License:: MIT open source license like Rails == Goals - Create/extend a template engine for rails that would be XHTML friendly and thus could be edited/styled with a WYSIWYG HTML editor even late in development without breaking template. @@ -33,518 +39,37 @@ Optional:: tidy (gem) and tidy library - if these are installed you can use tidy to cleanup html into valid xhtml for use by MasterView log4r (gem) - if this gem is installed then MasterView will use it for logging otherwise it defaults to using built in Logger. -== Installation +== User Documentation -Install in one of the two following ways depending on whether you can use gems or not. +MasterView documentation is available online at the MasterView site: + http://www.masterview.org +and on the rubyforge project + http://rubyforge.org/projects/masterview/ -=== Installation using gems (if you are able to use gems) +== Installation -If you can use gems you may simply do the following +Detailed installation instructions for installing the masterview gems +or a self-contained copy of the plugin is provided in the MasterView +Installation Guide. -gem install masterview_gem_pack +The Configuration Guide describes how to customize the configuration +of the MasterView template engine for your application. -Now your gem is installed and you can skip these steps in the future. After creating your rails directory, change directory to it and run the following to create a very lightweight plugin instance for this application mainly consisting of an init.rb file which will get loaded at runtime. This init.rb refers to the gem for everything but allows you to override any constants or setup that has been provided. See MasterView module masterview.rb for a list of the available constants. - -script/generate masterview_plugin - -After this MasterView is ready for use. Skip down to the Usage section for more details. - -=== Installation without using gems, install as plugin - -script/plugin install svn://rubyforge.org/var/svn/masterview/tags/latest - -This will copy entire MasterView system into your vendor/plugin/masterview directory. You may tweak its init.rb to override any MasterView constants at runtime. See MasterView module masterview.rb for a list of available constants. Note that if you don't have svn (subversion) installed, you may also retrieve the plugin package (masterview_plugin.tgz or masterview_plugin.zip) from http://rubyforge.org/projects/masterview and simply extract into vendor/plugins/masterview - == Usage -You may add MasterView attributes to existing (x)html or you may use the masterview generator to create a complete working application. The generator can create controllers, models, and the MasterView template file similar to how the built-in generator works. Simply change directory to your rails application and run the following +The MasterView User's Guide and a complete Directives Reference are provided +in the MasterView user documentation. MasterView templates can be +created by hand simply by adding masterview directives markup to +an (x)html template, or generated for typical Rails controller/view +scenarios using the supplied masterview generator developer tool. -script/generate masterview YourModelName [YourControllerName] [--style [cssStylesheet]] [--single-file] [--show-all | --show-only list] +A MasterView Admin controller can optionally be activated in your application +to assist you during development with creating and managing your templates. -The generator by default will generate five masterview template files, one for each distinct page, list, new, edit, show, and destroy. They exist in the app/views/masterview directory with the filename controller_action.html. The layout and message partial are defined in the list template file and imported into the others. Similarly the new template defines the form partial which is imported into edit, and finally the show file defines a _show partial which is imported into destroy. Thus there is one definition of each part (layout and partial) and they are imported into the other files where needed to provide accurate WYSIWYG design time editing. By generating separate files, teams can work on a project easier, however MasterView also supports generating all parts to a single file for the ultimate in DRY. - -By adding the --single-file switch MasterView will create a single file and to make it easier to use this template at design time, some design time css stylesheets are included in the file to hide all sections except one. By default the NEW section is the only one shown. Other options are --show-all which makes all sections visible or [--show-only list] which shows only the LIST section. When you are editing the masterview file you may comment/uncomment one of the other css files to show a different section. The --style param allows you to suppress default style generation and specify an existing stylesheet to use, if you exlude the stylesheet none will be used, if you include this option multiple times with different stylesheets each will be used. - -Once it is done generating, the generated MasterView template file(s) will be created in app/views/masterview/. These files are html and can be edited with any standard html editor. The rails specific logic is contained in simple attributes which are ignored by html editors. The syntax for these attributes is heavily derived from the rails helper tags themselves so it should feel natural to the rails developer. - -Another interesting thing to know is that while all of the pages for this Model have been bundled up into a few html file for ease of editing, at runtime these templates gets rendered into the exact same layouts and partials that you would use if you were building from scratch. Its jsut that now you can see what your pages will render like in your wysiwyg html editor and change and layout accordingly. Additionally MasterView supplies some javascript to show only one action view at time (list, new, show, edit, destroy) so you can view in your browser without running in Rails. Dummy html can be included to improve the accuracy of the page which can be easily removed at runtime. To make it easier to work with in an editor, design time stylesheets are included in the file to allow you to hide all sections except the one you are working on, simply uncomment the appropriate stylesheet for the section you would like to work with. - -MasterView is designed to be easy for a developer and designer to work together. By keeping the template in an html friendly format, designers can apply style, layout changes, wording changes, without causing havoc on the rails view code. The designer can be involved at anytime during the development cycle including being able to change style and layout after the system is built. This is great for allowing design or wording changes without reinvolving the developers. One can even start from a designer created prototype and add MasterView tags to make it become real. Whichever way you prefer to work, MasterView accomodates you. - -With Version 0.1.0 a MasterView admin controller/view was added to provide a birds-eye view of all your masterview templates, the status of those templates (OK, Invalid xhtml, Conflicts, Imports outdated), the details regarding the status, and the ultimate erb files generated from each template. By default the MasterView admin controller is enabled by the plugin and is available at http://yourserver/masterview This controller can easily be disabled if not wanted by setting the EnableMasterViewAdminPages = false in the vendor/plugins/masterview/init.rb file. Additionally all of the power of the MasterView admin controller is available via a set of rake commands as well. rake mv:list mv:list_all mv:rebuild mv:rebuild_all mv:copy_layout. rake -T will give you further information about these commands. - -Since it can be difficult to import a layout by hand into a new file, the MasterView admin controller has a link where you can copy the layout into a new file by providing the new files Action. It will take the layout from the template chosen and create a new file controller_action.html with the layout imported and a shell for the new Action code. You can also do this from command line using rake mv:copy_layout TEMPLATE=foo_list.html ACTION=newaction command. - -== MasterView attribute directive syntax - -These attribute directives are provided by MasterView and you can create your own custom attributes for even more power. - -mv:generate="layouts/product.rhtml" - When the generate directive is encountered it creates a new output rhtml file where this element and its - children will be rendered. It also will suspend outputting to any previous output file until it is done with this - one (nested). MasterView will not output any rhtml files unless it encouters one of these or mv:gen_render directive - below. Typically you will have one of these in the very top html element to generate the layout, and you will have - additional directives further inside to output different view partials and forms. MasterView takes this one html - file and generates all the other layout, forms, and partials that you would do manually. for example... - - <html mv:generate="layouts/product.rhtml"> - <title>Hello</title> - <body> - <div mv:replace="@content_for_layout"> - <div mv:generate="product/new.rhtml"> - <form></form> - </div> - </div> - </body> - </html> - - outputs to two files - - app/views/layouts/product.rhtml - <html> - <title>Hello</title> - <body> - <%= @content_for_layout %> - </body> - </html> - - app/views/product/new.rhtml - <div> - <form></form> - </div> - -mv:import="layouts/product.rhtml" - When the import directive is used, it is a mirror image of the generate directive, except that this directive - doesn't generate any output, it is only used for design time editing. The code inside this tag represents a point - in time capture of the real generated code and if it ever gets out of sync it can easily be sync'd back up by - visiting the MasterView admin page or using rake mv:rebuild_all - -mv:gen_render=":partial => 'product/form'" - This directive does two things it creates a partial and it outputs the appropriate code to render this - partial in the parent output file before beginning output of the partial. It calculates the file name from the - :partial value and appends .rhtml for example... - - - <html mv:generate="layouts/product.rhtml"> - <body> - <div mv:gen_render=":partial => 'product/show'"> - Name: <span class="static" mv:content="h @product.send(:name)">product Name dummy text</span> - Description: <span class="static" mv:content="h @product.send(:description)">product description dummy text</span> - </div> - </body> - </html> - - outputs two files - - app/views/layouts/product.rhtml - <html> - <body> - <%= render :partial => 'product/show' %> - </body> - </html> - - app/views/product/_show.rhtml - <div> - Name: <span class="static"><%= h @product.send(:name) %></span> - Description: <span class="static"><%= h @product.send(:description) %></span> - </div> - - You can also use collections with your partials like - - <div mv:gen_render=":partial => 'shared/product', :collection => @products"> - - which will create the partial shared/_product.rhtml and will render this partial over a collection - -mv:import_render="partial => 'product/form'" - Similar to how import directive is a mirror to generate, import_render is a mirror to gen_render. This directive - generates the appropriate render partial helper, but doesn't generate any additional output, it is only used for - design time editing and can be easily sync'd up if it ever gets out of sync with the original code. - -mv:gen_replace="whatToLeave" - When used in conjunction with mv:generate directive it causes the value of the attribute to be erb - executed output in the parent file before transferring to the child (nested) output file. for example... - - <html mv:generate="layouts/product.rhtml"> - <title>Hello</title> - <body> - <div mv:generate="product/new.rhtml" mv:gen_replace="@content_for_layout> - <form></form> - </div> - </body> - </html> - - outputs two files - - app/views/layouts/product.rhtml - <html> - <title>Hello</title> - <body> - <%= @content_for_layout %> - </body> - </html> - - app/views/product/new.rhtml - <div> - <form></form> - </div> - -mv:attr=":foo => 'bar', :cat => #{h product.name}" - At runtime this sets attribute values on the element this directive is defined on, for example... - - <div mv:attr=":foo => 'bar', :hi => 'cat'">hello</div> - - becomes - - <div foo="bar" hi="cat">hello</div> - - You can put erb evaluated code in #{ } like in this example - - <div mv:attr=":foo => #{h product.name}, :hi => 'cat'">hello</div> - - becomes - - <div foo="<%= h product.name %>" hi="cat">hello</div> - -mv:block="rubyBlockCodeHere" - At runtime this expands to the equivalent rhtml (erb) block code around this element, for example... - - <div mv:block="products.each do |product|">foobar</div> - - becomes - - <% products.each do |product| %> - <div>foobar</div> - <% end %> - - Note how MasterView automatically put in the 'end' after the closing tag. - Another example using the brace form of a block - - <div mv:block="products.each { |product|">foobar</div> - - becomes - - <% products.each { |product| %> - <div>foobar</div> - <% } %> - - Its all based on the ruby and rails syntax while keeping things xhtml and designer friendly. - -mv:content="foo" - Replaces the content of the tag with the erb output of foo, for example... - - <div mv:content="foo">some dummy html here</div> - - becomes - - <div><%= foo %></div> - -mv:form=":action => 'new'" - Replaces this tag and closing tag with the form_tag and end_form_tag helpers. It also pulls the - method and multipart attributes from the element and merges that into the form_tag options, for example... - - <form mv:form=":action => 'new'">foobar</form> - - becomes - - <% form_tag :action => 'new' %> - foobar - <% end_form_tag %> - - <form method="GET" mv:form=":action => 'new'">foobar</form> - - becomes - - <% form_tag { :action => 'new' }, :method => 'GET' %> - foobar - <% end_form_tag %> - -mv:hidden_field="object, method" - Replaces this tag with an hidden input tag using the rails hidden_tag helper, for example... - - <input mv:hidden_field="product, desc" type="hidden" value="dummy text"/> - - becomes - - <%= hidden_field product, desc %> - -mv:if="yourIfConditionHere" - Wraps the tag with an if block using the attribute contents for the condition, for example... - - <div mv:if="@flash[:notice]">foo</div> - - becomes - - <% if @flash[:notice] %> - <div>foo</div> - <% end %> - - And combining if and content directives we can do the following - - <div mv:if="@flash[:notice]" mv:content="@flash[:notice]" class="messages"> - dummy notice message here - </div> - - becomes - - <% if @flash[:notice] %> - <div> - <%= @flash[:notice] %> - </div> - <% end %> - -mv:elsif="yourElseConditionHere" - Used in conjunction with an if directive allows you to create if, elsif blocks, for example... - - <div mv:if="foo()"> - hello - </div> - <div mv:elsif="bar()"> - world - </div> - - becomes - - <% if foo() %> - <div> - hello - </div> - <% elsif bar() %> - <div> - world - </div> - <% end %> - - Note that the elsif directive element needs to follow the if element's closing tag - -mv:else="" - Used in conjunction with if and elsif, allows you to create if, elseif, else blocks, for example... - - <div mv:if="@foo"> - hello - </div> - <div mv:else=""> - world - </div> - - becomes - - <% if @foo %> - <div> - hello - </div> - <% else %> - <div> - world - </div> - <% end %> - -mv:javascript_include="prototype.js" - Replaces the tag with a javascript_include_tag helper, for example... - - <script type="text/javascript" src="../../../public/javascripts/prototype.js" - mv:javascript_include="prototype.js"></script> - - becomes - - <%= javascript_include_tag 'prototype.js' %> - - This is useful to allow scripts to be used for demos/prototypes and then at runtime - use the appropriate asset using the rails helper. - -mv:link_to="linkToOptions" - Replaces the tag with a link_to helper, it uses the contents of the tag for the name of the link, - so the name of the link can be changed by the html designer and it gets used in the appropriate place - in the helper, for example... - - <a mv:link_to=":action => 'new'">New product</a> - - becomes - - <%= link_to 'New product', :action => 'new' %> - -mv:link_to_if="linkToIfConditionAndOption" - Replaces the tag with a link_to_if helper, uses the contents of the tag for the name of the - link so the name of the link can be changed by the html designer and it gets used in the appropriate - place in the helper, for example... - - <a mv:link_to_if="@product_pages.current.previous, { :page => @product_pages.current.previous }"Previous page"</a> - - becomes - - <%= link_to_if @product_pages.current.previous, 'Previous page', {:page => @product_pages.current.previous } %> - -mv:link_to_remote="linkToRemoteOptions" - Replaces the tag with a link_to_remote helper, uses the contents of the tag for the name of the - link so the name of the link can be changed by the html designer and it gets used in the appropriate - place in the helper, for example... - - <a mv:link_to_remote=":action => 'new'">New product</a> - - becomes - - <%= link_to_remote 'New product', :action => 'new' %> - -mv:omit_tag="evalString" - Omit the element tag if the evalString is empty or evaluates to true. For example... - - <span mv:omit_tag="">hello</span> - - becomes - - hello - - <span mv:omit_tag="@test">hello</span> - - becomes - - <% if @test %><span><% end %>hello<% if @test %></span><% end %> - - -mv:password_field="user, password" - Replaces the tag with a password_field helper using the attribute as well as merging any html - attributes that have been set by the designer, for example... - - <input type="password" mv:password_field="user, password"/> - - becomes - - <%= password_field user, password %> - - and similarly - - <input type="password" mv:password_field="user, password" size="10" maxlength="15" class="pwdStyle"/> - - becomes - - <%= password_field, user, password, :class => 'pwdStyle', :maxlength = 15, :size => 10 %> - -mv:replace="foo bar" - Replaces the tag and contents with the erb executed output of the attribute. If the attribute - value is an empty string then the tag is simply removed and nothing is output, for example... - - <span mv:replace="h product.name">dummy product name</span> - - becomes - - <%= h product.name %> - - and similarly, you can use this to remove dummy html which was there for prototyping/demoing - - <table> - other rows here - <tr mv:replace=""> - <td>foo</td> - <td>bar</td> - </tr> - </table> - - becomes - - <table> - other rows here - </table> - - Passing in an empty attribute simply eliminated the tag, children, and contents - -mv:stylesheet_link="style" - Replaces the tag with a stylesheet_link_tag helper, for example... - - <link rel="stylesheet" type="text/css" href="../../../public/stylesheets/scaffold.css" mv:stylesheet_link="scaffold"/> - - becomes - - <%= stylesheet_link_tag "scaffold" %> - - This is useful to allow style to be used for demos/prototypes and then at runtime - use the appropriate asset using the rails helper. - -mv:submit="submitOptions" - Replaces the tag with a submit_tag helper, it uses the html value attribute to set the text - in the helper, and appends any options after, for example... - - <input type="submit" mv:submit="" value="Save product"/> - - becomes - - <%= submit_tag 'Save product' %> - - and - - <input type="submit" mv:submit=":foo => 'bar'" value="Save product"/> - - becomes - - <%= submit_tag 'Save product', :foo => 'bar' %> - - -mv:text_area="object, method" - Replaces the tag with a text_area helper, it uses the html attributes like rows, cols, disabled, - readonly, class, style, tabindex, accesskey and merges them with the object and method specified - in the attribute value, for example... - - <textarea mv:text_areas="product, desc">dummy text</textarea> - - becomes - - <%= text_area prouct, desc %> - - or a more complex example - - <textarea mv:text_area="product, desc" rows="4" cols="60", class="mystyle">dummy text</textarea> - - becomes - - <%= textarea product, desc, :class => 'mystyle', :cols => '60', :rows => 4 %> - -mv:text_field="object, method" - Replaces the tag with a text_field helper, it uses the html attributes like size, maxlength, - disabled, readonly, class, style, tabindex, accesskey and merges them with the object and - method specified in the attribute value, for example... - - <input type="text" mv:text_field="product, name" value="dummy text"/> - - becomes - - <%= text_field product, name %> - - and - - <input type="text" mv:text_field="product, name" value="dummy text" class="mystyle" size="15" maxlength="20"/> - - becomes - - <%= text_field product, name, :class => 'mystyle', :maxlength => 20, :size => 15 %> - - - -Inline substitutions - Since <%= foobar %> and <% foo %> are invalid xhtml values, MasterView has an inline substitution to - replace these for the cases when you simply want to inject something. {{{ gets replaced with <% - and {{{= gets replaced with <%= also }}} gets replaced with %> If you instead want to use the - old <% syntax instead, MasterView by default is setup to perform a substitution on those values before - parsing. However to be safe you should use the xhtml safe syntax otherwise html editors might end - up changing things on you. - - {{{= foobar }}} - - becomes - - <%= foobar %> - - - and - - {{{ foo }}} - - becomes - - <% foo %> - - == Background story I came from a Java Struts environment when I was introduced to Ruby. I was just in the process of evaluating Tapestry and JSF when I learned about Rails. Ruby and Rails changed my world forever. I had to however drop many of my bad @@ -584,12 +109,14 @@ structures to pass to the templates) as so many of the other engines relied on. I expanded my search outside of Ruby for the best html template technology I could find. After reviewing all the front runners I still didn't find anything that quite met with my goals for developing with ruby and rails. I also didn't find any technology that was -close enough that I could adapt it. However I did come across features in a variety of -systems that inspired me, and helped me shape the ideas that are presented here. +close enough that I could adapt it. However I did come across features in a variety of +systems that inspired me, and helped me shape the ideas that are presented here. +A few of those systems were Tapestry, Zope/PHP TAL, Kwartz, Amrita 2, Liquid, +and Web Objects. After putting much thought into all the possible options I could not see extending an existing template engine to meet my needs. And since I wanted this engine to have all the power of ruby and rails, it seemed that I would be best served by developing a html template syntax that was a thin layer above ERb. That way it would be intuitive @@ -612,14 +139,19 @@ their support as I took time away from them to work on this project and I want to thank God for bringing the right people into my life just when I needed them and for bringing me on this wonderful journey, I am so very blessed. May I be able to give back some of what has been given to me. +And one more mention of tremendous thanks to Deb Lewis, the other core developer on the +team, she has spent countless hours reviewing, revising, and improving the codebase, +configuration, and documentation. The project wouldn't be half of what it is today +without all her help, inspiration, and hard work. I thoroughly enjoy working and +debating the finer points of the project with her each step of the way. + So that's the story, I hope that many of you will find MasterView to be a useful tool for your development. I am continuing to refine MasterView by using it daily for Genesis Ministry sites and all my web projects. I know that there is much more work needed in documentation, examples, test cases, additional directives, etc., so I would appreciate any feedback and ideas that you have. Thanks for taking the time to review MasterView! Jeff Barczewski (jeff.barczewski @ gmail.com) -