Remember the old Reese’s Peanut Butter Cup commercial from the 1980’s? (http://www.youtube.com/watch?v=U5_gTdqeUOI) Well this is kind of like that. Instead of mixing peanut butter and chocolate, we are mixing Grid and Tree widget functionality to create a bill of materials (BOM) view.
Recently a customer asked for this type of functionality for a BOM business application. They had built a prototype in Java/JSF and wanted to see what could be done in EGL. Using an example BOM for a lamp assembly, we created an EGL RichUI handler with the expand/collapse functionality within a Grid. Following is the data we used:
We played with using a Dojo tree widget first but quickly realized it didn’t give us the same functionality as the EGL Grid with respect to behaviors. When we switched to the EGL Grid we quickly realized that we could create tree widget behavior within a grid widget.
Following are a couple of screenshots of the solution. The BOM Example is hosted on the ClearBlade website at:
Through use of the following behaviors in the Grid widget, we were able to accomplish our desired end result:
The first order of business was to create the indentation of child rows. This was easily accomplished by creating the cellIndent function (we also removed the grid borders):
Next we aligned the numeric columns on the right with the cellAlign function.
Then we needed to add the tree expand/collapse controls with the treeButtons function. By adding an Image widget to all rows with children and interrogating their state (collapse = true/false), we create controls to expand and collapse the rows.
Finally, the filterGrid function hides or shows the rows based on state. This was a bit tricky since we wanted to maintain the expand/collapse state of each row. To solve this, each row has a counter, showRow, that tracks the depth of the collapse tree. Once the counter is at 0 the row should be displayed.
To implement the expand/collapse logic, we needed check the level of each row and recursively expand/collapse the rows.
This was done with the treeControl and expandCollapse functions.
EGL Grids are amazing. I was very impressed as how a relative RichUI novice like myself was able to implement fairly complex behavior. Download the code here to review and reuse:
Please feel free to contact me with any questions or improvements.
Eric Simone – CEO ClearBlade
The developerWorks Connections Platform is now in read-only mode and content is only available for viewing. No new wiki pages, posts, or messages may be added. Please see our FAQ for more information. The developerWorks Connections platform will officially shut down on March 31, 2020 and content will no longer be available. More details available on our FAQ. (Read in Japanese.)
Matching: clearblade X
esimone_clearblade 270000E5WV Tags:  clearblade richui web2.0 rui egl tree widget grid eglcafe 2 Comments 10,013 Views
esimone_clearblade 270000E5WV Tags:  rui service eglcafe web2.0 clearblade 1 Comment 8,611 Views
I've been playing with RBD 7.5 and Rich UI over the past week or so and this is very cool stuff! I've been following Chris Laffra's posts on the Rich UI blog and implemented a couple of his Rich UI solutions.
Using Jon Sayles' EGL training material, I created the "Let's Go To The Movies!" web service example with a Rich UI interface using nested grids and the service monitor.
I'm beginning work on the movie filtering capability. If anyone has ideas on how to implement this please let me know.
The code is attached. Check it out.
Other programming languages are no stranger to code re-use, so why should EGL be any different? ClearBlade's EGL Green Code modules provide expedited code, design, documentation, and testing of common application requirements. Our first GreenCode module is a reusable Messaging System
for use by JSP or TUI applications. The module provides dynamic messaging driven by a relational database table, and is shared in the EGL Exchange.
ClearBlade GreenCode Messaging System
Following is the description and usage instructions located in MessagingSystemLib.egl:
This messaging system retrieves the message text from the database corresponding to the passed in message code. The retrieved text is then expanded with the passed message inserts (up to 5) and passed back along with the message type. The message can contain up to 5 inserts delimited by ~1, ~2, ~3, ~4, ~5.
record MessageRec type basicRecord
messageRec.message_code = "MSGCODE";
*** Copyright (c) ClearBlade LLC 2008 ***
Comments and experiences, as well as seeing a few collaborative contributions on reusable code from others, would be great to see. The module and database are located in the EGL Exchange .
esimone_clearblade 270000E5WV Tags:  egl green rpg web2.0 cobol clearblade green_code eglcafe soa 1 Comment 9,372 Views
Reuse is not a new idea, it's an "old school" mantra from the early 1990’s when objects and CORBA were all the rage (remember AD/Cycle? Grunge?). The more things change, the more they stay the same. We've been talking about the value of reuse for a long time now. The promise of reuse is compelling however it has not been widely adopted as a practice. Technology has made great strides in helping us reuse code more effectively, but at the end of the day most companies have had a hard time turning this potential into reality.
Why? Because it's hard. Regardless of the enabling technologies, reuse takes time, commitment and coordination. SOA and Jazz will help with future endeavors but today we are still bound by our history. The legacy code that runs the world’s systems today is not going away. On the contrary, it's growing. Gartner estimates there are over 230 billion lines of COBOL and RPG code in existence today with 5 billion added annually. We have to find ways to reuse this code.
Over the past 15 years, most technology advancements have manifested themselves as client and middleware solutions (i.e. browser technology and J2EE application servers). However, not much has changed with respect to the languages used to develop the legacy code? Now we have a new language that addresses this problem, EGL. IBM is the only company capable of creating a new language that easily interoperates these older technologies with the new technologies of SOA and Web 2.0.
EGL allows us to easily reuse and modernize existing code. We must extend what has already been built and utilize EGL to reduce the time and energy it takes to accomplish this. This is a requirement, not an option. At ClearBlade we are developing EGL design patterns and frameworks for reuse called Green Code. As we complete this code, we will make it available to the EGL Cafe to do our part to promote reuse.
We have no choice but to embrace, extend and reuse the legacy code in existence today. Rewriting and replacing existing code is not financially viable nor is it socially responsible. Reuse of our existing code saves energy by repurposing what we alreay have. Reuse is green, EGL is green.
Eric Simone – CEO ClearBlade[Read More]