Tuesday, October 14, 2014

Simple PrimeFaces CRUD Guide - READ & DELETE

In the second part of my PrimeFaces CRUD guide, I talk about the Read and Delete operations on a database. That is, to view the records of a database (either all of them or search for certain ones), select records and delete them.

In the case of my application, the idea goes like this;
the administrator navigates to the show-users webpage. Automatically, the page loads the records from the database and displays them. The admin can also search for users by username, name or email. Naturally, the display of users updates to show the new records. In any case, the admin can select a user to delete. After pressing the Delete button, the user is deleted from the database, the users' display is updated and a Growl is shown.

A video demonstrating how this works is shown below:


JSF Code

I'll be using code snippets in this post instead of a single screenshot, but you can find the full gist here.

Let's start with the form. It has only two components, a panelGrid and a dataTable.


PanelGrid



There isn't much to explain here, the 3 columns accommodate the three components inside the panelGrid; the selectOneRadio, inputText and commandButton.

selectOneRadio

When one clicks a radio button, its itemValue is passed to the selectOneRadio and thus it can take only three values, username, name and email. By default the selectOneRadio is deselected, but I'll show you later how you can default to a certain value.

inputText

The searchTerm is what the admin enters to search the database. Like I showed in the video demo, if it's empty it just shows all the records. The title attribute is a tooltip that's displayed if the mouse cursor hovers over the component.

commandButton

The interesting part here is the update attribute. It's used to force an AJAX update to the specified component, in this case the showUsers dataTable, causing it to only show the records I searched for.

DataTable

Attributes

Let's take a look at the dataTable attributes. The value one, is linked to a List that holds the List of objects that are fetched from the database. The tableStyle auto-stretches the dataTable to fit its contents and parent component. 

The var attribute is the iterator of the dataTable and the rowKey is used to detect which row is selected. It needs to be a unique identifier, so the user's ID field is ideal considering there are no duplicates in the database.

Columns

I think the columns are self-explanatory. The first column though is how the radioButton is added and the selection-mode attribute means that only one of the rows can be selected.

Footer

The footer of the dataTable naturally spans below and across the data. I've added indicators to show how many users there are in the database, and how many we see when we search for terms.

The deleteUser commandButton is what I'm really proud of. I don't know if there's an easier way to do this but I managed to make it work how I want it. It may be trivial to some people but I've never worked with web technologies before.

When I want to delete a user from the database, I want both the dataTable to update and the Growl to display the deletion message. The update attribute though can only update one(?) component. So what I thought was; update just the Growl but set the commandButton's ajax attribute to false! This would force the page to refresh and then reload the data from the DB. 

JSF Backing Bean

Full gist can be found here, I'll just show the key methods below.

Constructor

In the constructor you can see that I set the searchBy value to username. This defaults the radio buttons to pre-select a specific value. It's quite handy if we forget to select what to search by.

SearchByField

The if statement is a work-around to exception handling, this code here should be re-written with exceptions I think, throwing one when the search input text is empty.

PostConstruct

In the first part of my guide, I mentioned that EJBs cannot be instantiated in the backing bean's constructor. This is why I'm using the PostConstruct annotation, the init method is called after the backing bean is constructed and in this case fetches the table records and counts them.

Entity Session Bean

In the enterprise java bean (gist here), lies the code that communicates with the database. The show-users webpage has some calls to the EJB that queries the DB using JPQL.

JPQL Search

The findAllUsers method's query is the equivalent of SELECT * FROM Users, we fetch all of the records.

It returns a list that holds the results of the specific query. The RolesAllowed annotation specifies that only the app users with the admin role can call this method.

When we want to search by name, a similar query to SELECT * FROM Users WHERE id LIKE '%sth%' needs to be constructed. The task is accomplished like so:


Java8 Search

Now that we have Java 8 and GlassFish 4.1 has support for it, we can use the Collection improvements (streams, filtering, lambdas) to accomplish the same thing as above. In the example below, I fetch all of the records from the database and store them in a List.

Each element of the list is streamed and filtered with a lambda expression, if it matches the argument it's placed in a new List.



Keep in mind though, if the database was large there would probably be a performance issue here. I hardly think the Java 8 streams are as optimised as a native SQL query.

Delete

In order to delete the selected user, the object must be passed as an argument and then execute the query. The User argument is an object in the backing bean code that has its properties set when the admin checks a row in the dataTable.

When the query is executed though, it returns an integer that denotes how many rows were affected. Since I don't need the affected rows (I just delete one user at a time), I just assign the query to an integer and don't use it.

Coming up next...

