I wanted to use the Spark Grid but at the same time I realized there are no Spark equivalents for certain components like the <GridItem>.
So, I mixed both Spark and Halo components in the program but when I ran it, I got the error:
"TypeError: Error #1034: Type Coercion failed: cannot convert spark.components::Grid#239b40a1 to mx.containers.Grid."
The program:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:Grid>
<mx:GridRow id="row1">
<mx:GridItem>
<s:Label text="Description:" paddingTop="5"/>
</mx:GridItem>
<mx:GridItem>
<s:TextArea id="descTI" width="300" height="50"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="row2">
<mx:GridItem>
<s:Label text="Name:" paddingTop="5"/>
</mx:GridItem>
<mx:GridItem>
<s:TextInput id="nameTI" width="300"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="row3">
<mx:GridItem>
<s:Label text="Target:" paddingTop="5"/>
</mx:GridItem>
<mx:GridItem>
<s:TextInput id="targetTI" width="300"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="row5">
<mx:GridItem>
<s:Label text="Operand:" paddingTop="5" />
</mx:GridItem>
<mx:GridItem>
<mx:DataGrid id="attrDG">
<mx:columns>
<mx:DataGridColumn dataField="variable" width="150"/>
<mx:DataGridColumn dataField="level"
width="150"/>
</mx:columns>
</mx:DataGrid>
</mx:GridItem>
<mx:GridItem paddingLeft="3" colSpan="2">
<mx:DataGrid id="attrDG0">
<mx:columns>
<mx:DataGridColumn dataField="variable" width="150"/>
<mx:DataGridColumn dataField="level"
width="150"/>
</mx:columns>
</mx:DataGrid>
</mx:GridItem>
</mx:GridRow>
</s:Grid>
</s:Application>
The spark.components.Grid is not meant to replace the mx.containers.Grid. Rather, it's immediate use is as a component of the spark.components.DataGrid component, which is meant to render items in a data provider which implements an IList. See the language reference documentation on the Spark Grid for more details.
You should continue to use the mx:Grid. You can even find examples of it being used in the official Using Flex 4.5 reference: MX Grid layout container.
I will offer the observation, however, that you might also want to look at the s:Form container. The manner in which you are laying out the first three rows seems to me more suited to the use case the Form was designed for.
Finally, the s:DataGrid is intended to replace the mx:DataGrid. So you should make sure to use that.
Related
I'd like to output as a single word attribute in html. The source is an AEM dialog that's structured as a radio group.
<items jcr:primaryType="nt:unstructured">
<colorpref jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
fieldLabel="Choose Color Pref"
name="./scheme" vertical="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<primary jcr:primaryType="nt:unstructured"
text="Primary"
value="primary"/>
<secondary jcr:primaryType="nt:unstructured"
text="Secondary"
value="secondary"/>
<parentcolor jcr:primaryType="nt:unstructured"
text="Use Parent Color"
value="useparentcolor"/>
</items>
</colorpref>
</items>
And then from the dialog output the value of the selected value as a single word
<element selectedoption ...
instead of
<element selectedoption='true' ...
The code I'm using to write the attribute is
"${button.scheme # context='html'}"
but that isn't creating any text. I've replaced the html in context phrase with attribute and text but neither of those work.
I'm using javascript to build the model that's referenced by button in the code.
So how do I output a single word attribute from the dialog in AEM?
The solution is to use the data-sly-attribute.
data-sly-attribute.danger="${ insert test here }"
which will output just the single word danger in the element.
Given the following XML element structure:
<a>
<b>
<c test_id="1"/>
<d test_ref="1"/>
</b>
<e>
<c test_id="12"/>
</e>
<a>
and the following XSD rules:
-) in Element a:
<xsd:key name="key_A">
<xsd:selector xpath=".//c"/>
<xsd:field xpath="#test_id"/>
</xsd:key>
<xsd:keyref name="keyref_A" refer="key_A"">
<xsd:selector xpath=".//d"/>
<xsd:field xpath="test_id"/>
</xsd:keyref>
-) in Element b:
<xsd:key name="key_B">
<xsd:selector xpath=".//c"/>
<xsd:field xpath="#test_id"/>
</xsd:key>
<xsd:keyref name="keyref_B" refer="key_B"">
<xsd:selector xpath=".//d"/>
<xsd:field xpath="test_id"/>
</xsd:keyref>
When I set test_ref to "12" I get a validation error.
When I set test_ref to "1" I get no error.
How are multiple keys/keyrefs interpreted? Does every keyref needs to be valid? Do I get not error when I set it to "1" because it satisfies both keys?
There are already questions regarding this topic but none explains how it is evaluated by a parser.
I have tried using usefieldsizegroup="false" and then setting width and size values , however the column width are not getting adjusted.
I think that flag tells maximo to not use the default field sizes based on field types (text box, table column, text editor, etc...). At least that's how I took their documentation:
http://www-01.ibm.com/support/docview.wss?uid=swg21388710
I was able to resize table column fields in Maximo (didn't try Anywhere-Maximo) by using a 'width' flag in the XML like so:
<tablecol dataattribute="CHANGEDATE" id="11111111111" label="Change Date" width="120"/>
You can edit the layout which is associated with the listItemTemplate element of your list. For example we want to change the width of the text field on position item3:
<listItemTemplate id="xxxxx" layout="WorkListItem">
<listtext layoutInsertAt="item3"
In this example You can find this layout template at /apps//artifact/layouts/templates/small/WorkListItem.xml
When you open this file you will see the definition of your list layout. Search the "item3" place in the layout. By editing the colspan attribute you can manipulate tablecol width:
<?xml version="1.0" encoding="UTF-8"?>
<layout id="WorkListItem" width="100">
<row id="row_0">
<column colspan="10" columnid="item3" id="item3_column"/>
<column colspan="2" columnid="button1" halign="right" id="button1_column" rowspan="3"/>
</row>
<row id="row_1">
<column colspan="8" columnid="item1" id="item1_column"/>
<column colspan="2" columnid="item2" id="item2_column"/>
</row>
<row id="row_2">
<column colspan="5" columnid="item4" id="item4_column"/>
<column colspan="5" columnid="item5" id="item5_column"/>
</row>
</layout>
I am looking for a way to say set a maxWidth size to 80% in FXML.
Much like in web development.
<VBox fx:id="testVB" prefWidth="600">
But this does not:
<VBox fx:id="testVB" prefWidth="80%">
I know that in Straight JavaFX2 non-fxml you can create insets? What is the best way to do this outside of code in FMXL?
Thanks!
Riley
I'm not sure you can. You need to use the GridPane layout component. In this component, you can specify rows and columns constraints, and in these constraints you can specify a width as a percentage. For example:
<GridPane>
<children>
<TitledPane text="testGridPane" GridPane.columnIndex="0" GridPane.rowIndex="0" />
</children>
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="80.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="20.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
This code defines a GridPane with a first column with a width of 80%. The TitledPane is set in the first cell of the first column of this GridPane, and can (because you need to be sure that the width constraints of the TitledPane match your needs) occupy 80% of the width of the GridPane.
Please note that I removed all information not relevant to your question. By the way, Oracle's Scene Builder tool is very useful to define complex FXML layout.
It seems like many answers have already been provided and they should work. However, there is a way to set percentages:
<fx:define>
<Screen fx:factory="getPrimary" fx:id="screen" />
</fx:define>
This would help you detect the dimensions of the current screen, the application is being displayed on. Now that we have the display dimensions, we can play with it in FXML as follows:
<HBox fx:id="hroot" prefHeight="${screen.visualBounds.height}" prefWidth="${screen.visualBounds.width}"> Your FXML elements inside the root... </HBox>
Note that I use visualBounds, since this would get me the available space on the screen, since I don't want an overlap with the taskbar in Windows for example. For fullscreen applications, you would just use 'bounds'.
Now, to come to your point of using percentages, you can actually play with the value of the prefheight and prefWidth. You can put calculations inside the ${}.
Optionally:
If you want to have all your elements use relative sizes, just refer to them, using their ID and width or height property, and make your calculation.
<VBox fx:id="VBSidebar" prefWidth="${hroot.width*0.15}" prefHeight="${hroot.height}"> more elements.. </VBox>
Hope this helps!
You can simulate it - basic example that simulates 50% for two cols in an HBox. You can add dummy panes to get thirds, etc.
HBox {
VBox {
static hgrow : "ALWAYS",
Label {
text : "Privacy",
alignment : "CENTER",
styleClass : ["h2", "heading"]
}
},
VBox {
static hgrow : "ALWAYS",
Label {
text : "Messages",
alignment : "CENTER",
styleClass : ["h2", "heading"]
},
Label {text:""}
}
}
A brief explanation about my app:
the application in which I'm working on is such a greeting cards designer. Imagine something in which there is a background image, and an indefinite number of "layers" (in particular, pictures) that stay over the background and can be moved, resized, moved front and back, etc...
It is also possibile to apply particular shapes to these layers, like a star, an ellipse, .. and after the card is made, it's possibile to save is to jpeg file.
The problem
Everything works correctly, but I detected that when a shape is applied to a layer, a memory leak is generated.
Here is the code of the UserControl of each layer:
<UserControl>
.....
<Grid x:Name="_myGrid" >
<Border x:Name="im_the_problem" BorderThickness="0" OpacityMask="{Binding Path=MyMask.Data, Converter={StaticResource MaskConverter}}">
<!-- My Image... -->
</Border>
</Grid>
</UserControl>
where MaskConverter code is the following:
public class MaskConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
String maskData = value as String;
if (maskData == null)
return null;
if (maskData == "")
return null;
VisualBrush vb = new VisualBrush();
vb.Visual = XamlReader.Parse(maskData) as Visual;
return vb;
}
public object ConvertBack(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
throw new NotSupportedException();
}
}
The Parameter "MyMask.Data" is a XAML Path (that is the shape that I'm applying) that I dinamically load from a textfile that contains different shapes.
So, the principle is that if I have the border named *im_the_problem*, the memory is NOT released. If I comment *im_the_problem* (so I'll just have rectangular layers/pictures without shapes) everything work like a charm, without memory leaks.
The problem should be in the OpacityMask + VisualBrush.
Am I doing something wrong?
Or is there a known problem? Is there a way to do the same (apply a shape to a picture..) in a different manner?
Thanks.
You might be able to try binding the MyMask.Data to an actual Path.Data, and setting the Path.Fill to an ImageBrush created from the image?
You need to freeze your VisualBrush ;)
I had this problem in a DataGrid's column template where I was using a <Canvas><Path /></Canvas> (as a static-resource) into a VisualBrush (also a static-resource) and using that as the OpacityMask for a Rectangle. Whenever the DataGrid was reloaded the Rectangle wouldn't release VisualBrush references to the OpacityMask, I used a memory-profiler tool to reveal that all the VisualBrush objects were using the bulk of memory.
I don't understand why or how this happened - but I'm glad I'm not alone (even if I had the same problem some 6.5 years later...).
My XAML was something like this:
<DataGrid.Resources>
<Canvas x:Key="icon" ...>
<Path ... />
</Canvas>
<VisualBrush x:Key="iconBrush" Stretch="Uniform" Visual="{StaticResource icon}" />
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Rectangle
Fill="{Binding Foreground, ElementName=myDataGrid}"
Width="14"
Height="14"
Margin="4"
Visibility="{Binding IconVisibility}"
OpacityMask="{StaticResource iconBrush}"
/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
...
</DataGrid.Columns>
I read that setting IsFrozen = true (done using this technique: https://www.codeproject.com/Tips/72221/Freeze-brushes-directly-in-the-XAML-to-improve-you ) would help memory issues with Brushes, however this seemingly had no effect at all. Weird.
I thought I'd experiment and I reasoned that if the issue was leaking the VisualBrush then I wondered if having it as a StaticResource was messing with object-references, so I changed it to an "owned" object, like so:
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Rectangle
Fill="{Binding Foreground, ElementName=myDataGrid}"
Width="14"
Height="14"
Margin="4"
Visibility="{Binding IconVisibility}"
>
<VisualBrush Stretch="Uniform" Visual="{StaticResource iconBrush}" />
</Rectangle>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
This fixed the issue! And I still don't know why - I wonder if it's a bug in WPF?
On a related note, I came to realise that using a VisualBrush was overkill as I'm rendering just a simple Path - VisualBrush is expensive because it renders an entire WPF view - I also learned from other documentation that Path itself isn't necessary for rendering simple shapes because itself is a complete UIElement and FrameworkElement - which are "heavier" types.
I changed my code to store the path in a PathGeometry value inside a GeometryDrawing static-resource which is loaded into a DrawingBrush:
<GeometryDrawing x:Key="iconDrawing" Brush="Black" Geometry="..." />
<Rectangle
Fill="{Binding Foreground, ElementName=myDataGrid}"
Width="14"
Height="14"
Margin="4"
Visibility="{Binding IconVisibility}"
OpacityMask="{StaticResource iconBrush}"
>
<DrawingBrush Stretch="Uniform" Drawing="{StaticResource iconDrawing}" />
</Rectangle>
Doing this also made a dent in memory usage, and hopefully, performance.
In your project I see you're not using the path information as a resource, but the same technique applies: load your path into a PathGeometry (or rather, StreamGeometry object, which is even faster and is meant for immutable geometry) and set that as the Drawing for a DrawingBrush.