HTML5 development in Java EE and PHP projects
By Petr Jiricka on Apr 24, 2013
As an aside, you may be wondering what the iOS and Android items in the browser list are - but this is a whole new topic that deserves a separate blog post, so let's not worry about these for now.
An analogous browser switcher is also available in the project properties - here is the one for Maven web projects.
Let's select one of the browsers that provides integration with NetBeans - such as Chrome with NetBeans Integration. When we now run the project, NetBeans will deploy it to the application server (e.g. GlassFish) as we would expect, but it will also connect to the Chrome browser. This is indicated by the NetBeans icon in the address bar, and the yellow infobar in Chrome.
Thanks to this, you can use all the Project Easel features with this Maven project, such as:
- Viewing the page on various display sizes corresponding to mobile devices
- Visually editing CSS styles
Let's now see what Visual CSS Editing looks like with our project. When we click the NetBeans icon in the Chrome address bar, we can enable Inspect in NetBeans Mode.
After that, we can hover over elements in the NetBeans navigator to highlight the corresponding element in Chrome, or vice versa. Most importantly, we can modify CSS properties using the NetBeans CSS Styles window, and the changes will be reflected in the browser and in the source code. The following screenshot shows the NetBeans CSS Styles window side by side with Chrome.
Besides the features we've covered so far, many other features are now available in Java web projects (Maven as well as Ant based) and PHP projects:
- HTML5 and CSS3 Editing (again, already available in 7.3)
- SASS and LESS Editing
- SASS and LESS Compilation on Save
- Network Monitor for REST and WebSocket