In the third and final part of this guide, I'll be talking about the the UPDATE operation of CRUD, updating an existing DB row. I haven't written the code for that yet, so it may take some time for the 3rd part to come up. I have to see how I can transfer data from one webpage to another.

Sunday, October 12, 2014

Simple Primefaces CRUD Guide - CREATE



I've been wanting to start this series of posts for some time now, finally I have a nice working project and can put into words what I've learned over the last months with JavaEE 7.

Now, do not expect to find here anything ground breaking, it's just my progress while I learn JavaEE 7 and many things are subject to change while I learn more. Many things are probably not done the "correct" way and lack proper functionality, but like I said it's a constant work in progress until I finalise my project. Right now for the code, I don't take into consideration false input and/or exceptions. Those will come later. Also, I may make mistakes or have misunderstood something, feel free to correct me.

Mostly I'm using the official PrimeFaces documentation, showcase and forum, various Youtube videos and of course stackoverflow.

Before we begin

Make sure you have a working persistence unit, I'm working with NetBeans 8.0.1, GlassFish 4.1 and JavaDB. I followed this fantastic guide to setup my environment and it works perfectly. I use the same User and Group tables as in the video because the users will log in to the system.

Also, what I'm showing here are from an imaginary DB admin's perspective, nonetheless any CRUD operations in any point of the application should be more or less the same.

Desired form

The case here is that the admin wants to add a new user with the specified credentials, either as a normal user or as admin.

JSF code

Let's take a look at the JSF code (gist here).
Well, the form is what will be submitted and its values stored to the database. The PrimeFaces panelGrid element allows us to create this really good looking grid with elements. 

Its column attribute is self-explanatory and works like this; the first element (facets excluded) will be placed in the first column, the second in the second column, the third in the first column and so on. That's why I'm alternating the outputLabels and inputTexts.

The selectOneRadio element is a really useful one, we can group radio buttons and select only one of the bunch. I think this functionality isn't present in vanilla JSF, we'd have to employ JS scripts to do that. Haven't looked too much into it though, don't take my word for granted.

The inputTexts have a required=true attribute. It means that the value cannot be empty. Like in every registration form online, some fields are required and some are optional. If the attribute was set to false or not set at all, the field would be optional and could accept empty values. The requiredMessage is a simple message shown if the user tries to submit the form and leaves some inputText empty.

This is what happens if the form is submitted with a couple empty fields:

The two commandButtons process the form, the Cancel one clears the form and the CreateUser one saves the User. The commandButtons' behaviour in PrimeFaces is to update with AJAX, in this case I din't want to update with AJAX so I set the ajax attribute to false. The action attribute can be either another webpage to navigate to, or a method in the backing bean.

The messages and growl elements are a way of showing messages to the client.

JSF Backing Bean

When it comes to processing data, the webpage can't do much. So far, all we've done is set up a usual web page with JSF notation. The data must be passed to Java classes to be processed, every JSF page must have a backing bean if it deals with data. Gist can be found here.


The RequestScoped annotation is used because the backing bean will be used once per form submission and doesn't need to maintain data. I'm still a bit fuzzy on the scopes so...

The Named annotation "renames" the backing bean for ease of use. The class name could be "BoogieBoogie" or anything else but I'd rather use the createUserJSFBean name in the JSF page.

The two EJBs are the objects that will persist the data to the database, they are injected and cannot be instantiated in the constructor since the lifecycle of the EJBs is controlled by the container. They will be invoked when they're needed.

The private User and Groups objects are used to be passed as arguments in the respective EJB create methods. They aren't necessary, just useful.

The following five Strings are the actual variables that hold the values of the JSF page. They need to have getters and setters otherwise the JSF page can't access them.

Next, I have the createNewUser method which is called by the Submit commandButton. It calls the helper inputCredentials (just to set the form values to the User and Groups objects), calls the EJBs' create methods to persist the data, displays a simple Growl to show that user was created, and empties the form fields using the clearInputCredentials method.

Entity Session Beans

The session bean communicates with the database and performs queries to it. NetBeans generates some really useful classes. Gist is here.


The abstract class this one extends, has some basic functionality which is really handy. Methods for creating, editing, removing and finding entities are present in the abstract class. In this case, I'm overriding the create method because I want to add some more code.

The PasswordHasher is a helper object (it includes Google Guava) that generates SHA-256 hashes of the given password. It's not wise to leave the passwords in cleartext, some type of hash needs to be applied.

When I created the database I forgot to set the ID column to auto-generate values, so now I have to manually assign values to the ID fields of the users. That's no problem when I have the findMaxID method. It fetches the maximum value of the table's ID column and increments by 1 when I set the user's ID.

