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>

NextReports Server - Dashboard Global Settings

Next version of NextReports Server will allow to select a 'Global Settings' action for dashboards.

This means we will be able to select some properties to all widgets from a dashboard. Two properties are always the same for any widgets: timeout and refresh time. Besides these two, if there are some common parameters used by all widgets, then those parameters can be also set .

Two parameters are considered the same if they have the same name, type, selection, manual source (if any),  default source (if any), and some properties like hidden property, procedure parameter, preview value. Some properties may be different, like runtime name, description or mandatory setting.

This 'Global  Settings' can be used for those dashboards which have a business of themselves, meaning  that some common parameters for more widgets are present.

NextReports Server : Drill Down Generalization

Previous versions of NextReports Server allowed to define a unitary drill down process. Charts could be drilled only to charts, tables could be drilled only to tables.

Version 4.2 makes a general approach to drill down. To link two widgets we have to specify :

1. type of child widget (chart / table)
2. link parameter
3. column position whose value will be pass to the next report in the drill process (this will be shown only if the current widget in drill-down process is a table report)

 Drill-down entities will be seen as in previously versions inside a table, where column exists only if parent widget is a table report:

In this example we have a chart with two levels of drill down, first level is a table and second level is a chart.  This will be seen inside dashboard as passing through following widgets :

A bit of HTML, a bit of css and some iframes

To have a nice page with NextReports iframes is just a matter of html and css.

Wicket and AjaxFormComponentUpdatingBehavior

If you have a form component in wicket with some components and you want to change using ajax some things in that form before submit (when you click or edit on one of the components), then you have to use AjaxFormComponentUpdatingBehavior.

This is  a behavior that updates the hosting FormComponent via ajax when an event it is attached to is triggered.

private AjaxFormComponentUpdatingBehavior createAjax( ) {
     return new AjaxFormComponentUpdatingBehavior("onchange") {
        @Override
        protected void onUpdate(AjaxRequestTarget target) {
          // do your task 
        }
     };
} 

The key is that your component must be a FormComponent, otherwise the event won't be triggered. Simple components like CheckBox, TextField, DropDownChoice are all FormComponents. But if you have a custom component create by yourself from more components  or even one like DateField, DateTextField , you will have to add a behavior to every sub-component to make your form update through ajax.

For example, a DateTimeField must respond if we change something inside its text field or if we change hours or minutes through its internal text fields, or AM/PM through its internal drop down choice. To access internal components from a wicket component we can use a get method with the markup-id as parameter if no methods are offered by that class. Inside DateTimeField we can override a newDateTextField method to add our behavior. But for the other elements we do not have similar methods, so we must look for the name of the markups in the html or java source code:

DateTimeField txtTime = new DateTimeField("txtTime", generalModel) {
     @Override
     protected DateTextField newDateTextField(String id,  PropertyModel dateFieldModel) {
        DateTextField f = super.newDateTextField(id, dateFieldModel);                  
        f.add(createAjax());               
        return f;
     }
}; 
// add ajax update behavior on hours and minutes textfields
txtTime.get("hours").add(createAjax());
txtTime.get("minutes").add(createAjax());

Java Enterprise in the Real World

Yesterday NextReports Team was a speaker at Oracle Java Developer Day in Bucharest. Our presentation "Java Enterprise in the Real World" can be seen here:

Java enterprise real world

View more presentations from dpmihai

NextReports Server - New Dashboard Navigation

A new dashboard navigation was created for NextReports Server. The previously  list of dashboards was replaced with a simple table which is more robust allowing for a better management

To allow scalability for more-to-come actions on dashboards, the list of actions for every dashboard  was replaced with a popup menu accessible from right-arrow icon:

Default or selected dashboard has a special background color to see more clear were we are.

Regarding widgets, new animations with different effects are used for bars, lines and areas.

Area Charts

NextReports will bring support for area charts. These charts are useful for measuring performance (KPI). Implementation was straight-forward both with Open Flash Chart and JFreeChart.

Here's how an area chart with more series looks like in OFC:

The same Next chart generated with JFreeChart looks like:

One minor thing you must have in mind if you want to keep your colors unaltered is to paint the series in a Z-order, otherwise the colors will blend. This is not possible every time, so you must allow for color transparency. If there is no transparency, some areas won't be seen, which is not desirable.

See the same chart with blend colors in OFC:

and in JFreeChart:

In this case it is almost impossible to know which legend refers to some area. We must have at least a small portion of the area with the same color as in the legend. The best solution I can think of is to sort descending the areas from that which has the maximum value downwards and that will give as Z-order.

NextReports Server : Set dashboard as default

Inside NextReports Server any user can see a list of dashboards created by him or shared to him by other users. When the user logs-in he will see its personal dashboard 'My'.

