When developers shift from PHP, Ruby or any other platform to Python, the very first road block they face(most often) is the lack of overall understanding the Python ecosystem.

Read more: Python Ecosystem - An Introduction

A few months ago I was looking for a technology to run the server side of a iPhone app. And I had two in mind: Ruby on Rails and Django (Python).

Why not others options? I already knew Java and its web frameworks but I didn’t want to use any of them because Java needs a lot of RAM even for the most simple things and I don’t want a big server before I really need it. PHP I don’t like the syntax, it is ugly.

This post is not a technical comparison between the languages, it’s why I’ve chosen to learn one of them first.

The First Impression

Obviously before I learn any framework I need to learn the language it runs on. The first place I went was the language’s official site: Ruby and Python.

As a developer keen on design my first impression was a big point to Ruby. Ruby’s site is more beautiful, but this isn’t why it’s better. It is better because it is easy to find how to get started. I found quickly the language’s overview, the first things to do and where to go to learn more in each step.

While in Python’s site I felt lost, it has too much text and no explicit direction to follow. It’d be very good if Python’s site become more digestible for beginners.

Syntax, sugar is good

At this poins I’m much more familiar with Ruby than Python.

• Ruby has blocks, I love blocks since I started programming with Groovy.
• Ruby support ternary operator. E.g. beer.amazing_taste? ? me.drink : garbage.put(beer)
• Python supports multiple inheritance. All my background is with single inheritance languages, I get scared with the idea of having multiple inheritance in my code.

And my favorite is Ruby’s similarity with functional programming. For example, looping over a collection by passing a block directly to a each method.

1
2
3
4
5

pubs_in_dublin.each do |pub|
  if pub.has_good_beer?
      "I need to go to #{pub_name} in Dublin before I die."
  end
end

1
2
3
4
5
6
7
8
9
10
11

def should_go_to_pub(pub):
    if pub.has_good_beer:
        "I need to go to " + pub_name + " in Dublin before I die."

pubs_in_dublin.each(should_go_to_pub)

# or

for pub in pubs_in_dublin:
    if pub.has_good_beer:
        "I need to go to " + pub_name + " in Dublin before I die."

The last and least thing is that I’m not sure if I like the idention as being part of the language.

Wrapping Up

As it’s clear by now, I’m studing Ruby. And in the future I’ll sure learn Python as well as other languages.

If you’re into Ruby on Rails you should check out Code School they have excelent courses, I’m in love by their teaching way: Learn by Doing. Other materials I like about Ruby [on Rails]:

• RubyInside
• The Ruby 1.9 Walkthrough
• RailsCasts

I’d love to hear what you think. Let’s discuss and learn more in the comments.

The meaning of “works” was if the code is executed correctly when the users clicks on some button on the interface. And the “expected” was mostly my own expectations not the users. Since the user was always wrong that did make sense.

My first Apple product was an iPod Video 5.5G, I bought it after I regret buying a crap mp3 player. Buy the time I didn’t realize but that was the sparkle that light up the change in my way of thinking.

A couple years later I bought my first notebook, a Macbook Pro 13”. As I was getting used to OS X I began to pay attention on the little details. I was loving the way the whole system was designed, my notion of “works as expected” has been changed to “simple, beautiful and flawlessly”. I didn’t need as much as features as I could get, I needed only the best designed features. Even if it meant to sacrifice the quantity of features available.

At this point I changed myself as a new user, I was expecting that all the application I use was so well designed as OS X. If an application works but isn’t well designed, it’s not good enough for me.

A year and a half ago I started to develop to iOS, I bought an iPhone later on an iPad too. And this changed myself as a developer. Now what I develop needs to meet my expectations of good design as well as quality of code without forgetting the users expectations. The user is important and if he can’t use something that is my fault not his.

Thank you Steve Jobs. I’ll stay hungry.

Suppose that I need to get a list of all ages I had on my database to make a hierarchical navigation that starts by selecting an age. If were working directly with the SQLite store I could execute this SQL to do this:

1
2
3

SELECT DISTINCT AGE
FROM PEOPLE
ORDER BY AGE

Since the project uses Core Data I shouldn’t access the underlying database store directly. Use NSFetchRequest class instead of plain SQL. The returnsDistinctsResults property seems to do the trick, its documentation warns about a special consideration:

Returns a Boolean value that indicates whether the fetch request returns only distinct values for the fields specified by propertiesToFetch.

Special Considerations

This value is only used if a value has been set for propertiesToFetch.

So it’s saying is that the returnsDistinctsResults only works if the property propertiesToFetch is also set. Pretty straightforward. Except that there’s one more - undocumented - property that needs to be set: resultType.

The default value of resultType is NSManagedObjectResultType which returns the expected managed objects. To make the distinct results works the value needs to be set to NSDictionaryResultType.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

NSFetchRequest *request = [[NSFetchRequest alloc] init];
NSEntityDescription *entity = [NSEntityDescription entityForName:@"People" inManagedObjectContext:managedObjectContext];
request.entity = entity;
request.propertiesToFetch = [NSArray arrayWithObject:[[entity propertiesByName] objectForKey:@"age"]];
request.returnsDistinctResults = YES;
request.resultType = NSDictionaryResultType;

NSSortDescriptor *sortDescriptor = [[NSSortDescriptor alloc] initWithKey:@"age" ascending:YES];
[request setSortDescriptors:[NSArray arrayWithObject:sortDescriptors]];
[sortDescriptor release];

NSError *error = nil;
NSArray *distincResults = [managedObjectContext executeFetchRequest:request error:&error];
// Use the results
[request release];

If you forget to set the resultType there will be no errors, but the returnsDistinctResults will be ignored and your result will have all ages of the database.

The best thing about Metro is that it is being designed to be consistent. They’ve created a set guidelines to show how a Metro app should behave and look like. (The other best thing is that it doesn’t run Flash)

It’s surprisingly good see how Microsoft is teaching Windows developers that in order to build a great app they need to be consistent with the platform and Metro is being built from the ground up to be consistent.

Metro is going to throw away all the weight of crapness from Windows by starting new, without legacy support. Metro is touch based, older Windows applications will run outside Metro. And maybe the ARM version of Windows 8 will be Metro-only.

On the video 8 traits of great Metro style apps Jensen Harris walks you trought 8 important concepts of Metro apps. If you’re going to develop for Metro, this video is mandatory. These are the 8 importants things to pay attention when developing for Metro, I’ll not explain each of them because what matters here is to understand that there’s something to follow to make the user experience good:

1. Metro style design
2. Fast and fluid
3. Snap and scale beautifully
4. Use the right Contracts
5. Invest in a great Tile
6. Feel connected and alive
7. Roam to the cloud
8. Embrace Metro principles

