DockLayout + leftMargin/topMargin

The following QML is intended to display an image in the upper left corner, but to put 20 pixels on the left and top of the image.

Unfortunately, the margins seem to be ignored. Why?

import bb.cascades 1.0

Page {
    id: mainPage
    content: Container {
        layout: DockLayout {}
        ImageView {
            layoutProperties: DockLayoutProperties {
                horizontalAlignment: HorizontalAlignment.Left
                verticalAlignment: VerticalAlignment.Top
            }
            imageSource: "asset:///images/mom_text.png"
            leftMargin: 20
            topMargin: 20
        }
    }
}

Margins will collapse on the edges, rather try to add padding to the container:

https://developer.BlackBerry.com/Cascades/documentation/UI/layouts/index.html

Tags: BlackBerry Developers

Similar Questions

How can I change the height of a button in QML

Photo we can see, the 'equal' button could not fill the empty space below,

in the code, I already have the three right-click in a container and the value

layoutProperties: {StackLayoutProperties}

spaceQuota: 1

}

for the key 'c' and 'back' button, so the game

layoutProperties: {StackLayoutProperties}

spaceQuota: 2

}

on the button "=", but it did not work.

But the "zero" button can work well.

I want to know

1. How can I set the button to fill the empty space below.

2. How can I make the size of equal with all the buttons it y width, in other Word, do all the buttons highest.

Thank you very muck.

I don't think you can, you'll have to do a custom for her button

Container {
    id: customButton
    property alias text: label.text
    property alias btnDefault: ib.defaultImageSource
    property alias btnDisabled: ib.disabledImageSource
    property alias btnPressed: ib.pressedImageSource
    signal clicked();
    layout: DockLayout {

    }
    leftMargin: 20
    rightMargin: 20

    ImageButton {
        id: ib
        defaultImageSource: "asset:///images/copybuttonbackground.amd"
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill
        onClicked: {
            copyButton.clicked(); //to send signal out
        }
    }

    Label {
        id: label
        text: "Original"
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Center
        overlapTouchPolicy: OverlapTouchPolicy.Allow //sends click to ImageButton
    }
}

FixedWidth buttonField cannot Center the text

Hi macdan,.

I think that in such cases it is advisable to extend the scope rather than ButtonField.

Try this CustomButtonField. Hope that it will achieve your problem.

import net.rim.device.api.ui.Field;
import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Font;
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.XYRect;
import net.rim.device.api.ui.XYPoint;
import net.rim.device.api.system.Characters;

public class CustomButtonField extends Field
{
    private String label;
    private int labelLength;
    private int width;
    private int height;
    private int alignment;
    private XYPoint labelTopLeftPoint;
    private boolean isFocusable;

    /**
     * Margin for the button
     */
    private final static int DEFAULT_LEFT_MARGIN = 1;
    private final static int DEFAULT_RIGHT_MARGIN = 1;
    private final static int DEFAULT_TOP_MARGIN = 4;
    private final static int DEFAULT_BOTTOM_MARGIN = 4;

    /**
     * Padding for the button
     */
    private final static int DEFAULT_LEFT_PADDING = 5;
    private final static int DEFAULT_RIGHT_PADDING = 5;
    private final static int DEFAULT_TOP_PADDING = 4;
    private final static int DEFAULT_BOTTOM_PADDING = 4;

    /**
     * Margins around the text box
     */
    private int leftMargin = DEFAULT_LEFT_MARGIN;
    private int rightMargin = DEFAULT_RIGHT_MARGIN;
    private int topMargin = DEFAULT_TOP_MARGIN;
    private int bottomMargin = DEFAULT_BOTTOM_MARGIN;

    /**
     * Padding around the text box
     */
    private int leftPadding = DEFAULT_LEFT_PADDING;
    private int rightPadding = DEFAULT_RIGHT_PADDING;
    private int topPadding = DEFAULT_TOP_PADDING;
    private int bottomPadding = DEFAULT_BOTTOM_PADDING;

    /**
     * Alignment
     */
     public final static int ALIGNMENT_LEFT = 0x00000001;
     public final static int ALIGNMENT_RIGHT = 0x00000002;
     public final static int ALIGNMENT_TOP = 0x00000004;
     public final static int ALIGNMENT_BOTTOM = 0x00000008;
     public final static int ALIGNMENT_CENTER = 0x00000010;

    public final static int DEFAULT_BACKGROUND_COLOR_NORMAL = 0x00ffffff;
    public final static int DEFAULT_BACKGROUND_COLOR_ON_FOCUS = 0x009c0000;
    private int backgroundColorNormal = DEFAULT_BACKGROUND_COLOR_NORMAL;
    private int backgroundColorOnFocus = DEFAULT_BACKGROUND_COLOR_ON_FOCUS;

   public final static int ALIGNMENT_DEFAULT = ALIGNMENT_LEFT | ALIGNMENT_TOP;

    public CustomButtonField(final String label)
    {
        this(label, 0);
    }

    public CustomButtonField(final String label, int width)
    {
        super();

        this.label = (label == null) ? "" : label;       

        this.isFocusable = true;
        Font font = getFont();

        labelLength = font.getAdvance(this.label);

        this.width = (width != 0) ? width : (labelLength + leftMargin + leftPadding + rightPadding + rightMargin);
        this.height = font.getHeight() + topMargin + topPadding + bottomPadding + bottomMargin;

        labelTopLeftPoint = new XYPoint();

        setAlignment(ALIGNMENT_DEFAULT);
    }

    public void setWidth(int width)
    {
        int displayWidth = Display.getWidth();

        if (width > 0 && width <= displayWidth)
        {
            this.width = width;
            adjustAlignment();
        }
    }    

    public void setWidth(String refStr)
    {
        this.labelLength = getFont().getAdvance(refStr);
        int tempWidth = leftMargin + leftPadding +  labelLength + rightPadding + rightMargin;

        setWidth(tempWidth);
    }

    public void setHeight(int height)
    {
        this.height = height;
    }

    public void setSize(int width, int height)
    {
        setWidth(width);
        setHeight(height);
    }    

    public void setAlignment(int alignment)
    {
        if ((alignment & ALIGNMENT_CENTER) != 0)
        {
            this.alignment = alignment;
        }
        else
        {
            this.alignment = 0;

            if ((alignment & ALIGNMENT_RIGHT) != 0)
            {
                this.alignment |= ALIGNMENT_RIGHT;
            }
            else
            {
                this.alignment |= ALIGNMENT_LEFT;
            }

            // Vertical alignment
            if ((alignment & ALIGNMENT_BOTTOM) != 0)
            {
                this.alignment |= ALIGNMENT_BOTTOM;
            }
            else
            {
                this.alignment |= ALIGNMENT_TOP;
            }
        }
        adjustAlignment();
    }

