I am new to Dart and Rikulo.
class NameView extends Section
{
View parentVu;
// the inputs
DropDownList titleDdl, suffixDdl;
TextBox firstNameTBox, middleNameTBox, lastNameTBox;
// the labels
TextView titleLbl, firstNameLbl, middleNameLbl, lastNameLbl, suffixLbl;
List<String> titles = [ 'Dr', 'Hon', 'Miss', 'Mr', 'Mrs', 'Prof', 'Sir' ];
List<String> suffixes = ['I', 'II', 'III', 'IV', 'Junior', 'Senior'];
NameView()
{
parentVu = new View()
..style.background = 'cyan'
..addToDocument();
titleLbl = new TextView( 'Title' );
parentVu.addChild( titleLbl );
titleDdl = new DropDownList( model : new DefaultListModel( titles ) )
..profile.anchorView = titleLbl
..profile.location = 'east center';
parentVu.addChild( titleDdl );
firstNameLbl = new TextView( 'First' )
..profile.anchorView = titleDdl
..profile.location = 'east center';
parentVu.addChild(firstNameLbl );
firstNameTBox = new TextBox( null, 'text' )
..profile.anchorView = firstNameLbl
..profile.location = 'east center';
//..profile.width = 'flex';
parentVu.addChild( firstNameTBox );
}
The program renders. However, it does not uses the entire width of the browser (FireFox).
I have tried for the TextBoxes
profile.width = 'flex'
but it does not work.
Any help is appreciated.
Firefox? Did you test it with Dartium? Notice that you have to compile it to JS before you can test it with browsers other than Dartium.
BTW, from your implementation, NameView seems not related to parentVu at all. If it is just a controller, it needs not to extend from Section (i.e., it doesn't have to be a view).
If a view is anchored to another, both location and size will depend on the view it anchors. In your case, if specifying flex to TextBox, its width will be the same as FirstNameLb1. It is why it is so small.
You can listen to the layout event such as:
firstNameTBox.on.layout.listen((_) {
firstNameTBox.width = parentVu.width;
});
Note: You need to do some calculation to get the right width.
See also Layout Overview
Related
I am trying to make the title of a screen editable.
MediumTopAppBar(
title = {
val name: String? = "Some Title"
var input by remember { mutableStateOf(name ?: "") }
when (state.isEditingTitle) {
true ->
TextField(
value = input,
onValueChange = { input = it },
keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done),
keyboardActions = KeyboardActions(onDone = {
callbacks.onEditTitleChange(editTitle = false, updatedTitle = input)
})
)
false -> {
Text(
modifier = Modifier.clickable { callbacks.onEditTitleChange(true, null) },
text = name ?: "(No Title)"
)
}
}
},
... more app bar parameters
}
When I click on the title Text(...) and the view gets recomposed the AppBar shows two TextFields
How do I ignore the top one and only show the one in the bottom, like the Text() is only shown in the bottom?
(Fyi: the two TextInputs have their own remembered state and calls the callback with their own respective value)
Bonus question: How do I handle the remembered state "input" so that it resets every time the onDone keyboard action is triggered? Instead of val name: String? = "Some Title" it would of course be something in the line of val name: String? = state.stateModel.title
I found out why it does this, but I have no idea how to solve it (except for just making my own views and placing it close by)
It's easy to see when looking at the function for the MediumTopBar
// androidx.compose.material3.AppBar.kt
#ExperimentalMaterial3Api
#Composable
fun MediumTopAppBar(
title: #Composable () -> Unit,
modifier: Modifier = Modifier,
navigationIcon: #Composable () -> Unit = {},
actions: #Composable RowScope.() -> Unit = {},
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
colors: TopAppBarColors = TopAppBarDefaults.mediumTopAppBarColors(),
scrollBehavior: TopAppBarScrollBehavior? = null
) {
TwoRowsTopAppBar(
modifier = modifier,
title = title,
titleTextStyle = MaterialTheme.typography.fromToken(TopAppBarMediumTokens.HeadlineFont),
smallTitleTextStyle = MaterialTheme.typography.fromToken(TopAppBarSmallTokens.HeadlineFont),
titleBottomPadding = MediumTitleBottomPadding,
smallTitle = title, // <- this thing, right here
navigationIcon = navigationIcon,
actions = actions,
colors = colors,
windowInsets = windowInsets,
maxHeight = TopAppBarMediumTokens.ContainerHeight,
pinnedHeight = TopAppBarSmallTokens.ContainerHeight,
scrollBehavior = scrollBehavior
)
}
There's some internal state shenanigans going on, probably checking for a Text being shown in the 2nd TopAppBarLayout (more digging required to find that), but not for any other view.
TwoRowsTopAppBar and TopAppBarLayout are not public, and can't be used directly.
This is explains why, but it would be interesting to see how to solve it (still using Medium or Large -TopAppBar)
it is stupid thing devs overlooked and should be warned against, at least. The answer is do not give default colors to your Typography TextStyles.
private val BodySmall = TextStyle(
fontSize = 10.sp,
lineHeight = 12.sp,
fontWeight = FontWeight.SemiBold,
fontFamily = Manrope,
color = Color.Black // REMOVE THIS
)
val OurTypography = Typography(
...
bodySmall = BodySmall
)
I'm trying to access the properties of the following widget:
local cpu_widget = wibox.widget{
{
max_value = 100,
paddings = 1,
border_width = 2,
widget = wibox.widget.progressbar,
},
{
font = beautiful.font_type .. "8",
widget = wibox.widget.textbox,
},
forced_height = 100,
forced_width = 20,
direction = 'east',
layout = wibox.container.rotate,
}
I've tried through the conventional way, using cpu_widget[1].value or cpu_widget[2].text, but that didn't work.
Any thoughts on how I could do that?
See the "Accessing Widgets" on https://awesomewm.org/doc/api/documentation/03-declarative-layout.md.html (I can't seem to link to this section directly)
Basically: You can add id = "bar" and id = "text" to your widgets and use these identifiers to retrieve the widgets again.
In case Elv13 ever sees this answer: You did great work on the docs!
I am using pdfMake to generate table reports. Some of the reports are very wide and dont fit on a standard page width, even in landscape mode. Currently, pdfMake is cutting off the table content when it overflows past the page margin.
I would like to page break the table when it is too wide, much like when the rows overflow to the next page.
Is this possible using pdfMake?
Can using pageBreakBefore callback function help for this?
Thank you
Yes, this is possible with pdfMake, even though not currently a feature.
To achieve this, you can just break overflowing columns into another table. We can put all the tables in an array, then just set them in the docDefinition as follows.
Any common attributes you want in the tables can be defined in the Template constructor.
for (var i = 0; i < tables.length;i++) {
docDefinition.content[i] = new Template();
docDefinition.content[i].table.body = tables[i];
docDefinition.content[i].table.widths = widths[i];
if (i > 0) {
docDefinition.content[i].pageBreak = 'before';
}
}
function Template(){
this.table = {
dontBreakRows: true
};
//zebra stripes layout
this.layout = {
fillColor: function (row, node, col) {
return (row % 2 === 0) ? '#CCCCCC' : null;
}
}
}
How do we determine if a column will overflow? We have two options:
If you are using bootstrap datatables, you can use the "width" attribute in the html.
pdfmake calculates the actual width, but you may have to dig around in pdfmake.js.
Then, just loop through, adding widths until you exceed your limit (my limit was for 8pt font). You can do this for THs then save those column splits and use those for the TDs.
If the final page is just barely overflowing, we don't want the final page to have just one column, we want each page to have roughly the same width. We calculate the number of pages needed, then find the desired break point from there. To link the pages together more easily, you can add a row number column at the beginning of each table.
var colSplits = [];
var tables = new Array();
function parseTHs(colSplits, tables) {
var colSum = 0;
var pageSize = 1120-7*rows.toString().length;
var paddingDiff = 11.9;
var columns = 0;
var prevSum;
var i = 0;
var width = $(".dataTables_scrollHeadInner > table").width();
var pages = Math.ceil(width/pageSize);
console.log("pages: "+pages);
var desiredBreakPoint = width/pages;
console.log("spread: "+desiredBreakPoint);
var limit = pageSize;
var row = ['#'];
var percent = '%';
widths.push(percent);
$(".dataTables_scrollHeadInner > table > thead > tr:first > th").each(function() {
prevSum = colSum;
colSum += $(this).outerWidth()-paddingDiff;
//if adding column brings us farther away from the desiredBreakPoint than before, kick it to next table
if (colSum > limit || desiredBreakPoint-colSum > desiredBreakPoint-prevSum) {
tables[i] = [row];
row = ['#'];
widths.push(percent);
colSplits.push(columns);
i++;
desiredBreakPoint += width/pages;
limit = prevSum+pageSize;
}
row.push({text: $(this).text(), style:'header'});
widths.push(percent);
columns++;
});
//add the final set of columns
tables[i] = [row];
}
function parseTDs(colSplits, tables) {
var currentRow = 0;
$("#"+tableId+" > tbody > tr").each(function() {
var i = 0;
var row = [currentRow+1];
var currentColumn = 0;
var split = colSplits[i];
$(this).find("td").each(function() {
if (currentColumn === split) {
tables[i].push(row);
row = [currentRow+1];
i++;
split = colSplits[i];
}
row.push({text: $(this).text()});
currentColumn++;
});
//add the final set of columns
tables[i].push(row);
currentRow++;
});
}
parseTHs(colSplits, tables);
parseTDs(colSplits, tables);
Note: If you want the columns to fill all the available page, there's a good implementation for that at this link.
I just added '%' for the widths and added that code to pdfmake.js.
Hope this helps!
Just add dontBreakRows property in your table object like this
table: {
dontBreakRows: true,
widths: [30,75,48,48,48,48,48,115],
body: []
}
Also, you can make the page wider and change the page orientation as landscape.
pageSize: "A2",
pageOrientation: "landscape",
Basic table, how they should be. But me need do it by function, how i can do that?
local mainMenu = {
caption = "Main Window",
description = "test window",
buttons = {
{ id = 1, value = "Info" },
{ id = 2, value = "Return" },
{ id = 3, value = "Ok" },
{ id = 4, value = "Cancel" }
},
popup = true
}
Table should be based on outside params, and code one table for each variable of options - not better way. I make a function for that, they should create basic options like caption or description and pop up, and insert values to buttons table (if option enabled - add button). But here the problem, they wont insert to tmp table, buttons table and their values for next options.
function createMenu()
tmp = {}
--buttons insert
if(config.info) then
table.insert(tmp, {buttons = {id = 1, value = "Info"}});
elseif(config.return) then
table.insert(tmp, {buttons = {id = 2, value = "Return"}});
end
--table main
table.insert(tmp, {
caption = "Main Window",
description = "test window",
popup = true
})
return tmp
end
How i can fixing them?
From looking at your createMenu function, two obvious problems stick out:
assigning to global tmp a new table every time createMenu is
called.
using the return keyword as a key in config.
One can be a problem if you use tmp somewhere else in your code outside the createMenu function. The obvious fix is to change it to:
local tmp = {}
For the second problem, you can use a lua keyword as a table key if you really want but you won't be able to use the . dot syntax to access this since Lua will parse this the wrong way. Instead, you need to change:
config.return
to
config["return"].
Edit: After reading your comment and checking the example table, it looks like only the button table is accessed by numerical index. In that case, you'll want to use table.insert only on button. If you want to create the table to have associative keys then you'll have to do something like this:
function createMenu()
local tmp =
{
--table main
caption = "Main Window",
description = "test window",
popup = true,
--button table
buttons = {}
}
--buttons insert
if config.info then
table.insert(tmp.buttons, {id = 1, value = "Info"});
elseif config['return'] then
table.insert(tmp.buttons, {id = 2, value = "Return"});
end
return tmp
end
This will produce the mainMenu table you're describing in your question.
I am new to the MVC Framework. Im working on a dashboard project in the MVC framework. The project consists of a bunch of charting control in a user controls contained in a master page. I did a test on a charting control on a aspx page..and it works...but when I moved the code to a ascx (usercontrol) the chart doesnt render. Any ideas?!?!?!...I'm stuck. Thanks in advance
Jeff
Code that is in in the .aspx
<%
System.Web.UI.DataVisualization.Charting.Chart Chart1 = new System.Web.UI.DataVisualization.Charting.Chart();
Chart1.Width = 450;
Chart1.Height = 296;
Chart1.RenderType = RenderType.ImageTag;
Chart1.ImageLocation = "..\\..\\TempImages\\ChartPic_#SEQ(200,30)";
Chart1.Palette = ChartColorPalette.BrightPastel;
Title t = new Title("Program Pipeline", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));
Chart1.Titles.Add(t);
Chart1.ChartAreas.Add("Prog 1");
// create a couple of series
Chart1.Series.Add("Backlog");
Chart1.Series.Add("Constructed");
Chart1.Series.Add("Billed");
Chart1.Series.Add("BudgetUsed");
Chart1.Series.Add("Total");
Chart1.Series["Backlog"].ChartType = SeriesChartType.StackedBar100;
Chart1.Series["Constructed"].ChartType = SeriesChartType.StackedBar100;
Chart1.Series["Billed"].ChartType = SeriesChartType.StackedBar100;
Chart1.Series["Total"].ChartType = SeriesChartType.StackedBar100;
Chart1.Series["BudgetUsed"].ChartType = SeriesChartType.StackedBar100;
Chart1.Series["Backlog"]["DrawingStyle"] = "Cylinder";
Chart1.Series["Constructed"]["DrawingStyle"] = "Cylinder";
Chart1.Series["Billed"]["DrawingStyle"] = "Cylinder";
Chart1.Series["BudgetUsed"]["DrawingStyle"] = "Cylinder";
Chart1.Series["Total"]["DrawingStyle"] = "Cylinder";
// Bar Size
Chart1.Series["Backlog"]["PointWidth"] = "0.6";
Chart1.Series["Constructed"]["PointWidth"] = "0.6";
Chart1.Series["Billed"]["PointWidth"] = "0.6";
Chart1.Series["BudgetUsed"]["PointWidth"] = "0.6";
Chart1.Series["Total"]["PointWidth"] = "0.6";
int _total = 0;
int _newTotalAmt = 100 - _total;
foreach (MvcApplication1.Models.Amount obj in Model.GetTotalAmt("plm1"))
{
_total += obj.TotalAmount;
Chart1.Series[obj.PLMType].Points.AddY(obj.TotalAmount);
}
Chart1.Series["BudgetUsed"].Points.AddY(0);
Chart1.Series["Total"].Points.AddY(_newTotalAmt);
_total = 0;
_newTotalAmt = 100 - _total;
foreach (MvcApplication1.Models.Amount obj in Model.GetTotalAmtForPLM2("plm2"))
{
_total += obj.TotalAmount;
Chart1.Series[obj.PLMType].Points.AddY(obj.TotalAmount);
}
Chart1.Series["BudgetUsed"].Points.AddY(0);
Chart1.Series["Total"].Points.AddY(_newTotalAmt);
_total = 0;
_newTotalAmt = 100 - _total;
foreach (MvcApplication1.Models.Amount obj in Model.GetTotalAmt("plm3"))
{
_total += obj.TotalAmount;
Chart1.Series[obj.PLMType].Points.AddY(obj.TotalAmount);
}
Chart1.Series["BudgetUsed"].Points.AddY(0);
Chart1.Series["Total"].Points.AddY(_newTotalAmt);
// MvcApplication1.Models.TotalPOAmount oTotal = Model.GetOverAllBudget();
// add points to series 3
Chart1.Series["Billed"].Points.AddY(0);
Chart1.Series["Constructed"].Points.AddY(0);
Chart1.Series["Backlog"].Points.AddY(0);
Chart1.Series["BudgetUsed"].Points.AddY(39);
Chart1.Series["Total"].Points.AddY(100);
Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
Chart1.BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);
Chart1.BorderlineDashStyle = ChartDashStyle.Solid;
Chart1.BorderWidth = 2;
Chart1.Legends.Add("Legend");
// show legend based on check box value
// Chart1.Legends["Legend1"].Enabled = ShowLegend.Checked;
// Render chart control
Chart1.Page = this;
HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output);
Chart1.RenderControl(writer);
//IList<SelectListItem> list = new List<SelectListItem>();
//SelectListItem sli = new SelectListItem();
//sli.Text = "test1";
//sli.Value = "1";
//list.Add(sli);
//ViewData["Test"] = list;
%>
I've had exactly the same issue. My problem was to do with the paths to the image file. The chart control was getting it wrong when placed on a usercontrol. If I changed the chart to use Imagestoragemode of HttpHandler then it worked as intended.
unfortunatly this stopped me being able to unit test my views. In the end I put the chart control on an aspx page & then used jQuery to load it when needed. (Luckily my dashboard page used javascript to load the contents of the portlets)
I've just been trying to get round what seems to be the same problem. When I moved the code (similar to yours above) to a UserControl the System.Web.UI.DataVisualization namespace wasn't recognised and I received the error:
The type or namespace name
'DataVisualization' does not exist in
the namespace 'System.Web.UI' (are you
missing an assembly reference?)
The namespace only seemed to be recognised when the Chart code lay within an asp control (in the aspx page it was within an <asp:Content> control). So I put the Chart code within an <asp:Panel> control and it worked.