By creating and teaching these traits Microsft is aiming the user. As soon as they learn how to navigate on IE10 and how to install a new app they will know how to use all other apps, they won’t have to think. All the basic behaviors should be the same across the apps.

This consistence lead by the platform resulting in ease of use is what I see as an iOS developer and user. Apple just started a set of design guidelines and the community evolved these guidelines. Some of the current “standards” were created by 3rd party apps, like the pull-to-refresh from Tweetie (now the official Twitter app) and the action-button-centered-on-the-tab-bar popularized by Instagram. Android seems to lack this leadership from Google.

One more good think borrowed from Apple Metro apps will be distributed only on Windows Store and they will have to be approved.

[Metro apps will be] Distributed through the Windows Store. Apps must pass certification so that users download and try apps with confidence in their safety and privacy. Side-loading is available for enterprises and developers.

Microsoft is leading the way by creating a consistent experience. If the platform apps are great the users will expect the 3rd party apps to be at least as great. If Metro developers follow the design principles that Microsft is teaching I do believe a good contestant of the current iPad/iOS is coming. One year later tough.

My previous configuration was Wordpress with more or less 10 plug-ins. Very often I forget to update them all, so my blog for various periods of time was vulnerable to known attacks until I remember to update everything. Of course this isn’t Wordpress fault, it’s mine. I forget to update.

By removing the Wordpress layer I’ve automatically made it more secure. There’s nothing but the web server running, and it’s updated and maintained by my host. There isn’t any script running that something or someone could use to gain access to the server. In more technical terms I’ve reduced the attack surface.

Usually something more secure is less convenient. In my case I’m satisfied with what I “lost”. I don’t have a dashboard to edit the blog anymore, I can’t create a new post from anywhere that has a browser for example. I’ve traded this ability to plain text files, that are completely portable, easy to edit, easy to backup, easy to merge.

Now I start an idea on Evernote, writing down things I’d like to comment on a notebook called “Blog”. Depending on my mood I even start to style the post on Evernote using Markdown. When I think that the idea is good enough I copy and paste the note from Evernote to my text editor and finalize the post.

This is how the first paragraph of this post looks like on the text editor:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---
layout: post
title: "More Secure More Convenient"
date: 2011-09-19 00:33
comments: true
categories: [My Thoughts]
---