    private void adjustAlignment()
    {
        int leftBlankSpace = leftMargin + leftPadding;
        int rightBlankSpace = rightPadding + rightMargin;

        int topBlankSpace = topMargin + topPadding;
        int bottomBlankSpace = bottomMargin + bottomPadding;

        if ((alignment & ALIGNMENT_CENTER) != 0)
        {
            int emptySpace = width - (leftBlankSpace + labelLength + rightBlankSpace);

            labelTopLeftPoint.y = topBlankSpace;
            labelTopLeftPoint.x = leftBlankSpace + emptySpace/2;
        }
        else
        {
            // Horizontal alignment
            if ((alignment & ALIGNMENT_LEFT) != 0)
            {
                labelTopLeftPoint.x = leftBlankSpace;
            }
            else if ((alignment & ALIGNMENT_RIGHT) != 0)
            {
                labelTopLeftPoint.x = width - (labelLength + rightBlankSpace);
            }
            labelTopLeftPoint.y = topBlankSpace;
        }
    }

    public String getText()
    {
        return label;
    }

    public int getButtonWidth()
    {
        return width;
    }

    public void setLeftMargin(int leftMargin)
    {
        if (leftMargin >= 0)
        {
            this.width -= this.leftMargin;
            this.leftMargin = leftMargin;
            this.width += this.leftMargin;

            adjustAlignment();
        }
    }

    public void setRightMargin(int rightMargin)
    {
        if (rightMargin >= 0)
        {
            this.width -= this.rightMargin;
            this.rightMargin = rightMargin;
            this.width += this.rightMargin;

            adjustAlignment();
        }
    }

    public void setTopMargin(int topMargin)
    {
        if (topMargin >= 0)
        {
            this.height -= this.topMargin;
            this.topMargin = topMargin;
            this.height += this.topMargin;
            adjustAlignment();
        }
    }

    public void setBottomMargin(int bottomMargin)
    {
        if (bottomMargin >= 0)
        {
            this.height -= this.bottomMargin;
            this.bottomMargin = bottomMargin;
            this.height -= this.bottomMargin;

            adjustAlignment();
        }
    }

    public void setMargin(int topMargin, int rightMargin, int bottomMargin,int leftMargin)
    {
        setLeftMargin(leftMargin);
        setRightMargin(rightMargin);
        setTopMargin(topMargin);
        setBottomMargin(bottomMargin);
    }

    public void setFocusable(boolean isFocusable)
    {
        this.isFocusable = isFocusable;
    }

    public int getPreferredWidth()
    {
        return width;
    }

    public int getPreferredHeight()
    {
        return height;
    }

    protected void layout(int width, int height)
    {
        setExtent(Math.min(getPreferredWidth(), width), Math.min(getPreferredHeight(), height));
    }

    protected void paint(Graphics graphics)
    {
        int w = width - (leftMargin + rightMargin);
        int h = height - (topMargin + bottomMargin);        

        if(isFocus() == false)
        {
            graphics.setColor(backgroundColorNormal);
            graphics.fillRoundRect(leftMargin, topMargin, w, h, 6, 6);
            graphics.setColor(0x00394142);
            graphics.drawRoundRect(leftMargin, topMargin, w, h, 6, 6);
            graphics.drawText(label,  labelTopLeftPoint.x, labelTopLeftPoint.y);
        }
        else
        {
            graphics.setColor(backgroundColorOnFocus);
            graphics.fillRoundRect(leftMargin, topMargin, w, h, 6, 6);
            graphics.drawRoundRect(leftMargin, topMargin, w, h, 6, 6);

            graphics.setColor(0x00ffffff);
            graphics.drawText(label,  labelTopLeftPoint.x, labelTopLeftPoint.y);
        }
    }

    public boolean isFocusable()
    {
        return isFocusable;
    }

    public void getFocusRect(XYRect rect)
    {
        rect.set(leftMargin, topMargin, width - (leftMargin + rightMargin), height - (topMargin + bottomMargin));
    }

    protected void drawFocus(Graphics graphics, boolean on)
    {
        invalidate();
    }

    public boolean keyChar(char key, int status, int time)
    {
        if (key == Characters.ENTER)
        {
            fieldChangeNotify(0);
            return true;
        }

        return false;
    }

    protected boolean navigationClick(int status, int time)
    {
        fieldChangeNotify(0);
        return true;
    }
}

And from your screen main alignment of the button text.

//CustomButtonField button1 = new CustomButtonField("Button1");
CustomButtonField button1 = new CustomButtonField("Button1", Display.getWidth() / 2);
button1.setAlignment(CustomButtonField.ALIGNMENT_CENTER);

Concerning

Bika

How to center the button on the pop-up screen

Look at the picture, I've created a popup screen click the menu key and I have that transparent and make it mode full screen and I added four buttons vertically please, u can correct me how can I Center this button in the pop up screen.

Here is my code
```
if (Keypad.key(keycode) == Keypad.KEY_MENU)
        {
              MysettingMenu mymenu = new MysettingMenu();
              UiApplication.getUiApplication().pushModalScreen(mymenu);
            System.out.println("--------------Menu -key -Pressed-----------------");

        }
 public class MysettingMenu extends PopupScreen{
         public MysettingMenu(){
             super(new VerticalFieldManager(), Screen.DEFAULT_CLOSE); 

             this.setBackground(BackgroundFactory.createSolidTransparentBackground(Color.WHITE, 80));

             setBorder(BorderFactory.createSimpleBorder(new XYEdges(),Border.STYLE_TRANSPARENT));

             this.add(new ButtonField("Favourites"));
             this.add(new ButtonField(" Settings "));
             this.add(new ButtonField("  About    "));
             this.add(new ButtonField("  Exit    "));

         }

        protected void sublayout(int width, int height) {
            // TODO Auto-generated method stub
             super.sublayout(Display.getWidth(), Display.getHeight());
              setExtent(Display.getWidth(),Display.getHeight());
              int leftMargin = (Display.getWidth() - width)/8;
              int topMargin = (Display.getHeight() - height)/8;
              setPosition(leftMargin, topMargin);
        }

     }
```
There are a variety of ways that this could be done, but in your case the easiest is to allow the screen to use only as much space as it needs and then place it at the Center.

Then

(1) change this call

Super.sublayout (Display.GetWidth (), Display.getHeight ());

in fact, supply the same width and height that you have been given.

(2) remove this:

setExtent (Display.getWidth (), Display.getHeight ());

(3) change margin settings so that they use the actual width and height, and on this basis. For example:

leftMargin = int (Display.getWidth () - this.getWidth (()) / 2;

By the way, I recommend strongly that you never call super.layout (...) ignore the size that he gave you and you deliver own setExtent. Unless you know what you are doing, this can cause fields to display incorrectly. If you think that you must set your own size, then I suggest you create your own Manager and do you do the layout. More information on that here:

http://supportforums.BlackBerry.com/T5/Java-development/how-to-extend-Manager/Ta-p/446749

CustomTextBox align

Hi all

I use code kindly offered online by Dorian.

Now, I am trying to align this text box toward the Center.

Does anyone know what I need to change to achieve this please?

import net.rim.device.api.ui.Manager;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.component.EditField;
import net.rim.device.api.ui.component.BasicEditField;
import net.rim.device.api.system.EncodedImage;
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.system.Characters;
import net.rim.device.api.math.Fixed32;
import net.rim.device.api.ui.DrawStyle;
import net.rim.device.api.ui.Font;
import net.rim.device.api.ui.UiApplication;
import net.rim.device.api.ui.container.MainScreen;

public class CustomTextBox2 extends Manager{    /**     * Default margins     */
    private final static int DEFAULT_LEFT_MARGIN = 0;

private final static int DEFAULT_RIGHT_MARGIN = 10;
private final static int DEFAULT_TOP_MARGIN = 5;
private final static int DEFAULT_BOTTOM_MARGIN = 5;        /**     * Default paddings     */
private final static int DEFAULT_LEFT_PADDING = 10;
private final static int DEFAULT_RIGHT_PADDING = 10;
private final static int DEFAULT_TOP_PADDING = 5;
private final static int DEFAULT_BOTTOM_PADDING = 5;
/**     * Margins around the text box     */
private int topMargin = DEFAULT_TOP_MARGIN;
private int bottomMargin = DEFAULT_BOTTOM_MARGIN;
private int leftMargin = DEFAULT_LEFT_MARGIN;
private int rightMargin = DEFAULT_RIGHT_MARGIN;
/**     * Padding around the text box     */
private int topPadding = DEFAULT_TOP_PADDING;
private int bottomPadding = DEFAULT_BOTTOM_PADDING;
private int leftPadding = DEFAULT_LEFT_PADDING;
private int rightPadding = DEFAULT_RIGHT_PADDING;
/**     * Amount of empty space horizontally around the text box     */
private int totalHorizontalEmptySpace = leftMargin + leftPadding
        + rightPadding + rightMargin;
/**     * Amount of empty space vertically around the text box     */
private int totalVerticalEmptySpace = topMargin + topPadding
        + bottomPadding + bottomMargin;
/**     * Minimum height of the text box required to display the text entered     */
private int minHeight = getFont().getHeight() + totalVerticalEmptySpace;
/**
 * Width of the text box     */
private int width;
/**     * Height of the text box     */
private int height = 45;
/**     * Background image for the text box     */
private EncodedImage backgroundImage;
/**     * Bitmap version of the backgroundImage.
 * Needed to reduce the calculation overhead incurred by
 * scaling of the given image
 * and derivation of Bitmap from the
 * EncodedImage every time it is needed.
 */
private Bitmap bitmapBackgroundImage;
/**
 * The core element of this text box
 */
private EditField editField;
MainScreen theScreen;
//private BasicEditField editField;
//private String entireText;
public CustomTextBox2(int width2, int height, MainScreen aScreen)
{
     super(0);
    theScreen = aScreen;
    // Let the super class initialize the core

    width = width2 + 20;
    // An edit field is the sole field of this manager.
    editField = new EditField();
    //editField = new CustomEditField();
    add(editField);
}

/*
public CustomTextBox2(EncodedImage backgroundImage)
{
    this();

setBackgroundImage(backgroundImage);
    }
 * */

    public void setSize(int width, int height)
    {
        boolean isChanged = false;
        if (width > 0 // Ignore invalid width
                && this.width != width)
        {
            this.width = width;
            isChanged = true;
        }
        // Ignore the specified height if it is less
        // than the minimum height required to display the text.
        if (height > minHeight && height != this.height)
        {
            this.height = height;
            isChanged = true;
        }
        // If width/height has been changed and background image
        // is available, adapt it to the new dimension
        if (isChanged == true && backgroundImage != null)
        {
            bitmapBackgroundImage = getScaledBitmapImage(backgroundImage,
                    this.width - (leftMargin+rightMargin),
                    this.height - (topMargin+bottomMargin));

        }
    }

    public void setWidth(int width)
    {
        if (width > 0 && width != this.width)
        {
            this.width = width;
            // If background image is available, adapt it to the new width
            if (backgroundImage != null)
            {
                bitmapBackgroundImage = getScaledBitmapImage(backgroundImage,
                        this.width - (leftMargin+rightMargin),
                        this.height - (topMargin+bottomMargin));
            }
        }
    }
    public void setHeight(int height)
    {
        // Ignore the specified height if it is
        // less than the minimum height required to display the text.
        if (height > minHeight)
        {
            this.height = height;
            // If background image is available, adapt it to the new width

            if (backgroundImage != null)
            {
                bitmapBackgroundImage = getScaledBitmapImage(backgroundImage,
                        this.width - (leftMargin+rightMargin),
                        this.height - (topMargin+bottomMargin));
            }
        }
    }
    public void setBackgroundImage(EncodedImage backgroundImage)
    {
        this.backgroundImage = backgroundImage;
        // Consider the height of background image in
        // calculating the height of the text box.
        // setHeight() does not ensure that specified
        // height will be in effect, of course, for valid reasons.
        // So derivation of Bitmap image in the setHeight() method is not sure.
        setHeight(backgroundImage.getHeight() + topMargin + bottomMargin);
        if (bitmapBackgroundImage == null)
        {
            bitmapBackgroundImage = getScaledBitmapImage(backgroundImage,
                    this.width - (leftMargin+rightMargin),
                    this.height - (topMargin+bottomMargin));
        }
    }
    /**     * Generate and return a Bitmap Image scaled according
     * to the specified width and height.
     *
     * @param image     EncodedImage object
     * @param width     Intended width of the returned Bitmap object
     * @param height    Intended height of the returned Bitmap object
     * @return Bitmap object     */
    private Bitmap getScaledBitmapImage(EncodedImage image, int width, int height)
    {
        // Handle null image
        if (image == null)
        {
            return null;
        }
        int currentWidthFixed32 = Fixed32.toFP(image.getWidth());
        int currentHeightFixed32 = Fixed32.toFP(image.getHeight());
        int requiredWidthFixed32 = Fixed32.toFP(width);
        int requiredHeightFixed32 = Fixed32.toFP(height);
        int scaleXFixed32 = Fixed32.div(currentWidthFixed32, requiredWidthFixed32);
        int scaleYFixed32 = Fixed32.div(currentHeightFixed32, requiredHeightFixed32);
        image = image.scaleImage32(scaleXFixed32, scaleYFixed32);
        return image.getBitmap();
    }
    protected void sublayout(int width, int height)
    {
        // We have one and only child - the edit field.
        // Place it at the appropriate place.
        Field field = getField(0);
        layoutChild(field, this.width - totalHorizontalEmptySpace,
                this.height - totalVerticalEmptySpace);
        setPositionChild(field, leftMargin+leftPadding, topMargin+topPadding);
        setExtent(this.width, this.height);
    }
    public void setTopMargin(int topMargin)
    {
        this.topMargin = topMargin;
    }
    public void setBottomMargin(int bottomMargin)
    {
        this.bottomMargin = bottomMargin;
    }
    protected void paint(Graphics graphics)    {
        // Draw background image if available, otherwise draw a rectangle
        if (bitmapBackgroundImage == null)
        {
            //graphics.drawRect(leftMargin, topMargin,                                 width - (leftMargin+rightMargin),                                 height - (topMargin+bottomMargin));
            graphics.setColor(0x000000);
            graphics.drawRoundRect(leftMargin, topMargin,
                    width - (leftMargin+rightMargin),
                    height - (topMargin+bottomMargin), 15, 15);
            graphics.setColor(0xffffff);
            graphics.fillRoundRect(leftMargin, topMargin,
                    width - (leftMargin+rightMargin),
                    height - (topMargin+bottomMargin), 15, 15);
        }
        else
        {
            graphics.drawBitmap(leftMargin, topMargin,
                    width - (leftMargin+rightMargin),
                    height - (topMargin+bottomMargin),
                    bitmapBackgroundImage, 0, 0);        }
        // Determine the rightward text that can fit into the visible edit field
        EditField ef = (EditField)getField(0);
        String entireText = ef.getText();
        boolean longText = false;
        String textToDraw = "";
        Font font = getFont();
        int availableWidth = width - totalHorizontalEmptySpace;
        if (font.getAdvance(entireText) <= availableWidth)
        {
            textToDraw = entireText;
        }
        else
        {
            int endIndex = entireText.length();
            for (int beginIndex = 1; beginIndex < endIndex; beginIndex++)
            {
                textToDraw = entireText.substring(beginIndex);
                if (font.getAdvance(textToDraw) <= availableWidth)
                {
                    longText = true;
                    break;
                }            }        }
        if (longText == true)
        {
            // Force the edit field display only the truncated text
            ef.setText(textToDraw);
            // Now let the components draw themselves
            super.paint(graphics);
            // Return the text field its original text
            ef.setText(entireText);

        }
        else
        {
            super.paint(graphics);
        }
    }
    public int getPreferredWidth()
    {
        return width;
    }
    public int getPreferredHeight()
    {
        return height;
    }
    protected boolean keyChar(char ch, int status, int time)
    {
       Log.info("KEYCHAR " + ch);
        switch(ch){

            case Characters.ENTER:
                try
        {    Log.info("KEYCHAR 1");
                   // theScreen.textButton.getChangeListener().fieldChanged(theScreen.textButton, theScreen.textButton.getIndex());
   Log.info("KEYCHAR 2");
          // f.getChangeListener().fieldChanged(f, f.getIndex());
        }
        catch (Exception e)
        {
        Log.info("Error at fcn" + e);
        }
                return true;

        }
Log.info("KEYCHAR 0");
//theScreen.textButton.getChangeListener().fieldChanged(theScreen.textButton, theScreen.textButton.getIndex());

        return super.keyChar(ch,status,time);
    }
    public String getText()
    {
        return ((EditField)getField(0)).getText();
    }
    public void setText(final String text)
    {
        ((EditField)getField(0)).setText(text);
    }
   }

You are missing a centerpiece - the ability to set the bits of style on this field. If you add a constructor that accepts a parameter of long style and has great (style) as the first operator, you should be able to create with the FIELD_HCENTER style bit and add it to a Manager honor this indicator (for example, VerticalFieldManager). Then it will be automatically centered horizontally by the parent Manager.

It is the same on FIELD_VCENTER and, say, HorizontalFieldManager.

ListField only drawing the top row

I'm having a problem with using the ListField component and using a custom inside the drawListRow (.) drawing of the callback object.

I have the following code;

 public void drawListRow(ListField list, Graphics g, int index, int y, int w) {
        int imageHeight = 80;
        int imageWidth = 80;
        int leftMargin = 3;
        int topMargin = 3;
        int padding = 5; //space between adjacent elements

        //get the item to be displayed...
        Item item = (Item)listElements.elementAt(index);

        //draw the item's image, title, description etc..
        g.drawBitmap(new XYRect(leftMargin,topMargin,imageWidth,imageHeight),item.getImage(),0,0); //image is 80x80, positions x=3, y=3
        g.drawText(item.getTitle(),imageWidth+padding+leftMargin,topMargin);
        g.drawText(item.getDescription(),leftMargin,imageHeight+padding);
    }

My installation works, I add a line to the list (and the line is OK), however, when I add a second line, the second row is created but it is empty.

Any help is appreciated!

The 'y' parameter passed to this callback method represents the top of the list to start to paint, I do not see where you set the position is based on this value.

It seems to me that you can be painting each line of position 'y' in the top row.

focus with custom text field problem

Hello

I am new to BB dev., trying to write a small program with two CustomTextFields, but faceing the problem, then try to verify that CustomTextField is selected (the focus).

CustomTextField (NumericTextField)

import net.rim.device.api.ui.Manager;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.component.EditField;
import net.rim.device.api.system.Display;
import net.rim.device.api.system.Characters;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.Font;

public class NumericTextField extends Manager
{

    private final static int DEFAULT_LEFT_MARGIN = 10;
    private final static int DEFAULT_RIGHT_MARGIN = 10;
    private final static int DEFAULT_TOP_MARGIN = 5;
    private final static int DEFAULT_BOTTOM_MARGIN = 5;

    private final static int DEFAULT_LEFT_PADDING = 10;
    private final static int DEFAULT_RIGHT_PADDING = 10;
    private final static int DEFAULT_TOP_PADDING = 5;
    private final static int DEFAULT_BOTTOM_PADDING = 5;

    private int topMargin = DEFAULT_TOP_MARGIN;
    private int bottomMargin = DEFAULT_BOTTOM_MARGIN;
    private int leftMargin = DEFAULT_LEFT_MARGIN;
    private int rightMargin = DEFAULT_RIGHT_MARGIN;

    private int topPadding = DEFAULT_TOP_PADDING;
    private int bottomPadding = DEFAULT_BOTTOM_PADDING;
    private int leftPadding = DEFAULT_LEFT_PADDING;
    private int rightPadding = DEFAULT_RIGHT_PADDING;

    private int totalHorizontalEmptySpace = leftMargin + leftPadding + rightPadding + rightMargin;
    private int totalVerticalEmptySpace = topMargin + topPadding + bottomPadding + bottomMargin;

    private int minHeight = getFont().getHeight() + totalVerticalEmptySpace;
    private int width = Display.getWidth();
    private int height = minHeight;

    private EditField editField;

    public NumericTextField()
    {
        super(0);

        editField = new EditField(EditField.FILTER_REAL_NUMERIC);
        add(editField);
    }    

    protected void sublayout(int width, int height)
    {
        Field field = getField(0);
        layoutChild(field, this.width - totalHorizontalEmptySpace, this.height - totalVerticalEmptySpace);
        setPositionChild(field, leftMargin+leftPadding, topMargin+topPadding);
        setExtent(this.width, this.height);
    }

    public void setTopMargin(int topMargin)
    {
        this.topMargin = topMargin;
    }

    public void setBottomMargin(int bottomMargin)
    {
        this.bottomMargin = bottomMargin;
    }    

    protected void paint(Graphics graphics)
    {
        graphics.drawRoundRect(leftMargin, topMargin, width - (leftMargin+rightMargin), height - (topMargin+bottomMargin), 5, 5);

        boolean longText = false;
        EditField ef = (EditField)getField(0);
        String entireText = ef.getText();

        String textToDraw = "";
        Font font = getFont();
        int availableWidth = width - totalHorizontalEmptySpace;
        if (font.getAdvance(entireText) <= availableWidth)
        {
            textToDraw = entireText;
        }
        else
        {
            int endIndex = entireText.length();
            for (int beginIndex = 1; beginIndex < endIndex; beginIndex++)
            {
                textToDraw = entireText.substring(beginIndex);
                if (font.getAdvance(textToDraw) <= availableWidth)
                {
                    longText = true;
                    break;
                }
            }
        }

        if (longText == true)
        {
            ef.setText(textToDraw);
            super.paint(graphics);
            ef.setText(entireText);
        }
        else
        {
            super.paint(graphics);
        }
    }

    public int getPreferredWidth()
    {
        return width;
    }

    public int getPreferredHeight()
    {
        return height;
    }

    protected boolean keyChar(char ch, int status, int time)
    {
        if (ch == Characters.ENTER)
        {
            return true;
        }
        else
        {
            return super.keyChar(ch, status, time);
        }
    }

    public String getText()
    {
        return ((EditField)getField(0)).getText();
    }

    public void setText(final String text)
    {
        ((EditField)getField(0)).setText(text);
    }
}

and in my screen content trying to check:

NumericTextField focusImput() {
    NumericTextField focusField;
    if (_fieldFrom.isFocus()) {
        focusField = _fieldtFrom;
    }
    else {
        focusField = _fieldTo;
    }
    return focusField;
}

but it always returns me _fieldTo...

NumericTextField definition:

_fieldFrom = new NumericTextField();
_fieldFrom.setChangeListener(this);
manager.add(_fieldFrom);

_fieldTo = new NumericTextField();
_fieldTo.setChangeListener(this);
manager.add(_fieldTo);

Maybe someone to guide me how to correctly focus feature?

Thanks in advance.

Then you need two slightly customized EditFields - their main customization would be limiting their width, as well as making them focusable/unfocusable. So, something like this should work:

public class NumericTextField extends EditField {
  // override the constructors used in your code, adding FILTER_REAL_NUMERIC
  // ...
  private int maxWidth = Integer.MAX_VALUE >> 1;
  private boolean focusable = true;

  protected void layout(int width, int height) {
    super.layout(Math.min(maxWidth, width), height);
  }

  public void setMaxWidth(int width) {
    maxWidth = width;
    updateLayout();
  }

  public boolean isFocusable() {
    return (isStyle(FOCUSABLE) & focusable);
  }

  public void setFocusable(boolean on) {
    focusable = on;
  }
}

If you want to place the fields, use setMargin - he is documented in OS 6.0 but works since OS 4.2.

Use setMaxWidth to, well, set desired maximum width (otherwise EditField tenorman to the top of the entire available width). Use the setFocusable to toggle the field. In addition, you can play with the Visual States for the field you turn, but it's an exersize for another day. First of all make sure that it works and you know how to use it.

[JS CS5] Bad placement of the file on the front page

I'm wondring the way around, but does not seem to resolve the correct file placement is a recto page.
I have a document with several pages where I need to put some files (eps, idms, etc.). So that X and there contact information are data but incase of front position of the placed files page are not correct.
origin of the page rule should work for the place or add any similer point page elsewhere but here to place any file it gives me bad investment.
```
 var theDoc = app.activeDocument, curPage, leftMargin, topMargin, pageBounds, pageWidth, theYpos, theXpos, theHeight, theWidth, snippetFile, theBag;
 theDoc.viewPreferences.rulerOrigin = RulerOrigin.pageOrigin;
 curPage = theDoc.pages[1];
 leftMargin = curPage.marginPreferences.left;  
 topMargin = curPage.marginPreferences.top;  
 pageBounds = curPage.bounds; 
 pageWidth = pageBounds[3]-pageBounds[1];                   
 theYpos = topMargin+  240;
 theXpos = leftMargin + 0 ;
 theHeight = theYpos + 60 ;
 theWidth = theXpos+100;
 snippetFile = File("/C/Image/Lorem.idms")
 theBag= curPage.place(snippetFile, {geometricBounds:[theYpos,  theXpos, theHeight,  theWidth]});
            
```
I don't know if this a bug or what am I missing here.
Thank you
Mac

Hey Mac,

I suggest that you download the png file format or just the InDesign Document to create the snapshot and the live page on the post.

OK Mac you try this its working for me good.

Please check and come back.

var theDoc is app.activeDocument curPage, leftMargin, topMargin, pageBounds, pageWidth, theYpos, PosX, theHeight, theWidth, snippetFile, theBag.;
theDoc.viewPreferences.rulerOrigin = RulerOrigin.pageOrigin;
curPage = theDoc.pages [2];
leftMargin = curPage.marginPreferences.left;
topMargin = curPage.marginPreferences.top;
pageBounds = curPage.bounds;
pageWidth = pageBounds [3] - pageBounds [1];
theYpos = topMargin + 240;
PosX is leftMargin + 0.;
theHeight = theYpos + 60;
theWidth = PosX + 100;
snippetFile = File("~/Desktop/1.inds");

var myActivePage = app.layoutWindows [0] .activePage = curPage;
if(myActivePage.Side == PageSideOptions.rightHand) {}
Alert ("front");
theBag = curPage.place (snippetFile, [leftMargin, topMargin]);
}
else {}
Alert ("back");
theBag = curPage.place (snippetFile, [leftMargin, topMargin]);
}

