How to use HTML and CSS as a Java application GUI? - java

I want to design new Git client with a clean GUI.
Is it possible to use the power of HTML, CSS and JavaScript in a java application?
I would like to use Java + JGit for models, Java for controllers and HTML + CSS + JavaScript for views.
I don't want a client-server model. I would like to integrate Java and HTML nicely. A DOM event would fire events directly to a Java controller. This way it would be possible to create rich offline application.

You can embed web browser component into your Java Swing/JavaFX Desktop application that displays GUI built with HTML5+CSS+JavaScript. You can see an article that describes how to do this at https://jxbrowser-support.teamdev.com/docs/tutorials/cross-desktop-apps.html
One of the Java Swing/JavaFX libraries that allows embedding Chromium into Java applications is JxBrowser. Using JxBrowser API you can load any web page and work with its DOM and JavaScript. You can even call Java methods from JavaScript code and vice versa. For example:
import com.teamdev.jxbrowser.chromium.Browser;
import com.teamdev.jxbrowser.chromium.JSFunctionCallback;
import com.teamdev.jxbrowser.chromium.JSObject;
import com.teamdev.jxbrowser.chromium.JSValue;
import com.teamdev.jxbrowser.chromium.events.FinishLoadingEvent;
import com.teamdev.jxbrowser.chromium.events.LoadAdapter;
public class JavaScriptJavaSample {
public static void main(String[] args) {
Browser browser = new Browser();
browser.addLoadListener(new LoadAdapter() {
#Override
public void onFinishLoadingFrame(FinishLoadingEvent event) {
if (event.isMainFrame()) {
Browser browser = event.getBrowser();
JSObject window = (JSObject)
browser.executeJavaScriptAndReturnValue("window");
window.setProperty("MyFunction", new JSFunctionCallback() {
#Override
public Object invoke(Object... args) {
for (Object arg : args) {
System.out.println("arg = " + arg);
}
return "Hello!";
}
});
JSValue returnValue = browser.executeJavaScriptAndReturnValue(
"MyFunction('Hello JxBrowser!', 1, 2, 3, true);");
System.out.println("return value = " + returnValue);
}
}
});
browser.loadURL("about:blank");
}
}

It's not really feasible. Rich clients in Java are done using Swing or SWT.
If you want to use HTML/CSS for your user interface, you need to use the server/client model. It can be as simple as creating a local server and launching a browser that connects to it, but it would still be that model.
If you absolutely need to have HTML/CSS as your UI framework and can't go to a server/client model, your best bet is probably looking at something like Google Native Client, but that uses C/C++ bindings on the backend. I haven't used Native Client so I can't personally give much more information on that front.
Edit to add:
One option is to embed a native browser into your Swing app using something like: http://djproject.sourceforge.net/ns/
There are some pure Java HTML renderers, however, they most likely won't be fully HTML5/CSS3 compliant, let alone possibly have Javascript bugs as well.
See here for some of those options: Pure Java HTML viewer/renderer for use in a Scrollable pane

Like #Reverand Gonzo says, you will need some form of server/client. But you could easily embed a Jetty server into a Java app and then use GWT for your client code.

You can bring in the power of HTML,CSS,JavaScript into your Swing app using JFXPanel to embed JavaFX WebView. Have a look at the SimpleSwingBrowser demo in this link:https://docs.oracle.com/javase/8/javafx/interoperability-tutorial/swing-fx-interoperability.htm
WebView allows to call JavaScript functions from Java and vice versa. It is also a nice way to enhance your legacy Java app with web technologies.

JavaFX 2.2 brought this functionality to providing a user interface component (GUI) that has web view and full browsing functionality.
For more details, see Adding HTML Content to JavaFX Applications.

Use Angular.js with HTML and rest of the things as same in Java, just use classes for business logic, no need to write code for awt/swing. Angular with spring boot are rapid development in Java for webapp with less code in Java without swing use to create best webapp .

Related

How to implement printing in chrome pacakaged app created from GWT Application.?

I have integrated the GWT application with Chrome packaged app with help of DirectLinkerinstaller like the code below:
public class CSPCompatibleLinker extends DirectInstallLinker {
#Override
protected String getJsInstallLocation(LinkerContext context) {
return "com/google/gwt/core/ext/linker/impl/installLocationMainWindow.js";
}
}
But now I want to call print function from Chrome packaged app. When I call window.print() it allows me to print current window, but I need to open a new separate window and print that.
Could you anyone please help me in this?
I can't answer anything about GWT or DirectLinkerinstaller, but here's an answer about Chrome Apps, assuming that's what you're asking about:
You use the chrome.app.window.create API to create a window. Then, you can call the print method for that window.
In my apps, I seldom want to print what's in a window, but rather something I've generated specifically for printing. For that, I create a PDF with jsPDF (Google it), which works well. Then I display the PDF in a window, and let the user print the PDF (or save it).

GWT Bootstrap Responsive Design of existing webapp with screens