Having a "baked" blog, meaning every page is static baked by a system (Octopress)
on my machine before it goes to the server, makes it more secure. I realize that
I forget to talk about this on my [last post](/2011/09/16/why-ive-migrated-to-octopress/)
when I was reading a post
[about security from Dreamhost](http://blog.dreamhost.com/2011/09/13/dissecting-web-site-attacks-what-you-should-know/ "Dissecting web site attacks: What you should know.").

By removing the Wordpress

Matt Gemmell motivated me to use Octopress in his post Blogging With Octopress. Unlike him I’ve never been fireballed and I think I’m far from it, so his arguments about the improvements under high load doesn’t apply to my blog. Yet. I hope.

I’ve chosen Octopress over Wordpress self hosted because I don’t need to worry about caching (I was using W3 Total Cache) and I don’t depend on MySQL not even PHP to run the blog. All the technology I need is running on my Mac: Ruby 1.9.2 (rbenv), Python, Octopress, and a text editor (Sublime Text 2) to write using Markdown format.

To migrate my posts from Wordpress to Markdonw format text files I’ve used exitwp, which is a Python script that converts all your posts and pages from the XML exported by Wordpress. I had to manually edit the generated files, because exitwp doesn’t seem to understand some paragraphs and other little things of my old posts. My laziness of writing have helped me in this task, I’ve very few publisheds posts. If you blog is bigger it’s a good idea to edit the script so it correctly migrate your posts.

The comment system now uses Disqus. Just import your old comments into Disqus using the Wordpress plugin, and keep the same url for your posts to not lose any comments.

The blog is now “baked” by Octopress which is built around Jekyll. It’s super easy to run the blog locally and deploy it to your server, Octopress will generate all the static web site for you. Two commands and your site is up and running:

1
2

bundle exec rake generate
bundle exec rake deploy

So I don’t need to handle caching anymore. The default theme is beautiful. Adjusts automatically to fit screens of all sizes. Integrates with Github, Twitter and more. Simple. Easy. Stunning. Love it.

It would be nice to declare a winner here, but right now, there is no clear winner. Some apps are best suited for native and some are best suited for the web.

I don’t think Mahemoff read his own article before writing the conclusion. Native won most of the categories: Feature Richness, Performance, Developer Experience, Look-And-Feel, Discoverability and Monetization. Of course HTML5 is catching up but it’s not an even yet, native is still better to build great apps.

One last think, in my opinion PhoneGap is a huge workaround and should never be used.

HTML5 vs Native: The Mobile App Debate

Aaron starts by agreeing with John about Windows 8 appearance which I also agree it looks really good. And just after this he begins to fire counter arguments to protect Windows 8 ideas at all costs. Not being fair in some points.

If Apple never released the iPhone, we’d be sitting here today talking about how if it weren’t for Android, those three companies [Nokia, Palm/HP and Microsoft] wouldn’t be making all of those same changes or something like that – the crippling of those companies was always inevitable. Or perhaps in your case John, you’d be saying it was the Mac and Mac OS X that proudly toppled those giants instead because Android wasn’t made by Apple and therefore doesn’t warrant the same amount of credit or boasting on your part.

This is fundamentally wrong because Aaron assumes that Android would have innovate in the exact same way as the iPhone did even if Apple never had released the iPhone. Android in 2007, before the iPhone, was more like the Blackberry, completely different than today’s version. It completely changed to the current form after the iPhone was announced and I believe Vika Gupta confirmed that change on the second day keynote of Google IO 2010. Hesaid at 2’45”:

He argued that if Google did not act, we faced a Draconian future, a future where one man, one company, one device, one carrier would be our only choice.

Since Apple showed how to make incredible useful multitouch interface the standard has changed from RIM’s Blackberry style to iPhone’s.

It’s impossible to assume that the IT industry would be in the same situation that it’s today without the iPhone. Apple reinvented the touch interfaces, without the iPhone we would be using touch interfaces as the secondary way to interact with cellphones and notebooks. Do you remember Microsoft’s first attempt to build tablets, those notebooks with reversible touchscreen and the terrible stylus? It was so bad UI and UX that I can’t believe we would have today full fledge multitouch interfaces without Apple’s first release of the iPhone.

Another mistake is believing that iOS is simply another version of Mac OS X with a touch interface on top of it. Just like Metro on Windows 8 seems to be.

Guess what Windows 8 for tablets is? You guessed it – the core of Windows – MinWin – with an alternate shell to Win32 on top that is touch friendly – the ‘Metro’ immersive shell we saw today.

Windows 8 is the exact same Windows as we know it, meaning a desktop OS, with a new separate touch interface called Metro. The interface is so separate that it looks like another program that can be installed on top of Windows. So I guess Metro is for Windows 8 what Windows 3.11 was for DOS.

Just because Mac OS X is based on Unix it doesn’t mean that it’s Unix. And just because iOS is based on Mac OS X doesn’t mean it is Mac OS X. Windows 8 and Metro aren’t two distinct operating systems with latter been based on the former, Metro is just a new UI on top of the plain old Windows.

Now on Office.

John, I don’t know what has you so convinced that Office has to look different in order to qualify that it belongs on a tablet. The ribbon interface was supposed to introduce bigger buttons along the top so that menu options were easier to find and I think a lot of users don’t want to re-learn how to navigate Office all over again – they just want it pretty much the way it is on the devices they want to use.

I love the Ribbon interface, really I think it’s great and it’s years ahead of the other Office tools. The Ribbon interface is really good and its options are easier to find, but this doesn’t mean that this interface is suitable for tablets and multitouch interfaces. At this point it’s clear that Aaron sees tablets as just touchscreen monitors.

What neither of those applications [iWork and Google Apps] are, though, is Microsoft Office – say all you want about Microsoft products but Office has no peers, particularly in the enterprise, and has three times the amount of features of anything else.

And then he stop talking about good interface for tablets and compares who has more features.

Aaron is defending Microsoft so vigorously that he didn’t notice - or didn’t mind - the flaws in his arguments. I don’t think Windows 8 will be a failure. What I wanted to show here is how wrong Aaron interpreted Gruber’s post.

If you’re curious about Grube’s response to Aaron: I Like My Odds in This Argument.

Scrolling the screen is a particularly egregious example. (…) users swipe with their fingers to scroll. Flash apps don’t seem to understand this concept. Once a Flash movie loads into part of the browser window, that part of the window no longer responds to swipes.

As developers it’s our job to deliver a great user experience, nowadays Flash is exactly the opposite.

Source: InfoWorld

The strangest thing for those who have a Java background is how methods are called it doesn’t uses dot notation. See the between a method call ‘workHard’ on an ‘employee’ object and instantiate a new instance in Java and Objective-C:

A Dynamic Language

Just like Groovy the Objective-C language defers as many decisions as it can from compile time and link time to runtime. That means among other things that in order to run a code you need not only a compiler but also a runtime system to execute the compiled code, this system is already ready to use in iPhone OS and Mac OS X.

It’s possible to declare a variable as strong or weak type, giving us tremendous flexibility.

1
2

NSString *myVar; // strong typing
id myVar; // weak typing

The examples above shows how to declare variables to store objects, the first myVar reference accepts only NSString instances and the later accepts any object. The id is just like Groovy’s def keyword. Using the id means that we can send a message to that instance even if the compiler can’t guarantee it’ll work.

(Yes! I thing the word ‘id’ meaning anything isn’t good.)

Categories

Categories let’s you add method to an existing class, even if you haven’t the source. This is my favorite similaraty with Groovy I found so far I hope there’s many more to come, see a sneak peek of the syntax:

1
2
3

@interface ClassName ( CategoryName )
// new methods declarations
@end

Protocols, the Java’s Interface

Just like Java’s interface, so no need to explain it here, except for one cool feature: we can declare optional methods. In practice when one of our classes conforms to a protocol that define options methods we aren’t obligated to implement them.

More Resources

Besides the language itself Cocoa and Cocoa Touch - Apple’s framework for Mac OS X and iPhone OS respectively - are great frameworks with lots of functionalities, it’s easy to build beautiful applications. Interested in learning more about Objective-C? Take a look at this docs:

• Learning Objective-C: A Premier
• Objective-C Programming Guide
• Cocoa Fundamentals Guide

Have fun improving your programming skills.

Basically instead of changing your_project.iml file we create a xml file in .idea/libraries with the jars listed on it. For more details, please, read Kallin’s post. This is the task:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// IntelliJ IDEA configuration sync
task intellijSync << {
    final def librariesDir = new File(".idea${File.separator}libraries")
    librariesDir.mkdirs()

    final def gradleLibsPath = configurations.compile.asPath
    final def userHomeGradle = project.gradle.gradleUserHomeDir
    final def libsJar = gradleLibsPath.split(File.pathSeparator).collect {
        it.replaceAll userHomeGradle.path, "\\\$USER_HOME_GRADLE\\\$"
    }
    println libsJar

    final def gradleLibXml = new File(librariesDir, 'Gradle_Libraries.xml')
    gradleLibXml.write """
<component name="libraryTable">
  <library name="Gradle Libraries"/>
</component>
"""
    final def xmlRoot = new XmlParser().parse(gradleLibXml)
    final def classesNode = xmlRoot.library[0].appendNode('CLASSES')

    libsJar.each { jar ->
        classesNode.appendNode('root', [url: "jar://$jar!/"])
    }

    def writer = new StringWriter()
    new XmlNodePrinter(new PrintWriter(writer)).print(xmlRoot)
    println writer.toString()
    gradleLibXml.write writer.toString()
}

The complete build.gradle file is on Gist.

# Update 1

Check the file on Gist, I’ve updated it to sync test libraries as well.

First lets see how is the usual way to create components in runtime using Java. This is the zul representation of what we’re trying to achieve:

1
2
3
4
5

<div>
  <toolbarbutton label="Clickable Item" href="#" />
  <toolbarbutton image="edit.png" if="${userHasAccess}" />
  <toolbarbutton image="delete.png" if="${userHasAccess}" />
</div>

And the java code to do the same:

1
2
3
4
5
6
7
8
9
10
11
12

Div div = new Div();
Toolbarbutton tbb = new Toolbarbutton("Clickable Item");
tbb.setHref("#");
tbb.setParent(div);
if (userHasAccess) {
    Toolbarbutton tbbEdit = new Toolbarbutton();
    tbbEdit.setImage("edit.png");
    tbbEdit.setParent(div);
    Toolbarbutton tbbDelete = new Toolbarbutton();
    tbbDelete.setImage("delete.png");
    tbbDelete.setParent(div);
}

As you can easily see the java code is pretty verbose. Using ZKBuilder the code will be easier to understand and smaller, take a look:

1
2
3
4
5
6
7
8

Div div = new Div();
div.append {
    toolbarbutton(label: "Clickable Item", href: "#")
    if (userHasAccess) {
        toolbarbutton(image: "edit.png")
        toolbarbutton(image: "delete.png")
    }
}

Which one do your prefer? :) If you want more continue reading to see how to use the builder as a template to a list of items.