THX

csm_phil

Why does my site display properly in Firefox but not Safari/Chrome?

I have looked through all my code and do not understand why my previews site perfectly well in Firefox, but in Safari or Google Chrome all elements of the site work but the images that make up the background appear empty or with a blue question marks in a box on them. I made the site by slicing layers in Photoshop then saved the HTML as a template and added the relevant divs.
It displays a good overview on Dreamweaver as well but it is precisely these browsers on that it does not work. It is used to preview very well on these browsers while I was doing it until I added the flash element to it, so I don't know if this has something to do with it, although all Flash elements appear and function ok.

methumeddwl wrote:

Thanks SnakEyes, I managed to get rid of the Alt error now. My structure automatically becomes a tabular presentation due to the importation of the slices directly from Photoshop in a fixed layout? All of a sudden I have all these new upcoming errors for no leftmargin, topmargin, marginWidth don't and marginheight as well as the height, so it would be ok if I just deleted all references to the latter in the code?

Nancy Merci for these links to page layouts ready to use, they will definitely come in handy for my next site. As I want my site to be a fixed 1024 x 700 does what a function table plan? I want it be fixed instead of liquid that I want all the Flash animations to show in specific locations on the site.

This is why you should not export the HTML from Photoshop. To answer your question that exports only Photoshop like HTML 4.01, which is why he has these attributes. In addition, everything is an image in a table cell, which leads to many problems. Learn how to cut out pictures and use everything that CSS can offer will make better code.

