BLOG

NEXT STEPS

Archive for the ‘OFBiz Development’ Category

Verified Agile Workflows and Processes

Monday, October 4th, 2010

October 4, 2010

verified agile workflow management system

Now that we’ve gone through the process of explaining the differences between standard Agile development methodologies and our custom workflow management system called Verified Agile, let’s dig into the different steps that we go through in order to be successful in this environment.

To kick off a project’s first iteration, we dig in on the requirements and create a number of Epics that encompass the entire set of information in contained in the requirements documentation.  If you are not familiar with an Epic it is simply a high level story used for capturing requirements that are often too complex or too large to estimate right away and will need to be detailed and broken down for estimation, planning and eventually implementation.  Once the first Epic is fully fleshed out, and the stories are defined, estimated and prioritized, we can start the process of planning and working through the stories in the next iteration.

As a side note, we do not try to get all Epics defined in one batch – that’s a bit too much like a waterfall process – it’s as iterative as the rest of the process and results in being able to put a working end to end system in front of the customer as early as possible.

As the stories are derived from the Epics and are ready for scheduling in the current iteration, we break down our stories into subtasks that can be easily assigned to different members of the team.  The Verified Agile process has the following steps once you’ve reached the scheduled story level:

    1. Analysis
    2. Acceptance Test Creation
    3. Design
    4. Development
    5. Technical Review
    6. Business Review
    7. Client Review

The steps take you through the process of understanding the story and ensuring that each and every base is covered.  Here is a bit more information on each of the subtask types:

Analysis:

This is an optional step that is there to bridge the gap that sometime exists between the story creation and the ability to build the acceptance test.  If the Epic breakdown is done very thoroughly, or the stories are of a lower complexity level, you almost never need this subtask.

Acceptance Test Creation:

The foundation of a test-driven development environment.  Here at HotWax Media, we build these before development in order to ensure that we are capture all of the nuances found in the story before we start development.

Design:

The other optional step that depends upon the complexity of the task.  Because we are focused on building enterprise application in Apache’s Open for Business, often times the description of the story and the acceptance test is all that we need to get started on development.  For more complex stories, we always perform this step to ensure that the code that is going to be written is following our best practices.

Development:

Self explanatory – where the implementation is executed.

Technical Review:

The first line of internal verification – did the implementation of this story match design in addition to our best practices?  These reviews are done by a team lead or expert reviewer which greatly increases the quality of our deliverables.

Business Review:

The second line of internal verification – does the workflow implemented match the acceptance test and business rules that were provided to us?  These review are done by a business analysts, technical project manager or account manager before it is put in front of the client.

Client Review:

The most import verification out there – does our output match the expectations of the customer?  If not, we start back at the beginning and go through all of the steps until the customer is satisfied.

Hopefully this overview of HotWax Media’s Workflows and Processes gives you insight into how we would approach your project and the steps that we put into place to ensure it’s success.  Next post I will go into more detail about how this all works in our tools and how that makes us prepared to guide your project to completion.

Tim Ruppert is Chief Operating Officer at HotWax Media, an OFBiz service provider, as well as an OFBiz project committer and active community member. Tim will join other HotWax Media employees and advisers in periodically posting thoughts here related to OFBiz, eCommerce, ERP, and related topics.

OFBiz Tutorial: Quick Updates For CMS Pages In OFBiz

Thursday, July 22nd, 2010

In my earlier posts we saw how can we setup different static pages for a site developed in OFBiz.

Now we will see how your client or a developer can directly make changes to the static pages. For this we use Content Manger application.

The following are easy steps which can be communicated to clients once the static content data setup is completed by the development team and the site is live. Later these changes can be easily managed by client.

  1. Log into backend managment app :https://localhost:8443/content/control/mainOfbiz Tutorial Quick Cms Updates 1
  2. Select Content from the menuOfbiz Tutorial Quick Cms Updates 2
  3. In the search options put in the appropriate search criteria and click on the Find button eg. STORE_POLICIES. Results will show the list of contents matching the search criteriaOfbiz Tutorial Quick Cms Updates 3
  4. Click on the Page name under the Data Resource ID Column to edit. (in this case STORE_POLICIES)Ofbiz Tutorial Quick Cms Updates 4
  5. Click the TEXT or HTML link in the top to view/edit the Text/Html text based on skills to update them one is text editor and other one is html text editorOfbiz Tutorial Quick Cms Updates 5
  6. Edit the text and press the Update button and the page will update the text on the site.

