A new look

The new look for NextReports site is finally done. It is easier to give feedback and it is easier to see what NextReports is about through the images carousel at the top. Perhaps new images will be added later. But for now, the general information is at the right place.

How to visually represent your actions in web applications

Inside any web application, sometimes you have to deal with a set of actions. There are many differences between how you represent your actions inside a web application and a desktop application.

For example, if we have a table with a set of actions which can be done for every entity shown in a row. In desktop applications, we may have a set of buttons near the table. In web applications this in not the case. We can represent actions like links inside table columns:

But this approach will soon become obsolete if the number of actions can rise in the following versions. To be scalable, we should use a menu of actions. This will allow us to have more and more actions as the application business grows:

If you have only a couple of actions, you can be easily convinced to represent them as simple links. For example, the widget panel from NextReports:

But in time, after application grows, not only this will be unaesthetic, but it can also break the view (see how the necessary space is not enough and the row of actions falls down):

A menu of actions will help us again and this will be the adopted solution in following version:

Summarizing, this will help us :

• - not break the view
• - make the interface more intuitive
• - see what every action is about from start (not just on some tooltips)
• - scale easily the number of actions

The only problem you may have with this approach is when you have a scroll involved and your actions menu is in the right side of your panel. In such cases, your popup will not be entirely shown (a horizontal bar will appear). To avoid such collision, you have to be sure you have enough space on the right to show the menu. See that we used the actions column not as the last one in the table or the actions image for a widget is put on the left of the toolbar, so everything will be ok.

Some other ways can be possible. Google, for example has a left-oriented menu, which ensures no collision with the scroll bar :

 

This can be done if you have a single actions link. But inside a table with such links on every row, this will be problematic because the menu will fall over the following links which must react on mouse-over events.

Spring 3 to the rescue

If you use Spring in your applications, you may need to pass some settings to a spring bean. Your settings can be defined in properties files, in system properties or inside an internal storage.

Let's say we want to use a property inside a spring bean like the following:

<bean id="myBean" class="com.mypackage.MyClass">
        <property name="myProperty">
            <value>${propertyValue}</value>
        </property>
</bean>

If propertyValue is defined inside a properties file we should define a propertyConfigurer bean:

<bean id="propertyConfigurer" 
    class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
        <property name="location">
            <value>classpath:myfile.properties</value>
        </property>
</bean>

If we want propertyValue to be overridden by system properties we can specify  systemPropertiesModeName :

<bean id="propertyConfigurer" 
    class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
        <property name="location">
            <value>classpath:myfile.properties</value>
        </property>
        <property name="systemPropertiesModeName">
            <value>SYSTEM_PROPERTIES_MODE_OVERRIDE</value>
        </property>
</bean>

If our settings   are defined inside a storage system (database, content repository), spring 3 will help us a lot with its new expression language SpEL. This allows for calling methods from a defined spring bean.

Lets say we have a settings bean like the following, were storageService  can be any storage you need:

<bean id="settings" class="com.mypackage.SettingsBean">
        <property name="storageService" ref="storageService"></property>
</bean>

SettingBean will offer us the propertyValue we need :

public class SettingsBean {
    
    private StorageService storageService;    
    
    public Settings getSettings() {
        return storageService.getSettings();
    }    

    @Required
    public void setStorageService(StorageService storageService) {
        this.storageService = storageService;        
    }
    
    // helper methods used in Spring with SpEL    
    public String getPropertyValue() {
        Settings settings = getSettings();
        return settings.getPropertyValue();
    }
}

With SpEL we can use the propertyValue in our bean like this:

<bean id="myBean" class="com.mypackage.MyClass">
        <property name="myProperty" value="#{settings.getPropertyValue()}"/>
</bean>

If the bean, which needs some settings from a storage, is a bean from the spring api, then it's very easy to set the properties using SpEL . Otherwise we would have had to extend that class to inject our storage. For example a Spring ThreadPoolTaskExecutor can be defined like this :

<bean id="schedulingTaskExecutor"
    class="org.springframework.scheduling.concurrent.ThreadPoolTaskExecutor">
        <property name="threadNamePrefix" value="Scheduler-"/>
        <property name="corePoolSize" value="#{settings.getSchedulerCorePoolSize()}"/>
        <property name="maxPoolSize" value="#{settings.getSchedulerMaxPoolSize()}"/>
        <property name="queueCapacity" value="#{settings.getSchedulerQueueCapacity()}"/>
</bean>