I've been trying to embed a youtube video within a codename one application. When I run the simulator for both Android and iOS it looks fine, but when I actually run the application on my Galaxy S7, nothing shows. I've tried using both BrowserComponent and WebBrowser and neither work. My code is below:
Form hi = new Form("Hi World", BoxLayout.y());
Display display = Display.getInstance();
BrowserComponent browser = new BrowserComponent();
//WebBrowser browser = new WebBrowser();
String videoUrl = "https://www.youtube.com/embed/r6VO3zaBJGY";
int videoWidth = (int) ((double) display.getDisplayWidth());
int videoHeight = (int) ((double) videoWidth*0.5625);
String integrationCode= "<iframe src=\"" +videoUrl+"\" frameborder=\"0\" width=\"" + videoWidth + "\" height=\"" + videoHeight + "\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>";
browser.setPage(integrationCode, null);
browser.getAllStyles().setPadding(0, 0, 0, 0);
browser.getAllStyles().setMargin(0, 0, 0, 0);
Container browserContainer = new Container(new BorderLayout(CENTER_BEHAVIOR_CENTER));
browserContainer.add(CENTER, browser);
hi.add(browserContainer);
hi.show();
There are two mistakes in the code: BoxLayout and CENTER_BEHAVIOR_CENTER.
The reason this won't work has to do with the way layouts work. Layout managers use the preferred size to give components the right size. BrowserComponent doesn't have a proper preferred size as the rendering of HTML is asynchronous and it's pretty flexible to begin with. In this case you used two layout managers that respect preferred size. They get a size that amounts to zero and place the browser component appropriately...
BoxLayout.Y_AXIS needs the preferred height and CENTER_BEHAVIOR_CENTER needs the preferred size to position the component in the center.
The typical workaround is to use a regular BorderLayout which defaults to the scaled behavior. This stretches the center component to take up available space. Notice you need to set it on the Form itself as it has a hardcoded size of the entire screen. The center location ignores the preferred size and gives the component the full size.
It also solves another problem. Form is scrollable by default on the Y axis. Scrollability for Codename One components and native widgets (e.g. web) can collide so by using the border layout you implicitly disable scrolling which in this case might provide superior UX.
Note that you can get the code above to work by overriding calcPreferredSize() in BrowserComponent and returning the size you want for the component. I don't think this will result in a good UX because of scrollability issues.
Related
In my MVC application when it comes to printing of reports i have few options
RazorPDF - advanatage of handling design from cshtml itself & can pass values from controller as model
iTextSharp - advanatage of handling design from cshtml itself & can pass values from controller as model
pdfSharp - No advantage of handling design from cshtml page. Have to do all coding from .cs file & modifications is very difficult. BUt have a great control over the layout of generated report
So Can any one suggest a method with both options
Can do the PDF design from cshtml itself.
Can specify width and height of the PDF page
Since the report is not always to print on laser printers. Need to giv support for dotmatrix print as well and in that case i have to mention width & height of page .Also there is a possibility toprint on letter heads so i have to mention widtha nd height of empty area again
Or any one can suggest a way to mention to width and height of PDF page with RazorPDF and iTextSharp approach
Your question is about many different tools, but this is the answer in case you are using iTextSharp.
When you create a PDF from scratch using iTextSharp, you always need a Document and a PdfWriter class. The Document class is to be used for the high-level functionality; the PdfWriter class for the low-level operations.
The page size is defined at the Document level. You can create a new Document object like this:
Document document = new Document();
As we didn't pass any parameters to the constructor, iTextSharp will create a PDF using the default page size (A4) and margins of half an inch.
This is the equivalent of:
Document document = new Document(PageSize.A4, 36, 36, 36, 36);
As you can see: I use 36 as value for half an inch, because 1 inch = 72 user units in PDF.
If you want to define another page size, you can do so by using one of the other values available in the PageSize class, for instance:
Document document = new Document(PageSize.LETTER);
PageSize.A4 and PageSize.LETTER are instances of the Rectangle class, so if you need a page size that isn't defined in PageSize, then you can create your own rectangle. For instance:
Rectangle envelope = new Rectangle(432, 252);
Document document = new Document(envelope, 0, 0, 0, 0);
Where do these values come from? Let's do the Math:
6 inch x 72 points = 432 points (the width)
3.5 inch x 252 points = 252 points (the height)
This is how you define pages with a custom size.
I have a component that's laid out using polymer-grid-layout which contains a canvas as the main part of the content. I want the canvas to auto resize based on the size that polymer-grid-layout allocates.
I can't put width:100%; height:100% on the canvas as that just stretches the canvas making it distorted and grainy. Instead I wrapped a div around the canvas and manually resize the canvas based on the div size in code.
Code looks somewhat like (note I've left out the boiler plate like etc)
<polymer-grid-layout xnodes="{{xnodes}}"
layout="[[1, 2, 3],
[4, 4, 4]]">
</polymer-grid-layout>
<gauge-slider id='front' label='Front'></gauge-slider>
<panel flex></panel>
<gauge-slider id='back' label='Back'></gauge-slider>
<canvas-view id="canvasView" canvasModel="{{canvasModel}}" flex></canvas-view>
where canvas-view contains
<panel id="canvasContainer" flex>
<canvas id="canvas"></canvas>
</panel>
In the canvas-view dart code I set the canvas width like so
void _resize() {
canvas.width = canvasContainer.clientWidth;
canvas.height = canvasContainer.clientHeight;
_redraw();
}
which I call from
#override
void ready() {
canvas = $['canvas'];
canvasContainer = $['canvasContainer'];
// doesn't seem to be a resize on anything other than window!?!
window.onResize.listen((_) => _resize());
}
and from
#published void set canvasModel(CanvasModel m) {
_canvasModel = m;
// TODO: need to build in a delay as otherwise the containing div has not been sized properly yet
new Timer(new Duration(milliseconds: 50), _resize);
}
The problem is in the above code. If I call _resize directly here then the container div doesn't yet know it's proper height. After experimenting I found that 50 millisecs allows the container to be sized correctly by the grid layout on my machine but that seems really dodgy and likely to be problematic on different devices.
How can I avoid that delay? Is there some event I can listen to that tells me when the grid layout has finished sizing components?
Also was there a simpler way to have achieved the canvas resizing in the first place?
Lastly, I had to style the canvasContainer panel to have 0 margins, border etc. Is there a way to have fetched the inner dimensions of that container?
Is there some event I can listen to that tells me when the grid layout has finished sizing components?
The grid layout sends a polymer-grid-layout event after it has finished sizing components.
Also was there a simpler way to have achieved the canvas resizing in the first place?
I don't think so, but maybe a Canvas expert out there will chime in with better advice.
Lastly, I had to style the canvasContainer panel to have 0 margins, border etc. Is there a way to have fetched the inner dimensions of that container?
clientWidth/Height ignores the margins and border, but does count padding. There are other ways of measuring boxes, but it gets complicated quickly (mostly because of x-browser concerns). This can be a difficult topic, here is a starter link: https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements
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.
I am trying to accomplish something and I am not sure if it is completely possible.
I have a Telerik MVC Grid using ASP.NET MVC.
The default paging size for the grid is 10, however I want to be able to adjust the size the page (the number of rows) based on the size of the user's resolution. Is this possible?
Thanks,
Paul
It is definitely possible.
I created a solution that accomplishes the same thing - however you will have to tinker with it to get the proper height of your grid on it's own (excluding any menus/headers/footers etc.)
These steps should get you there:
Firstly - you will need to add an "onLoad" event to your MVC Grid:
.ClientEvents(events =>events.OnLoad("onLoad"))
Next - Create a Javascript event to handle the "onLoad" in your $(document).ready():
function onLoad(e)
{
//Bread and Butter will go here.
}
Finally - the last step will be to calculate the space that is not taken up by the grid (Firebug can be helpful) and tinker with it until your "formula" works out in most browsers:
function onLoad(e)
{
//Gets the height of the Window. ($(window).height())
//Subracts the height of any menus/headers/footers (in this case 275)
//Then divide by our "magic number" which you will need to tinker with
//to determine how the grid looks in different browsers. (in this case 28)
var height = Math.floor(($(window).height()-275)/28);
var grid = $("#YourGrid").data("tGrid");
grid.pageSize = height;
}
Formula :
$(window).height() - [Occupied Space] / [Magic Number]
[Occupied Space] - Total CSS Height of all objects above the Grid.
[Magic Number] - You will have to play with this one and try it out on
different browsers until you get the expected results.
That should automatically adjust your your number of rows based on your window height.The only tricky part is figuring out your own "formula" using the amount of occupied space and then picking a magic number to divide by.
Hope this helps!
It's a TMemo, not that that should make any difference.
Googling suggests that I can use Canvas->TextWidth() but those are Delphi examples and BCB doesn't seem to offer this property.
I really want something analogous to memo->Font->Height for width.
I realize that not all fonts are fixed width, so a good estimate will do.
All that I need is to take the width of a TMemo in pixels and make a reasonable guess at how many characters of the current font it will hold.
Of course, if I really want to be lazy, I can just google for the average height/width ratio, since height is known. Remember, an approximation is good enough for me if it is tricky to get exact.
http://www.plainlanguagenetwork.org/type/utbo211.htm says, " A width to height ratio of 3:5 (0.6) is recommended for most applications"
Actually your google search is not entirely off. You do need access to a canvas object, or at least a handle to a DC object. In general when searching for help concerning VCL classes it often pays to search for delphi examples since these are more common.
Anyway to calculate the size of a string you could have a look at the TextExtent function, it is a function for the TCanvas class. Simply pass the character which width you want to test, and the return value will be a TSize construct. However there is also a TextWidth function, as well as a TextHeight function. You can use these as well. Actually these call the TextExtent internally.
You have to note one thing though, the functions use the current font of the TCanvas object, more specifically the font bound to the DC the canvas uses. So assign the font you wish to test with first, and then pass the character.
I have some old code that calculates the width of a string like this:
// This canvas could be the form canvas: canvas = Form1->Canvas or the
// memo canvas which will probably be what you want.
canvas->Font->Assign(fontToTest);
int textwidth = TextWidth(textToTest);
If you want more control of what to do, you can also do this using the Windows API, this is essentially what the VCL does for you, in that case the following example would look like this:
// This canvas could be the form canvas: canvas = Form1->Canvas
canvas->Font->Assign(fontToTest);
// The initial size, this is really important if we use wordwrapping. This is
// the text area of the memo control.
TRect rect = ClientRect;
// This is the font format we wish to calculate using, in this example our text
// will be left aligned, at the top of the rectangle.
fontformat = DT_LEFT | DT_TOP;
// Here we calculate the size of the text, both width and height are calculated
// and stored in the rect variable. Also note that we add the DT_CALCRECT to the
// fontformat variable, this makes DrawTextEx calculate the size of the text,
// without drawing it.
::DrawTextEx(canvas->handle,
textToTest.c_str(),
textToTest.Length(),
&rect,
fontformat | DT_CALCRECT,
NULL);
// The width is:
int width = rect.Width();
The fontformat is a parameter that specifies different options for how to align and layout the text, if you plan on drawing text it will be a good idea to check out the different possibilities it offers: DrawTextEx Function [1]
EDIT: Reading through your question again, it struck me that the function you might be searching for is: GetTextExtentExPoint Windows API documentation states the following about this function:
The GetTextExtentExPoint function
retrieves the number of characters in
a specified string that will fit
within a specified space and fills an
array with the text extent for each of
those characters. (A text extent is
the distance between the beginning of
the space and a character that will
fit in the space.) This information is
useful for word-wrapping calculations.
You can find more information about the GetTextExtentExPoint function here: GetTextExtentExPoint Function [2]
[1] http://msdn.microsoft.com/en-us/library/dd162499%28VS.85%29.aspx
[2] http://msdn.microsoft.com/en-us/library/dd144935%28VS.85%29.aspx
What you could do, if you have access to Win32 API functions, is create a RichEdit Window the same size as your TMemo window, place the text in the RichEdit window, send the EM_FORMATRANGE message to the window and from the result determine how many characters it will hold. Of course this method will work with multiple lines etc...