CUBA platform : invalid window height for editor opened as dialog from a table action - cuba-platform

I have a screen with a table handling a many-to-many relationship towards an entity (simple, 2 fields) for which 1 single record is defined yet.
I created standard browser screen for the associated entity and defined openType = DIALOG for the action table "add" of the previous screen.
Then the dialog window is too much compacted in height (see screenshot below), I suppose this is because there is not enough entities to display so the height calculation is wrong.
If I do "analyse layout" on the dialog window I get the following warning :
[WARN] Nested component 'contactEmailsTable'
Nested component has relative height 100.0% inside window with undefined height
As a workaround, I tried to set manually table height in studio, no chance.
Did not see in studio where to set manually window height so I tried to redefined it through overriding of init method (see below), no chance.
#Override
public void init(Map<String, Object> params) {
super.init(params);
int unit = getHeightUnits();
float height = getHeight();
switch(unit) {
case UNITS_PIXELS:
setHeight(""+height * 1.10f+"px");
case UNITS_PERCENTAGE:
setHeight(""+Math.min(100, height + 0.10f)+"%");
}
}
Hereunder the xml of the said dialog.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
caption="msg://browseCaption"
class="com.busy.busyapp.gui.contactemail.ContactEmailBrowse"
focusComponent="contactEmailsTable"
lookupComponent="contactEmailsTable"
messagesPack="com.busy.busyapp.gui.contactemail">
<dsContext>
<collectionDatasource id="contactEmailsDs"
class="com.busy.busyapp.entity.ContactEmail"
view="_local">
<query>
<![CDATA[select e from busyapp$ContactEmail e]]>
</query>
</collectionDatasource>
</dsContext>
<layout expand="contactEmailsTable"
spacing="true">
<filter id="filter"
applyTo="contactEmailsTable"
datasource="contactEmailsDs">
<properties include=".*"/>
</filter>
<table id="contactEmailsTable"
presentations="true"
width="100%">
<actions>
<action id="create"/>
<action id="edit"/>
<action id="remove"/>
<action id="excel"/>
</actions>
<columns>
<column id="label"/>
<column id="email"/>
</columns>
<rows datasource="contactEmailsDs"/>
<rowsCount/>
<buttonsPanel id="buttonsPanel"
alwaysVisible="true">
<button id="createBtn"
action="contactEmailsTable.create"/>
<button id="editBtn"
action="contactEmailsTable.edit"/>
<button id="removeBtn"
action="contactEmailsTable.remove"/>
<button id="excelBtn"
action="contactEmailsTable.excel"/>
</buttonsPanel>
</table>
</layout>

The following examples show how to manage dialog window dimensions.
Open a screen as a dialog with defined width and height:
openEditor(entity, OpenType.DIALOG.width(480).height(320));
Set the width and height of a screen in its controller:
#Override
public void init(Map<String, Object> params) {
getDialogOptions().setWidth(480).setHeight(320);
}
The same in XML descriptor:
<dsContext/>
<dialogMode width="480" height="320"/>
<layout/>
Specify that the screen should be always opened as a dialog:
#Override
public void init(Map<String, Object> params) {
getDialogOptions().setForceDialog(true);
}
The same in XML descriptor:
<dsContext/>
<dialogMode forceDialog="true"/>
<layout/>

Related

Custom renderer for Toolbar Items not working for TabbedPage

I have 2 toolbar items in tabbed page (with two tabs).
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
xmlns="bla"
xmlns:x="bla"
xmlns:views="clr-namespace:TestApp.Views"
x:Class="TestApp.Views.MyTabbedPage"
>
<views:Page1 Title="Page 1" />
<views:Page 2 Title="Page 2" />
</TabbedPage>
I am trying to move one toolbar item on left using custom renderer:
assembly: ExportRenderer(typeof(MyTabbedPage), typeof(TabbedPageRenderer))]
namespace TestApp.iOS
{
public class TabbedPageRenderer : TabbedRenderer
{
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
var navigationItem = this.NavigationController.TopViewController.NavigationItem;
if (navigationItem.RightBarButtonItems.Length > 1)
{
navigationItem.LeftBarButtonItems = new UIBarButtonItem[] { navigationItem.RightBarButtonItems[1] };
}
navigationItem.RightBarButtonItems = new UIBarButtonItem[] { navigationItem.RightBarButtonItems[0]};
}
}
}
it works fine when page is loaded for first time. But when I click on tab to show the Page 2, It renders both toolbar items on right again (item on left stays at left) resulting in 3 toolbar items.
Can anyone please help me with this small issue?
Cheers

Styling Apache DataGrid in flex 4.15