In server 4.2 version, any dashboard will have a special action to set it as default (star icon). If no dashboard is set as default then 'My' dashboard is loaded at log in. If a dashboard is set as default then that dashboard will be loaded. If you follow only one dashboard in particular, this new feature will spare you the time of selecting it anytime you enter the application.

JDBC and Connection Timeout

If you want your jdbc driver connection not to wait more than a specified time even if the instance is down you may think that DriverManager.setLoginTimeout(seconds) is your friend. But if you test it with different drivers you will notice that for some it works and for some it does not.. So you are tight to the driver implementation which in many cases is not desirable.Given the fact that you can wait more than 30 seconds for a connection if the instance is down, it is imperative to look for alternatives.

The only general solution to this problem is to have a separate thread where you try to get the connection. You can set a timeout to complete the task of getting that connection. In java, FutureTask can be used to accomplish this:

Connection connection;
FutureTask task = null;
try {
    task = new FutureTask(new Callable() {
        @Override
        public Connection call() throws Exception {
            return DriverManager.getConnection(url, username, password);
        }
    });
    new Thread(task).start();
    connection = task.get(getConnectionTimeout(), TimeUnit.SECONDS);
} catch (Exception e) {
    throw new ConnectionException("Could not establish connection.", e);
}

Moving around with widgets

Version 4.1 of NextReports was out. We are looking now to the following 4.2 release.

A small, but important new feature will be the possibility to copy or move a widget from a dashboard to other dashboard. Do you have some nice dashboards with cool widgets and you want to make another dashboard and share it to other users? Now this task will be easier.

A new action "Copy / Move" can be found in the widget toolbar, before "Delete" :

This action allows to select your action (copy or move) and to execute it for the selected dashboard :

JColorChooser History

JColorChooser in java can be used to select a color from "Swatches", "HSB", "RGB" panels.  But only "Swatches" tab has a history of recent used colors. We want to have a global history for selected colors.

For that we have to add another panel in a JColorChooser (like ExcelPalette).  In java you have to create a new class which extends AbstractColorChooserPanel:

public class HistoryColorChooserPanel extends AbstractColorChooserPanel {          
         @Override
         protected void buildChooser() {    
                //  here you add your UI components
         }
}

To use it:

AbstractColorChooserPanel[] panels = chooser.getChooserPanels() ;
// create a new array of panels containing also your panel
chooser.setChooserPanels(newPanels);

Anytime a color is selected from any tab except "Color History", that color is added to history as the top-left color from the matrix, and all the other colors are moved by a cell to the right.

At first glance it does not seem a "big" functionality, but when you think you want to use a number of colors to make your reports and charts look alike, this will help you a lot of time instead of entering again and again the same colors.

NextReports : Use hidden parameter inside another parameter

NextReports has a powerful support for parameters. You can have simple parameters, hidden parameters, chained parameters, procedure parameters. Parameters with values selected from table columns or from manual sources will have their type automatically selected. Parameters can have single or multiple selection. All of these will define how the user interface is created, what UI components will be used for selection.

Till version 4.1 only parameters used inside the main query had a meaning and were taken into account. New version will bring also a new feature regarding parameters usage.

A hidden parameter can now be used inside the source of another parameter without of being used inside the main query. Let's take a simple example.

We have a PROJECTS and a USERS tables. We want to select one or more projects for the user logged inside a NextReports Server, those projects which have the current user as project manager.

NextReports Designer has a special parameter __USER__ which has to be declared as following :

Value is passed to this parameter on the server and it means the name of the current logged user.
This parameter is defined as 'hidden', so it cannot be selected / modified from the UI.

We have to define our Project parameter and to use __USER__ parameter inside its source:

So, now we have a Project parameter which will filter data regarding to the logged user on the server. We design our report and we will use the Project parameter as a criteria :

The automatically created query inside the editor looks like this :

SELECT
    S1.PROJECT_ID,
    S1.NAME,
    S2.USER_NAME
FROM
    ANYTIME.SPP_PROJECTS S1,
    ANYTIME.SYS_USERS S2
WHERE
    S1.PROJECT_MANAGER_ID = S2.USER_ID AND
    S1.PROJECT_ID IN ${Project}
ORDER BY
    S1.PROJECT_ID 

Study Case : NextReports - A Real Time Exchange Rates Chart

From a developer's perspective, to have a real time chart, you need to have a database with real time data. We create a simple mysql database with only one table where we will insert currency values for every day (regarding our national currency RON).

create database currencies;

DROP TABLE IF EXISTS ron_values;
CREATE TABLE ron_values (
    id INT NOT NULL AUTO_INCREMENT,
    PRIMARY KEY(id),
    code varchar(3) NOT NULL,
    value decimal(10,4),
    exchange_date datetime    
);