Using ZKBuilder as a Template

I think the builder is specially useful when I’ve a list of items and I need to display these items with a specific layout one that the grid nor the listbox can provide. So I start as I started this post making the layout on a zul page and after I get what I want, I made a ZKBuilder version and put it in a loop to execute for each item I need to show.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// ...
def items = myService.getItems()
items.each { item ->
    div.append {
        toolbarbutton(label: item.name, href:  item.link)
        if (userHasAccess) {
            toolbarbutton(image: "edit.png", onClick: {editItem item})
            toolbarbutton(image: "delete.png", onClick: {deleteItem item})
        }
    }
}
//...
public def editItem(def item) { /* code to edit the item */}
public def deletetem(def item) { /* code to delete the item */}

ZkBuilder is bundled in ZKGrails 0.7.6 and earlier. Enjoy!

Talk about how to implement a macro component isn’t the scope of this post, so I suggest you to read the documentation before continue reading. We’ll work on a very simple macro component. But, don’t hesitate when you need to make a very complex one. Our macro component is this:

1
2
3
4

<hbox>
    <label id="myLabel" value="Click the button"/>
    <button id="myButton" label="The Button"/>
</hbox>

Now that you already knows what is and how to make a macro component, let’s start talking about what you may think it’ll work but actually it doesn’t.

Automatically Forward Event Doesn’t Work

The standard way to register events on ZK’s component, using MVC, is to use the “autowire” feature of GenericForwardComposer. Like this:

1
2
3
4
5
6
7

<?xml version="1.0" encoding="UTF-8"?>
<zk>
    <window apply="com.felipecypriano.IndexComposer">
        <label id="lblOutside"/>
        <button id="btnOutside" label="Not In Macro"/>
    </window>
</zk>

1
2
3
4
5
6
7
8
9
10
11
12

package com.felipecypriano;

import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Label;

public class IndexComposer extends GenericForwardComposer {
    private Label lblOutside;

    public void onClick$btnOutside() {
        lblOutside.setValue("Button 'not in macro' clicked");
    }
}

The button ‘btnOutside’ belongs to the window component and therefore its composer can automatically access and configure btnOutside events. When the Composer is initializing it detects the method onClick$btnOutside() and sets this method as a ‘btnOutside’ onClick event listener, in other words when the component is clicked this method is executed.

Knowing this we can think that add an event to ‘myButton’, which belongs to ‘mymacro’, is pretty much the same. Don’t we? Let’s add the macro in the index.zul and create a new method to handle onClick event of ‘myButton’:

1
2
3
4
5
6
7
8
9
10

<?xml version="1.0" encoding="UTF-8"?>
<?component name="mymacro" macroURI="/mymacro.zul" ?>
<zk>
    <window apply="com.felipecypriano.IndexComposer">
        <label id="lblOutside"/>
        <button id="btnOutside" label="Not In Macro"/>
        <separator bar="true"/>
        <mymacro/>
    </window>
</zk>

Just before <zk> tag is the macro component definition (line 2), this directive tells to ZK where is the file that contains the component - macroURI=”/mymacro.zul” - and what’s the tag name we’ll use - name=”mymacro” - to reference our component (line 8).

Adding the onClick event on ‘myButton’ cannot be done by just adding this method to IndexComposer:

1
2
3

    public void onClick$myButton() {
        lblOutside.setValue("Button 'myButton' clicked");
    }

So, if this doesn’t work what should I do?

Using a Speciliazed Class

To take care of mymacro’s behavior we need to write some code. We need to create a class to specifically handle our component’s needs. The purpose of mymacro component is to update the label when the button is clicked, this will not affect any of the components that doesn’t belong to mymacro so it makes sense to put the event in a specialized class that can be used to all pages.

The two components inside the macro - label and button - will be accessed using getFellow(string)) method and the event will be dynamically added to the button using addEventListener) method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package com.felipecypriano;

import org.zkoss.zk.ui.HtmlMacroComponent;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zul.*;

public class MyMacro extends HtmlMacroComponent {
    private Label myLabel;

    @Override
    public void afterCompose() {
        super.afterCompose(); // DON'T forget this
        Button myButton = (Button) getFellow("myButton");
        myLabel = (Label) getFellow("myLabel");

        myButton.addEventListener(Events.ON_CLICK, new EventListener() {
            public void onEvent(Event event) throws Exception {
                myLabel.setValue("Hooray! 'myButton' was clicked.");
            }
        });
    }
}

Now change the component’s definition to point to MyMacro.java as the component’s class:

<?component name="mymacro" macroURI="/mymacro.zul" class="com.felipecypriano.MyMacro" ?>

Voilà.

Global Component Definition

There’s a DRY principle violation and we must solve it. The main reason to use a macro component is to share a set of components between multiple pages, to avoid code duplication. The macro itself does this, but if you pay attention you’ll see that the component’s definition must be at the very beginning of each page which wants to use the component and this, definitely, isn’t a good a thing.

For instance, supposing that you have 25 pages that are currently using the macro component, and in each one of them has the component’s definition. Some months later, for some reason, you must change yours component’s class. Instead of changing just one simple place you’ll have to update 24 more places. Keep your code simple and don’t repeat anything. In order to make the component’s definition global we need to create a new xml file called lang-addon.xml:

1
2
3
4
5
6
7
8
9

<language-addon>
    <addon-name>myaddon</addon-name>
    <language-name>xul/html</language-name>
    <component>
        <component-name>mymacro</component-name>
        <component-class>com.felipecypriano.MyMacro</component-class>
        <macro-uri>/mymacro.zul</macro-uri>
    </component>
</language-addon>

1
2
3
4
5

<zk>
    <language-config>
        <addon-uri>/WEB-INF/lang-addon.xml</addon-uri>
    </language-config>
</zk>

And at last, remove <? component ?> directive from index.zul. From now on mymacro component is available to all zul pages in your application.

Making the macro component shout to the world

Just one more detail to learn, the component can handle its own components events, but how do the page that has the macro component knows what’s going on? We need to make the macro component send events to the page, or any listener. And this is the our final step.

To keep it simple the macro component will respond just to onClick event, that’s when the button is clicked ‘myLabel’ will be update as usual and the macro component will send the onClick event to all its listeners. Replace myButton EventListener with the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

myButton.addEventListener(Events.ON_CLICK, new EventListener() {
    public void onEvent(Event event) throws Exception {
        myLabel.setValue("Hooray! 'myButton' was clicked.");

        if (isListenerAvailable("onClick", true)) {
            Event clicked = new Event(Events.ON_CLICK, getParent());

            Iterator listeners = getListenerIterator(Events.ON_CLICK);
            while (listeners.hasNext()) {
                EventListener listener = (EventListener) listeners.next();
                listener.onEvent(clicked);
            }
        }
    }
});

