Images as Buttons and Image Resizing in mxml

Sorry for all the questions but I've run into a problem when trying to create buttons that are just an image in mxml. When I first tried this I couldn't find a way to get the border around the button to dissapear so it ended up looking like my image had an extra black border around it. Then someone here suggested I just set the buttonMode property of an mx:Image to true which ended up working fine to a point. The problem I'm having is that even if I make the tabEnabled property of the image (that I'm using as a button) true, I can't tab over to it. Is there a way to either get rid of the black borders of a button or to make it so I can tab over to an image I'm using as a button?
My second question has to do with image resizing. Lets say I have an image of a horizontal line that I want to put at the top of the mxml page, and I want it to extend the full length of the page, even after the user has resized the browser. Is there a way to do that? I've tried putting the width as 100% or giving the image a "left" and "right" value so that presumably it would be stretched to fit within those but nothing has worked so far. Is there no way to do this or am I doing something wrong?
Thank you for any help you guys can give.

Of course, sorry about that. So the following is a barebones example of how I currently implement buttons and images as buttons:
<mx:Button id="facebookButton" icon="@Embed(source='image.png')" width="30"/>
<mx:Image buttonMode="true" id="button" source="anotherimage.png" enabled="true" click="{foo()}"/>
And within the image I've tried making the tabFocusEnabled property true but to no avail.
The following is how I've tried stretching out an image across the whole page:
<mx:Image source="yetanotherimage.png" width="100%" scaleContent="true"/>
<mx:Image source="yetanotherimage.png" left="10" right="10" scaleContent="true"/>
Is this more helpful?

Similar Messages

Image.getWidth(null) and image..getHeight(null) returns -1

Hi ,
Plz tell me whats wrong with code
import java.awt.Image;
import java.awt.Toolkit;
public class ImgSize {
    public static void main(String args[]) {
        Image image = Toolkit.getDefaultToolkit().getImage("Picture.jpg");
        double width = image.getWidth(null);
        double height = image.getHeight(null);
        System.out.println("width :" + width + "-- height :" + height);
        getImageDimesion("Picture.jpg");
    public static void getImageDimesion(String abc) {
        Image image = Toolkit.getDefaultToolkit().getImage(abc);
        double width = image.getWidth(null);
        double height = image.getHeight(null);
        System.out.println("width :" + width + "-- height :" + height);
}output:
width :-1.0-- height :-1.0
width :2592.0-- height :1944.0
There is no difference in main function getWidth/ getHeight and function getImageDimension getWidth/ getHeight
If u remove getWidth and getHeigth in the main function i.e comment the 1st four lines in main function then the output is
Output
width :-1.0-- height :-1.0
Plz help in understanding this.
Thanks
Venkat

Toolkit images are not loaded until they are first drawn or you request a property from it (such as getWidth). To force the image to load and wait for it to finish loading, you can use the MediaTracker class. The ImageIcon class has one built in.
Image image = Toolkit.getDefaultToolkit().getImage("Picture.jpg");
new ImageIcon(image); //loads the image

IWeb '08 Images Not Publishing and Image Distortion in Application

I created a website a couple of years ago and recently noticed two issues:
1) Images I included on the site are now not showing up on the published site, but still appear in iWeb '08 app.
2) Images and graphics in iWeb '08 app are barely showing up. It looks like images that were really over exposed, but the rest of my computer shows colors and images beautifully.
Anyone else run into these issues? How should I fix it?
Thanks in advance for your help!

Actually, somehow, I just solved both problems. I opened up iWeb 9 and it seemed to resolve both issues. Sorry for any confusion.
Message was edited by: ethouston

Button and image layout help.