I have a working web application developed with GWT. Now that it has to resize on a tablet or smaller screens I thought of using GWT Bootstrap. But the existing application has only one project.html and project.css file under war folder. Currently no UI binders are used. There are four screens displaying different charts created by d3js.
My Question is it still possible to use gwt bootstrap for resizing? Or what about only Bootstrap and use the css file without any UI binders?
Which approach is better ? As im confused and have spent couple of hours searching and reading.
If you plan to interact in your GWT app with bootstrap components (i.e. NavBar, Caoursel, etc) then I would go with gwt-bootstrap because you don't have to use JSNI and you get some type safety.
If you don't need to interact those components or you use mostly pure HTML in your GWT app you can also use plain bootstrap and add the corresponding classes.
Edit code example:
UiBinder:
<b:NavPills>
<b:AnchorListItem active="true">Item 1</b:AnchorListItem>
<b:AnchorListItem>Item 2</b:AnchorListItem>
<b:AnchorListItem>Item 3</b:AnchorListItem>
<b:AnchorListItem enabled="false">Item 4</b:AnchorListItem>
<b:AnchorListItem pull="RIGHT">Pulled right</b:AnchorListItem>
</b:NavPills>
Code:
NavPills pills = new NavPills();
AnchorListItem item1 = new AnchorListItem("Item 1");
item1.setActive(true);
pills.add(item1);
pills.add(new AnchorListItem("Item 2");
pills.add(new AnchorListItem("Item 3");
...

Java GUI - Web Browser and Opening Link

I am creating a game and I made a Launcher. I have seen on other games made out of Java (Like MineCraft) have a webpage on the launcher. I was woundering how to put a webpage on a Java Swing GUI panel. I would also like to know how to open their browser up to a link with a button.
Thanks,
Blockquote
To open a url in the system's web browser you can use java.awt.Desktop.browse(URI). This allows you to keep your Java code platform independent, and even allows you to check to see if an operation is supported before trying to use it.
To load a web page within Java, I've had some success using the JavaFX WebView.
import java.awt.Desktop;
import java.net.URI;
class URLBrowsing
{
public static void main(String args[])
{
try
{
// Create Desktop object
Desktop d=Desktop.getDesktop();
// Browse a URL, for example www.facebook.com
d.browse(new URI("http://www.facebook.com"));
// This open facebook.com in your default browser.
}
catch(Exception ex)
{
ex.printStackTrace();
}
}
}

Getting started with developing for Chrome

I have been asked by my friend to make an application for Chrome and it requires me to have context-sensitive menus as below:
I have never really made anything for Chrome before and I have a few questions regarding it:
I will have to develop a plug-in, right ?
If so, is there a specific set of rules I have to follow ?
I know I can use GWT to compile Java to JavaScript
3. This context sensitive menu is the same as JPopupMenu ?
The application I want to develop is simple:
Copy some text,
right-click, click on the context sensitive menu
apply simple Caesar's cipher to the text
open a new JFrame with JtextArea in it to display the encrypted text.
What you're creating is called an "extension", not a "plug-in". A browser extension is written using HTML, CSS and Javascript, and got access to APIs for direct interaction with the browser.
Plug-ins, on the other hand, are compiled binaries such as Flash and Java.
Drop the idea of using GWT for Chrome extensions. It makes development of the extension harder, not easier (open issue).
Especially because you'll find plenty of vanilla JavaScript examples and tutorials in the documentation and Stack Overflow.
You just have to know the relevant APIs:
Copy some text,
right-click, click on the context sensitive menu
Use chrome.contextMenus. There's no need to copy, the selected text is available in the callback (examples).
apply simple Caesar's cipher to the text
Create a JavaScript function to achieve this.
open a new JFrame with JtextArea in it to display the encrypted text.
Create a new window using chrome.windows.create. You could include an extra HTML page in your extension, and use the message passing APIs to populate the text field, but since you appear to be a complete newbie, I show a simple copy-paste method to create and populate this window:
function displayText(title, text) {
var escapeHTML = function(s) { return (s+'').replace(/</g, '<'); };
var style = '*{width:100%;height:100%;box-sizing:border-box}';
style += 'html,body{margin:0;padding:0;}';
style += 'textarea{display:block;}';
var html = '<!DOCTYPE html>';
html += '<html><head><title>';
html += escapeHTML(title);
html += '</title>';
html += '<style>' + style + '</style>';
html += '</head><body><textarea>';
html += escapeHTML(text);
html += '</body></html>'
var url = 'data:text/html,' + encodeURIComponent(html);
chrome.windows.create({
url: url,
focused: true
});
}
Don't forget to read Getting started to learn more about the extension's infrastructure.
Check out Google Chrome Extensions Chrome Extensions
The Getting Started will help you Getting Started
You will find a section on how to use Context Menus.

Resources for data binding with WindowBuilder with SWT/JFace

I just started creating a SWT/JFace application using the (now free) WindowBuilder from Google (previously instantiations).
I find the Data binding part difficult although it -should- make it easier for me.
For instance, I cannot bind the enabling-property of a button to a (myself defined) boolean function.
Are there any resources (demos, text, tutorials, examples) about using the WindowBuilder GUI and/or the data binding principle?
The information found on the google page or the instantiations page did not help me enough.
For what it's worth:
bindingContext.bindValue(
new ComputedValue() {
public Object calculate() {
// calculate the enablement using the value of other, previously
// created observables.
}
},
WidgetProperties.enabled().observe(theButton)
);
The Eclipse newsgroups are a great place to ask these questions. Try the eclipse.platform.jface newsgroup.

Categories

Resources