Netbeans and Polymer

Polymer HTML code completion for Netbeans 8.2

Thanks to this wonderful extension I can get rid of annoying errors in HTML editor when I edit polymer components in html files.

Because I use maven project type and netbeans , there is no “.nbproject” folder. In that case the “customs.json” file must be present in src/main/webapp folder.

2016-12-10-11_08_11

Recreate new version of customs.json

Because not all attributes are recognized by customs.json I will recreate it as explained in project documentation.

After downloading master zip file, you need to create “dist” folder under src folder and then run index.js file.

New copy of customs.json will be created in dist folder, just copy it to the webapp folder and that’s it.

Merge changes back to project file

Don’t forget if you already used customization and added something, you need to merge old version with new one or you will lose your changes…

Well, it’s not so simple, looks like after you add few changes to customs.json with HTML editor, the file (customs.json) changed very  dramatically. Looks like netbeans  reorganize whole structure or something.

 

 

 

 

Flyway – database migration tool

How to setup migration tool for any IDE

There are many ways how to setup migration tool for a specific project, here I will use a command line approach.

As you already know by now, flyway just runs your SQL files with migration DDL commands.  You create new file for each change, incrementally as your database evolve.

We need a folder where we will put files under the project tree.

File names should follow special naming convention for versioned migrations.

Command “fw”

Because I use bash (cygwin) environment inside Netbeans IDE, i will first enable “flyway” tool as a command inside cygwin bash terminal. I create “fw” command file and put it in the “bin” folder which is on the PATH.

Netbeans project structure

I have simple hello world java web project. I added a resources, db and migrations folders for data migration files:

Configuraton

In root folder, where I will run “fw” command, I added configuration file with the name flyway.conf. This file contain important config settings for flyway to work.

There are many possible settings. You can take prepared flyway.conf file as a base for your configuration file.  Look at conf folder under flyway installation folder, there is sample conf file with comments around every possible configuration key.

Final structure

In simplified view (I omit lot of files here) the structure of a project folder looks like :

Migrations SQL files

This two files are simple migration files:

and second file where we add new field to the table :

Running migrations

There are only few commands. For start, you need only two (info and  migrate). After you write your first migration file, just try out “info” command. You should see pending migration record for your SQL file.

$ fw info

Now you can migrate first file:

$ fw migrate

After adding next SQL file in “migrations” folder you can again try status of current migrations with “info” comand:

You see there is a Pending change from your last migration file. After another “migrate” command, again this migrations will all be marked as “Installed”.

Ok, that’s it ! Migrations are now in full working state !

How to change “current” folder to “project” folder

For successful execution of any flyway command we need to be in proper folder first. The proper folder is folder where flyway.conf file reside. This is project root folder in my example.

Don’t forget to install “TerminalExtras” plugin for Netbeans, then you can just press Alt+. when you staying on the project root node. Change directory (cd) command will be executed inside terminal window and focus will be set to terminal window.

2016-11-23-00_56_35-helloworld-netbeans-ide-8-2

 

 

Prepare JavaEE/JavaScript development environment

Environment

My current environment consist of windows 10 on HP Pavillion i7 notebook with 8GB RAM, 2 x 500 GB SATA disk.

Java

Install java JDK and set JAVA_HOME and JRE_HOME environment variables.

IDE: Netbeans 8.2

Download and install Netbeans for Java EE development.
Netbeans IDE have very small font for menus and project browser etc. You can change size of  base font with parameters on netbeans program start :

You can add this parameter in etc\netbeans.conf file like this :

Netbeans plugins

QuickOpener plugin

Open OS shell (windows command window) on the location of the selected file is important feature.

Open /Tools/Plugins and search and install QuickOpener plugin.

Select a file in a project tree and hit Alt+1, command window will open.

Markdown

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).
This plugin is installed in Netbeans 8.2 as downloaded installation  “nbm” file and installed from there.

NB MindMap Editor

The Plugin keeps information in formatted markdown compatible text files (*.MMD) and show the information content as graphs. This plugin is installed from the netbeans plugin repository.

 

Java EE Server: Apache TomEE Plume 7.0.2

Download and install TomEE Plume server, unzip to some folder, for example:

and install as service (with a batch file command).

Prepare tomcat_users.xml file

Username and password are written in tomcat-users.xml file under conf folder.

Install TomEE server as windows service

Run as administrator: service.install.as.admin.bat

After installation check all service settings with “tomee.exe” application. In Java tab you should have :

Screen captures:

2016-11-21-21_16_07-c__programs_apache-tomee-plume-7-0-2_bin 2016-11-21-21_16_30-c__programs_apache-tomee-plume-7-0-2_bin 2016-11-21-21_16_56-apache-tomee-properties 2016-11-21-21_17_10-c__programs_apache-tomee-plume-7-0-2_bin 2016-11-21-21_17_24-apache-tomee-properties 2016-11-21-21_17_35-c__programs_apache-tomee-plume-7-0-2_binIf service didn’t want to start as service (windows/services), check log files and react accordingly.

Correct IDE proxy setting in server properties

If TomEE server will not want to start or stop propertly from inside Netbeans IDE environment,  then you need to change proxy settings.

Go to:
Servers> (Apache Tomcat EE server)> plataform > “used ide proxy settings”

Uncheck “used ide proxy settings” !

Why use TomeEE Plume server ?

Hot deployment !

TomEE is highly compatible with other JavaEE servers (JBoss, WildFly, etc.) but is simpler for development because of build in hot deployment support ! Immediately after changes in resources (java files, html files, javascript files ..etc.) there is no need to rerun and restart  server. Browser window opened in the debug mode (in chrome with netbeans extension) will refresh automatically.

You need to run application in Debug mode to be able to benefit from hot deploy and unfortunately not all changes in java files are allowed.

 