I would like to know, how I can change the background color of an datagrid item!
I use external CSS and with flex 4.6 I use:
s|ItemRenderer
{
contentBackgroundColor: #FF0000;
}
But I have to upgrade to apache flex 4.15 and it doesn't work anymore... I can't find which component I suppose to style. In the documentation I can't find the list of styles available T_T.
If you have a link or answer thx!
In the documentation of adobe Flex it's said:
An item renderer is associated with a column of the DataGrid control. The item renderer then controls the appearance of each cell in the column. However, each item renderer has access to the data item for an entire row of the DataGrid control. Use the data property of the item renderer to access the data item.
Try to accomplish that by using ItemRenderer for all your columns you can do that in MXML manner or by mixing MXL with Action script code like applying the style for a known column:
<mx:DataGrid x="29" y="303" width="694" height="190" dataProvider="{testData.book}" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn headerText="Title" dataField="title">
<mx:itemRenderer>
<mx:Component>
<mx:HBox paddingLeft="2">
<mx:Script>
<![CDATA[
override public function set data( value:Object ) : void {
super.data = value;
var today:Number = (new Date()).time;
var pubDate:Number = Date.parse(data.date);
if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
else setStyle("backgroundColor",0xffffff);
}
]]>
</mx:Script>
<mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
<mx:Text width="100%" text="{data.title}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
or in separated action script class by excluding the content of the script tag mentioned to action script class extending your column's type and overriding the set data method like:
public class CheckBoxHeaderRenderer extends CheckBox
{
override public function set data(value:Object):void
{
_data = value as CheckBoxHeaderColumn;
selected = _data.selected;
//type your condition here using the property of your dataField
if(data.property=="value"){
this.styleName="yourClassCSSName"
}
}
and your class CSS will be like:
.yourClassCSSName{
contentBackgroundColor: #FF0000;
}
for more:
Understanding Flex itemRenderers
Creating item renderers and item editors for the Spark DataGrid control

ImageView, selector and on-click, on-long-click

I have some ImageView's:
The selector for right arrow button is:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="3" android:state_pressed="true"/> <!-- pressed -->
<item android:drawable="1" android:state_enabled="false"/> <!-- enabled -->
<item android:drawable="2"/> <!-- default -->
</selector>
(1, 2, 3 look like the ones in the picture below — 1 is for left arrow button, but the right's one looks like the same with opposite direction).
Now my problem is:
When the user does click, I use setEnable() to change its status. It works.
When the user does long click, again, I use setEnable() to change its status. But after the user released his finger, the button retains status as image #3.
I tried: cancelLongPress(), clearFocus(), invalidate(), post(Runnable), postInvalidate(), refreshDrawableState()… but they didn't work.
The app uses minimum SDK 4 (Android 1.6). Could you help me?
Thanks,
Temporary solution:
...
imageView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
v.postDelayed(new Runnable() {
#Override
public void run() {
v.setEnabled(...);
}// run()
}, 200); // 200 ms is enough
}
return false;
}// onTouch()
});

Android imageview change tint to simulate button click

I have an imageview on which I have set a bitmap fetched from an url.
On the imageview I have set an onClickListener which opens up a dialog.
I want to somehow change the tint (make it darker) when the imageview is pressed upon to provide a sort of button click like feel.
What do you suggest?
happydude's answer is the most elegant way to handle this but unfortunately (as pointed out in the comments) the source code for ImageView only accepts an integer (solid colour). Issue 18220 has been around for a couple years addressing this, I've posted a workaround there that I'll summarize here:
Extend ImageView and wrap drawableStateChanged() with code that sets the tint based on the new state:
TintableImageView.java
package com.example.widgets;
import android.content.Context;
import android.content.res.ColorStateList;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.support.v7.widget.AppCompatImageView;
import com.example.R;
public class TintableImageView extends AppCompatImageView {
private ColorStateList tint;
public TintableImageView(Context context) {
super(context);
}
public TintableImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs, 0);
}
public TintableImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context, attrs, defStyle);
}
private void init(Context context, AttributeSet attrs, int defStyle) {
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TintableImageView, defStyle, 0);
tint = a.getColorStateList(R.styleable.TintableImageView_tintColorStateList);
a.recycle();
}
#Override
protected void drawableStateChanged() {
super.drawableStateChanged();
if (tint != null && tint.isStateful())
updateTintColor();
}
private void updateTintColor() {
int color = tint.getColorForState(getDrawableState(), 0);
setColorFilter(color);
}
}
Define a custom attribute:
attrs.xml
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<declare-styleable name="TintableImageView">
<attr name="tintColorStateList" format="reference|color" />
</declare-styleable>
</resources>
Use the widget and custom attribute with your local namespace instead of Android's:
example_layout.xml
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<com.example.widgets.TintableImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/example"
android:clickable="true"
app:tintColorStateList="#color/color_selector"/>
</LinearLayout>
You can then use a colour selector like happydude suggested:
color_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#color/pressed_color"/>
<item android:color="#00000000"/>
</selector>
One way would be to use a combination of a ColorFilter and a ColorStateList that contains your tint color for when the button is pressed. The xml for the ColorStateList in the res/color directory would look like this:
button_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#color/pressed_color"/>
<item android:color="#00000000"/>
</selector>
where #color/pressed_color is your tint color (which should be partially transparent). Then in your ImageView subclass, you apply the color by overriding drawableStateChanged().
#Override
protected void drawableStateChanged() {
super.drawableStateChanged();
ColorStateList list = getResources().getColorStateList(R.color.button_pressed);
int color = list.getColorForState(getDrawableState(), Color.TRANSPARENT);
setColorFilter(color);
invalidate();
}
Any time the button's state changes, this code is called and will automatically set the tint as appropriate.
I'd have to test it out, but you should be able to set an xml with that behaviour as the ImageView drawable, and then set your bitmap as the ImageView background.
For me a simple solution is working, using setAlpha(180) in onClick event make the image darker, giving the user a feedback that it was clicked or touched.
final ImageView myImage = (ImageView) findViewById(R.id.ivDocument);
myImage.setImage...(... your image ...); // load your ImageView
myImage.setClickable(true);
myImage.setFocusable(true);
myImage.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
myImage.setAlpha(180);
doWhateverYouWantHere(v);
}
});
Regarding your XML layout, nothing special.
This code snippet worked for me:
porterDuffColorFilter = newPorterDuffColorFilter(getResources().getColor(R.color.cardview_dark_background),PorterDuff.Mode.MULTIPLY);
imgView.getDrawable().setColorFilter(porterDuffColorFilter);
imgView.setBackgroundColor(Color.TRANSPARENT);

