what API is best for free form text and image resizeable application?
Hi,
I need to design and create a greeting cards application that allows the users to enter text and/or images to the front and the inside of the card. The image needs to be resizable just incase it is too big. Or the user can select from some predefined template and change the image or text if neccessary. Which basically is a very simple greeting cards appl...
My questions are,
1. what component will be best used for the card itself? I am thinking of canvas, but i dont know if there will be any limitation that i will face later down the road.... b/c if the user choose to create new cards, i need to display 2 canvas, and have a browse for pictures button, user will select a picture, drag and drop it on the canvas, and resize it if neccessary. And at the mean time, create a textbox in runtime - and enter freeform text to it. Is canvas the best choice?
2. as for image resize - similar to what you do in Microsoft Word - when you import an image, you can drag the corner, and resize the picture in runtime - -how do you do that in java, what API do you use?
3. Free form textbox - again - what API is best for this? and can you give me some pointers on how to start on this? i am really puzzle on this textbox piece.
thanks.
T
[1285 byte] By [
adidas79a] at [2007-11-26 19:00:01]
Personally, if I were to write something like this, I'd use a stack of Image objects for the card. The stack would be like layers in Photoshop -- they could be drawn over each other. The card itself wouldn't be a GUI component at all. Or better yet, there'd be a class encapsulating two of these stacks of images; each one would be a different part of the card (front and inside, maybe one for the back too).
Then I'd write a separate GUI component that knows how to draw a card. Or perhaps, the card would know how to draw itself on the special GUI component. The GUI component would probably subclass Canvas, but only because I seldom use Swing. The GUI component would probably also have to know (via some mouse event handlers) how to deal with resize or move events, and how to pass those through to the card objects.
But there isn't any cut-and-dried answer for how you'd do something like this. This just seems like the easiest, most modular approach.
Hi Paul,
Can you elaborate a little bit on your Image Object idea? You mentioned that it will be a class encapsulating two of these stack of images.
Do you mean, so there is a main frame - with 2 panels may be (front and inside), and then it will begin with 1 image object on each panel.
As user insert (drag / import / insert / drop...etc... whatever ways i come up with) the picture onto the image - i am going to create a image object in runtime, and put the new picture onto the new image object, then put the new image obj on top of the existing image obj?
How do one position an image freely on a frame / panel / or canvas? Meaning, that you can drag the picture to whatever X, Y.....?
thanks
T
> Do you mean, so there is a main frame - with 2 panels
> may be (front and inside), and then it will begin
> with 1 image object on each panel.
Well, there could be one panel showing just one of the image stack objects at a time.
> As user insert (drag / import / insert /
> drop...etc... whatever ways i come up with) the
> picture onto the image - i am going to create a image
> object in runtime, and put the new picture onto the
> new image object, then put the new image obj on top
> of the existing image obj?
That's why I suggested a stack. If the user drags an existing picture (some kind of decoration) onto the card, then you'd add an image to the image stack. It should be pretty easy to make changes that way, the user wants to remove the decoration later.
(Though I guess you could just make an undo system instead, which is also generally done with stacks apparently though in a different way.) Anyway most of the images in the stack would be mostly transparent; so you'd draw the image stack in the panel by just drawing the stack from the bottom up.
> How do one position an image freely on a frame /
> panel / or canvas? Meaning, that you can drag the
> picture to whatever X, Y.....?
You can draw an image on a Graphics object anywhere. Check out Graphics.drawImage in the API docs.Maybe the stack of images would also have X,Y pairs to say where to draw them on the card. Or when you add an image to the stack, you could just create a full-sized (as big as the card) image by adding transparent borders, but that seems like it would be more trouble later on when the user wants to reposition something.
hi,
As for te image stack - i want to confirm - that you mean, place an Image obj on top of another Image object.... to create a "stack" of Image objects, right? There is no ImageStack Class available that i can see..
As for the textbox - any better suggestion than createing a textbox in runtime? That is also good for re-positioning based on whatever X and Y? I honestly not sure how to start the textbox piece... Basically, i just need it to be able to write on the card, anywhere on the card itself (could be on top of the Image too...)
T
Yeah, ImageStack would be a class that you define.
Or maybe call it "Layers" or "LayeredImages" because that's actually a better description.
Re: text input, I can't think of a way to do that other than having a text input box. Presumably entering text and clicking a button or pressing return would trigger and event handler that would take the text, render it into an image with a transparent background (and opaque text) and then add the image onto the stack. The image could then presumably be repositioned.
I'd suppose that you'd reposition X,Y positions of images, by using mouse events (eg MouseMotionListener) and having an (x,y) pair associated with each image in the stack. Mouse movement would change the (x,y) values, and the (x,y) values would be used to determine where to draw the image in the stack relative to the upper-left corner of the card.
how do you think i should attack the textbox piece?
when user click somewhere on the Image itself - it generates a textbox in runtime directly on top of the image? Is that possible? And then once the user type something, and lost focus... it renders the text into another Image, and placed on top of the existing images...
How do you create a textbox in runtime?
thanks.
T
I wouldn't do it that way. Instead I'd have, in the "tools area" a textfield or a text area to enter text. It would just permanently be in the tools area, although I might use a CardLayout to keep it hidden when not in use. Next to it, there would probably also be a list for font size, another list for font, etc. This is a pretty common arrangement among drawing programs, which means that it's a well-developed idea and it should be an intuitive interface for users.
So anyway, the user would select the "add text" tool, which would make the text area show up if it's not already visible (or always visible). The user types in the text and other stuff, clicks the "done" or "add" or whatever button, and then your program would render the text into an image and put it on the top of the stack. From that point the user could reposition in with the mouse, like they could with any layer on the stack.
Hi,
I've written a open source framework for such tasks (at least to some degree, but maybe you could use it as a base). For more information have a look at my posts in the following thread:
http://forum.java.sun.com/thread.jspa?threadID=737908
I've started to write a tutorial and samples (started, not finished yet! ;) ):
http://softsmithy.sourceforge.net/lib/docs/tutorial/swing/customizer/index.html
-Puce
Pucea at 2007-7-9 20:41:50 >
So,
Assuming the Stack has 3 images already - first picture, second picture, and third image being rendered from text.
The user is able to drag / position the image - how do i let them select the first picture and move it around ? B/c at that point - the first image is at the bottom itself....
And how do you 'remove' the image that is already on the stack? say you need to remove image #2 form the stack...
Personally, I'd keep it simple by having a GUI widget -- say, a JList -- that lists the existing layers. (So, write your Layers class to provide an API that you can tie a GUI widget to.) The layer selected in the List is the one that gets mouse actions.
Also I'd just put a button that says "delete this layer" on the GUI part.
So we're looking at an GUI with three parts:
1) the visual representation of the layers. Basically just a display that can take mouse events.
2) a "layer control", with GUI widgets for selecting/listing, removing, and maybe adding or duplicating layers
3) a general purpose toolkit, consisting of a variety of other GUI widgets (possibly managed with a CardLayout, so only relevant widgets are visible at a given time) to do things like create text, add an image, maybe add a tiled image, maybe do some drawing, etc.
At this point, probably the best thing you could do is read the documentation for the relevant classes, sketch out the design on paper, and then dive into coding. Be sure to work incrementally, getting compilable and working code on each incremental step before you move on to the next step.
Hi paul,
I have the whole thing done, pretty much....
but i found an issue..
Since i load all the images and texts onto the imagepanel, so i save all those objects in a vector, and loop the vector in the paintComponenet method. In order for me to create the option, "Save, Open, Save as".. I saved the ArrayList as serialized object to a binary file...
however, when i move between home and work - my jvm is different, was not able to load the binary file that i created at home when i am at work.....
is there any solution to overcome this?
Thanks,
T
Personally I wouldn't use serialization for this, for basically the reason you saw.
How would I store the data?Hmmm..
A couple things come to mind. What I'd probably do is create a .zip file with the images and text in directories named for the layers. So there'd be a Layer-01 directory, a Layer-02 directory, etc., and probably a file holding metadata. Then this single zip file could be used on app in different places, or if for some reason you didn't want to save the app, you could still just unzip the file onto your hard drive and use Photoshop or something to edit the images.
Another alternative, which I don't like as much, would be to put the whole thing in a single XML file. For binary data, I'd base64 encode them (or some other similar encoding).
umm, let me think about your layered approach...thankst