The code between lines 5 and 13 is responsible to send the event to the listeners. But we need a couple more changes, like make IndexComposer listen to mymacro. First put an id in mymacro:

Liquid error: ClassNotFound: no lexer for alias ‘zul’ found

And register the event using the standard way in IndexComposer:

1
2
3

public void onClick$mymacro() {
    lblOutside.setValue("I can hear you 'mymacro'!");
}

With all this it’s possible to do complex and incredible powerful macro components. Go ahead and try.

ZKGrails plugin 0.7.6 has been released with this great new feature, you can use two simple tags to include any zul page in your GSP. To include the necessary css and javascript into head use <z:head/> and to insert the content anywhre you want in the body of your gsp you’ll use <z:body/>.

To see it in practice let’s change Grails Quick Start. Follow the steps described there and after you complete all the steps, go back here to update the list.gsp to use ZK Grid component. Don’t forget to use Grails 1.1.2 and ZKGrails 0.7.6 at least.

Embedding ZK in GSP

Firstly create this file: grails-app/conf/BuildConfig.groovy and configure ZKGrails repository:

grails.plugin.repos.discovery.zkgrails = "http://zkgrails.googlecode.com/svn/plugins"
grails.plugin.repos.resolveOrder = ['zkgrails','default','core']

Now you can install ZKGrails version 0.7.6 by executing grails install-plugin zk 0.7.6. After installing ZK plugin, create the zul page we’ll use: web-app/book/list.zul. You can let this file blank for now, before editing it we need to change automatic scaffolding by creating the the gsp pages executing this command:

grails generate-views Book

The command will create 4 gsp files in grails-app/views/book: create.gsp, edit.gsp, list.gsp and show.gsp. We will change the list.gsp to instead of use simple HTML table we’ll use ZK components. Now let’s get back to our web-app/book/list.zul, the objective is to create a grid using zk components and to add a new functionality to delete all selected books. Open list.zul file and put the following code in it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./wnd"?>
<zk xmlns:n="http://www.zkoss.org/2005/zk/native">
    <window id="wnd" apply="${bookListComposer}">
        <listbox id="listBoxBooks" model="@{wnd$composer.booksModel}" checkmark="true" multiple="true"
                 fixedLayout="true" width="500px">
            <listhead>
                <listheader label="ID" sort="auto(id)" width="50px"/>
                <listheader label="Author" sort="auto(author)" width="225px"/>
                <listheader label="Title" sort="auto(title)" width="225px"/>
            </listhead>
            <listitem self="@{each=book}" value="@{book}">
                <listcell label="@{book.id}"/>
                <listcell label="@{book.author}"/>
                <listcell label="@{book.title}"/>
            </listitem>
        </listbox>
        <n:span class="buttons">
            <button id="btnDelete" sclass="delete" mold="os" label="Delete Selected"/>
        </n:span>
    </window>
</zk>

Next step is create the composer for this list.zul page, the composer is the thing that controls the page’s behavior, just like a controller. Create a BookListComposer.groovy file in grails-app/composers, and this is the content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import org.zkoss.zkgrails.*
import org.zkoss.zkplus.databind.BindingListModelList

class BookListComposer extends GrailsComposer {

    def wnd
    def listBoxBooks
    def booksModel
    def binder

    def afterCompose = {
        booksModel = new BindingListModelList([], true)
        reloadBooks()
        binder = wnd.getVariable("binder", true)
    }

    public void onClick_btnDelete() {
        if (listBoxBooks.selectedCount > 0) {
            listBoxBooks.selectedItems.each { listItem ->
                def book = listItem.value
                book.delete(flush: true)
            }
            reloadBooks()
        }
    }

    private def reloadBooks() {
        def books = Book.list()
        booksModel.clear()
        booksModel.addAll(books)
        binder?.loadAll()
    }

}

Now we only need to put the zul page in the list.gsp replacing the HTML <table> tag to <z:body />, the final code is this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="layout" content="main" />
        <z:head />
        <title>Book List</title>
    </head>
    <body>
        <div class="nav">
            <span class="menuButton"><a class="home" href="${resource(dir:'')}">Home</a></span>
            <span class="menuButton"><g:link class="create" action="create">New Book</g:link></span>
        </div>
        <div class="body">
            <h1>Book List</h1>
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>

            <z:body />
        </div>
    </body>
</html>

As you can see - lines 5 and 19 - we only need to put the tags where we want it’s content to be in the page. But you might be wondering where is the path to list.zul file? By default the same convention used by Grails’ view, so for our example both tags - head and body - automatically resolves to /book/list.zul. And if you need to specify the files you want you can by setting the attribute zul, like:

<z:body zul="/path/to/file.zul" />

Now we can mashup our both favorite frameworks to make our projects look and behave even better.

# Update 1

Fixed a missing namespace on zul file; and the binder call on BookListComposer. Thanks André.

# Update 2

GitHub repository with full source code used to made this post: http://github.com/fmcypriano/embedding-zul-gsp

A [grails] controller handles requests and creates or prepares the response. They can generate the response or delegate to a view.

This is the definition taken from grails website. In other words the controller receives a request do what it has to do and sends the response back.

ZK’s composers are a little different, they can do things that you’d need javascript to do using gsp and controllers. The main power of a controller is that you’ve full control of all components in the page without need to write any javascript code. You could add or remove any component dynamically from the page, register events and whatever more you java and groovy skills let’s you do.

Pages Shouldn’t Have Any Code

In both technologies you can embed code directly in the page, in gsp you can use scriptlets:

<% items.each {
    total = it.quantity * it.price
}%>

An in zul pages you can use zkscript tags:

<zkscript>
    items.each {
        total = it.quantity * it.price
    }
</zkscript>

It’s fairly easy to use code inside the pages and I really do believe you shouldn’t do this, it makes your code harder to read and a mess to maintain.

The only places where this kind of code is good is in tutorials and that’s why you’ll see lots of tutorials using it, but in your actual project the composer/controller should do this job always.

Your First Composer

To demonstrate what a composer does lets create a simple editable page. The page will show a text to the user an the user can click on some buttons to change the text. All the actions will happen without refresh and you won’t need to write any javascript.

Create a file named editable.zul in <your-project>/web-app/ with this content:

1
2
3
4
5
6
7
8
9

<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>

<window id="wndEditable" title="Editable Text" apply="${editableComposer}">
    <div id="divText"/>

    <button id="btnEdit" label="Edit"/>
    <button id="btnSave" label="Save" visible="false"/>
    <button id="btnCancel" label="Cancel" visible="false"/>