It is me again. I need some more help. I want to put the four buttons at the south border, and I want to put the image at the North Center. Now I want them obviously to be on the same panel. I would also like to add them all at once like in my code. Is there an override mechanism so that I can just put the image at the NORTH CENTER and keep the four buttons at the south border?
        QuizPanel = new JPanel();
        QuizPanel.add(label); // I want this at the north center
        QuizPanel.add(button1);
        QuizPanel.add(button2);
        QuizPanel.add(button3);
        QuizPanel.add(button4);
        add(QuizPanel,BorderLayout.SOUTH);
* To change this template, choose Tools | Templates
* and open the template in the editor.
* @author Matt
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class mario {
     * @param args the command line arguments
    public static void main(String[] args) {
        // TODO code application logic here
        EventQueue.invokeLater(new Runnable()
            public void run()
                QuizFrame frame = new QuizFrame();
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setVisible(true);
class QuizFrame extends JFrame
    public QuizFrame()
        setSize(DEFAULT_WIDTH,DEFAULT_HEIGHT);
        ImageIcon icon = new ImageIcon("C:\\users\\Matt\\Documents\\mario2.gif");
        JLabel label    = new JLabel();
        label.setIcon(icon);
        JButton button1 = new JButton("one");
        JButton button2 = new JButton("two");
        JButton button3 = new JButton("three");
        JButton button4 = new JButton("four");
        QuizPanel = new JPanel();
        QuizPanel.add(label);
        QuizPanel.add(button1);
        QuizPanel.add(button2);
        QuizPanel.add(button3);
        QuizPanel.add(button4);
        add(QuizPanel,BorderLayout.SOUTH);
        QuizLabel = new JLabel("This is a test",JLabel.CENTER);
        add(QuizLabel,BorderLayout.CENTER);
    private JPanel QuizPanel;
    private JLabel QuizLabel;
    private static final int DEFAULT_WIDTH = 300;
    private static final int DEFAULT_HEIGHT = 200;
}

I ignored some of the constraints of what you 'wanted' to do. Mostly because they were silly.
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import java.net.URL;
public class mario {
     * @param args the command line arguments
    public static void main(String[] args) {
        // TODO code application logic here
        EventQueue.invokeLater(new Runnable()
            public void run()
                QuizFrame frame = new QuizFrame();
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setVisible(true);
class QuizFrame extends JFrame
    public QuizFrame()
        JLabel label    = null;
        try {
                URL url = new URL("http://forums.sun.com/im/bronze-star.gif");
                ImageIcon icon = new ImageIcon(url);
                label    = new JLabel(icon,JLabel.CENTER);
        } catch(Exception continueWithoutIcon) {
                label    = new JLabel();
        JButton button1 = new JButton("one");
        JButton button2 = new JButton("two");
        JButton button3 = new JButton("three");
        JButton button4 = new JButton("four");
        QuizPanel = new JPanel();
        add(label, BorderLayout.NORTH);
        QuizPanel.add(button1);
        QuizPanel.add(button2);
        QuizPanel.add(button3);
        QuizPanel.add(button4);
        add(QuizPanel,BorderLayout.SOUTH);
        QuizLabel = new JLabel("This is a test",JLabel.CENTER);
        add(QuizLabel,BorderLayout.CENTER);
        pack();
    private JPanel QuizPanel;
    private JLabel QuizLabel;
}

Image processor script and image interpolation setting (cs3)

Hi all,
I'm using Bridge & Photoshop CS3 (mac) to process batches of photographs. I've discovered that the script "Image Processor" does not take into account the "image interpolation" setting of my General Preferences in Photoshop.
It's very painful, because I cannot use "Image Processor" any longer, as it produces soft images where I need sharp ones (my default for "image interpolation" is "bicubic sharper".
Any idea/workaround?
thanks
Patrick

This is the change I made in CS5 fit image
    // resize the image using a good conversion method while keeping the pixel resolution
    // and the aspect ratio the same
    //app.activeDocument.resizeImage(newWidth, newHeight, resolution, ResampleMethod.BICUBIC); Commented out JJMACK
    if ( newWidth > app.activeDocument.width || newHeight > app.activeDocument.height ) {
        if (!limit) {app.activeDocument.resizeImage(newWidth, newHeight, resolution, ResampleMethod.BICUBICSMOOTHER);}
    else { app.activeDocument.resizeImage(newWidth, newHeight, resolution, ResampleMethod.BICUBICSHARPER); }
Note: Adobe choice to use BICUBIC is probally the best choice for users in general. For I find an images has been sharpened before its downsizes, downsizimg it using BICUBICSHARPER is not the best choice then.

I Have a UITableView with 17 row. in last 17Th row i applyed cell.selectionStyle = UITableViewCellSelectionStyleNone; and in this row i also put UIButton with Image - my QUESTION IS that i want in 17Th row when user tapped Image on button is hide and wh

I Have a UITableView with 17 row. in last 17Th row i applyed cell.selectionStyle = UITableViewCellSelectionStyleNone;
and in this row i also put UIButton with Image …
my QUESTION IS that i want in 17Th row when user tapped Image on button. then Image is hide and when user again tapped then image is shown …
so PlZ…help me how can i put logic..
Thanks FrNdZZzzzz…

Sign in:
https://developer.apple.com/devforums/
If you're not a developer, you need to join first:
https://developer.apple.com/programs/register/

Convert image to button

Hi All,
Is it possible to convert an image into button and add behaviour script to it? or Is it possible to create a button with icon and events to it? Please suggest.
Thanks,
Vanitha Allwin

http://www.kahrel.plus.com/indesign/scriptui.html
This has been very valuable. This will help you with almost everything you need. Also try ScriptUISprites by Marc Autret.
Also you will need this to make your png.
var f1 = new File( "/Applications/Adobe InDesign CS4/File Name.png" );
var f2 = new File( "/Users/Desktop/_MAC.txt" );
//var f ="/Applications/Adobe InDesign CS4/Scripts/Scripts Panel/New UI/GreenButton2.png";
if ( f1.exists ) {
f1.encoding = "BINARY";
f1.open( "r" );
var buf = f1.read();
f2.open( "w" );
f2.write( buf.toSource() );
f2.close();
f1.close();

When I have finished working on an image in Photoshop and I hit the save button it goes instead to the "save as" screen. This never happened in previous Photoshop versions. When I get to Lightroom, I have a grey screen the says "File could not be found."

When I have finished working on an image in Photoshop and I hit the "save" button, it goes instead to the "save as" screen. This never happened in previous Photoshop versions. When I get to Lightroom, I have a grey screen the says "File could not be found." I then have to go to "locate" to get the image. When I select the correct image, I get a message that it is not the same file name but I am eventually able to access the image. Needless to say this is having a negative impact on workflow!

The problem with write permissions for the OneDrive folder only shows up in Lightroom 6's export dialogue, that's why it's to irritating. Lightroom 5.7.1 is not having that problem nor does the file explorer. The problem also exists on both of my machines. I will try to check for other problems with the OneDrive troubleshooter though: Running the OneDrive troubleshooter - Windows Help

How can I use an image as a button and make it invisible unless selected?

Hello,
I have been trying to use this button I created in Photoshop in Encore but I cannot get it to work the way it should. First I import the image and drag it onto my menu. Then I select "Object" then "Covert to button". That creates a button but I want it to be invisible unless I select it. Creating a button this way only overlays colors on top of the image when selected vs not selected.
What I need is to have the image been a subpicture highlight. I tried to use Photoshop to create a layer under my buttons and use the image there, typing (=2) as the layer name. I think this is supposed to show the button in its selected state?
But that doesn't work. The image is invisible when I open the menu in Encore, not matter what I select for button highlights.
Could you please explain how to create an invisible button but use an image as its selected state and possibly another for its activated state?
Thanks.

Have you tried using the selections in the Encore menu viewer that show you selected and activated states?

How to Link Text and Image as One Button?

I can easily convert an image or text to a button, but how do I link them both as one button so when you mouseover either one, they both turn a color and when you click on one, they both turn a color before jumping to the scene?

Include the image and the Text in the Button's Layer Set. Design the Sub-picture Highlight to affect both.
Just remember that a Button is defined by a rectangle, that encompasses all elements in the Button, and that Buttons (no part) may overlap any other Button.
Good luck,
Hunt

Next and previous buttons, Cluster, Image Ring problem

Hello, I'm a pretty new user, and I need help with this excercise:
"Create an application in LabVIEW to manage the information of different cars from the movie Fast and Furious. The goal is to show in a Graphic User Interface the information of the cars included in the following table:
ID
Name
Model
Brand
Price
1
Eclipse
2000
Mitsubishi
$ 25,550.89
2 RX-7 2010 Mazda $ 32,700.50
3
Supra
2000
Toyota
$ 39,450.30
4 Charger 2012 Dodge $ 45,290.99
5
Civic
2013
Honda
$ 27,600.40
6 S2000 2006 Honda $ 29,500.99
7
Jetta
2013
Volkswagen
$ 21,740.90
The type of data that should be shown in each field is presented in the following list:
 ID Integer
 Name String
 Model Integer
 Brand String
 Price  Float
Write a program that shows the information of every car included in the table. file Fast_Furious.vi as a starting point to write your code.
Specifications
The following image shows an example of the User Interface of the program:
You can download the
The user should see the information of 7 different cars using the buttons Next and Previous. Each time the user press these buttons the information of the previous or next car should be presented on the interface. There are two special cases in the selection of information:
 If the information of the first car (Eclipse) is shown and the user makes clic over the button Previous. The information of the last car (Jetta) must be shown.
 If the information of the last car (Jetta) is shown and the user makes clic over the button Next. The information of the first car (Eclipse) must be shown.
You must use the array of clusters to obtain and manage the information of the cars, and the ring to show the photos of the cars.
Finally, include a close button to stop the execution of the program.
Extra: Add sound effects to your program. Each time the user makes click over the Previous or Next
button a beep sound should be produced."
I especially need help with the next and previous buttons and the sounds. I alredy have all the information, and the app is supposed to look like the picture attached.
Thanks,
Attachments:
Test.png ‏769 KB

Actually, Munna I think I smell a homework project (2nd year of college, maybe?)
So Miguel, what have you got done so far? What does your code look look like?
Mike...
Certified Professional Instructor
Certified LabVIEW Architect
LabVIEW Champion
"... after all, He's not a tame lion..."
Be thinking ahead and mark your dance card for NI Week 2015 now: TS 6139 - Object Oriented First Steps

Is the BSP extension better than this solution(Text and Image in Button)?

Hi guys,
I have a concept question to decide whether a BSP extension is needed.
I want to put text and image in htmlb button, and used the solution like below:
<%
data image type ref to cl_htmlb_image.
data: image_string type string.
create object image.
image->id = 'back'.
image->src = cl_bsp_mimes=>sap_icon( id = '@9S@' ).
image->tooltip = 'Go back'.
clear image_string.
image_string = image->IF_BSP_BEE~RENDER_TO_STRING( page_context ).
        %>
        <xhtmlb:toolbarButton id      = "back"
                              onClick = "back"
                              text    = "<%= image_string %>" />
But this solution is not desired by customer, since they don't think it looks nice. So is it possible to create my own BSP extension to get a nicer element?
Thanks for any hint.
Regards,
Liying

Hi,
By a nicer element...did you mean to display a better image...or a nicer image ????
if yes, the you can upload any image you need and then use it here...
Tell me if you need more information...!!
Hope this helps.
<b><i>Do reward each useful answer..!</i></b>
Thanks,
Tatvagna.

Drawning text/images in a JPanel and then resizing/moving it with the mouse

Hello ebverybody!
I need to be able to draw some text objects in a JPanel and then resize/move it with the mouse... How could I do that!? Same for some images loaded from jpg files...
Should I just paint the text and then repaint when the mouse selects it? How to do this selection?! Or should use something like a jLabel and then change it`s font metrics?!
I need to keep track of the upper left corner of the text/image, as well as the width/height of it. This will be recorded in a file.
The text/images need to smoothly move around the panel as the mouse drags when selectin an entity.. not just "click the entity, then click another point and the entity appears there as if by magic...":)
Please, tell the best way to do that!
Thanks everybody!
Message was edited by:
cassio.marques

I know what you mean! This happened to me as well!
And one thing that I found useful is, if you want to directly select a layer without selecting from the layers pallete and without having autoselect enabled, just hold Ctrl and click on in directly in the image. This saved me a lot of time!

Resizing text and images with actions and keeping it resized for the next slides, how to?

Hello everybody,
I searched over the net and in this support section for a solution to my problem, but i didnt find any, so...here I am asking you experts.
Through a particular use of different actions I make a logo "compose" in the first slide of my presentation (the logo is composed by text and images that interact), then in the second slide i make it resize so it goes 50% of its size and moves down like a TV logo, in the corner of the slide, and I want it to stay there for all the lenght of the presentation.
It might be a stupid problem, but I didnt understand how to keep it there, 50% of its size and always in that position. If i duplicate the slide I obviously duplicate the 100%-size-logo, not its 50%-size-version, and if i shrink it in order to make it be 50% of its size the text size doesnt shrink so i have to change the text size manually, but the visual effect is imperfect.
Lets summarize:
slide 1: text appears, image appears, the text and the image move and "compose" the logo
slide 2: the complete logo reduces its size to 50% and moves in the lower corner of the presentation, in the place I want it to be for, lets say, 20 slides
slide 3: i want to have this logo already reduced in size and in its position, in the right lower corner, but if i try to group the different parts of the composed logo and i try to squeeze them the font doesnt change its size, I only squeeze the area that the text occupies.
Some help please guys?
Thanks in advance,
Dom-
(add: the problem is kind of similar to this: https://discussions.apple.com/message/9179367#9179367 . the idea of making a slide that contains the logo and text in the exact positions they would be after the move and scale actions is good and that was my first attempt, the probem is that it looks impossible to me to create a second "little" version of the logo that looks exactly the same of the first one that i reduced, so i hope there is some way to tell the app to use "the first logo, only resized the way i want", and thats the point where the problem with the size of the text comes out)

Hi pritam,
The “maintain proportions of window for different monitor
resolutions” property will maintain the proportional size of the front panel
(its x and y sizes) when opened in a different resolution. The front panel
objects will not be resized and will appear larger (and may not fit inside the
front panel) when saved in a higher resolution, and moved to a lower
resolution. You can use the “Keep window proportions” property to achieve the
same results.
To have both the front panel dimensions and front panel
controls scale, you need to have both the above property and the “scale all
objects on front panel as the window resizes” selected. The labels will not be
resized by this.
I tried using both properties on two monitors and noticed
that the change does not occur when the resolutions between the monitors are
different. I had to lower both monitors’ resolution to see the change work
properly.
Please post back if you have any questions. Have a great day!
Ryan D.
District Sales Manager for Boston & Northern New England
National Instruments

How can I have a button that will show/hide a text box and images on the same page?

I have a page like below:
I want to make so that those 3 buttons show different text under them when they are each pressed. How can I achieve this?
Thanks.

Hello,
Please try using Tooltip Composition Widget to achieve that..
You need to customize the trigger as the button and you can use the target to insert desired text box or images.
you can find this in Widgets library panel > composition
Please let me know in case you need any other clarification on that.
Regards
Vivek

Images as Buttons and Image Resizing in mxml

Similar Messages

Maybe you are looking for