What techniques can I employ in HTML and CSS to design the user interface for my Java application?

Recently, I came across an interesting article at this link: http://docs.oracle.com/javafx/2/webview/jfxpub-webview.htm. The article demonstrates how to develop a java application utilizing the javafx library and utilizing classes like WebEngine and WebView to showcase a web page within the app, effectively transforming it into a browser.

The key points highlighted in the article include:

The embedded browser component uses WebKit, an open-source web browser engine, supporting CSS, JavaScript, DOM, and HTML5.

With the embedded browser, you can perform various tasks within your JavaFX applications:

  1. Show HTML content from local or remote URLs
  2. Access Web history
  3. Execute JavaScript commands
  4. Enable communication between JavaScript and JavaFX
  5. Handle web pop-up windows
  6. Apply effects to the embedded browser

I am considering eliminating the use of Java or JavaFX GUI tools entirely, except for those necessary for displaying HTML and CSS as outlined in the article. Instead, I aim to create the entire user interface for my app using HTML and CSS with various HTML buttons triggering events in my java code.

Do you think this approach is viable? Moreover, if it appears sound to me, I'm curious why anyone would opt for another method to construct a GUI in java.

javahtmlcssuser-interfacejavafx

Answer №1

Currently, I am in the process of developing an extensive desktop application using a single WebView, which can be found on github at this link. The user interface is based on a single HTML file that connects to numerous JS files. To interact between Java and JS, I encapsulate requests in json before calling a Java facade bean. Similarly, it is possible to call JS functions from Java in the same manner. Despite being able to directly call Java methods with varying parameters, I experienced a few application crashes prompting me to solely rely on json for safety reasons. AngularJS and Twitter Bootstrap are used for rendering pages in this application.

I had submitted a request to Oracle's JIRA for improved Java integration (JSR-223) within WebView, and was informed that it could potentially be included in Java 9.

The pace of development is swift once the setup is complete, however debugging can be challenging initially due to the absence of a debugger. Some high-level JS exceptions may go unnoticed as well. Currently, I have encountered no complications with the WebView in JavaFX 8, while JavaFX 7 proves problematic due to font-related issues.

In response to your inquiry - I am unsure of the reasoning behind it, but there appears to be a disparity in resource allocation by Oracle towards the development of JavaFX native components over enhancing WebView integration.

Answer №2

If you want to create a user interface using HTML/CSS, you can consider utilizing a MVC framework like Struts2 or Spring MVC along with AJAX. Incorporating a template engine such as FreeMarker3 may also be beneficial in replacing standard java rendering methods with more streamlined HTML/CSS solutions.

Answer №3

Revolutionize Your Web Development with Vaadin

Vaadin is a cutting-edge servlet-based framework that revolutionizes the way server-side applications are created. By utilizing pure Java code, Vaadin seamlessly renders user interfaces on the client side using HTML, CSS, and JavaScript without the need for any knowledge or involvement in web client technologies.

Gone are the days of tedious programming in various web languages. With Vaadin, your Java code simply defines components like labels, fields, buttons, and layouts, leaving the heavy lifting of web-related tasks to the framework. This means no more templates or manual page creation - just seamless transformation of your Java code into a sleek browser interface. Keep your focus on Java logic on the server side, while Vaadin handles all the client-side rendering effortlessly.

Elevate Your Development Experience with Xojo

Vaadin stands out as a unique web application framework in its architecture, setting it apart from traditional competitors in the field. One notable exception is the Xojo Web Edition, powered by its own proprietary object-oriented programming (OOP) language. While there may not be many direct competitors to Vaadin, the Xojo Web Edition offers a distinct approach to web development with its specialized OOP language.

Answer №4

This idea seems quite promising.

Another option could be to explore using Jetty or a comparable open source server, but it would require more effort to customize it for your specific application needs. Alternatively, you could consider constructing a Java EE application. However, this may not be the most efficient solution for a basic web interface for your app. Java EE allows for creating dynamic web pages with Java Server Pages and managing user requests with Servlets, but adapting to its framework might not align with the simplicity of your application.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vuejs responsive navbar with collapsible sidebar using Bootstrap or Bootstrap-Vue libraries

Vue.js is the framework I'm utilizing for my current project. In creating a dashboard section, I am seeking to implement a responsive design using either bootstrap, bootstrap-vue, or plain HTML and CSS. Below are the images of the desired dashboard -& ...

htmlvue.jsnavbarsidebarbootstrap-vue

Angular 1.4.8 Issue: [$injector:modulerr]

I can't seem to identify the main cause of this error. I consistently see a green underline below the word angular in my javascript file. I'm not sure why. (Using Visual Studio Code) HTML <html ng-app="myapp"> <head> ...

javascripthtmlangularjs

The issue of Bootstrap icons not displaying on the front-end arises when integrating them into a Vuejs Template

I'm in the process of constructing a web application using Vue.JS. I've integrated the [Bootstrap Icons][1] into my application, but for some reason, the icons are not showing up on the screen. Here are the steps I followed: Installed Bootstrap ...