adding/removing actions toolbar when editor has focus

I'm extending Eclipse using the Eclipse plugin infrastructure, and I've come into a problem:
I created a text editor and I would like to add actions to the Eclipse toolbar when my editor is open and has focus. For example:
textViewer.getTextWidget().addFocusListener(new FocusListener(){
public void focusGained(FocusEvent e) {
/* add actions */
}
public void focusLost(FocusEvent e) {
/* remove actions */
}
});
The following example of extensionPoint: ActionSet, add the action button to the toolbar permanently:
<action
class="MyActionClass"
id="MyActionID"
label="MyActionLabel"
menubarPath="MyActionMenuBarPath"
toolbarPath="MyActionToolBarPath" <-- this property
...
</action>
how to make this dynamically?
Thank you for your response, I found a simple way to do this, simply add the following extension point if the buttons are ActionSet:
<extension
point="org.eclipse.ui.actionSetPartAssociations">
<actionSetPartAssociation
targetID="myActionSetId">
<part
id="myEditorId">
</part>
</actionSetPartAssociation>
You could look at the Eclipse implementation of similar dynamic toolbar updates.
For example, the Breadcrumb bare can only be activated for Java Editor, and the toolbar "Toggle Breadcrumb" button will not be visible for any other type of editors.
alt text http://img109.imageshack.us/img109/359/eclipsetoolbarupdate.png
That is a ToggleBreadcrumbAction, declared in plugin.xml as
<actionSet
label="%javaEditorPresentationActionSet.label"
visible="false"
id="org.eclipse.jdt.ui.text.java.actionSet.presentation">
<action
allowLabelUpdate="true"
style="toggle"
toolbarPath="org.eclipse.ui.edit.text.actionSet.presentation/Presentation"
id="org.eclipse.jdt.ui.edit.text.java.toggleMarkOccurrences"
definitionId="org.eclipse.jdt.ui.edit.text.java.toggleMarkOccurrences"
disabledIcon="$nl$/icons/full/dtool16/mark_occurrences.gif"
icon="$nl$/icons/full/etool16/mark_occurrences.gif"
helpContextId="toggle_mark_occurrences_action_context"
label="%toggleMarkOccurrences.label"
retarget="true"
tooltip="%toggleMarkOccurrences.tooltip">
</action>
<action
allowLabelUpdate="true"
style="toggle"
toolbarPath="org.eclipse.ui.edit.text.actionSet.presentation/Presentation"
id="org.eclipse.jdt.ui.edit.text.java.toggleBreadcrumb"
definitionId="org.eclipse.jdt.ui.edit.text.java.toggleBreadcrumb"
disabledIcon="$nl$/icons/full/dtool16/toggle_breadcrumb.gif"
icon="$nl$/icons/full/etool16/toggle_breadcrumb.gif"
helpContextId="toggle_mini_browser_action_context"
label="%toggleBreadcrumb.label"
retarget="true"
tooltip="%toggleBreadcrumb.tooltip">
</action>
</actionSet>
You can try the same kind of definition.