Thursday, 14 November 2013

3 ways of selecting from dropdown with AngularPrime 0.5

Introduction

With the newest release of AngularPrime v0.5, there are now 3 ways you can select values from a list. And they are all based on the same html element <select>.
In the figure below they are shown, from left to right, the dropdown, the listbox and the picklist.

dropdowns
These widgets have a few features in common but there are also things specific for a certain representation.

Common functionality

The first important functionality they have in common is that they can be styled according the theme you have selected. So for instance, when you hover over an element from the list, the background colour of the item changes to indicate the selection you are about to make.

Another feature they share is typical for AngularJS but require some specific code in case of these widgets.  They have the 2-way binding capabilities you are familiar with in AngularJS.  Whenever you select an option in the widget, the selected value is stored in the JavaScript variable (within the scope). But the other way around is also implemented. Whenever you change the variable ‘attached’ to the widget, the visual representation is updated.

The third feature they have in common is the possibility to assign a callback function to the selection event.  There is the possibility to assign a JavaScript function to the selection of an option event, in case you want to perform some additional processing when the user makes a selection.

And the last feature I want to mention here is that all widgets can be disabled in case the state of the screen doesn’t allow a selection at the moment.

Dropdown

This is the classic representation of the selection from a list.  But with AngularPrime you can have some extra functionality.
This is the code to have the AngularPrime dropdown in your page:
<select id="dropdown" pui-dropdown ng-model="selectedCars">
            <option value="1">Volkswagen</option>
            <option value="2">Ford</option>
            <option value="3">Mercedes</option>
            <option value="4">Audi</option>
            <option value="5">BMW</option>
            <option value="6">Honda</option>
            <option value="7">Porsche</option>
            <option value="8">Chevrolet</option>
            <option value="9">Jaguar</option>
        </select>

The additional features are
  • Possibility to filter the options which are shown. By default there are 3 filtering types supported, the start-with, contains and ends-with. But you can write your custom one and use it.
  • The dropdown field van be made editable. In this case the option list is a suggestion list but another value can be accepted.

Listbox

This alternative representation of the selection from the list, is especially handy to allow multiple selections.

This is the code to have the AngularPrime listbox in your page:
<select id="picklist" pui-listbox ng-model="selectedCars">
            <option value="1">Volkswagen</option>
            <option value="2">Ford</option>
            <option value="3">Mercedes</option>
            <option value="4">Audi</option>
            <option value="5">BMW</option>
            <option value="6">Honda</option>
            <option value="7">Porsche</option>
            <option value="8">Chevrolet</option>
            <option value="9">Jaguar</option>
        </select>

Multiple selections can be performed by pressing the Ctrl button when you select or unselect an option with the mouse.

Picklist

With this representation, you not only have the possibility to select multiple options but you can also specify the order of the selected options.

Within the code you have the following markup:
 <select id="picklist" pui-picklist ng-model="selectedCars">
            <option value="1">Volkswagen</option>
            <option value="2">Ford</option>
            <option value="3">Mercedes</option>
            <option value="4">Audi</option>
            <option value="5">BMW</option>
            <option value="6">Honda</option>
            <option value="7">Porsche</option>
            <option value="8">Chevrolet</option>
            <option value="9">Jaguar</option>
        </select>

The additional features are in this case
  • With this widget, there is also the possibility to filter the source and/or the target list of options. Again there are 3 predefined filtering types available, start-with, contains and ends-with but a custom one can also be specified.
  • The selection and de-selection of the options is not only supported with button click but can also be performed by drag and drop.  This makes the user interface very intuitive for the user.

Future

There are other features planned for these widgets in the next or future release.

PrimeUI allows you to specify a template for the ‘rendering of the options.  If you go to the showcase you can see that there is the possibility to include images in the options for example.  That feature will be integrated in the next release of AngularPrime.

For the moment it is only possible to disable the widget completely. In a future version of AngularPrime, there will be the possibility to show the options individually as disabled or enabled.

And the last thing you can expect is that the options are linked to a JavaScript variable so that you can update the list op options which are shown.

Conclusion

With the AngularPrime version 0.5, you now have 3 ways to present the user the selection from a list input type. The encoding in the HTMl is nearly identically, except the directive name. They have some nice features in common like the 2 way binding and the integration with the theme.  And each of it has its specific use case where they can be used at there best.

There are also some nice features planned that will improve the user and developer experience.

Have fun with AngularPrime.

Sunday, 3 November 2013

Even easier JAX-RS for Java EE7

Introduction

About a year ago, I started with my project StatelessPrime where the Java EE is the universal backend system for a lot of web technologies.  See also this blog post for more information about the ideas behind the project.
In that year, I did a lot of experimenting to check some ideas and also a lot of work is done in bringing the JSF and PrimeFaces experience to other technologies like HTML5.
In that same timeframe, Java EE 7 was launched which gave us easier ways to achieve the ideas expressed in the StatelessPrime announcement blog.
This is the first blog to give an overview of my first year of work.

JAX-RS 2.0

With the release of Java EE 7 system, there is also a new version of the JAX-RS framework. And it has the new concept of interceptors and filters.
There is the ContainerResponseFilter interface to define a filter just before the response is marshalled to the client. This is a very handy extension point in many ways:
  1. You can wrap the response in some generic response object that contains next to the data also some other information like messages, security keys and so on.
  2. It also removes the need to annotate the POJO’s that you like to send, in a marshalled form, to the client.
I can understand that you foresee the possibility to configure the way how the marshalling will be performed. But if you only want some standard behaviour, marshalling al the fields with their default options, why do you need some annotations?  It is the perfect example for convention over configuration principle.
So assume we have the following code:
@Path("registration")
public class RegistrationController {

    @GET
    @Produces({MediaType.APPLICATION_JSON})
    @Path("/all")
    public Person getList() {
        return new Person("Rudy");
    }

    private class Person {
        private String name;

        private Person(String someName) {
            name = someName;
        }

        public String getName() {
            return name;
        }

    }
}

This fails because the Person class isn’t annotated with @XmlRootElement. This is another confusing thing, I need it to annotate it with some JAXB annotation to get JSON output.

ContainerResponseFilter

But with the ContainerResponseFilter in combination with Jackson, there is an elegant solution. When you define a response filter as this, the objects returned by your methods are converted to strings (containing JSON) which are recognized without annotations.
@Provider
public class WrapPayloadFilter implements ContainerResponseFilter {
    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {

        Object entity = responseContext.getEntity();
        ObjectMapper mapper = new ObjectMapper();
        String payload = mapper.writeValueAsString(entity);

        responseContext.setEntity(payload);
    }
}

In another post I’ll explain another usecase for this filter.

Configuration

But the convention over configuration principle allows you to make some configuration in case you need it. The above described solution allows this also.

Suppose the Person object you want to marshal has also a date field, like his birthday.  Dates are one of those field types you like to configure the string representation of.  By using the JsonFormat annotation from Jackson, we are able to specify the format of the date representation.
        @JsonFormat(shape=JsonFormat.Shape.STRING, pattern="yyyy-MM-dd,HH:00", timezone="CET")
        private Date date ;

Conclusion

Although it is already very easy to create some JAX-RS endpoint to provide the data in JSON format to your application, it can even more simple since we now have the ContainerResponseFilter in Java EE 7 / JAX-RS 2.0.

As a first example, I demonstrated how you no longer need to annotate the POJOs which you are returning. But the ContainerResponseFilter will show his best features in the next post where we will wrap the response in another object.

The next post will be on the JSF Corner blog as I will present you an extension to the JsfMessage DeltaSpike feature which you can use in JSF and Rest environments.