</window>

Pay attention to the id attribute it’s value will be used in the composer to get the java object corresponding to the component. We create an empty div called ‘divText’ just to make sure where the text will be in: at the top, before the buttons.

Now let’s go to the composer - hooray finally eh -. Create a new directory in grails-app folder called composers and inside this new directory create a file called EditableComposer.groovy.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

import org.zkoss.zkgrails.GrailsComposer
import org.zkoss.zul.*
import org.zkforge.fckez.FCKeditor

class EditableComposer extends GrailsComposer {
    def divText
    def btnEdit
    Button btnSave
    def btnCancel

    FCKeditor editor
    String text

    def afterCompose = {
        // This is code execute just after all the components are created, so you can access them safely
        showText()
        viewMode true
    }

    void onClick_btnEdit() {
        if (!editor) {
            editor = new FCKeditor()
        }
        editor.value = text

        divText.children.clear()
        divText.appendChild editor

        viewMode false
    }

    void onClick_btnSave() {
        text = editor.value
        showText()
        viewMode true
    }

    void onClick_btnCancel() {
        showText()
        viewMode true
    }

    private def showText() {
        text = text ?: "This is my first Composer"

        divText.children.clear()
        divText.appendChild new Html(content: text)
    }

    private def viewMode = { isViewing ->
        btnEdit.visible = isViewing
        btnSave.visible = !btnEdit.visible
        btnCancel.visible = btnSave.visible
    }
}

The components in zul are injected in composer’s attributes with the same name as the id on zul file. On line 8 we use a specific type to declare the btnSave, this is just to show you that for each component in zul there’s a corresponding java class where you can access and/or change all the attributes. You don’t need to worry about thread safety here because for each accessed page a new composer is instantiated, this commonly known as prototype scope.

The afterCompose closure - lines 14 through 18 - is execute just after all the components declared in the zul are created and ready to use, here is the right place to put all your initialization code.

One of the features that I really like is how we can declare events to each component. As you can see in lines 20, 32 and 38 we’ve declared events to listen to the user clicks on the button for each of the 3 buttons. Basically this is how you declared all kinds events for all components:

public void onEventName_componentId(Event event)

Before the underscore character is the event name and after is the component id. You can set events even for components that you didn’t declared as composers attributes.

You don’t need to worry about javascript to change the state in the client-side ZK will handle it for you, just change the attributes values in your groovy code and you’re done. I highly recommend you give ZK a try and start playing with it, if the application you’re developing fits this desktop like model ZK is a great framework to boost your productivity.

See Also:

• ZK MVC Made Easy
• ZK FCKEditor Live Demo

If Grails is so complete why do I need another framework and why ZK? I’m building an enterprise web app which means it will be used by users of a company to do daily tasks, I needed a more responsiveness app without refresh and without increase the effort of getting it done. Searching for a solution I consider mainly this two frameworks: ExtJS, beautiful interface and a bunch of built-in components but you’ve to deal with javascript; GWT clever javascript compilation from Java code, but only a few built-in components and build interfaces using only java code isn’t a pleasant work for me.

ZK Direct RIA is bundled with lots of very useful built-in components, you can build your pages using a declarative syntax like XHTML or using Java code, since we’ll use Grails we can use Groovy to simplify the java code. Your code is processed on the server and because of this you can use your classes without any modifications, all your classes groovy or java will work as is in ZK no modification is need.

ZK will be responsible to render and process the events of the view layer (the pages), the main difference compared to standard Grails is that instead of use Controllers and gsp files you’ll use Composers and zul files. It doesn’t mean that you can’t use Controllers nor gsp anymore you can mix both without problems. From a gsp page you can go to a zul page, and there is no secret just link one to another with an <a> tag, for example. And it’s possible to share objects between the pages as well, using Services, zkgrails plugin’s Facade or with your own spring bean.

This is the first of a series of articles I’ll write about my experience working with Grails and ZK. Now I’ll show a very simple example of how to start using both and what we gain using both in the same project. First of all create a new grails project and install zk plugin:

$ cd <path_you_want>
$ grails create-app grails-and-zk-app1
    ...
    Created Grails Application at <path_you_want>/grails-and-zk-app1
$ cd grails-and-zk-app1
$ grails install-plugin zk 0.7.4
    ....
    Plugin zk-0.7.4 installed
    Plug-in provides the following new scripts:
    ------------------------------------------
    grails create-composer
    grails create-facade
    grails create-zul

Your project is now created and configured to use ZK. Now I’ll show you how easy is to build an rich interface with ZK and Grails, create the zul file:

$ grails create-zul myFirstZkPage

This will create two files the page and it’s Composer, remember the composer is the ZK controller.

The plugin creates the files with a Hello World page ready to work. Execute it to see it running:

$ grails run-app

Open this url in your browser http://localhost:8080/grails-and-zk-app1/myFirstZkPage.zul. Write a text inside the text box and click on “Hello” button and a greeting text will be show. This is very simple but the implementation shows some cool features, let’s see them.

This is the page grails-and-zk/web-app/myFirstZkPage.zul, the language is called ZUML it’s a markup language to build rich interfaces every component (some tags) here has it’s own Java class so you can use them in your code without any problems:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<?page zscriptLanguage="GroovyGrails"?>

<zk xmlns="http://www.zkoss.org/2005/zul"
    xmlns:h="http://www.w3.org/1999/xhtml"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">

<window apply="${myFirstZkPageComposer}">

    <vbox>
        <image src="images/grails_logo.jpg"/>
    </vbox>

    <grid id="gdMain">
        <rows>
            <row>
                Name: <textbox id="txtName" />
                <button id="btnHello" label="Hello"/>
            </row>
        </rows>
    </grid>

    <listbox id="lstResult" mold="paging"/>
</window>

</zk>

On line 11, the apply attribute tells ZK which class is the Composer of the Window component it expects the class’ full qualified name. Hum, what is being passed to apply doesn’t look like any full qualified name. Yes it isn’t, apply=”${myFirstZkPageComposer}” is an EL expression which is resolved to the Spring Bean named “myFirstZkPageComposer” and this bean is, as you can easily guess: grails-app/composers/MyFirstZkPageComposer.groovy, cool eh. Every class in composers directory which ends with “Composer” will be automatically a spring bean.

Inside the window we’ve three components with an id setted (lines 17, 21 and 26), looking the composer’s code we can see that for each of this three components there’s one attribute with the same name:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import org.zkoss.zkgrails.*

class MyFirstZkPageComposer extends GrailsComposer {

    def txtName
    def btnHello
    def lstResult

    def myFirstZkPageFacade