This was one of the process that can be used to update static page contents on the site without requiring any changes in code base. So now whenever it comes to updating text on static pages when the site is live, these changes can be done easily with Content Manger application.
If you want to get more details related to OOTB OFBiz processes contact HotWax Media today.


Pranay

Pranay Pandey is Manager, Enterprise Software Development at HotWax Media (OFBiz Service Provider) and has been involved with the OFBiz project since 2007. He contributes actively to OFBiz, and also trains HotWax Media developers in OFBiz techniques and best practices.

OFBiz Tutorial-Using CMS for Static Web Pages

Tuesday, June 29th, 2010

In my last post regarding usage of CMS for Front End application we saw how to setup simple static content page using contentId in OFBiz screen definition. You just need to setup the content data and controller entry to make it work.

Now we will see how to setup CMS driven static page for a website. Following four steps are going to be the magic:

  • WebSite Publish Point Setup
  • Decorator Content Data Setup
  • Static Content Data Setup
  • CMS request in Controller

Assumption: A component is already setup; here the name of the component is “cmsdemo” . If you have not done that already please go through my last post OFBiz tutorial on CMS usage for front end application.

Setting up Website Publish Point

Its easy to setup Website publish point in data. Below is an example of  how to do this in the content data file, in this case the name of the file is CmsDemoData.xml:

?View Code LANGUAGE
1
2
3
<Content contentId="root" contentTypeId="WEB_SITE_PUB_PT" contentName="Webstore Site Publish Point" description="Root publish point for CMS website"/>
<WebSite webSiteId="CmsWebSite" siteName="CMS Web Site"/>
<WebSiteContent webSiteId="CmsWebSite" contentId="root" webSiteContentTypeId="PUBLISH_POINT" fromDate="2010-01-01 00:00:00"/>

Also make sure you have webSiteId entry in web.xml of your application as shown below:

?View Code LANGUAGE
1
2
3
4
5
<context-param>
    <param-name>webSiteId</param-name>
    <param-value>CmsWebSite</param-value>
    <description>A unique ID used to look up the WebSite entity</description>
</context-param>

Setting CMS Site Main Decorator

Content Data

Content data setup refers to the decorator screen for static pages:

?View Code LANGUAGE
1
2
3
4
<DataResource dataResourceId="CMS_ST_DEC" dataResourceTypeId="URL_RESOURCE" dataTemplateTypeId="SCREEN_COMBINED"
objectInfo="component://cmsdemo/widget/CommonScreens.xml#cms-main-decorator"/>
<Content contentId="CMS_ST_DEC" contentTypeId="DECORATOR" contentName="CMS Site Main Decorator" dataResourceId="CMS_ST_DEC"/>
<ContentPurpose contentId="CMS_ST_DEC" contentPurposeTypeId="SECTION"/>

Screens

Setup the main decorator for your site as shown below, it can have more resources included, but right now it has very little information:

?View Code LANGUAGE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<screen name="main-decorator">
    <section>
        <actions>
            <property-map resource="CmsDemoUiLabels" map-name="uiLabelMap" global="true"/>
            <property-map resource="CommonUiLabels" map-name="uiLabelMap" global="true"/>
 
            <set field="layoutSettings.companyName" from-field="uiLabelMap.CmsDemoCompanyName" global="true"/>
            <set field="layoutSettings.companySubtitle" from-field="uiLabelMap.CmsDemoCompanySubtitle" global="true"/>
 
            <set field="activeApp" value="cmsdemo" global="true"/>
            <set field="applicationMenuName" value="MainAppBar" global="true"/>
            <set field="applicationMenuLocation" value="component://cmsdemo/widget/CmsDemoMenus.xml" global="true"/>
            <set field="applicationTitle" value="${uiLabelMap.CmsDemoApplication}" global="true"/>
        </actions>
        <widgets>
            <include-screen name="GlobalDecorator" location="component://common/widget/CommonScreens.xml"/>
        </widgets>
    </section>