And that's it.

Coming up next...

In the next part of this guide I will show how I implemented the showing and deleting of users. Much more interesting in my opinion and a little bit of Java8 will be shown.

Wednesday, August 20, 2014

DZone - Favourite Netbeans features


Recently, I was asked by Geertjan Wielenga to present my 5 favourite Netbeans features. I've been tweeting a lot about Netbeans the past few months because I was really excited about the stuff I found out about it, it really is a great IDE and makes my life a lot easier.

So, here is my article

and here are a lot more Netbeans users presenting their favourite features.

Tuesday, May 13, 2014

Bye bye Dropbox...

Ήρθε πια η ώρα να πούμε αντίο...

Καλό πρόγραμμα, πολύ εύχρηστο, απίστευτα βολικό για sync μικρών αρχείων μεταξύ διαφόρων συσκευών, για μένα όμως ήρθε η ώρα να το παροπλίσω...

Γενικά δε το χρησιμοποιούσα απ' τη στιγμή που έβαλα το Google Drive, τι να πουν τα 2,5GB του Dropbox όταν το Google Drive μου δίνει 50+ GB δωρεάν. Βέβαια τώρα το Dropbox λέει ότι έχω 50GB χώρο, αλλά αυτό εξαιτίας ενός promotion της Samsung (ήταν το προηγούμενο μου κινητό) το οποίο λήγει στις αρχές του '15 και φαντάζομαι θ' αφαιρέσουν τα 48GB της προσφοράς.

Δύο sync προγράμματα δεν έχουν πολύ νόημα, το ένα έχει και το Google Docs οπότε κερδίζει με μεγάλη διαφορά. Αυτή τη στιγμή στο Dropbox δεν κάνω τίποτα που να μη μπορώ να το κάνω μέσω του web interface του. Θα το κρατήσω εγκατεστημένο μόνο στο κινητό επειδή έχει το Upload Photos, αυτό ναι είναι πραγματικά καλό feature.

Το GDrive όμως έχει κάπως περίεργο sync, αν το απεγκαταστήσεις προφανώς μένει ο κατάλογος που παρακολουθεί τ' αρχεία. Αν το εγκαταστήσεις μετά και του δώσεις να παρακολουθεί τον ίδιο κατάλογο, θα σου πει ότι έχει ήδη αρχεία και πρέπει να τα σβήσεις! Θέλει να κατεβάσει όοοολα τ' αρχεία που έχεις στο Drive σου. Είναι χαζό. Όχι όμως και τρομερό πρόβλημα.

Οπότε αγαπητό Dropbox χαιρετώ...

Monday, May 12, 2014

The Hunger Games: Catching Fire


WOW!!!

Χωρίς πλάκα μια απ' τις καλύτερες ταινίες που έχω δει ποτέ! Δεν υπήρχε περίπτωση να περιμένω αυτό που έγινε στο τέλος...

Παρόμοιο σοκ έπαθα όταν είδα το Νησί (Γιούαν ΜακΓκρέγκορ, Σκάρλετ Γιοχάνσον) πριν από τόσα χρόνια, και δε λέω εύκολα κάτι τέτοιο για ταινία όσο και να μ' αρέσει.

Μακάρι να την είχα δει στον κινηματογράφο...

Friday, March 14, 2014

DietOnJava - JavaFX desktop app


Well, this is my project and this post is an overview of it, I'll explain the basics although it's pretty straightforward as you can tell from the GUI.

I'm making an application for a friend of mine, he's a dietitian and asked me if I could make him an app to create diet programs for his clients. Yes, there are many similar programs (professional ones) out there but he wanted a specific GUI and also this would be a great exercise for me, although I'm a noob Java programmer.

Do NOT expect awesome code and such, I have some experience with Java yes, but this will be my first full-application with JavaFX, GUIs, DBs etc. Also, I haven't implemented any functionality yet, I'm questioning whether I should continue like this or re-write it with another approach, you tell me.

Dev Environment:

I've started building the application on NetBeans 7.4 (now using 8 RC1), Java7 SE and Scene Builder 1.1. Scene Builder was used to create the FXML layout, it's extremely easy this way.

I have an SQLite database that holds the food data, it's a single huge table with all the data, certainly not the most optimal solution but hey, this is my first try on developing something like this.

Functionality:

The Main DB tableview, shows the SQLite database. The buttons below it are self-explanatory, they add, edit and delete entries from the database.

Above the tableview, the client's info are entered and you can select a picture if you like.

The tableviews to the left constitute the diet for each day, you have 5 meals for each day plus a tableview that holds the total sums for each nutrient (total water, total iron, total cholesterol etc).