    def onClick_btnHello() {
        lstResult.clear()
        lstResult.append {
            listitem { listcell { label(value: "Hello, ${txtName.value} !") } }
        }
    }

    def afterCompose = { c ->
        // initialize component here
    }
}

This mean you’ve full access of this components own’s attributes you can read and write it’s values. For example, try to add this new line at the end of onClick_btnHello method and save it:

btnHello.label = "Hello There!"

Run the app an see what happens when you click the Hello button. Play with the code to see what more you can do. To learn more about ZK I recommend you to read the documentation page specially the Developer’s Guide and Developer’s Reference. Use your curiosity to make great things.

In the next articles I’ll enter in more details.

#Update 1

ZK with Grails: Where are my controllers? Learn what is and how to use ZK Composers.

# Update 2

As of ZkGrails 1.0M2 the syntax to refer a Spring Bean on window’s apply attribute has changed, it’s now without the ${}. This makes possible to use package to refer to composers:

<window apply="my.package.nameComposer"/>

When a user clicks on a button, or does anything that generates events, zk process it and call the corresponding method in the composer class. ZK events processing executes this code when it find the method to call:

1

mtd.invoke(controller, new Object[] {evt});

This uses Java Reflection API and completely bypass groovy’s invokeMethod, what we need to do is use groovy’s InvokerHelper class instead of direct calling the method using reflection.

1

InvokerHelper.invokeMethod(controller, mtd.getName(), new Object[] {params});

Now that we know how to do it for any kind of java code let’s dig into the problem with ZK event and find out where we should use InvokerHelper.

Implementing InvokerHelper in GrailsComposer

The GrailsComposer in ZKGrails plugin is a subclass of GenericForwardComposer that changes the default char separator from ‘$’ to ‘_’, because groovy already uses the ‘$’ with another meaning, and allows the use of a closure as the doAfterCompose method). So when you create a new composer using grails create-composer your new class extends GrailsComposer. Let’s create a composer and protect two of it’s buttons.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import org.springframework.security.annotation.Secured
class MainAreaComposer extends GrailsComposer {
    private Button btnEditText // automatically wired from the zul file
    private Button btnSaveText
    private Button btnCancelText

    def afterCompose = {
        // loads the current text
    }

    @Secured("mainArea_editText")
    public void onClick_btnEditText() {
        // shows the rich text editor to edit the text
        btnSaveText.visible = true
        btnCancelText.visible = btnSaveText.visible
        btnEditText.visible = false
    }

    @Secured("mainArea_editText")
    public void onClick_btnSaveText() {
        // saves the text, hide the editor and load the new text
         btnSaveText.visible = false
         btnCancelText.visible = btnSaveText.visible
         btnEditText.visible = true
    }

    public void onClick_btnCancelText(){
         // hide the editor and loads the text without any modifications
    }
}

The idea here is that only some users have access to edit the text. ZK is fully AJAX based and every event cames from client through javascript request. Because of this even if the btnEditText is invisible a malicious users could forge a request to call the method - not easy, but possible - the use of @Secured is to assure that an attempt to call this method from an unauthorized user will fail.

If you run your app using ZKGrails 0.7.5, the current version for Grails 1.1.1, and test if an unauthorized user fails when call the method - just make the button always visible to test - you will see that nothing is blocked no AccessDeniedException is thrown, and of course this isn’t good. Humm, and how could we solve this? How to make zk event handling aware of the dynamic methods?

My first thought was “ZK is open source, what about reading it’s code to understand the event system?” and there I go, downloaded the source and start reading how ZK maps the methods name to components event, in other words how it does this magic:

1