</screen>

Now you need to setup the cms-main-decorator screen as shown in the code below which will include the above given main decorator of the site.

?View Code LANGUAGE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<screen name="cms-main-decorator">
    <section>
        <actions></actions>
        <widgets>
            <decorator-screen name="main-decorator" location="${parameters.mainDecoratorLocation}">
                <decorator-section name="body">
                    <section>
                        <condition>
                            <not><if-empty field="decoratedContent"/></not>
                        </condition>
                        <widgets>
                            <platform-specific>
                                <html>
                                    <html-template location="component://cmsdemo/webapp/cmsdemo/cms/DecoratedContent.ftl"/>
                                </html>
                            </platform-specific>
                        </widgets>
                        <fail-widgets><label text="Problem in loading static content"/></fail-widgets>
                    </section>
                </decorator-section>
            </decorator-screen>
        </widgets>
    </section>
</screen>

Decorated Content Freemarker Template

The DecoratedContent.ftl that you included in your cms-main-decorator, shown above, needs to be created at a given location by the same name with only the code as shown below, which is setup by the cms event and rendered:

?View Code LANGUAGE
1
${decoratedContent}

Setup Content Data for Static Page

Setup the content data line like the code below, which will use section-sub-content pattern and will use the decorator content that we created in an earlier step. Here I have given an example of how you can setup a privacy policy page for your site.

?View Code LANGUAGE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<DataResource dataResourceId="privacy" dataResourceTypeId="ELECTRONIC_TEXT" dataTemplateTypeId="FTL"/>
<ElectronicText dataResourceId="privacy">
    <textData>
        <![CDATA[
                <h1>Privacy Policy</h1>
                <h2><p>This is privacy policy page</p></h2>
                <p>Privacy Policy datailed text Goes here</p>
        ]]>
     </textData>
</ElectronicText>
<Content contentId="privacy" contentTypeId="DOCUMENT" contentName="CMS Site Privacy Page" dataResourceId="privacy" decoratorContentId="CMS_ST_DEC"/>
 
<ContentPurpose contentId="privacy" contentPurposeTypeId="SECTION"/>
<ContentAssoc contentId="root" contentIdTo="privacy" contentAssocTypeId="SUB_CONTENT" fromDate="2001-01-01 00:00:00" mapKey="privacyPage"/>

Creating Controller Entry

Now create request entries in controller.xml to handle CMS page requests as shown below:

?View Code LANGUAGE
1
2
3
4
5
6
7
8
<!-- default request; call into CMS \-->
<default-request request-uri="cms"/>
 
<request-map uri="cms">
    <event type="java" path="org.ofbiz.content.cms.CmsEvents" invoke="cms"/>
    <response name="success" type="none"/>
    <response name="error" type="view" value="error"/>
</request-map>

Provide links to CMS Page/Pages

Now its time to link CMS page with a menu on your web site as shown below:

1
<a href="<@ofbizUrl>cms/root/privacyPage</@ofbizUrl>">Privacy Policy</a>

You are done. Just load the data file which you created in CMS site data. Hit the url:http://localhost:8080/cmsdemo/control/cms/root/privacyPage which is based on ContentAssoc record we created earlier for privacy page:

?View Code LANGUAGE
1
<ContentAssoc contentId="root" contentIdTo="privacy" contentAssocTypeId="SUB_CONTENT" fromDate="2001-01-01 00:00:00" mapKey="privacyPage"/>

In the resultant screen you will see following page as per your data setup done:
FinalImage

This way you can add in as many pages as you want in a site which are static in nature and let  your client feel good when it comes to make any changes in content and they can just go in to Content Manager and can update the content easily without any code modification activity at any point of time.


Pranay

Pranay Pandey is Manager, Enterprise Software Development at HotWax Media (OFBiz Service Provider) and has been involved with the OFBiz project since 2007. He contributes actively to OFBiz, and also trains HotWax Media developers in OFBiz techniques and best practices.

