How to layout fields correctly - blackberry

I've been trying to layout fields in blackberry and when I think I have it working I try another simulator and my field's are laid out differently.
If I call setPositionChild(field, 0, 100); I would expect on all phone resolutions that
the fields would be positioned at position x=0, y=100. This is not the case.
Reading the RIM doc for setPositionChild, the y parameter is - "y - Offset of the top of the field in its manager." The y offset returned by field.getTop is consistently 0, so position should be consistent across screens? Maybe a good explanation of how setpositionChild works would suffice.
Thank you.

I suspect your variable results are from extending MainScreen. That class contains separators etc that will be offsetting your 0,100 to something else.
Either try using FullScreen which is a single VerticalFieldManager
Or override sublayout on your MainScreen and set its width and height to the full size of the display.

Related

Content of Grid list to fill the height

I am placing content in the grid list component and I want the grid tile to grow accordingly to the content it has. I tried to use rowHeight="fit" as documentation states but it doesn't seems to work.
Here an example
MatGridList overall size is directly related to the rowHeight setting. The default rowHeight value is a ratio 1:1 (which means column width equals row height).
When you use a ratio, the list will have a fixed width/height ratio overall, so if the list can't grow in one direction because of window or layout restrictions, it can't grow in any direction. This is why your example looks the way it does. If you expand the width of the window, you'll see the list expand vertically as well. You can set a different rowHeight value to make the tiles taller than wide such as rowHeight="1:2" (that seems backwards to me but that's how it works).
When you use rowHeight="fit", this doesn't fit the list to the content, it fits the row heights to the list height, but as noted in the documentation, you must set a height on the list or a parent for this to work properly.
Setting a fixed value for rowHeight does what it sounds like.

Custom width of Vaadin GridLayout

I'm working with a 2x2 GridLayout in Vaadin.
gridLayout = new GridLayout(2, 2);
gridLayout.setWidth(100, Unit.PERCENTAGE);
gridLayout.setMargin(true);
gridLayout.setSpacing(true);
The cell in the upper-left corner contains a simple label aligned to the right. Upper-right cell contains a textfield aligned to the left. The second row simply contains a label below the textfield.
gridLayout.addComponent(captionLabel, 0, 0);
gridLayout.addComponent(inputField, 1, 0);
gridLayout.setComponentAlignment(captionLabel, Alignment.MIDDLE_RIGHT);
gridLayout.setComponentAlignment(inputField, Alignment.MIDDLE_LEFT);
Now I want to have both columns within the grid to have size set to 50% to have the whole layout aligned in the middle of my page - now it is slightly shifted to the left side and I can not figure out why...
Vaadin's wiki-page shows a related article, but I can not figure out how to work with it. Seems to be deprecated, because I can not access #getColumn(); - method?! https://vaadin.com/wiki/-/wiki/10674/Configuring+Grid+column+widths
For further info: The GridLayout is added as a separate component to a VerticalLayout.
You can influence the column width's with the grid.setColumnExpandRatio(1, 1); method.
If you wish to have both use 50% of the total width, just set the expand ration to the same value on both columns.
Please also note this:
A layout that contains components with percentual size must have a defined size!
If a layout has undefined size and a contained component has, say, 100% size, the component would fill the space given by the layout, while the layout would shrink to fit the space taken by the component, which is a paradox. This requirement holds for height and width separately.
Book of Vaadin
Solved it by adding a HorizontalLayout-wrapper for the left column containing the label. The right colum contains a VerticalLayout with all other components.
Label captionLabel = new Label(localized);
captionLabel.setSizeUndefined();
HorizontalLayout wrapper = new HorizontalLayout();
wrapper.setSizeFull();
wrapper.addComponent(captionLabel);
wrapper.setComponentAlignment(captionLabel, Alignment.TOP_RIGHT);
[...]
gridLayout.addComponent(wrapper, 0, 0);
gridLayout.addComponent(inputLayout, 1, 0);
gridLayout.setColumnExpandRatio(0, (float)0.5);
gridLayout.setColumnExpandRatio(1, (float)0.5);

iOS: Modify a font height, width, and spacing independently when creating PDF