htmlcsstwitter-bootstrapbootstrap-4vuejs2

The appearance of the Angular material component is altered once integrated into a new Angular application compared to its presentation in the provided example

After adding the Angular Material component "Toolbar" to my project, I noticed that it does not appear the same as it does in the example provided. Despite using the same styles, the outcome is different. Here is what the example looks like on the project ...

cssangularsassangular-material

Change hyperlink text color on Android CheckBox

I am having a CheckBox with two links embedded in the text. The text is set using the following code: String htmlText = "Accept <a href='someUrl'>Terms and Conditions</a> and <a href='anotherUrl'>Privacy Policy&l ...

javaandroidhtmlcssxml

How can I remove specific items from a session array when they are selected?

I am seeking a solution that will allow me to remove a specific item from an array when that item is clicked. For example, if I click on "Two", it should disappear. See a demonstration here: CODE: <form method="post"> <input type="text" i ...

phphtmlarrayssessionunset

Tips for showcasing saved images in Spring Boot with Angular 4

I am currently utilizing Spring Boot in combination with Angular 4. The issue I am facing involves uploading an image to the project location. However, upon attempting to view the uploaded image, it does not display correctly and instead throws an error. H ...

javaangulartypescriptspring-boot

"Incorporating a model attribute through the use of a JSON POST request

Currently utilizing Spring MVC. In my code, I've implemented a $.ajax POST request for performing calculations which returns a Json object. During this process, I am wondering if it's possible to include another model attribute using the model. ...

javajqueryjsonspringspring-mvc

The most effective method for incorporating a header and footer into an HTML page utilizing a variety of client-side frameworks

Looking for a solution for my HTML project where I want to incorporate a header and footer to minimize rework. Any suggestions on a good approach? I have experimented with AngularJS using ng-include, and here is the code snippet: var app = angular.module ...

javascripthtmlcssangularjs

Select a dropdown menu option in Cypress by clicking on it only if it is checked

In this html code snippet, I have multiple elements within a dropdown menu. I am looking for a way to click on an item only if it is selected (has the class selected) or has a check mark in front of the name, as shown in this screenshot. How can I achieve ...

javascripthtmlautomationcypress

Tips for adjusting the icon size within the <IconContext.Provider> dynamically

Currently, I am using the 'IconContext.Provider' tag to style my icons from the 'react-icons' library. Are there any solutions available to dynamically change the size of the icon based on the size of my media? Is using the global styl ...

cssreactjsnext.jsreact-icons

What is the best way to choose and style every 2 or 3 child elements or sibling elements?

I have a total of 10 children within a parent div. I am currently applying display: 'flex' and flex-direction: 'row' to every pair of children by wrapping them in separate divs with the class 'flex-row'. Is there a more effici ...

htmlcssreactjsbootstrap-4sass

Creating an HTML table from JSON data

Struggling to display real-time statistics in a table on an HTML web page? I have the data in JSON format, but can't seem to get it right. You can find the data at: I attempted the following code snippet, but it was not successful: <!DOCTYPE htm ...

htmljsonurlhtml-table

Using JavaScript to transfer the data ID from a button to a form

I am working on a project where I have a button that triggers a modal: <button type="button" class="btn btn-primary add-subscription" data-toggle="modal" data-workspace_id="{{ workspace.id }}" data-target="# ...

javascripthtmlajaxforms

"Encountering an issue where attempting to set a property on an undefined variable, despite it being

I've been working on a timer app/component, but I'm running into an issue. The error message reads: Cannot set property startAt of undefined. I've defined it in my dashboard component, so I'm not sure where the problem lies. Any suggest ...

htmlangulartypescripttimer

The inner panel height does not extend to 100% when there is overflow

When pressing the submit button on a panel containing components, an overlay appears but does not cover the entire parent panel if scrolled to the bottom. Additionally, I want the spinner to always be centered, whether scrolling or not. I've tried usi ...

htmlcssangular

Neglecting images on Zoom

Looking to scale up the elements on an HTML page by 50%, without affecting the resolution of images. Despite trying zoom: 150% in CSS3, it ends up zooming pictures as well, resulting in blurry visuals. Is there a way to enlarge all HTML components while ...

htmlcss

Transform SVG with a Click

Can someone assist me with rotating the pink area on click and moving it to a new angle from its current position? I am looking for a way to save the current position of the pink area and then, when clicked, move it smoothly to a new position. Your help ...

javascripthtmlsvgcss-transitionscss-transforms

Implementing a two column stacked layout with Susy, similar to the design of Twitter's interface

Having worked extensively with Susy, I recently encountered a unique use case that has left me puzzled. To illustrate my point, let's take Twitter as an example. If we observe their website layout, they have a standard three-column design with a brea ...

csssusy-compasssusy-sasssusy

The full extent of the background color is not reaching 100% of the height

My content wrapper has a height set to 100%, but the issue is that the background color doesn't fully extend across all content. Here are some images and my code for reference. Any assistance would be greatly appreciated! You can see the white space a ...

htmlcssheightbackground-color