Prototype Tutorial – Auto FAQs with Prototype JS

Friday, June 25th, 2010

Enterprise eCommerce - Auto FAQ Prototype

Here at HotWax Media, we build a lot of enterprise eCommerce websites. One common element in most eCommerce websites is a place to list Facts and Questions about the site, its products and its policies (FAQs). I don’t know about you, but I hate coding FAQ pages. The redundant process of having to write out the summary table at the top with the list of questions, and then re-write those same questions all over again below with the answers to the questions just drives me nuts. Not to mention that this redundant writing and re-writing of code almost always gets messed up a few months down the road when your very well meaning client attempts to add some new questions and answers to the list and unintentionally breaks the Table of Contents by not adding the proper ID/anchor relationship to each link.

Time to stop the insanity.
Today I am going to show you how a quick Prototype JS script can automatically generate your FAQ summary links for you by parsing the DOM for the appropriate links. Let’s get started.

First off, we need our list of questions, in standard Definition List format:

1
2
3
4
5
6
7
8
<dl id="faqs">
<dt><a class="question">What is this?</a></dt>
<dd>This is standard definition list markup</dd>
<dt><a class="question">What is the purpose of this example?</a></dt>
<dd>To show you how easy it is to generate your FAQ link summary with a little bit of javascript</dd>
<dt><a class="question">Who should I contact for all of my enterprise eCommerce needs?</a></dt>
<dd>HotWax Media, of course.</dd>
</dl>

In the above list, each question lives inside an anchor tag with a class name of “question”. There is also an unordered list above the questions with an ID of “questions”. This is important for the next step. Now, as they say on MTV Cribs, “This is where the magic happens”.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
document.observe('dom:loaded', function(){
    $$('a.question').each(function(ele){
        var id = ele.innerHTML.unescapeHTML().gsub(/[^\w- ]/, '').gsub(/[\s-]+/, '-').toLowerCase();
        ele.writeAttribute({id: id});
        var link = new Element('a', {href: '#'+id})
            .update(ele.innerHTML)
            .observe('click', function(event){
                event.stop();
                Effect.ScrollTo(ele);
            });
        $('questions').insert(new Element('li').insert(link));
    });
});

Let’s break down the code above. First, using the $$ shortcut method in Prototype, we loop through each “question”, read the innerHTML of the tag, strip out the whitespace between each word, and replace the spaces with dashes. This string for each link is given a variable name of “id”.

Then we assign this variable back to the link and write it in to the link as an ID attribute.

Next, we create a new link element for each “question”, giving each href the “id” variable, prepended by a # sign.

Finally, we go to our unordered list and create a list item for each new link, and then insert that link inside of it.

Now, when the page is rendered, our questions markup will look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul id="questions">
	<li><a href="#what-is-this">What is this?</a></li>
	<li><a href="#what-is-the-purpose-of-this-example">What is the purpose of this example?</a></li>
	<li><a href="#who-should-i-contact-for-all-of-my-ofbiz-needs">Who should I contact for all of my OFBiz needs?</a></li>
</ul>
<dl id="faqs">
<dt><a id="what-is-this" class="question">What is this?</a></dt>
<dd>This is standard definition list markup</dd>
<dt><a id="what-is-the-purpose-of-this-example" class="question">What is the purpose of this example?</a></dt>
<dd>To show you how easy it is to generate your FAQ link summary with a little bit of javascript</dd>
<dt><a id="who-should-i-contact-for-all-of-my-ofbiz-needs" class="question">Who should I contact for all of my OFBiz needs?</a></dt>
<dd>HotWax Media, of course.</dd>
</dl>

Now, we just add a little CSS to style our FAQs, and we are all done.

1
2
3
4
5
6
7
8
9
10
11
12
13
/***********************************************
FAQs
***********************************************/
#questions {margin:0}
#questions li {padding:0 0 5px;}
#questions li a {color:#333}
#questions li a:hover {color:#000}
 