First step to think of is where you get your data. We have this data offered in an xml file here: http://www.bnr.ro/nbrfxrates.xml. This file is changed every day except weekends and holidays.

The algorithm is pretty straightforward :

if (data_read_successfully) {
    get_list_of_currency_objects
    if (today_is_weekend_or_holiday) {
         // the currencies values will be the same like in previous day
         change_date_for_all_read_currencies_to_today
     }
     if (currencies_not_already_inserted_into_database) {
        insert_currencies_into_database
     }
}

We test if currencies were already inserted, because we do not want to depend on the date time when the xml file is updated, so our process can run lets say every hour or every minute.

After we have our real time data, we need to create our Next chart. First we define a currency parameter to see only exchange rates for a specific currency :

Parameter values are taken from a source sql which gives us all currency codes. We also have to put a default value for this parameter because our chart will be used inside a dashboard.

We want to see data for last 15 days and mysql query is :

Select DATE(RV.EXCHANGE_DATE) as EXCHANGE_DATE,
           RV.code,
           RV.value
From ron_values RV
Where RV.EXCHANGE_DATE Between DATE_ADD(CURDATE(), INTERVAL -14 DAY) And CURDATE()
and ${P_Currency} = RV.code
order by RV.EXCHANGE_DATE

We see how our defined parameter is used between curly brackets ${P_Currency}.
If we run the query we will be asked to select the value for currency parameter :

Result will show us all desired values :

After we have the query we will create a new chart. We will select EXCHANGE_DATE column for X_AXIS and VALUE column for Y_AXIS. We will select all properties we want like chart type, labels, colors, fonts, patterns, legends:

We can preview the chart inside designer to see how it looks like :

Then we can publish the chart to a server and we can add it to a dashboard. You can see this chart on our demo server http://demo.next-reports.com/nextserver on the NextSite dashboard.

Wicket Ajax Callback and FileUploadField

NextReports Server has an Upload action for different kind of reports.  Besides selecting report files and images, user has to enter a name for the report. We wanted to automatically set the name after selecting file (for lazy people), but this approach proved to be incorrect.

We had something like in the following snippet:

uploadField.add(new AjaxEventBehavior("onchange") {
               
     protected void onEvent(AjaxRequestTarget target) {
         Request request = RequestCycle.get().getRequest();
         String filename = request.getParameter("filename");
         String text = getModel().getObject().getName();
         if ((text == null) || "".equals(text.trim())) {
            int index = filename.lastIndexOf(".");
            if (index > 0) {
               filename = filename.substring(0,  index);
            } 
            getModel().getObject().setName(filename);                        
         }                    
         target.addComponent(name);
     }

     public CharSequence getCallbackUrl(boolean onlyTargetActivePage) {
         CharSequence callBackUrl = super.getCallbackUrl(onlyTargetActivePage);
         return callBackUrl + "&filename=' + this.value + '";
     }

}); 

Starting from IE8 and also in Chrome, but not yet in Firefox,  according to the specifications of HTML5, a file upload control should not reveal the real local path to the file you have selected, if you manipulate its value string with JavaScript. Instead, the string that is returned by the script, which handles the file information is c:\fakepath.

So, we have to give up using this functionality.

NextReports Server : Drill Down Table Reports

Starting from version 4.1, NextReports Server will be able to define drill down process for table reports. The number of levels to drill down is infinite.

To link two table reports you need to have a link parameter and to specify the column position whose value will be pass to the next report in the drill process.

All values from the column will be represented as links and the drill-down will happen just by clicking one of them.

The path (shown as  the first column in the drill-down reports) will be composed from all the values clicked by user.

Reporting survey

A reporting survey for general questions:

http://www.surveymonkey.com/s/6FF8MPM

NextReports : empty elements in designer

Till version 4.1 of designer when a new report was created all new empty cells from  new rows or new columns were 'null'. That means when we select an empty cell no properties are seen in corresponding panel. Secondly, to merge one or more cells, only one cell must be not-empty and all the others must be null.

These facts make it harder to accomplish layout formatting for your reports.

Starting with 4.1 version, when new empty cells are created, they will be by default text-based with an empty string. The only case in which a band element is null  is in a cell span.

The most important advantage is that we can start to format the cell immediately, we do not need a previous step of inserting an empty string. Practically the following business was modified :

1. merge algorithm allows to merge cells with empty string
2. insert row & insert column actions from layout and from tree will insert band elements with empty strings
3. merge action will nullify all cells without data (empty strings)
4. unmerge action will insert empty band elements inside the 'null' ones
5. add group action will insert empty band elements in header & footer
6. new report action will insert empty band elements in footer row

NextReports Server - Single Sign On

NextReports Server allows integration with all your applications through Single Sign On using CAS.

