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?
Related
I am struggling with something regarding java swing....I need to know how the linear text fields in most google apps are made....the ones where there is only one line in the bottom and how can I make them interactive. I don't need the app designer in net beans(that's our instructor)..Anyone can help please?
PS: I tried so hard to look up for such a thing but all I find is a drag and drop design. I searched everywhere but I found nothing.
The design of the graphic component in Google app is depending to the mobile operative system. In iOS and Android you will have different design for the same component, as you can see:
If you want to change the design of a graphic component (in an App or, in this case, in Java Swing) you have to write a Custom text field.
You can read Customizing JTextField for a simple example.
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.
I am trying to create a screen like this one
Initially I was trying to port a console program to java. I have found things like jcurses and charva but there is almost no documentation on them and I really cant understand how to use them.
So I figured that I could create a console like screen that resembled the one above.
what library / framwork would I be best using. Should I use swing as it if fully portable?
what would be the best approach being that I need to be able to navigate and alter the 00 in the picture above?
Easily usable would be great but as long as it has good documentation that I can learn it from that would be fine.
(Answering as if you're looking for a hex editor.)
http://jhecomponent.sourceforge.net/
http://www.fifesoft.com/hexeditor/
http://hexedit-lib.sourceforge.net/
Played a bit with the fifesoft.com offering, kinda cool.
If you're not looking for a hex editor, can you be more specific? If you just want a cursor-addressable window you'll probably have to suck it up and figure out something like jcurses or libjcsi :)
If you prefer to create a full fledged GUI with Java you could certainly use Swing. I would prefer SWT as a matter of personal taste, the widget library of Eclipse. You will find a lot of snippets and tutorials (same for Swing). Here is the Widget Library.
Here is a discussion about SWT versus Swing.
You could use the table layout manager to create the layout shown in your screenshot. If you rewrite the application from scretch, you should be able to handle the GUI events and update the widgets according to your application needs. You will easily find articles when you search for swt and table. If you would like to keep the code base and just exchange the GUI, I 'm not sure about the best approach. Maybe, the libs jcurses and charva are the way to go.
Unless you are looking to run the app on a headless VM (where a console/tty is all you've got), I'd use Swing. Create a JTable with a custom TableModel (to provide the data) and custom renderers (to provide the hex formatting) and everything should just work. Consider deriving from the various DefaultXXX implementations to save a lot of work.
I'm thinking about writing a simple UI designer in Java. I'm just playing with ideas at the moment to see if it is feasible.
It would be good to have something like this as all of our UIs are generated from XML. Just wondering if anyone has tried anything like this before. I know there will be a lot of effort in doing something like this.
Does anyone know of any 3rd party products that already do something like this?
If not then at a simple level, it will have drag and drop support for any component that can be positioned on a panel. Then extra bits will be added. Are there any good samples on the net for this?
Cheers
Dated back to 2005, this has an overview of Java UI Builders:
http://www.fullspan.com/articles/java-gui-builders.html
Here is a page on how to use the Eclipse Visual Editor:
http://www.ibm.com/developerworks/opensource/library/os-ecvisual/
Here is a good page on the different approaches to build UIs in Java:
http://leepoint.net/notes-java/GUI/misc/80gui-generator.html
Which GUI technology are you using? Swing? NetBeans has a very good drag-and-drop Swing GUI editor. For Eclipse there are several plugins.
If you want to see other projects in which a Swing GUI is generated from XML config files, there are different libraries that do this.
Eclipse 4.0 Developer Preview was just released with an xml based toolkit called XWT. It can be styled with CSS and has a GUI builder. This is a developer preview and there will be some changes over the next year as it progresses to release 4.1, but it is useable right now and the community support is really good.
If I have Java program and I need to alter it to an interface and include icons,
is there any easy I can do this and is there a good application that can help me to do it ?
or do I have to code it in myself?
Nop, /me thinks ur need 1337 mad Java programin' skillz!
Translation for the rest of the world: Sorry, you'll need to program in Java.
Added: Hey, what's with the downvotes? He started it! :P Besides - no matter if he wants to add or modify (the original text wasn't clear on this) the UI of a Java program, he will need to program in Java to bring his UI together with the code. There is no miracle tool that can allow you to draw an UI and it will suddenly do what you do.
Netbeans has a Swing GUI Builder. Quoting from their website. Let's hope this doesn't count has hidden advertising :)
Design Swing GUIs by dragging and
positioning GUI components from a
palette onto a canvas. The GUI builder
automatically takes care of the
correct spacing and alignment. Click
into JLabels, JButtons, ButtonGroups,
JTrees, JTextFields, ComboBoxes and
edit their properties directly in
place. You can use the GUI builder to
prototype GUIs right in front of
customers.
If you want to add a UI to your Java program there are tools to help you, such as the Swing GUI Builder inside of IntelliJ Idea. However, you're still going to have to write the appropriate code to hook into the UI.
It's just a website? Well depending on whether it uses CSS you might be able to just modify a .css file. This will only let you modify how the site looks as opposed to works.
See here for an example of how this technology works. However this depends on how css-dependent the website is and it's possible you may still run into some difficulties.
You want to use a Java framework to help you with the UI. For example, you can use JSF (Javaserver faces), which allows you to drag and drop components for a UI onto the site. Otherwise, you can use web programs such as Dreamweaver to design the UI, before coding the backend logic yourself in java.