Why is the "leftmargin" attribute in the HTML body tag ignored by Firefox?

Check f.i. http://www.vaartips.nl/tipa.htm and see the difference (left margin) between FF and IE.
"Leftmargin 20" is ignored (doesn't) to FF (see page code)

Hello, < body leftmargin = "20" > is not compatible html source code.

you could add body {margin-left: 20px} in the css section, rather style...
```
<head>
<style type="text/css">
body { margin-left:20px }
...
</style>
</head>
```
http://validator.w3.org/check?URI=http%3A%2f%2Fwww.vaartips.nl%2Ftipa.htm & charset = % 28detect + automatically % 29 & DOCTYPE = Inline & Group = 0

ListView - problem DockLayout

Here is my code

import bb.cascades 1.2
Page {
    Container {
           layout: DockLayout {}

                Container {
                    verticalAlignment: VerticalAlignment.Top
                    horizontalAlignment: HorizontalAlignment.Fill
                    Button {
                        text: "1.button"
                        horizontalAlignment: HorizontalAlignment.Fill

                    }
                }

                Container {
                    verticalAlignment: VerticalAlignment.Center

                    ListView {

                        dataModel: XmlDataModel {
                            source: "asset:///currencies.xml"
                        }
                    }

                }

                Container {
                    verticalAlignment: VerticalAlignment.Bottom
                    horizontalAlignment: HorizontalAlignment.Fill

                  Button {
                      text: "2. button"
                      horizontalAlignment: HorizontalAlignment.Fill

                  }
                }

    }
}

When I use a viev list in a layout of the dock it dosent fit properly.instead, it collides with the first container.

should he not just after the first container since I updated the verticallayout Center for container parent of the listview.

Thanks in advance.

When using the dock layout object are added as layers and the order given in qml are important. Your code adds a listview on top of the first box. What is happening, is that you will not be able to capture the actions for this button and once filled, the listview will overlap graphically the key 1.

Below is an approach valid at your intent:

import bb.cascades 1.2

Page {
    Container {
        layout: DockLayout {
        }

        Container {
            id: cont
            bottomPadding: 73
            verticalAlignment: VerticalAlignment.Top
            horizontalAlignment: HorizontalAlignment.Fill
            Button {
                bottomMargin: 0
                text: "1.button"
                horizontalAlignment: HorizontalAlignment.Fill
                onClicked: {
                    console.log("dsds");
                }
            }
            Container {
                //background: Color.Blue
                ListView {
                    dataModel: XmlDataModel {
                        source: "asset:///currencies.xml"
                    }
                }
            }
        }

        Container {
            verticalAlignment: VerticalAlignment.Bottom
            horizontalAlignment: HorizontalAlignment.Fill

            Button {
                text: "2. button"
                horizontalAlignment: HorizontalAlignment.Fill
                onClicked: {
                    console.log("da asdsa");
                }
            }
        }
    }
}

How to Center a label in a dockLayout located in a stackLayout?

Container { layout: DockLayout { } Container { id: cAnzeige Label { id: lblHeader textStyle.fontSize: FontSize.XLarge text: "header" } verticalAlignment: VerticalAlignment.Top layout: StackLayout { } } }

How can I Center a label inside two containers? the first is a dockLayout and the second is a stackLayout?

horizontalAlignment: P does not work?

In my case it and check the width of the second container to fill one.

Container {
                layout: StackLayout {  }
                Label {
                    text: "label"
                    horizontalAlignment: HorizontalAlignment.Center
                }

}

Custom in QML for waterfalls icon button

Just thought I'd share this in case anyone is looking for a solution get a button that is customized by using Cascades.
The idea is to have a button with an icon and label.

I use 2 nine slices images as a background.

In C++, I have a method called navClick(QString name), I can't tell which button was clicked by his label.

IconButton.qml

import bb.cascades 1.0

Container {
    layout: DockLayout {
    }
    property alias image: img.imageSource
    property alias text: lbl.text

    leftMargin: 10
    rightMargin: 10
    preferredWidth: 400

    //
    onTouch: {
        if (event.isUp ()) {
            root.navClick (text);
            console.log (text);
        }
        //
        if (event.isDown () || event.isMove ()) {
            panel.imageSource = "asset:///panel_down";
        } else {
            panel.imageSource = "asset:///panel_up"
        }
    } 

   //    onTouchExit: {        panel.imageSource = "asset:///ui/panel_up"    }    //
    ImageView {
        id: "panel"
        imageSource: "asset:///panel_up"
        preferredWidth: 400
        minHeight: 178
        scalingMethod: ScalingMethod.Fill
    }

    //
    Container {
        layoutProperties: StackLayoutProperties {
            horizontalAlignment: HorizontalAlignment.Center
        }
        preferredWidth: 400
        Container {
        }
        //
        ImageView {
            layoutProperties: StackLayoutProperties {
                horizontalAlignment: HorizontalAlignment.Center
            }
            id: img
            imageSource: "asset:///test.png"
            topMargin: 40
            preferredWidth: 51
            preferredHeight: 51
        }

        //
        Label {
            layoutProperties: StackLayoutProperties {
                horizontalAlignment: HorizontalAlignment.Center
            }

            //
            textStyle {
                color: Color.White
            }

            //
            id: lbl
            text: "label"
            topMargin: 26
        }
    }
}

To use in your page layout, just add a defined IconButtonand the image and the text.

Example:

        Container {
            topMargin: 25
            bottomMargin: 25

             //
            layout: StackLayout {
                layoutDirection: LayoutDirection.LeftToRight
            }

            //
            layoutProperties: StackLayoutProperties {
                horizontalAlignment: HorizontalAlignment.Center
            }

            //
            IconButton {
                image: "asset:///icon_btn_one"
                text: "Button 1"
            }

            //
            IconButton {
                image: "asset:///icon_btn_two"
                text: "Button 2"
            }

             //
            IconButton {
                image: "asset:///icon_btn_three"
                text: "Button 3"
            }
        }

If you have ideas to improve this or suggest a better approach, I'd love to hear it.

Update: added onTouchExit then it resets the State if you move out of the control.

If you are using the class Button of Cascades, unfortunately, the layout of the text & image cannot be changed and the image is adjusted to fit in the button automatically. You must build your own button as you suggested, varying the properties of components content and layout accordingly.

Kind regards

Martin

Question of width custom list.

listItemComponents: [
                    ListItemComponent {
                        type: "item"
                        Container {
                            leftMargin: 5.0
                            topMargin: 5.0
                            layout: StackLayout {
                                orientation: LayoutOrientation.TopToBottom
                            }
                            horizontalAlignment: HorizontalAlignment.Fill
                            Container {
                                layout: StackLayout {
                                    orientation: LayoutOrientation.LeftToRight
                                }
                                horizontalAlignment: HorizontalAlignment.Fill
                                Label {
                                    text: ListItemData.agencyName

                                    // Apply a text style to create a title-sized font
                                    // with normal weight
                                    multiline: true
                                    horizontalAlignment: HorizontalAlignment.Fill
                                    textStyle {
                                        base: SystemDefaults.TextStyles.TitleText
                                        fontWeight: FontWeight.Normal
                                    }
                                }
                                ImageView {
                                    imageSource: ListItemData.statusIcon
                                    verticalAlignment: VerticalAlignment.Center
                                    horizontalAlignment: HorizontalAlignment.Right
                                    preferredWidth: 32.0
                                }
                            }
                            ProgressIndicator {
                                fromValue: 100
                                toValue: 0
                                value: 50
                                verticalAlignment: VerticalAlignment.Center
                                horizontalAlignment: HorizontalAlignment.Left
                            }
                        }
                    }
                ]

Here, I have a custom list box. With a label on the left, a picture/icon on the right and a progress bar as to each item in the list.

The problem is, I can't get the icon/image aligned right, it follows right after the text.

That is to say.

| This is a test X |

| ------------------------------- |

what I want

| This is a test X |

| ------------------------------- |

Maybe my layout, I tried to add the horizontal fill everywhere, no change.

You can fill a container with the background color to make sure that the external container takes the entire available width.

If it doesn't, try setting preferredWidth (Infinity)

HorizontalAlignment.Right won't work in LeftToRight in cause of a bug.

There are several workarounds:

-Use DockLayout. This is not very practical because can overlap, but for short strings (menus, etc), it can work. Here is an example in C++:

http://supportforums.BlackBerry.com/T5/Cascades-development/list-item-image-size/m-p/2064721#M9602

-Insert an empty container with .spaceQuota (1) between the left and right elements. Divide the right margin of the element left and the left margin of the right item in two (because the average container won't let not their margins overlap).

PS Fill does not seem to work for StackLayout. Use rather preferredWidth/Height (Infinity).

I have the file calendar.html, it works fine in IE & crome but in firefox the hyperlinks are not active... can someone help me please...

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

  <title>Calendar</title>
  <script language="JavaScript">

 var dDate = new Date();
 var dCurMonth = dDate.getMonth();
 var dCurDayOfMonth = dDate.getDate();
 var dCurYear = dDate.getFullYear();
 var objPrevElement = new Object();
 var objPrevCalDateText = new Object();

 function fToggleColor(myElement) {
  var toggleColor = "#0000ff";
  if (myElement.id == "calDateText") {
   if (myElement.color == toggleColor) {
    if (myElement.innerText == dCurDayOfMonth && frmCalendar.tbSelYear.value == dCurYear && frmCalendar.tbSelMonth.value == dCurMonth+1) {
     myElement.color = "red";
    }
    else {
     myElement.color = "";
    }
   }
   else {
    myElement.color = toggleColor;
     }
  }
  else if (myElement.id == "calCell") {
   for (var i in myElement.children) {
    if (myElement.children[i].id == "calDateText") {
     if (myElement.children[i].color == toggleColor) {
      if (myElement.innerText == dCurDayOfMonth && frmCalendar.tbSelYear.value == dCurYear && frmCalendar.tbSelMonth.value == dCurMonth+1) {
       myElement.children[i].color = "red";
      }
      else {
       myElement.children[i].color = "";
      }
     }
     else {
      myElement.children[i].color = toggleColor;
         }
       }
     }
   }
 }

 function fSetSelectedDay(myElement){
  if (myElement.id == "calCell") {
   if (!isNaN(parseInt(myElement.children["calDateText"].innerText))) {
    myElement.background = "images/cal_cell_down.gif";
    objPrevElement.background = "images/cal_cell_up.gif";
    document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText);
    objPrevElement = myElement;

      if(frmCalendar.tbSelMonth.value < 10)
       sMonth = "0" + frmCalendar.tbSelMonth.value
      else
       sMonth = frmCalendar.tbSelMonth.value

      if(myElement.children["calDateText"].innerText < 10)
       sDay = "0" + myElement.children["calDateText"].innerText
      else
       sDay = myElement.children["calDateText"].innerText

      window.returnValue = sMonth + sDay + frmCalendar.tbSelYear.value
    window.close();
     }
   }
 }

 function fGetDaysInMonth(iMonth, iYear) {
  var dPrevDate = new Date(iYear, iMonth, 0);
  return dPrevDate.getDate();
 }

 function fBuildCal(iYear, iMonth, iDayStyle) {
  var aMonth = new Array();
  aMonth[0] = new Array(7);
  aMonth[1] = new Array(7);
  aMonth[2] = new Array(7);
  aMonth[3] = new Array(7);
  aMonth[4] = new Array(7);
  aMonth[5] = new Array(7);
  aMonth[6] = new Array(7);

  var dCalDate = new Date(iYear, iMonth-1, 1);
  var iDayOfFirst = dCalDate.getDay();
  var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);
  var iVarDate = 1;
  var i, d, w;
  if (iDayStyle == 2) {
   aMonth[0][0] = "Sunday";
   aMonth[0][1] = "Monday";
   aMonth[0][2] = "Tuesday";
   aMonth[0][3] = "Wednesday";
   aMonth[0][4] = "Thursday";
   aMonth[0][5] = "Friday";
   aMonth[0][6] = "Saturday";
  }
  else if (iDayStyle == 1) {
   aMonth[0][0] = "Sun";
   aMonth[0][1] = "Mon";
   aMonth[0][2] = "Tue";
   aMonth[0][3] = "Wed";
   aMonth[0][4] = "Thu";
   aMonth[0][5] = "Fri";
   aMonth[0][6] = "Sat";
  }
  else {
   aMonth[0][0] = "Su";
   aMonth[0][1] = "Mo";
   aMonth[0][2] = "Tu";
   aMonth[0][3] = "We";
   aMonth[0][4] = "Th";
   aMonth[0][5] = "Fr";
   aMonth[0][6] = "Sa";
  }
  for (d = iDayOfFirst; d < 7; d++) {
   aMonth[1][d] = iVarDate;
   iVarDate++;
  }
  for (w = 2; w < 7; w++) {
   for (d = 0; d < 7; d++) {
    if (iVarDate <= iDaysInMonth) {
     aMonth[w][d] = iVarDate;
     iVarDate++;
       }
     }
  }
  return aMonth;
 }

 function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) {
  var myMonth;
  myMonth = fBuildCal(iYear, iMonth, iDayStyle);
  document.write("<table border='0' width='280' cellspacing='0' bordercolorlight='#808080' bordercolordark='#808080'>")
  document.write("<tr>");
  document.write("<td align='center' style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][0] + "</td>");
  document.write("<td align='center' style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][1] + "</td>");
  document.write("<td align='center' style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][2] + "</td>");
  document.write("<td align='center' style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][3] + "</td>");
  document.write("<td align='center' style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][4] + "</td>");
  document.write("<td align='center' style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][5] + "</td>");
  document.write("<td align='center' style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][6] + "</td>");
  document.write("</tr>");
  for (w = 1; w < 7; w++) {
   document.write("<tr>")
   for (d = 0; d < 7; d++) {
    document.write("<td background='images/cal_cell_up.gif' align='left' valign='top' width='" + iCellWidth + "' height='" + iCellHeight + "' id=calCell style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' onclick='fSetSelectedDay(this)'>");
    if (!isNaN(myMonth[w][d])) {
     document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Verdana;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick='fSetSelectedDay(this)'>" + myMonth[w][d] + "</font>");
    }
    else {
     document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Verdana;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick='fSetSelectedDay(this)'> </font>");
    }
    document.write("</td>")
   }
   document.write("</tr>");
  }
  document.write("</table>")
 }

 function fUpdateCal(iYear, iMonth) {
  myMonth = fBuildCal(iYear, iMonth);
  objPrevElement.bgColor = "";
  document.all.calSelectedDate.value = "";
  objPrevCalDateText.color = ""
  for (w = 1; w < 7; w++) {
   for (d = 0; d < 7; d++) {
    if (!isNaN(myMonth[w][d])) {
     if (myMonth[w][d] == dCurDayOfMonth && iYear == dCurYear && iMonth == dCurMonth+1){
      calDateText[((7*w)+d)-7].color = "red"
      objPrevCalDateText = calDateText[((7*w)+d)-7]
     }
     calDateText[((7*w)+d)-7].innerText = myMonth[w][d];
    }
    else {
     calDateText[((7*w)+d)-7].innerText = "";
      }
    }
   }
 }

  </script>
 <script id=clientEventHandlersJS language=javascript>
<!--

function Select1_onblur() {

}

//-->
</script>
</head>
 <body topmargin="0" leftmargin="0">
  <script language="JavaScript" for="window" event="onload">

  var dCurDate = new Date();
  frmCalendar.tbSelMonth.options[dCurDate.getMonth()].selected = true;
  for (i = 0; i < frmCalendar.tbSelYear.length; i++)
   if (frmCalendar.tbSelYear.options[i].value == dCurDate.getFullYear())
    frmCalendar.tbSelYear.options[i].selected = true;

  </script>
  <form name="frmCalendar" method="post" action="">
   <input type="hidden" name="calSelectedDate">
   <table border="0" cellpadding="0" cellspacing="0" bgcolor="#c0c0c0">
    <tr>
     <td>
      <select name="tbSelMonth" onchange='fUpdateCal(frmCalendar.tbSelYear.value, frmCalendar.tbSelMonth.value)'
       style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT:normal' id="Select1" onblur="return Select1_onblur()">
       <option value="1" selected>January</option>
       <option value="2">February</option>
       <option value="3">March</option>
       <option value="4">April</option>
       <option value="5">May</option>
       <option value="6">June</option>
       <option value="7">July</option>
       <option value="8">August</option>
       <option value="9">September</option>
       <option value="10">October</option>
       <option value="11">November</option>
       <option value="12">December</option>
      </select>
      <select name="tbSelYear" onchange='fUpdateCal(frmCalendar.tbSelYear.value, frmCalendar.tbSelMonth.value)'
       style='FONT-FAMILY:Verdana;FONT-SIZE:12px;FONT-WEIGHT:normal'>
       <option value="1998">1998</option>
       <option value="1999">1999</option>
       <option value="2000">2000</option>
       <option value="2001">2001</option>
       <option value="2002">2002</option>
       <option value="2003">2003</option>
       <option value="2004">2004</option>
       <option value="2005">2005</option>
       <option value="2006">2006</option>
       <option value="2007">2007</option>
       <option value="2008">2008</option>
       <option value="2009">2009</option>
       <option value="2010">2010</option>
       <option value="2011">2011</option>
       <option value="2012" selected>2012</option>
       <option value="2013">2013</option>
       <option value="2014">2014</option>
       <option value="2015">2015</option>
      </select>
     </td>
    </tr>
    <tr>
     <td></td>
    </tr>
    <tr>
     <td>
      <script language="JavaScript">
      <!--  -->
       var dCurDate = new Date();
       fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "normal", 1);
       fUpdateCal(dCurYear, dCurMonth+1)

      </script>
     </td>
    </tr>
   </table>
  </form>
 </body>
</html>

At least, you will need to use style.color = "#0000ff" instead of color.

Document.all is not in Firefox, so use getElementById() to deal with specific items.

A good place to ask for advice on web development is to the 'Web Standards Development/evangelism' MozillaZine forum.

http://forums.mozillazine.org/viewforum.php?f=25

Aid to this forum are better informed on issues related to web development.

You must register on MozillaZine forum site to post in this forum.

DockLayout + leftMargin/topMargin

Similar Questions

Maybe you are looking for