I am developing Desktop Application using Flex/AIR and I have problem with Spark List control.
The case is the following:
I have a list with item renderer. I do not use itemRendererFunction, so I have just one type of renderer. However this renderer can have different size, depending of the type of the data connected to it. Please see the code of my ItemRenderer:
<s:HGroup verticalAlign="middle">
<s:CheckBox id="glazingNorthCheckBox" selected="false"/>
<s:TextInput text="{data is VerticalSolidComponent ? data.window.areaNorth : data.skylight.area}"/>
<s:Label text="m²"/>
</s:HGroup>
<s:HGroup verticalAlign="middle" includeInLayout="{data is VerticalSolidComponentWithGlazing}"
visible="{data is VerticalSolidComponentWithGlazing}">
<s:CheckBox id="glazingEastCheckBox" selected="false"/>
<s:TextInput text="{data.window.areaEast}"/>
<s:Label text="m²"/>
</s:HGroup>
So as you see the second HGroup is not always included in layout.
That is why my list is calculating wrong height.
Here you can see the code for the list:
<s:List id="solidComponentsList" dataProvider="{data.solidComponents}" itemRenderer="View.BuildingGeometry.DetailView.SolidComponentItemRenderer" skinClass="View.Skins.CustomListSkin" useVirtualLayout="true">
<s:layout>
<s:VerticalLayout gap="10" horizontalAlign="left" variableRowHeight="true" useVirtualLayout="true" paddingTop="20" paddingLeft="20" requestedMaxRowCount="4"/>
</s:layout>
</s:List>
Can you give me some advice how to calculate the correct size of the list?
Thank you in advance!
Related
I'm trying to implement webcomponents with a parent/child relationship, and it seems like what I want to do is impossible. Please tell me I'm wrong!
I'm trying to build a grid layout. I have a component called grid and one called cell, a grid will contain multiple cell children.
I want to encapsulate the particular way I'm implementing the layout. I might use CSS grid, I might use a table, I might do all the rendering in SVG. I want the number of rows and columns to be properties of a grid and the specific row/column to be properties of a cell.
In this case I'm using CSS grid, and I'm generating my webcomponents using Svelte. I don't think Svelte is the problem, I think it's inherent to how webcomponents work.
So I want to be able to write:
<grid rows="3" cols="3">
<cell row="1" col="1" />
<cell row="1" col="2" />
...
</grid>
My resulting DOM looks like this in the inspector:
<grid cols="3" rows="3">
#shadow-root /* style includes display:grid, columns and rows settings */
<cell col="1" row="1">
#shadow-root /* style includes grid-column:1; grid-row:1; */
<div>...</div>
</cell>
<cell col="1" row="2">
#shadow-root /* style includes grid-column:1; grid-row:2; */
<div>...</div>
</cell>
...
</grid>
The grid component has all the CSS styles to display a 3x3 grid. And it does show a grid, but the cells aren't in the correct order.
The problem is that the grid-column and grid-row CSS attributes for the cells are set in their shadow-roots and apply to their divs. The immediate children of the HTML element that has display: grid; as a style are the cells, and they don't have grid-column or grid-row styles. The div under each of the cell's shadow-root has those styles. So those styles are ignored and the cells get laid out in the order they appear in the DOM.
I can get it to lay out correctly by rendering each cell with its own style setting the row/column, as in:
<grid rows="3" cols="3">
<cell style="grid-column:1; grid-row:1" />
...
</grid>
But now I have a leaky abstraction, the user of the grid and cell webcomponents has to know that grid uses CSS grid to do its layout, and has to apply CSS grid styles to the cells to place them correctly. I want to encapsulate this parent/child implementation detail entirely within the webcomponents.
Unless there's a way, in a webcomponent, to apply a CSS style to the component itself, above the shadow-root, it seems like what I'm trying to do is impossible. Is this an inherent limitation of webcomponents?
Thanks for your help!
To answer my own question: yes, you can access the webcomponent from within, penetrating the shadowRoot upwards.
In CSS, you can access the component with the :host selector. In my case, I use CSS vars:
:host {
grid-column: var(--cell-col);
grid-row: var(--cell-row);
}
I still need to set the values of the variables in the DOM, and setting them in the top-level element of the component (the div) won't work. In Svelte, I can use bind:this to bind the div element to a variable (topEl). Then I add an onMount handler that navigates up from the topEl to its host and sets the CSS variables from the Svelte component variables:
onMount(() => {
topEl.parentNode.host.style.cssText += `--cell-col:${col} --cell-row:${row}`
})
I am planning to add an input field (just like an EditText) to my Card. I am using the GDK. At present I have created a layout as below
<TextView
android:id="#+id/txt1"
android:text="Which task do you want?"
android:textSize="20sp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:id="#+id/edit1"
android:layout_gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint=""/>
However, the EditText is not the one I need since using glass we can't type.
So can anyone tell me how to add input fields to card?
As mentioned in comments, there is no easy way to actually type into an input field so there is no need to use the features of an input, instead you can just style a TextView to look like an input field (typically with a border around it) and update the value from the back end as needed
((TextView)findViewById(R.id.my_text_view)).setText(myStringValue);
I have the following report in JasperReports jrxml, Detail section.
It is a list I get from Java containing 2 objects, both are being outputed on the first page, so each time test variable is called.
<detail>
<band height="200" splitType="Stretch">
<componentElement>
<reportElement key="table" style="table" x="0" y="49" width="500" height="140"/>
<jr:list xmlns:jr="http://jasperreports.sourceforge.net/jasperreports/components" xsi:schemaLocation="http://jasperreports.sourceforge.net/jasperreports/components http://jasperreports.sourceforge.net/xsd/components.xsd">
<datasetRun subDataset="Data Set">
<datasetParameter name="REPORT_DATA_SOURCE">
<datasetParameterExpression><![CDATA[$P{REPORT_DATA_SOURCE}]]></datasetParameterExpression>
</datasetParameter>
</datasetRun>
<jr:listContents height="50" >
<textField isBlankWhenNull="true">
<reportElement x="0" y="0" width="200" height="20" isRemoveLineWhenBlank="true"/>
<textElement textAlignment="Left" verticalAlignment="Middle" >
<font size="10" fontName="DejaVu Serif" isBold='true'/>
</textElement>
<textFieldExpression><![CDATA[$F{test}]]></textFieldExpression>
</textField>
</jr:listContents>
</jr:list>
</componentElement>
</band>
</detail>
So i have a list of 2 objects, beans. Everything works but this test variable gets shown twice on each page (both objects gets called on first page) instead of one object per page. I would like to put a break after first test is printed, so the next test in the list is printed on the next page.
Can anyone point me in the right direction?
I have the answer and i will post it here if someone else has the same problem.
Jasper report is quite buggy. First, when you are printing out collection of the elements (objects), you send collection to the jasper engine, which for some unknown reason doesnt recognize the first element in the collection. You solve this by adding one dummy object on the index 0 of your collection.
After searching i ve found out that jasper API has the function getPages(). This returns number of pages that there will be printed out, in a list. Each index of list is one page. You can call this function from this jasperPrint when u fill report.
JasperReport jasperReport = null;
JasperPrint jasperPrint = null;
where ist is the input stream of your jrxml, parameters is a hashmap, and last is your list of your jRBeancollData source.
beanColDataSource = new JRBeanCollectionDataSource("YOURLIST");
jasperReport = JasperCompileManager.compileReport(ist);
jasperPrint = JasperFillManager.fillReport(jasperReport, parameters, beanColDataSource);
List<JRPrintPage> pages = japserPrint.getPages();
After you have this jasperPrint, you can call this function i wrote.
/**
* This removes blank page if the page size is bigger then the number of
* "pages" in array if for some reason we get last page as empty in pdf - we
* also put arraySize - 1 since we ve put one dummy(empty) in the array
* collection on index 0 since for some buggy unknown reason jasper always
* outputs collections from index 1 forward instead of 0.
*
* #author Uros
* #param pages
* , arraySize
*/
private void removeBlankPage(List<JRPrintPage> pages, int arraySize)
{
int numOfPages = pages.size();
if (numOfPages > arraySize - 1)
{
pages.remove(numOfPages - 1);
}
}
The function in this case removes only the last page, you can modify it so it removes any other empty page if there is one, and arraySize is smaller by one since you ve put in 1 dummy.
Since you print each object on each page, if there are more pages then objects, it is obvious there is one empty page so you remove it. You need to make sure that data wont stretch over to the next page ofcourse, but i print pages that will always look the same.
Hope it helps..
Yes put break page palette after printing your first object. So that it will print both
object in different pages.
I design my reports in iReport, which allows me to drag and drop a page break into the detail band, but maybe this can help you. The resulting XML looks like:
<break>
<reportElement uuid="*uuid here*" x="0" y="28" width="100" height="1"/>
</break>
</band>
</detail>
I inserted mine at the bottom of the detail band, so you should try inserting your <break> between your two objects.
Use a SubReport. Feed your list as a JRBeanCollectionDataSource to a SubReport. Place that subreport in the detail band along with a page break just below the subreport.
<break>
<reportElement uuid="*uuid here*" x="0" y="28" width="100" height="1"/>
</break>
I have a spark list component and a corresponding custom itemrenderer:
list component:
<s:List id="albumImagesList" itemRenderer="the.namespace.for.XYZImageRenderer" useVirtualLayout="false" width="400" height="160">
<s:layout>
<s:TileLayout requestedColumnCount="5"
requestedRowCount="2"
rowHeight="80"
columnWidth="80"
horizontalGap="0"
verticalGap="0" />
</s:layout>
</s:List>
item renderer:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true" width="100%" height="100%">
<s:states>
<s:State name="normal" />
</s:states>
<s:BitmapImage source="{data.image_path}" width="70" height="70" horizontalCenter="0" verticalCenter="0" />
</s:ItemRenderer>
It's all fine and dandy, the data gets populated correctly and I verified that the data.image_path property arrives safe and sound inside the itemrenderer.
My only problem is: the image is not displaying. I am not sure if it doesn't render at all or if it's just not visible somehow.
Does anyone see something at first glance? Am I doing something fundamentally wrong here? I worked with mx item renderers before and I never had so much trouble with those.
after a little bit of fumbling and checking i suppose this is the answer to my question. maybe someone can confirm this, but i think it is pretty much spot on:
the "bitmapimage" can only load data from trusted (crossdomain-policy'ed) domains. so with local files it is no problem, but i was loading remote images and with that the bitmapimage silently shuts down and does nothing. no get request, nothing.
the old "image" can load stuff no matter where it originated and so i am now switching to this as a solution.
BitMapImage.source expects one of three things. To quote from docs:
A Bitmap or BitmapData instance.
A class representing a subclass of DisplayObject. The BitmapFill instantiates the class and creates a bitmap rendering of it.
An instance of a DisplayObject. The BitmapFill copies it into a Bitmap for filling.
It sounds like you're giving it a URL location. If so, then use an Image, not BitMapImage.
phew, ok got it fixed using this guy's approach:
http://polygeek.com/2452_flex_extending-spark-bitmapimage
maybe it's going to be of help for someone.
cheers!
Hi I've got a list and the selectedIndex doesn't seem to have any effect. Is the alternatingItemColors causing a problem?
I've got a panel with this list and a few radio buttons. I've set the defaults on the radio buttons, but I'm having problems setting 2010 as the default selection in the list.
<mx:List
id="myList"
width="120"
height="80"
alternatingItemColors="[0xFFFFFF, 0xEEEEEE]"
selectedIndex="0">
<mx:dataProvider>
<mx:Object label="2010" data="myData1" />
<mx:Object label="2009" data="myData2" />
<mx:Object label="2008" data="myData3" />
</mx:dataProvider>
<mx:List>
I also tried adding: creationComplete="myList.selectedIndex=0", but that didn't work, either.
Any suggestions? Thank you.
-Laxmidi
Okay, I fiured it out. I was setting the selectedIndex in the component correctly. But, I had another function acting on the instance, which was causing the problem.
Thank you
-Laxmidi