Foods are added to the meals by dragging and dropping from the main database, to delete foods from the meals maybe double clicking, I'm not sure yet.

This whole screen will be saved probably to XML documents, you'll have a single XML document for each diet schedule. Or JSON, I don't know. I've found libraries that do that so it'll be easy I guess.

Feedback.

That's basically it. There are no "blueprints", no UML, nothing. I look at the GUI and try to see what needs to be done. Since it's object interaction, it's kind of clear what I need to implement.

I haven't worked on the application for a couple of months due to uni exams, I'm really excited to pick it up again but I'm debating whether I'm on the right thought process or not.

ANY kind of feedback would be extremely helpful, I'm here to learn anyway. I have the project on GitHub under a Creative Commons license so feel free to take a look at my (now quite nonexistent code).

Tuesday, March 4, 2014

Και στ' Αγγλικά παρακαλώ...

Δεν ξέρω από πότε ακριβώς αλλά κάποια posts περί προγραμματισμού θα γράφονται στ' αγγλικά από δω και πέρα.

Είτε θα είναι σε φάση tutorial είτε σαν απλό post, θα τα γράφω στ' αγγλικά γιατί σκοπεύω να έχω πάρε δώσε με κάποια άτομα και είναι καλό να υπάρχουν blog posts για προγραμματισμό.

Αρχικά η σκέψη ήταν να φτιάξω ένα δεύτερο blog καθαρά γι' αυτό το σκοπό, δεν υπάρχει λόγος όμως, κι αυτό το blog μια χαρά την κάνει τη δουλειά του.

See ya later!

Saturday, February 8, 2014

*facepalm*

Γιατί ρε γαμώτο ο κόσμος είναι απλά ΗΛΙΘΙΟΣ;

Είναι δυνατόν να θες να προγραμματίσεις Android εφαρμογές χωρίς να ξέρεις Java; 

Να πας να τρέξεις το οποιοδήποτε IDE μες απ' το zip χωρίς να κάνεις αποσυμπίεση; Και να μην ξέρεις πως να κάνεις αποσυμπίεση ένα αρχείο;

Να τα περιμένεις όλα "στο πιάτο" χωρίς να ψάχνεις να βρεις μόνος σου τη λύση στο γαμημένο API; Ή στο Google, τα πάντα βρίσκει!

Δε λέω, καλό είναι να θες να μάθεις πράγματα επειδή είναι το "hot stuff" της εποχής αλλά μην τρελαθούμε, υπάρχουν κάποια προαπαιτούμενα για κάποιο λόγο!

Φυσικά για online μαθήματα μιλάω και για όλους εκείνους τους ηλίθιους που παραπονιούνται ότι δε δίνονται αρκετές πληροφορίες για τις εκάστοτε εργασίες. Αν εσύ δεν ξέρεις βασικά πράγματα στον υπολογιστή και δεν έχεις ιδέα από προγραμματισμό ή Java, μη τα ρίχνεις στα "μαθήματα που είναι ελλειπή!"

Thursday, January 16, 2014

Usability & Portability


Απ' την αρχή ήμουν ιδιαίτερα σκεπτικός για τα tablet, ποιά η χρησιμότητά τους, το πεδίο που στοχεύουν, το αγοραστικό κοινό... Φυσικά δεν είμαι tech guru οπότε έπεσα τελείως έξω μιας και τα tablets κάνουν τρελές πωλήσεις, είτε πρόκειται για iPad ή Android tablet.

Επειδή πρόσφατα ήρθε στην κατοχή μου ένα 7άρι Samsung με Android, έκατσα να δω με ποιους τρόπους μπορώ να το χρησιμοποιήσω χωρίς να "πάει χαμένο". Με λίγη σκέψη και ψάξιμο, άλλαξαν αρκετά οι εντυπώσεις που είχα για τα tablet, όχι όμως σε βαθμό να είμαι tablet-convert απ' τη στιγμή που εδώ και δύο χρόνια περίπου έχω Android κινητό με αξιοπρεπή οθόνη. Άρα ό,τι κάνει το tablet το κάνει και το κινητό μου, απλά με μεγαλύτερη οθόνη.

Φορητότητα
Έχεις μια συσκευή σε μέγεθος μικρού πιάτου που μπορείς να κουβαλάς μαζί σου χωρίς καλώδια, ποντίκια κλπ. Καναπές, κουζίνα, κάλεσμα της φύσης μπλα μπλα μπλα

Εφαρμογές
Υπάρχουν ΤΑ ΠΑΝΤΑ στο Play Store, ως και IDE για προγραμματισμό βρήκα, interpreter για Ruby, επξεργασία εικόνας/βίντεο, office suites, παιχνίδια...

