9/19/2012

JS and CSS based UI Frameworks



There are some UI frameworks around, which help to save hours for creating beautiful, response user interfaces. They are compatible with most browsers,  support different screen sizes and mobile devices. Three of them are mentioned in this post, they all deliver responsive grid for easily creating layouts for forms, dashboards or whole webpages, they come with a lot of components like beautiful menus, slideshows or form elements and are customizable. And all you have to do is include the js and css files, write html code and set the class attribute.


HTML KickStart by 99Lime is an ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you 10's of hours on your next web project.
 
Bootstrap from Twitter is a sleek, intuitive, and powerful front-end framework for faster and easier web development.



Foundation by ZURB, the most advanced responsive front-end framework in the world.

Bootstrap has a higher adoption than the other two out there, this is because it is well supported, easy expendable, well developed, well documented, very flexible and the base design is very consistent. HTML Kickstarter delivers a few more advanced, modern elements with nice features.

9/18/2012

JEE6 and Primefaces with Netbeans Tutorial Part 2/2

<- Part1. Our goal is develop an application called the "Music Event Platform". On this platform you can submit music events by their name and get an overview of all music events submitted. The Platform is reachable through an Web Interface and a REST API.
The project structure has already been constructed by Netbeans, so we don't need to do much there. Also worth mentioning is that Netbeans deploys the application with each save. First I will describe the Frontend, which consists of  "welcomePrimefaces.xhtml", "showEvents.xhtml" and "WelcomeController.java". The platforms entry point is the sample page "welcomePrimefaces.xhtml", which needs to be modified. We delete the body and write a form to enter the name of an event an submit it. The name is transmitted to the Java file which backs the JSF and then is sent to the backend by clicking the button.  The Frontends code looks as follows: As you can see save() from WelcomeController.java is called by clicking the button, because the buttons action attribute points to the method. All tags in the namespace / beginning with p: are Primefaces components, <p:panelGrid> is defining the layout, the others should be self-explaining. For using them the namespace should be included over the html tag. The WelcomeController.java class is annotated with @Named, which allows us the refer to it with welcomeController from the pages without any further configuration. The class also includes a Enterprise Java Bean @EJB which is a standard component within JEE and is managed through the container (e.g. you don't need to initialize it). EJBs are never connected directy to the frontend, they are placed on the server and contain Business Logic. The most significant characteristic is, if they are stateful or stateless (read more: http://www.oracle.com/technetwork/java/ejb-141389.html).
Over a "Show Events"-link the page "showEvents.xhtml" is shown, it contains all the events submitted: JSF Components can directly compute several Java types, e.g. Lists, which is done here by a <p:dataList>. It lists all results retrieved from public List<MusicEvent> getMusicEvents() in the WelcomeController.java. All the calls concerning data are forwarded to the backend, which is explained in the following. It consists of MusicEventsBackend.java (the EJB), MusicEventsREST.java and MusicEvent.java. The EJB manages the interaction and calls the EntityManager to add or get MusicEvent.java , which is an EntityBean, i.e. serializable and normally directly mapped to a database relation (read more: http://www.oracle.com/technetwork/java/javaee/tech/persistence-jsp-140049.html). MusicEventsREST.java implements the REST API and is build upon the backend. Netbeans automatically detects the implementation of a RESTful Webservice and guides you step by step through the configuration needed. The sources look as follows: The important part of the Entity MusicEvent (the rest will be generated) and the RESTful Webservice MusicEventsREST: The Web Frontend then looks like:
Now we can add music events over the form and they are added to the database. Comments and Questions are welcome. Also watch out for a Technology comparison on this blog providing pros and cons of JEE with Primefaces.

JEE6 and Primefaces with Netbeans Tutorial Part 1/2

Today I was setting up JEE6 and Primefaces with Netbeans. In this post I will explain how to set up the IDE to run JEE and Primefaces. Prior to that I have read that Netbeans supports you by handling the configuration stuff. Yes it is true, it is doing some configurations even automatically, Netbeans is definitely a good choice to use for JEE and Primefaces.

1.) Download Netbeans from http://netbeans.org/downloads/


2.) Install Netbeans, run it and Create New Project ...


3.) Select project location (directory) and projectname

5.) Keep Glassfish as server of your choise, JEE6 as Java EE Version and name of project as context path

6.) Add JavaServer Faces to Frameworks you wanna use in your web application and configure it in the tab components by selecting primefaces and select the preconfigured library primefaces 3.2

7.) By pushing on the big green play button the application is deployed on the Glassfish application server and then reachable under http://localhost:8080/projectname , there you will also find your first primefaces page "welcomePrimefaces.xhtml".

In the next part of the tutorial you we will programm a small application including a RESTfel Webservice and a Primefaces frontend--->

9/17/2012

Modern IDE Features

Choosing your IDE for Web-Development or Software Development in general is an important decision, because you will be bound to it with learning the shortcuts, the plugins, the menu trees or the preferences structure. A modern IDE should get you started as fast as possible with the new technology by supporting you with good examples, syntax highlighting, a meaningful project structure, multiple customizable windows to get an overview and the IDE should be good documented. But also in later stages, when you are a more experienced programmer it should help you out with customizable shortcurts, macros, code generation, plugins or an advanced debugging view and functions. Some more feature which should provided:
  • Syntax Highlighting
  • Code Completion
  • Code Formatting
  • Integrated Test Environment
  • Advanced Debugging
  • Free Plugins
  • Customizable Shortcuts
  • Sample Applications
  • Code Generation
  • Software Modelling
  • Model - Code Traceability
  • Collaboration
  • Intelligent [suggested] Refactorings
  • Programming Hints
  • File History
  • Full Integration of Software Engineering tools.
  • Gui Builder 
The requirments highly depend on the technology you want to use, e.g. in case of HTML, CSS and JS probably previewing your application in a real browser while coding and JavaScript code completion is more important than a lot of free plugins. There is a new Version of WebStorm out now, watch the awesome LiveEdit Demo:


Live preview as coding is also provided by free online tools like JS Bin and Tinkerbin