How can I get the flex table (flex3) to align at the top in this Ui?
function doGet(e) {
var app = UiApp.createApplication();
var flex1 = app.createFlexTable().setBorderWidth(1);
var flex2 = app.createFlexTable().setBorderWidth(1).setWidget(0, 0, app.createLabel('flex2'))
.setWidget(1, 0, app.createTextArea().setHeight(400).setText('Text area in flex2'));
var flex3 = app.createFlexTable().setBorderWidth(1).setWidget(0, 0, app.createLabel('flex3'));
flex1.setWidget(0, 0, flex2).setWidget(0, 1, flex3);
app.add(flex1);
return app;
}
Was expecting...
var flex1 = app.createFlexTable().setBorderWidth(1).setStyleAttribute('vertical-align', 'top');
or
var flex1 = app.createFlexTable().setBorderWidth(1).setColumnStyleAttribute(1, 'vertical-align', 'top');
to work.
Also, using a flow panel instead of a flex for the root didn't work as expected either. That stacked the 2 flex vertically and not left to right.
Adding this line towards the bottom did the trick for me -
flex1.setStyleAttribute(0, 1, 'vertical-align', 'top');
Not sure why the global set style or set column style didn't work. However, setting it on a specific row/column seem to work. Let me know.
This might have to end up on the Issue Tracker, please check there and log an issue.
Related
Im trying to make a graph like this:
https://www.google.com/finance?q=BCBA:PAMP
I have a line chart in chart.js, now I want to add labels (like the letters A, B, C) for certain dates.
Can't find a doc/example to start from. Any idea?
If its more simple to do with another library a recommendation is more than welcome.
Thanks!
Unfortunately, there is no native support in chart.js for what you are wanting. However, you can certainly add this capability using the plugin interface. This requires that you implement your own logic to draw the canvas pixels at the locations that you want them. It might sound challenging, but its easier than it sounds.
Here is an example plugin that will add a value above specific points in the chart (based upon configuration).
Chart.plugins.register({
afterDraw: function(chartInstance) {
if (chartInstance.config.options.showDatapoints || chartInstance.config.options.showDatapoints.display) {
var showOnly = chartInstance.config.options.showDatapoints.showOnly || [];
var helpers = Chart.helpers;
var ctx = chartInstance.chart.ctx;
var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);
// render the value of the chart above the bar
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize + 5, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = fontColor;
chartInstance.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
if (showOnly.includes(dataset.data[i])) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
ctx.fillText(dataset.data[i], model.x, yPos);
}
}
});
}
}
});
It allows you to configure which points you want to annotate using this new configuration. The showOnly option contains the points that you want to label.
options: {
showDatapoints: {
display: true,
showOnly: [3, 10, 9]
},
}
Obviously, this only adds the datapoint value at the specified points, but you can just change the plugin to paint whatever you want to show instead. Simply replace ctx.fillText(dataset.data[i], model.x, yPos) with different code to render something different on the canvas.
Here is a codepen example to show you want it looks like.
Althought Gtk.table is deprecated, I am getting better results with it, instead of the recommended Gtk.Grid.
It is probably my mistake, but I couldn't find the problem.
My aim is to create a Gtk window with a notebook at the top and two buttons below. These buttons should be horizontally aligned.
My code with table, works as expected:
uses Gtk
class TestWindow : Window
init
// General characteristics of the window
title = "Gtk Containers"
default_height = 250
default_width = 250
window_position = WindowPosition.CENTER
destroy.connect(Gtk.main_quit)
// Now building the notebook
var notebook = new Gtk.Notebook()
var label1 = new Gtk.Label("Page one")
var label2 = new Gtk.Label("Page two")
var child1 = new Gtk.Label("Go to page 2 for the answer")
var child2 = new Gtk.Label("Go to page 1 for the answer")
notebook.append_page(child1, label1)
notebook.append_page(child2, label2)
// Now building the table
var table = new Table(2,2,true)
var button1 = new Gtk.Button.with_mnemonic("Button_1")
var button2 = new Button.with_mnemonic("Button_2")
// Attaching all elements into the table
table.attach_defaults(notebook, 0,2,0,1)
table.attach_defaults(button1, 0,1,1,2)
table.attach_defaults(button2, 1,2,1,2)
add(table)
init
Gtk.init (ref args)
var test = new TestWindow ()
test.show_all ()
Gtk.main ()
However, the same code with the recommended Gtk.Grid gives me the two buttons without the notebook:
uses Gtk
class TestWindow : Window
init
// General characteristics of the window
title = "Gtk Containers"
default_height = 250
default_width = 250
window_position = WindowPosition.CENTER
destroy.connect(Gtk.main_quit)
// Now building the notebook
var notebook = new Gtk.Notebook()
var label1 = new Gtk.Label("Page one")
var label2 = new Gtk.Label("Page two")
var child1 = new Gtk.Label("Go to page 2 for the answer")
var child2 = new Gtk.Label("Go to page 1 for the answer")
notebook.append_page(child1, label1)
notebook.append_page(child2, label2)
// Now building the grid
var grid = new Grid()
var button1 = new Gtk.Button.with_mnemonic("Button_1")
var button2 = new Button.with_mnemonic("Button_2")
// Attaching all elements into the grid
grid.attach(notebook, 0,2,0,1)
grid.attach(button1, 0,1,1,2)
grid.attach(button2, 1,2,1,2)
init
Gtk.init (ref args)
var test = new TestWindow ()
test.show_all ()
Gtk.main ()
How to achieve the aim using Grid instead of Tables? Not asking for code, just a pointer.
gtk_table_attach_defaults() and gtk_grid_attach() operate differently. The official documentation in C points this out.
Given
thing.attach(widget, a,b,c,d)
For GtkTable, the four numbers a, b, c, and d are the actual column and row numbers that the given edge of the widget should occupy. a is the left edge, b is the right edge, c is the top edge, and d is the bottom edge.
For GtkGrid, a is the column and b is the row that the top-left corner of the widget should occupy, c is the number of columns wide the widget is, and d is the number of rows tall the widget is.
Or in other words,
table.attach_defaults(widget, left, right, top, bottom)
is the same as
grid.attach(widget, left, top,
right - left + 1, bottom - top + 1)
Hopefully some part of that explanation clears things up.
The quick fix for your code would be
grid.attach(notebook, 0,0,2,1)
grid.attach(button1, 0,1,1,1)
grid.attach(button2, 1,1,1,1)
For Gtk.Grid:
attach(child, left, top, width, height)
Parameters:
child (Gtk.Widget) – the widget to add
left (int) – the column number to attach the left side of child to
top (int) – the row number to attach the top side of child to
width (int) – the number of columns that child will span
height (int) – the number of rows that child will span
For Gtk.Table:
attach(child, left_attach, right_attach, top_attach, bottom_attach, xoptions, yoptions, xpadding, ypadding)
Parameters:
child (Gtk.Widget) – The widget to add.
left_attach (int) – the column number to attach the left side of a child widget to.
right_attach (int) – the column number to attach the right side of a child widget to.
top_attach (int) – the row number to attach the top of a child widget to.
bottom_attach (int) – the row number to attach the bottom of a child widget to.
xoptions (Gtk.AttachOptions) – Used to specify the properties of the child widget when the table is resized.
yoptions (Gtk.AttachOptions) – The same as xoptions, except this field determines behaviour of vertical resizing.
xpadding (int) – An integer value specifying the padding on the left and right of the widget being added to the table.
ypadding (int) – The amount of padding above and below the child widget.
Note: That the columns and rows are indexed from zero.
andlabs's explanation is correct, although his conversion adding 1 to grid.attach right and bottom values didn't work well to me. As I had to convert many of these values, I've prepared a python script to ease this process, HTH:
import sys
if len(sys.argv) < 2: raise Exception('Argument not provided')
args = ''.join([str(x) for x in sys.argv[1:]]).split(',')
if len(args) != 4: raise Exception('Please provide 4 attach arguments')
left, right, top, bottom = map(lambda a: int(a), args)
print("{}, {}, {}, {}".format(left, top, right - left, bottom - top))
I'm having trouble setting the number of rows for a table to automagically fill the available estate of its encapsulating container.
According to the API, setting the visibleRowCountMode property to sap.ui.table.VisibleRowCountMode.Auto should render the table to
"[...] automatically fills the height of the surrounding container.
The visibleRowCount property is automatically changed accordingly. All
rows need the same height, otherwise the auto mode doesn't always work
as expected."
I have used the following code:
var oTable = new sap.ui.table.Table( {
rowHeight : 30,
height : "100%",
// The below property is seemingly ignored... What did I do wrong?
visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto
});
...but as you can see in this jsbin example http://jsbin.com/vazuz/1/edit it just shows the default 10 rows, and certainly doesn't "change the visibleRowCount property accordingly" :-(
Anyone has a solution?
Thanks in advance!
=====================
EDIT: Thanks to #matz3's answer below, I was ultimately able to solve this issue.
Setting the surrounding container DIV to 100%, this seems to be ignored. Setting it to a fixed height, however, worked just fine. But what I really wanted, if a user resized the window, the number of available rows needs to be adjusted accordingly. Setting it to a fixed height is therefor not an option...
However, the trick was in some extra CSS: not only the DIV needed to be set to 100% height, also both BODY and HTML (!!) needed to have a height set to 100%:
html, body {
height: 100%
}
div#uiArea {
height: 100%
}
Now, the table spans the full height of the available viewport, and resizing the window adjusts the table rather nicely. See the final working solution here: http://jsbin.com/bosusuya/3/edit
Matz3, thanks for your help!
CSS hacks is a dirty way. In my application I use to bind visibleRowCount to Array.length
For example, if you have model with this data:
[{firstName: 'John', lastName: 'Smith',
{firstName: 'David', lastName: 'Ericsson'}]
You can bind to Array property length like this:
var oTable = new sap.ui.table.Table({
visibleRowCount : '{/length}'
})
[...] automatically fills the height of the surrounding container [...]
Your surrounding container is the view, so you have to set the height of it also to a value (e.g. 100%)
this.setHeight("100%");
And your view will be set into the uiArea-div, so this one also needs a height (e.g. 500px)
<div id="uiArea" style="height:500px"></div>
With these changes it now works as expected
I'm with the same issue. I "resolve" that in this manner. This is not perfect, but it's better than UI5 resizing...
_resizeTableRow: function () {
var oTable = this.getView().byId("referenceTabId");
var sTop = $('#' + oTable.getId()).offset().top;
var sHeight = $(document).height();
//if there a row, you can take the row Height
//var iRowHeight = $(oTable.getAggregation("rows")[0].getDomRef()).height();
var iRowHeight = 40;
var iRows = Math.trunc((sHeight - sTop ) / iRowHeight);
oTable.setVisibleRowCount(iRows);
},
Other option is to put the Table in sap.ui.layout.Splitter:
I've added a nvd3 chart to my sencha touch app.
Apparently though the size of the box where the chart will be inserted is undefined at the time the chart is created. This turns out in a graph with standard dimensions (960x350 approx), way too large!
How can I modify the widht and height of the chart? The visual error I get is that the chart has a larger width, the component containing it are smaller and the chart is not completely
visible (it's like it misses a resize effect to adapt its size to the containing box).
My code, which is inside a sencha component goes like this:
nv.addGraph(Ext.bind(function(){
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.label; })
.y(function(d) { return d.value; })
.staggerLabels(true)
.tooltips(false)
.showValues(true);
var w = 550;
var h = 280;
var svg = d3.select(this.innerElement.dom).append('svg');
// setting axis property doesn't work:
var x = d3.scale.ordinal()
.domain(d3.range(10))
.rangeRoundBands([0, w], 1);
chart.xAxis
.tickFormat(d3.format(',f'));
chart.xAxis.scale(x);
chart.yAxis
.tickFormat(d3.format(',f'));
//setting svg properties doesn't work:
svg.attr("width", w)
.attr("height", h);
svg.datum(this.getChartData()).transition().duration(500).call(chart);
//if I comment this, nothing changes, what is this method for?
nv.utils.windowResize(chart.update);
In my code I am doing this:
var taskLabel = Ti.UI.createLabel({color:'#777', top:3, textAlign:'center', height:'auto', text:task.title});
Ti.API.info('Next info is: taskLabel.height');
Ti.API.info(taskLabel.height);
But, the output from this is:
[INFO] [123,883] Next info is: taskLabel.height
And nothing more, it looks like it breaks silently, but I guess it shouldn't, based on the API.
I am trying to sum some heights of the elements, but I would prefer it behaved like html postion:relative. Anyway, I'd like to read the height in float, how can I achieve that?
You need to set a fixed width when you use an auto height. For example:
var taskLabel = Ti.UI.createLabel({color:'#777', top:3, textAlign:'center', height:'auto', width: 200, text:task.title});
you are not going to get the height until it is actually rendered and added to view or window.
You cant read the height property off like that, if you didn't manually define it.
It has to be added to a view, and then displayed (assuming it doesn't auto display) before Titanium will return anything about the height.
var window = Ti.UI.createWindow();
var taskLabel = Ti.UI.createLabel({color:'#777', top:3, textAlign:'center', height:'auto', text:task.title});
window.add(taskLabel);
window.open();
Ti.API.info('Next info is: taskLabel.height');
Ti.API.info(taskLabel.height);
That should work to show the height.
This should work.
var lbl_obj = Ti.UI.createLabel( { height: 'auto', text:'Test Label', top:10 } );
var height = lbl_obj.toImage().height;
Ti.API.info(height);