Δεύτερη οθόνη
Γιατί όχι; Κάνεις τι κάνεις στο pc σου, έχεις ένα άλλο site να τρέχει στο tablet, ή μια άλλη εφαρμογή.

Skype
Αν έχεις οποιοδήποτε θέμα με το Skype στον υπολογιστή (όπως εγώ τώρα τελευταία), το τρέχεις  στο tablet. Κι ειλικρινά μ' αρέσει περισσότερο έτσι.

Mobile view
Προσωπικά προτιμώ μερικές σελίδες ή/και εφαρμογές στο Android (στην προκειμένη) λόγω streamlined design.

Laptop look-alike
Αν δεν έχεις συγκεκριμένες απαιτήσεις από έναν υπολογιστή, και το tablet μια χαρά σε καλύπτει! Bluetooth πληκτρολόγιο, ποντίκι δεν χρειάζεσαι (αν κι έμαθα ότι μπορεί να συνδεθεί και ποντίκι), θήκη για να στέκεται όρθιο, κατεβάζεις τις εφαρμογές που θες κι είσαι golden!

Άνετα το παίρνεις στη σχολή για να κρατάς σημειώσεις χωρίς να κουβαλάς το 15άρι λαπτοπ στην τσάντα. Με ένα ή δύο καλώδια συνδέεται σε προτζέκτορα για να κάνεις παρουσίαση (Google Docs yo!). Δε χάνεις κανένα Facebook update (γιατί είσαι τόσο κοινωνικός ρε παιδί μου) λόγω 3G.

Τώρα δε μπορώ να σκεφτώ άλλα (έπρεπε να τα 'χα σημειώσει), αλλά θα μου 'ρθουν.

Υπάρχουν και τ' αρνητικά βέβαια που δεν είναι ασήμαντα. 

Multi-tasking
Κατά βάση έχεις μια μόνο εφαρμογή ανοιχτή τη φορά, μετά την κλείνεις κι ανοίγεις άλλη κι ούτω καθ' εξής.

Πολλαπλοί χρήστες
Ναι μεν ένα tablet μπορούν να χρησιμοποιούν όλα τα άτομα μιας οικογένειας, δεν υπάρχει σαφής διαχωρισμός των δεδομένων των χρηστών όμως. Απ' όσο ξέρω, μπορείς απλά να συνδέσεις πολλαπλούς λογαριασμούς (Google πχ) όχι όμως και να διαχωρίσεις τα δεδομένα (email, επαφές κλπ). Σ' αυτό μπορεί να είμαι τελείως λάθος.

Τώρα πάλι δε μπορώ να σκεφτώ κάτι παραπάνω :Ρ αλλά δεν προσπαθώ να κάνω review οπότε και μ' αυτά που έγραψα είμαι εντάξει.

Δεν πιστεύω ότι θ' άλλαζα εύκολα ένα λαπτοπ μ' ένα tablet. πιθανότατα θα πήγαινα για ένα 13.3" λαπτοπ, best and worst of both worlds.

Wednesday, January 15, 2014

Τι χρονιά έχουμε;

Πώς γίνεται ρε γαμώτο εν έτει 2013-2014, ένα συγκρότημα να 'χει για site ένα απλό HTML "πράγμα" με οβάλ gradient εικόνες (μην κάνεις ότι δε θυμάσαι) για navigation; CSS και JavaScript δεν ξέρουμε τι είναι;

Και τώρα να ξεκίνησες, και λεφτά να μην έχεις, και κάποιος γνωστός να ξέρει HTML, ε δεν κάνεις για ιστοσελίδα αυτά που κάναμε όταν ήμασταν παιδάκια κι ανεβάζαμε σε κάτι δωρεάν hosts με κατάληξη tk.

Γι' αντίλογο θα πεις "ε και ποιός μπαίνει τώρα στο official site, όλοι Facebook κλπ", ναι αλλά ρε μεγάλε έδωσες που έδωσες λεφτά για το hosting και το domain (στην κυριολεξία "ψιλά" αλλά τα 'δωσες), πλήρωσε κάποιον να σου κάνει ένα site της προκοπής. Είπαμε, τα τελευταία χρόνια το web design έχει γυρίσει στο πολύ minimalistic ή/και one-page στυλ, το site σου όμως είναι για τ' ανάθεμα!

Είμαι εντελώς υπέρ του DIY σε τέτοιες περιπτώσεις, και για το κόστος αλλά και για το γαμώτο της υπόθεσης. Αυτό όμως είναι...