In an iOS app I need to use a specific font but each character needs to be taller, thinner, and the spacing closed up to fit correctly. Is it possible to stretch/squish a font programmatically?
When you're adding text to a PDF file there are multiple ways to influence how the text is going to appear. The most generic way (and the way that might actually be sufficient for you) is to scale the text matrix:
void CGContextSetTextMatrix ( CGContextRef c, CGAffineTransform t );
As mentioned in the comment by #mkl, you can provide a matrix that will scale up in the Y direction while scaling down in the X direction. The effect will be that the letters are stretched out vertically and squished horizontally.
Normally I would expect you don't have to touch the spacing in that case, as spacing will be "squished" together just as the other characters.
Just in case that isn't sufficient, PDF actually does provide a way to change the spacing between characters too:
void CGContextSetCharacterSpacing ( CGContextRef context, CGFloat spacing );
While Apple's description talks about "additional space" to add between characters, the PDF specification and I suspect Apple's implementation as a result allows the spacing value to be both positive and negative. A negative value would have the effect of moving the characters closer together.
Seems like the best option would be to create your own custom font.
You are able to change the kerning of your font (the space between the letters) and the thickness/thinness of the font, however you probably aren't able to edit the height of the font, unless you edit the bounding box the font is inside of to scale the letters differently.
You might also want to consider using a different font...or if you're REALLY hardcore you can edit the font yourself using photoshop/illustrator.

Size classes terminology issue

When I change to wc|hAny from the bottom bar it says Base Values for all compact width layouts. And when I do wC|hR it says Final Values for all iPhones in portrait. I am confused by these Base values and Final values. What is the difference and use of these. I am having a lot of trouble with these.
Thanks in advance.
The answer is on the little green dots!
When you see various green dots lighten up, this is a base value that can be used for ANY size (be it height or width). When you see just one green dot over the shaded area, than it's a final value, as the current size class will only work for this size.
More info here: https://developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/chapters/SelectingASizeClass.html
Size Class provide a way to adapt all kinds of devices with landscape and portrait. I give
you an example : you can design iPhone's portrait view use wC|hA, and switch to landscape use wA | hC , then if you want to adapt iPad , only to choose wA | hC ,and It does not affect the iPhone's composition.
Thanks to mcatach for the reference, first of all, it's good to understand what is 'Any' - it's a mix of Compact and Regular width/height. You can see
when you select the size class Any for either dimension, green dots in tiles indicate areas where your base value design specifications take effect for this size combination. For example, for the Any Width | Any Height combination, green dots in all of the tiles show that the layout constraints and views that you specify on the Interface Builder canvas apply to every device size and orientation.
So you can play with that, you're choosing 'Any' and tiles are highlighting in 'Compact' and 'Regular', because it's combination of them.
And the answer is when you're choosing 'Any' width/height it will be Base value for both or one of them because it fits for 'Compact' and 'Regular'.
"When you select a specific size class for each dimension, a single green dot in a tile and the label Final Values indicate that your layout values apply exclusively to the shaded tiles on the grid. For example, when you select Compact Width | Regular Height, changes to layout constraints and views apply exclusively to iPhone devices in portrait orientation.
So 'Final' means "special for" or "specific" for concrete device/ group of devices and 'Base' fits for 'Any' (Compact or Regular).

Corona SDK: fill up a bar from left to right

I'm learning Corona SDK and am new to lua as well (i mainly do ruby and some javascript).
I have a bar that i want to fill up as the user does stuff. I've set it up as follows:
--outer rectangle
powerBar = display.newRect(210, 6, 24, 9)
powerBar.strokeWidth = 1
powerBar:setStrokeColor(254,203,50)
powerBar:setFillColor(0,0,0,0)
--inner rectangle which fills up
powerBarFill = display.newRect(211,7,0,7)
powerBarFill:setFillColor(234,183,30)
When the "stuff" happens, i add 1 to powerBarFill.width, which i thought would make it grow from left to right. But, it's actually growing out from the centre, ie its x is in the centre and the width extends either side from that.
Whats the best way to keep the left side static and grow the right side? Can i set it so that it's x position is actually on the left hand side rather than in the middle? Seems like that might do it.
cheers in advance
I've run into this problem as well when creating a progress bar. The problem is with the rect's reference point. The default reference point is in the center of an object, as you've noticed. You can use object:setReferencePoint() to change it. I believe you want to use the display.BottomLeftReferencePoint value:
powerBar:setReferencePoint(display.BottomLeftReferencePoint)
Keep in mind that you have to set this value before you set your x,y values. So in your case you'll need to set the reference point after creating the rectangle, and then assign values to x,y again (even though you already did this in the newRect constructor):
powerBar = display.newRect(210, 6, 24, 9)
powerBar:setReferencePoint(display.BottomLeftReferencePoint)
powerBar.x, powerBar.y = 210, 6
If it's width is from the X position on both sides:
1) It should start at:
Centre - (Width when it's full / 2)
2) Every frame, add:
incrs = 1 --Amount to increase by
width = width + incrs
x = x + incrs / 2

Resources