WildFly/JBoss server for production

For production application server I will use WildFly.
Download ZIP formated file (wildfly-10.1.0.Final.zip) and unzip it to some working folder where your standalone server wil run.  You can also download RedHat JBoss EAP product, it is essentially the same but with some additions.

It is a good idea to have one instance of production Java EE server installed to be able to test applications under production server.

Setup chrome browser

For debugging you will need latest chrome browser.

Add it to the PATH
Add folder of “chrome.exe” program to the environment variable  PATH (for example: “C:\Program Files (x86)\Google\Chrome\Application” )
You can check if chrome folder is already in the path with this windows power-shell command :

Debugging Java and JavaScript

When you run web application with “Chrome with Netbeans Connector” for the first time and you don’t have connector installed, you will get dialog for installing chrome extension.  After selecting install options in the dialog, chrome will open and proper extension will be already prepared for installation. Just add extension to chrome and rerun web application under debug.

Program will now stop at any breakpoint in java or javascript files.

Gradle build environment

Download binary distribution file of gradle and unzip it to some folder (C:\Programs\gradle-3.2).

In the Netbeans go to Tools/Plugins and install gradle plugin.  After netbeans restart go to Tools/Options/Miscellaneous/Gradle in in Gradle Installation change gradle installation directory to local folder to where you install gradle before. Put same folder for gradle home directory to.

2016-11-21-23_27_41-helloworld-netbeans-ide-8-2

Flyway database migrations tool

Go to flyway web site and download it. Unzip it to some location (C:\Programs\flyway-4.0.3), now you can config it directly in installed folder or do some extra work to configure it locally inside your java project.

Cygwin environment

If you are using windows, you will probably install cygwin.  After download and run installation program, just check under “Shell” group if you have bash shell selected. You can add additional packages, for example “bash command completion” package.

You can always add additional packages to an existing cygwin installation, just repeat installation procedure again.

Additional packages

All/Utils/tree: Display graphical directory tree

 

Netbeans will open bash terminal if you open Window/IDE Tools/Terminal window menu command.

Home folder for your locally installed cygwin will be at the location of environment variable “HOME”.  Set this variable at desired location on your disk. Create “home” folder and subfolder with your user name.

Create additional ‘bin’ folder inside home folder and add it to the path.  You will be able to write automated bash scripts and put them there and use them as instantly accessible commands.

No spaces in PATH variable

You should check PATH  environment variable in windows, cygwin doesn’t convert path correctly if you put a blank space between  folders. Path will still work in windows, but not in cygwin !

For example the path in example will be converted as

If any part of the path is not properly converted to /cygdrive/ mappings, you will not be able to rely on the system path.

Netbeans – TerminalExtras plugin

This plugin enable shortcut keys to change current folder in already open terminal in to the node’s directory (with Alt+.)

2016-11-23-00_53_54-pluginsTo be able to change current folder with “Alt+.” command you need to have:

  • Opened local “Terminal” window
  • selected node in the project tree (any node)
  • press “Alt” and “dot” key

    After key command on the “Source Packages” projects node, “cd” command will be executed and focus will move to the terminal.

 

 

Debugging in Ampps and Netbeans

Please read great article about installation and configuration debugging for PHP in Ampps server.

I just want to add some additional tips before you start downloading and installing files…

Determine you visual C runtime, architecture and thread safety

Open Ampps local control center and check PHP Info page.

2015-09-13 23_17_18-phpinfo()

Files are named with combination of used compiler (MSVC11 = VC11, MSVC9 = VC9), architecture (x86 = 32bit,  x64 = 64bit) and thread safety settings (TS = enabled).

With this information you should select proper DLL for download.

After downloading DLL file for your selected PHP configuration, you must copy file to “php/ext” folder and add  new config setting to php.ini file :

For debuging to work from Netbeans, you need to add this xdebug settings to php.ini file:

Restart Apache and check phpInfo() in local ampps web admin page (http://localhost/ampps/).

2015-09-13 23_31_42-phpinfo()After successful installation your breakpoints in PHP code should work as expected.

2015-09-07 21_41_09-NetBeans Platform 8.0.2

When you debug application, link to the application, get additional debug parameter:

 

Symfony installer, creating new project

Symfony installer

Symfony is one of the best php frameworks for web development. To start working with symfony we first need to download symfony installer:

After downloading symfony file, you can copy it to your new projects folder.

Then you use it with php interpreter as a command:

If you wish to simplify usage of symfony command,  just create dos batch command file (symfony.bat) with next content:

Save both files, downloaded symfony file and batch file to a system wide available folder. If you haven’t it yet, create one folder (like C:\cmd) and add it to system environment PATH.  New command “symfony” will then be available anywhere on the system. To check it, open DOS command window and type symfony command:

You should see something like this:

2015-09-04 17_44_31-Command Prompt

Symfony installer installed !

Create first project

To create new symfony project, open DOS command line in projects parent folder and enter command :

As I described in this blog article, my development environment consist of locally installed apache web server. This means I don’t need to start web server every time I want to serve application manually, but AMPPS application must be started of course.

To open newly created application, enter URL of the project into the browser:

You will get application default startup page like:

2015-09-06 10_00_35-Welcome! - Opera

Create project in Netbeans with existing source

If you now want to work in Netbeans, just open new project with existing source:

2015-09-07 20_47_23-New Project

 

Select folder where generated project reside and you are good to go. You can create extra meta data folder for netbeans specific project files. This way you will not to pollute  web folder itself.

2015-09-07 20_48_29-New PHP Project with Existing SourcesOn the last step you should define startup file , this could be web/app.php or web/app_dev.php, with some additional development informations from symfony framework in the bottom of the web page.

2015-09-07 20_49_26-New PHP Project with Existing Sources