To make this possible, NextReports defines a process which first brings the users into the content repository. A simple xml configuration will define synchronization process. You must specify your data source and your queries to get users names and users attributes (which allows to map any fields you may have to NextServer repository):

<bean id="syncService" class="com.asf.nextserver.security.DatabaseExternalUsersService">
        <property name="dataSource" ref="syncDataSource"/>
        <property name="userNamesQuery">
            <value>SELECT USER_NAME FROM USERS</value>          
        </property>       
        <property name="userQuery">
            <value>SELECT * FROM USERS WHERE USER_NAME = ?</value>
        </property>
        <property name="mapping">
            <map>
                <!--  required -->
                <entry key="user.username" value="USER_NAME"/>
                .......
            </map>
        </property>
</bean> 

To define your CAS , a validation ticket must be written which will inform about cas login and cas logout urls:

<bean id="tValidator" class="com.asf.nextserver.web.security.cas.CasServiceTicketValidator">
        <constructor-arg index="0" value="https://myurl:myport/cas"/>
        <property name="loginUrl" value="https://myurl:myport/cas/login"/>
        <property name="logoutUrl" value="https://myurl:myport/cas/logout"/>
</bean> 

Remote JDBC driver in NextReports 4.0

NextReports 4.0 has been released.

From this version, both designer and server will have the same major number. One of the new functionality from designer is the possibility to create a data source of type NextReports Server.

This means designer will use a driver found on the server. You do not need the driver on your computer. This JDBC driver is implemented using Web Services.

Driver's url has a special form jdbc:nextreports:@<server url>;<server data source>. When you edit the url you will have to select a NextReports Server and then you can browse the data sources tree on the server:

To be able to browse the data sources, the user and password entered for driver connection will be used.

This functionality is very important for companies which do not want to expose their databases.

NextReports Server : Profile Configuration

NextReports Server uses a profile concept which is attached to users that are not administrators.

A profile specifies two things :

1. what sections can be seen by users with such profile

NextReports Server has 7 sections : dashboards, reports, charts, data sources, monitor, scheduler and security. Any defined profile can contain one or more sections. By default , NextReports Server uses following profiles :

·         Analyst : all sections

·         Business user : Dashboards, Reports, Monitor sections

·         Reports : Reports and Monitor sections

·         Dashboards : Dashboards section

2. what actions need to be hidden  for users with such profile

Even if the actions are shown regarding the permissions on a specific entity (report, chart, data source and so on), some of them must be hidden for a profile.

Configuration may be done in an xml file like this :

<bean id="reportsProfile" class="com.asf.nextserver.security.Profile">
   <property name="name" value="reports"/>
   <property name="displayName" value="Reports"/>
   <property name="sectionIds">
      <list>                                 
        <value>section_class</value>
        . . .            
      </list>
   </property>
   <property name="hiddenActionContributorIds">
      <list>
   <value>contributor_class</value>
         . . .  
      </list>
   </property>
</bean>    

In this way it is very easy to add new profiles with your desired sections and visible actions making NextReports Server integration with your application as easy as possible.

NextReports Server : search for invalid sqls

As inside NextReports Designer, NextReports Server 4.0 allows to look for reports or charts with invalid sqls.
This is done from search action and it is the best way to find all such sqls  from a folder.

NextReports Server : Embedded Widgets revisited

For generated iframe tag a width and a height parameters can be entered. They are passed to the open flash chart to draw at specified size.

NextReports: check your sqls

A needed feature to come in NextReports is sql validation.

If some columns, tables or views where deleted or renamed, you can see a warning. Every query, report or chart can be checked without open it. But the real plus is when you do a bulk check on all your queries, reports or charts. In this way you can see very fast what sqls are not running anymore. And then you can open those, if any, and resolve the problem.

'Validate Sql' action can be found inside explorer tree on one of the following nodes:

1. any query, report or chart node
2. queries root
3. reports root
4. charts root
5. any folder found inside queries, reports or charts root

All queries, reports and charts which are invalid will be seen inside explorer tree with warning bullets over their icons.

NextReports : new page addon

For pdf, rtf, excel exporters, a new page option is very important. NextReports allows to specify that after every group, a new page (sheet for excel) will start :

From version 4.0, every row from layout has an action 'New page' :

When you select this property, a small '+' bullet will be shown over row icon :

NextReports : charts inside reports.

Till version 4.0 charts could be exported only as flash, needing an internal server to allow for previewing. Because a chart image could not be created programatically, a chart could not be inserted inside a report.

From 4.0 a chart can be also exported as a jpg image. Using this exporter, now it is possible to insert a chart inside a report (to be seen in HTML, PDF, RTF, EXCEL or saved in XML)  :

A pdf result  (for chart data analysis part) looks like :

A chart element is similar to an image  element, the only difference is that for chart the image is dynamically generated. So, a chart element can be resized similar to an image element.