To improve my programming skills I would like to set up a little project for my work. I would like to create a kind of to do list, with several columns (Note, PO Order, Shipping, Done (as a Checkbox), ect.).
At the end of a day, I want to be able to click on the checkbox for every row which is done and save them in a data file. Also I would like to create this as a web application, running on the server in the company.
Since I would like to improve especially my java skills I would like to do this (if possible) mostly in java and to get in touch with frameworks, so I started to read about Vaadin.
My question is, if you guys could give maybe some experience about a project like this and if it's in general possible to realise this with Vaadin.
To improve my programming skills
If you want to build web apps using pure Java on the server-side, Vaadin fits the bill.
You describe the layout and widgets you want to appear in the user interface using Java code. Then, at runtime, Vaadin automatically generates the necessary HTML, CSS, JavaScript, DOM, AJAX, WebSocket, and Push code needed to render that UI on the client-side in the user’s web browser.
The beautiful part is that you get all the benefits of using those web standards technologies without having to learn them or code them.
create a kind of to do list, with several columns (Note, PO Order, Shipping, Done (as a Checkbox), ect.).
Vaadin provides a powerful and well-designed data-grid widget, Vaadin Grid, that can display such columns including the checkbox.
I want to be able to click on the checkbox for every row
The Vaadin Grid tool has an interactive mode that allows the user to directly edit the row, including clicking on the checkbox.
You could alternatively let the user select several rows and click a button (that you programmed) than would mark them as done, checking the checkboxes of the group at once.
Also, Grid has a built-in feature where it displays a column of checkboxes to be clicked en masse as an alternative to selecting rows. This helps the many users who are not adept at maneuvering through a multi-row selection with mouse-and-keyboard gestures.
I would like to create this as a web application, running on the server in the company.
Your Vaadin-based web app is built on standard Java Servlet technology. So you can deploy to your choice of any of a dozen or more web containers such as Apache Tomcat, Eclipse Jetty, Glassfish, Wildfly, and many more.
I would like to do this (if possible) mostly in java
You can build your web app entirely with Java code by using Vaadin. All Java on the server-side, no Java on the client-side.
You may eventually want to learn a bit of CSS to tweak the fonts and colors and such. But this is optional.
if it's in general possible to realise this with Vaadin.
Indeed, this project sounds like an ideal match to Vaadin.
In contrast, where Vaadin is contraindicated would be:
For web sites with crazy complicated layouts such as slick magazine sites. Vaadin is aimed at business-oriented data-entry apps.
For programmers who want to grapple directly with the HTML, CSS, JavaScript, etc. rather than avoid it.
Related
How are big applications (with lots of windows, lets say users administration, roles, payments, etc) designed. I'm a web developer and I'm used to develop different screens in different html files. I wanna know how to split windows generations in different files instead of having only one huge Application class.
Thanks in advance..
The question is a bit too broad to thoroughly answer, but I still think providing a partial answer here might be useful.
For an implementation of Banislav's strategy of hyperlinks controlling a swappable pane (which does not use FXML), see the related question: How to have menus in java desktop application.
For a small FXML based framework for switching panes see: Loading new fxml in the same scene with associated sample code. Note that sample is for small apps, for large apps a more rigorous framework would be preferred.
The next step up from the small framework listed above would be something like afterburner.fx, which is "a minimalistic (3 classes) JavaFX MVP framework". Even though small, afterburner.fx would probably suffice to be used as the core for a medium sized application. You can find a small sample application built using afterburner.fx named airhacks-control.
For something a bit more involved you can study the source of SceneBuilder and SceneBuilderKit. SceneBuilder is an open source design tool written in JavaFX. Understanding and adapting that code may be challenging for somebody coming from a web background as its implementation differs significantly from a traditional web application.
For very large applications, basing the application on a fully featured platform such as NetBeans RCP would probably be a preferred approach, though, as of this time, that is probably a large and difficult task to do well and likely requires mixing multiple frameworks rather than writing everything purely in JavaFX.
In JavaFX, you can use similar approach as in web development.
Use BorderPane as root pane.
Create main menu
You can use MenuBar with Menus and MenuItems. You can also use TreeView or ListView on like left side of screen. To position TreeView/ListView on left side you could use BorderPane and set it to left with setLeft.
Approach I prefer would be to use HyperLink control. Add multiple HyperLink's to VBox and again, set them on left side of BorderPane. Upon click, they will handle event which set's desired form on center of BorderPane.
I.e.
I've tried different ways of creating different interfaces and applets. One of the main things I'm trying to do is to get these gui's to display text and show multiple buttons with different text leading to different outcomes. What I'm asking is, what code is necessary to create an applet or an interface (because I fail at telling the difference between the two) and how should I approach building and structuring that.
I recommend you use netbeans because it has an editor and is the easy way to create Applet.
https://netbeans.org/kb/docs/web/applets.html
You have three main choices I can think of, others will for sure think of something else:
Create a web server and actually serve a web site with your interface. You can code the interface yourself and communicate with your java server using ajax, you can let GWT among others do that for you. COnsider also frameworks like Struts
Create an applet which will become an embedded object in a web site. This is quickly falling out of grace, and I'd strongly discourage you from doing it, if only because of the pains of java plugins in the browser
Create an application with an interface by using AWT or Swing (which come with Java) or, and this is my personal opinion, more elegantly with SWT
It's hard to tell what will best help you without knowing more of your requirements, but if you are going web, I'd suggest you check out GWT, and if you are going desktop app, look into SWT. Also, please understand these are all well tested frameworks and my preferences are just that, preferences.
To create an interface in eclipse using java you can use swing.
In eclipse:
Create a new Java Project (File -> New -> Java Project).
Right Click on src folder and click New -> Other -> WindowBuilder -> Swing Designer -> [Application Window]/[JApplet].
Add the components that you want (buttons, textfields...).
Seems to me like your trying to graduate from console programs to GUI programs. A GUI works differently from a console program. A console program you have a bunch of loops and if statements, but a GUI program work completely differently. The main difference is that GUI programs are event driven.
With that being said, you want to choose a GUI framework, like Swing. Then decide if you want your application to be web based or desktop. An applet is more for web. If you want a desktop program, then you want a JFrame which will be the top-level container of your application.
You can learn all the components that are available to you in the standard Swing API here. IMO it seems like you need to start from the beginnging, so I would start from the very being of How to Create GUIs with Swing. You will want to pay close attention to section on Writing Event Listeners
If you do want to create an Applet instead of a desktop program, you can see the Applets, where you'll learn how to develop Applets and how to deploy them. You will still need to learn some basics though from the Swing link I mentioned.
Also, before you start using drag and drop gui builder tools, I would strongly urge you to first learn to hand code. It will work best for you in the long run.
I hope this gets you started in the right direction.
The defacto world standard GUI for all platforms is becoming Html5 and css3.
So the easiest way for you to write an interface is in HTML. You don't need an applet unless you have real specific needs like having a constant connection to the server for a chat or whatever. Anyway most of the applet reasons to exist are now resolved in standard HTML. If you want to learn a new langue, try Dart (dartlang.org)
You could use dart to have the more adaptable GUI to standards in the world
I explain why in this blog post
http://1veu.blogspot.com/2013/12/why-i-think-dart-will-detrone-java.html
Naturally even if you need to write a stand alone application with native GUI, HTML5 and css3 are still widely employed along with webkit or native code transformers like PhoneGap.
I've inherited a Java web app that actually uses a Silverlight XAP for one small section of functionality, which allows users to upload large batches (1+) of images to a directory on the server.
The business requirements are provided in more detail below, but can be summarized as follows:
Users must be able to upload multiple images at the same time - if the user has 500 images to upload they shouldn't have to click a button, select the next file, and click "upload" 500 times; they should be able to select all 500 files from the local file system and upload them as a single "batch"
The file upload component must be AJAX or AJAX-like (does not require a page redirect/refresh)
The developer who chose Silverlight did so because:
He knew C# and used to be a Silverlight developer ;-)
Silverlight does meet those requirements
Silverlight has (according to him) better browser coverage than our JS technology (jQuery)
When management found out that Silverlight was chosen (which they only did during this hand-off!), they flipped out because Microsoft/Silverlight is not a part of our standards/platform.
I've been asked to research what it would take to re-write this in something that isn't Silverlight and is standards-compliant. We're a Java camp, and have been given the following acceptable candidates for technology selection:
Any Java view technology that could satisfy these requirements (GWT, maybe even JSF?!?) - this would be my preference
JavaScript/jQuery/QooxDoo/etc.
Applets (ehhh...)
Flash (I have no experience developing Flash/Flex and prefer this the least but will entertain the idea for the company's sake)
Of course, developer skill sets weigh-in heavily. The project has been handed to me and one other developer. Both of us have decent JS experience, strong Java and JSP background, but zero Flash.
The most important thing here is that a user can have the following experience:
They click a button (which would be a part of this component) that reads "Select Images"
A modal dialog pops up (modality is my personal "requirement", but not mandatory though)
Dialog allows them to pick a folder on their local file system, and select 1+ image files from inside that folder
Dialog has an "Upload Now" button, once user clicks it the dialog disappears and the component shows a progress bar of each photo being uploaded, sequentially
I've spent all afternoon researching GWT, JSF, ICEFaces and jQuery, and they all seem like they could handle these requirements, but I have not seen anything that assures me.
My question is: is there a Java solution that can accomplish this, and if so, what (GWT, JSF, RichFaces, etc.)?
If not, then can jQuery or any other JS lib do this?
If not, do I have any other options besides applets or Flash (and, of course, Silverlight)?
I would honestly rather consider pitching a new technology to our Enterprise Architecture committee than to do an applet (which is the anethma of Java development) or Flash (which I would have to learn from scratch).
Thanks in advance for any nudges in the right direction!
Edit
I know many of you may be tempted to answer by suggesting completely different alternative solutions. Please see my comment to #GolezTol's answer, but basically these constraints are hard-bounded and beyond my control.
Java must be installed and available too. But if a use should be able to upload 500 files, I would choose to give them an FTP account, or upload the files in a compressed format like a zip file, which I think any OS can create natively. Java, Flash, Silverlight.. All of those are components that are not always available. And I don't think a web interface is the most suitable for uploading so many images.
Im trying to resolve following dilemma. I have to develop whole webpage system(with user friendly content management, it should look like very simple Drupal or Joomla) as a project to school. The webpage should have function of adding and removing articles, editing menus, editing whole webpage layout(header position, menu position etc).
Im in phase of deciding which system would be the best for this purpose. I wrote several applications in GWT. It's very quick to develop something, it works on Tomcat etc. So it could be very good adept for this task. But recently I got an idea of writing whole webpage system in JavaFX 2.0 (webpage would open inside the browser).
What is your opinion about this fact ? Should I use JavaFX or GWT? I'm not sure if whole webpage will be quick enough in JavaFX. If the users that will be visiting this page wont have problems with launching this page etc. I havent found any information about this on the internet.
Thanks for your answers :)
Go for GWT (also consider using Vaadin or SmartGWT). It does not require a Java Virtual Machine to be installed on the client. Also, GWT allows the client to download only small pieces of the application, and not the whole thing.
You cited two Content Management Systems like Drupal and Joomla that are written in PHP, so maybe the best solution for you is a CMS written in java like Alfresco or Magnolia.
do you want to do a web page or an applicatin for one plugin ? GWT of course.
GWT
GWT follows a most innovative approach: you write the entire application in Java. But it’s executed in Javascript. A good portion of your code is cross-compiled to Javascript and uploaded to the client.
Judging from the presentations I’ve seen, this approach works surprisingly good. In former times the GWT compiler used to be slow, but today, they seem to have solved (or at least alleviated) the problem. As far as I can see, GWT is an excellent choice
javafx
JavaFX 2.0 is a pretty new GUI framework. So expect a few glitches. The good news is that it’s likely to improve over the years. And I suppose people will start to write JavaFX component frameworks if JavaFX is going to be popular.
There’s a video showing the domain of JavaFX very clearly.
Container terminal monitoring with 3D JavaFX
Source
As i would now like to develop better webapps then the basic php and javascript ones that i currently create, i would like to know how web devs create some of the amazing websites that i have used over the past few years.
For example, On some of the websites that i visit they have the ability to drag and drop items from a palette onto the webpage. I am thinking mostly about some of the online diagramming tools that i have seen. How do they do this because i am currently baffled.
I would like to start creating these types of websites and currently i have no idea how to proceed. I first want to create some small tester websites that allow just very basic drag and drop use.
If anyone could point me in the right directions in terms of links to tutorials or library's that have this feature then i would be most grateful.
Cheers.
Can be done using the jquery UI
Draggable
Droppable
The best, most future-proof (in terms of immunity to browser changes and updates) way to implement drag/drop functionality is to use true rich client (RIA) technology like Adobe Flex, Silverlight, or JavaFX.
I think you should consider development in GWT which is basically a Java based wrapper for Javascript. It has a lot of community support and a complete drag and drop support is available in the form of a library - http://code.google.com/p/gwt-dnd/
Since GWT is coding in Java, it is not really a new territory to venture into but knowledge of Javascript, css, html goes a long in way in building robust GWT application. Plus it allows you to debug your code in eclipse just like Java code.
jQuery is easy to learn (but I'm not 100% sure it does DnD). I personally like MochiKit, which has excellent Drag and Drop functionality, and Dojo is very good too (and has some fancy widgets).
As far as a simple drag and drop goes, you could do something like you said with a palette and a dialog that changes color based on the drop.
I would recommend the jQuery framework as it is very easy to use and has a great API.
The steps for the test itself are pretty simple:
Have a palette with the colors: [ ][ ][ ][ ][ ] These can be table cells (<td>) that you can click on and 'drag'.
You could do tables and when you click on one of the tables, you use jQuery to get the background color. When you actually click on the <td>, assign the color to a variable.
You could create a semi-transparent <div> that follows the mouse as you drag it.
Set a mouseup listener on the target <div> (the one that would change color) and have jQuery set the background of the <div> to the color in the variable.
Edit: There will be a slight problem with 'text selection' when you drag something. A fix can be found here: How to disable text selection highlighting using CSS?