#faqs dt {margin:30px 0 0;}
#faqs dt a {color:#333; font-size:15px}
#faqs dd {border-bottom:1px solid #ddd; margin:0; padding:0 30px 30px 0; position:relative;}
#faqs dd span {position:absolute; bottom:0; right:0; color:#ccc;}
#faqs dd span a {font-weight:normal; font-size:11px;}

That’s it folks. Combine this with the Scriptaculous Effect.ScrollTo function to eliminate the jerky page jump and you a have beautiful, seamless user experience that anyone can appreciate. Checkout out the finished product in action.

- Ryan

Ryan Foster is a designer and OFBiz developer for HotWax Media.

Ryan Foster - OfBiz Developer

HotWax Media’s Solutions to Project Management Challenges

Thursday, June 3rd, 2010
Contegix – Partners: Atlassian
In business, like in life, forging partnerships is never an easy thing to do.  As we’ve discussed in previous posts, our partnership with Contegix has made a profound impact on the companies with which we work and how we provide the greatest impact to our customers.
After working with rudimentary collaboration tools – read: not integrated – we went out and purchased a suite of tools that were supposed to solve many of our project management and company workflow challenges.  After working with this software package (no need to name names) for a year and spending countless hours working with their professional services team and our business team, we were unable to make this software even close to the worth the investment.  We learned from our mistakes and took this one to Contegix!
When we did our original research into the project management space, one of the contenders was the Atlassian suite of tools – but just didn’t measure up to the potential promised from the other tool.  In the time between doing our initial evaluation, and the when the competition failed to live up to it’s promise, the Atlassian tools surged forward – and Contegix backed them as their solution to our problems we were facing.
From protecting access to applications and source code to managing documents and documentation – from showing SVN changesets to performing code review – from project management to development workflows – Atlassian has delivered an extensible set of applications that we can build a solid foundation on for our customers and internal teams alike.  Preparing for our next set of posts, the tools we are using at this moment are:
1. Crowd – centralized single sign on – permissions and access – easily pluggable to a variety of applications
2. Confluence – document management and collaboration
3. FishEye – real time reporting of source code repository changes
4. Crucible – code and document review
5. JIRA – project management and tracking
In this post, I had planned on going into detail about our Atlassian support partner, Customware, but we’ll save that for next post.

Atlassian

In business, like in life, forging partnerships is never an easy thing to do.  As we’ve discussed in previous posts, our partnership with Contegix has made a profound impact on the companies with which we work and how we provide the greatest impact to our customers.  Most of you who follow this blog know by now that HotWax Media specializes in OFBiz development.  However, these project management tools can be used no matter what platform you choose to develop in.

After working with rudimentary collaboration tools – read: not integrated – we went out and purchased a suite of tools that were supposed to solve many of our project management and company workflow challenges.  After working with this software package (no need to name names) for a year and spending countless hours working with their professional services team and our business team, we were unable to make this software even close to the worth the investment.  We learned from our mistakes and took this one to Contegix!

When we did our original research into the project management space, one of the contenders was the Atlassian suite of tools – but just didn’t measure up to the potential promised from the other tool.  In the time between doing our initial evaluation, and the when the competition failed to live up to it’s promise, the Atlassian tools surged forward – and Contegix backed them as their solution to our problems we were facing.

From protecting access to applications and source code to managing documents and documentation – from showing SVN changesets to performing code review – from project management to development workflows – Atlassian has delivered an extensible set of applications that we can build a solid foundation on for our customers and internal teams alike.  Preparing for our next set of posts, the tools we are using at this moment are:

  1. Crowd – centralized single sign on – permissions and access – easily pluggable to a variety of applications
  2. Confluence – document management and collaboration
  3. FishEye – real time reporting of source code repository changes
  4. Crucible – code and document review
  5. JIRA – project management and tracking

In this post, I had planned on going into detail about our Atlassian support partner, Customware, but we’ll save that for next post.

-Tim

Tim Ruppert is Chief Operating Officer at HotWax Media, an OFBiz service provider, as well as an OFBiz project committer and active community member. Tim will join other HotWax Media employees and advisors in periodically posting thoughts here related to OFBiz, eCommerce, ERP, and related topics.