public void onClick_btnCancelText() {// event code}

The above method is the same as the not so nice:

1

btnCancelText.addEventListener("onClick", {// event code} as EventListener)

Reading the source code I find out that this kind of event is a ForwardEvent but I couldn’t find where the original method is called until I look the class diagram for GrailsComposer:

And there was the solution GenericEventListener onEvent method, I’ve finally found where the original method (onClick_componentId) is invoked and now we just need to override onEvent in GrailsComposer, this is the implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/**
 * Overrides GenericEventListener to use InvokerHelper to call methods. Because of this the events are now
 * part of groovy's dynamic methods, e.g. metaClass.invokeMethod works for event methods.
 * @param evt
 * @throws Exception
 */
@Override
public void onEvent(Event evt) throws Exception {
    final Object controller = getController();
    final Method mtd =  ComponentsCtrl.getEventMethod(controller.getClass(), evt.getName());
    if (mtd != null) {
        if (mtd.getParameterTypes().length == 0) {
            InvokerHelper.invokeMethod(controller, mtd.getName(), null);
        } else if (evt instanceof ForwardEvent) { //ForwardEvent
            final Class paramcls = (Class) mtd.getParameterTypes()[0];
            //paramcls is ForwardEvent || Event
            if (ForwardEvent.class.isAssignableFrom(paramcls)
            || Event.class.equals(paramcls)) {
                InvokerHelper.invokeMethod(controller, mtd.getName(), new Object[] {evt});
            } else {
                do {
                    evt = ((ForwardEvent)evt).getOrigin();
                } while(evt instanceof ForwardEvent);
                InvokerHelper.invokeMethod(controller, mtd.getName(), new Object[] {evt});
            }
        } else {
            InvokerHelper.invokeMethod(controller, mtd.getName(), new Object[] {evt});
        }
    }
}

Just replacing method.invoke to InvokerHelper.invokeMethod (lines 13, 19, 24 and 27) is enough to make the methods actually secured. Open your GrailsComposer class and add this method to the class, this is all you need to do. If you don’t understand how the @Secured is now working, read the previous post which is about the implementation of @Secured.

I’ve submitted this as a patch to Chanwit, the plugin’s maintainer, and ZKGrails 1.0 will have this overridin onEvent out-of-the-box. No need to change the plugin source code anymore, great news.

The problem started because grails acegi plugin, in version 0.5.2, doesn’t support this annotation. Talking about this in grail user mailing list Benjamin Doerr gave me a nice idea: use groovy’s invokeMethod to add the support that I needed.

The idea is to use groovy meta magic to add behavior to the classes that have at least one method annotated, we well override the metaClass.invokeMethod of the class we want to enable the annotation. To keep things organized I create a new boot strap file in grail-app/conf/SecurityBootStrap.groovy and all the related code is place in this file.

First off all let’s create a closure that can be used to override invokeMethod of any class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

def verifyMethodAccess = {String name, args ->
    def method = delegate.metaClass.getMetaMethod(name, args)
    def logMsg = new StringBuilder("invoking ${method}, ")
    if (method) {
        def annotation = method.cachedMethod.getAnnotation(Secured)
        logMsg += "is @Secured ${annotation != null}"
        if (annotation) {
            def annotationValue = annotation.value()?.toString()?.replaceAll(~/[\[-\]]/, '') // remove [ and ]
            logMsg += " by ${annotationValue}"
            if (!authenticateService?.ifAnyGranted(annotationValue)) {
                log.debug logMsg.toString()
                throw new AccessDeniedException("Access denied to ${delegate.class.simpleName}.${name} from user ${authenticateService.principal()?.username}")
            }
        }
        log.debug logMsg.toString()
        return method.invoke(delegate, args)
    }

    log.error "Method ${delegate.class.simpleName}.${name} not found"
    return null
}

In a glance this closure gets the method that is been invoked and verifies if this method is annotated with @Secured annotation, if it does then the granted authorities passed to the annotation’s value is obtained - line 8 - and is passed to the authenticationService if the current user has access the method is invoked otherwise an AccessDeniedException is thrown.

To active this behavior in a class we only need to override it’s metaClass.invokeMethod:

1
2
3
4
5
6
7
8
9

import org.springframework.security.annotation.Secured
import org.springframework.security.AccessDeniedException

public class SecurityBootStrap {
    def init = {servletContext ->
        ClassifiedClass.metaClass.invokeMethod = verifyMethodAccess
    }
    // verifyMethodAccess declaration and body goes here
}

To complete the example this is the ClassifiedClass:

1
2
3
4
5
6
7
8
9
10

public class ClassifiedClass {
    @Secured("ROLE_PRESIDENT")
    String protectedMethod() {
        "I'm a top classified information!"
    }

    def ordinaryMethod() {
        "Anyone can call me."
    }
}

Every time a groovy code calls any method of ClassifiedClass it’s metaClass.invokeMethod will be executed before the actual method. Just pay attention to use the same Secured annotation in your class and in SecurityBootStrap.

Unfortunately this solution only works if the call came from groovy code, if any java code calls classifiedObj.protectedMethod() it will succeed even without permission. Java code completely ignores the invokeMethod. Now stop thinking that you read all of this for nothing, because on next post I’ll talk about using InvokerHelper class to make java code obey the law.

# Update 1

Read this post to see how to make java code be aware of groovy’s dynamic method, including invokeMethod.

I wanted a way to control which button, link, action of the current page the user can access. If the user has only read access to a page than the page is shown but edit action isn’t, because of this requirement using only roles to grant access isn’t enough and could easily became a mess if I create one role per action. Use urls filters won’t work because most urls are generated by ZK framework and hence are non predictable.

The solution is fully based on SpringSecurity capabilities and should work on every project that uses it independent of plugins or frameworks that I use. Since spring security plugin does the hard work for us, we just need to create two more classes besides acegi’s default user and role and extends UserDetailsService interface. This is based on zk_sample_project and is a database implementation of this article by Oleg Zhurakousky.

The database schema

The plugin needs User and Role class by default, to extend (not meaning inheritance) them I create two new classes to add more control over which resource can be accessed namely: Group and Access. The Group class purpose is only to organize the Access, since there will be a lot of them. It’s important to notice that the access’ name and the role’s authority must be unique.

With this classes we can create roles that contains a list of granted accesses, for instance:

• ROLE_ADMIN

  • pagePolicy.btnNew
  • pagePolicy.btnSave
  • pagePolicy.btnDelete

• ROLE_ORDINARY

  • pagePolicy.btnNew

With our granted access setup in database we need to teach spring security how to authorize an access based on the access name:

1
2

authenticateService.ifAllGranted "ROLE_ADMIN" //  works out of the box
authenticateService.ifAllGranted "pagePolicy.btnNew" //  don't work

The goal is to make both options works, to do this we need to provide a custom implementation of UserDetailsService which will load to the UserDetails object both roles and accesses as GrantedAuthority. Let’s customize spring security and extend GrailsDAOImpl to add our logic:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

public class HierachyUserDetailsService extends GrailsDaoImpl {
    protected GrantedAuthority[] loadAuthorities(user, String username, boolean loadRoles) {
        if (!loadRoles) {
            return []
        }

        def accessCriteria = Access.createCriteria()
        // get all the accesses for this user
        def accesses = accessCriteria.list {
            authorizedGroups {
                authorizedRoles {
                    users {
                        eq("login", username)
                    }
                }
            }
        }

        // now we iterate over the accesses to get the roles associated to each access
        def allAuthorities = [] as Set
        accesses.each { access ->
            def roles = [] as Set
            access. authorizedGroups*. authorizedRoles*.each { role ->
                roles << new GrantedAuthorityImpl(role.authorityValue)
            }

            allAuthorities.addAll(roles)
            allAuthorities << new AccessGrantedAuthority(access.name, roles)
        }
        log.debug "Authorities for user ${username}: ${allAuthorities}"

        return allAuthorities as GrantedAuthority[]
    }
}

GrailsDaoImpl already implements UserDetailsService interface and provide a very good set of methods we just need to override one of them to achieve our goal. Great. The AccessGrantedAuthority (line 28) is just to make it easier to debug from which role the access came from. See the log debug output using this class:

Authorities for user admin: [ROLE_ADMIN, ROLE_ORDINARY, pagePolicy.btnNew[ROLE_ADMIN, ROLE_ORDINARY], pagePolicy.btnSave[ROLE_ADMIN], pagePolicy.btnDelete[ROLE_ADMIN]]

If don’t want this information you could use the default implementation, GrantedAuthorityImpl as in line 24.

Now that we have our implementation the last step is to configure our implementation as the current implementation used by Spring Security:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import org.codehaus.groovy.grails.plugins.springsecurity.AuthorizeTools
beans = {
    // Spring Security
    def securityConf = AuthorizeTools.securityConfig.security
    userDetailsService(br.com.litoraltextil.vc.springsecurity.AuthorityHierachyUserDetailsService) {
        usernameFieldName = securityConf.userName
        passwordFieldName = securityConf.password
        enabledFieldName = securityConf.enabled
        authorityFieldName = securityConf.authorityField
        loginUserDomainClass = securityConf.loginUserDomainClass
        relationalAuthoritiesField = securityConf.relationalAuthorities
        authoritiesMethodName = securityConf.getAuthoritiesMethod
        sessionFactory = ref('sessionFactory')
        authenticateService = ref("authenticateService")
    }
}

As a full configuration of spring security plugin isn’t the focus of this post I suggest you to read how to customize the plugin using SecurityConfig. Finally we can use all the artifacts using both the role name or the access name, some examples:

1
2

<g:ifAllGranted role="ROLE_ADMIN">secure stuff here</g:ifAllGranted>
<g:ifAllGranted role="ROLE_ADMIN, aAccess.name">secure stuff using both</g:ifAllGranted>