There is an example on Adobe livedocs for using states:
<!-- Define one view state, in addition to the base state.-->
<mx:states>
<mx:State name="Register">
<mx:AddChild relativeTo="{loginForm}" position="lastChild">
<mx:target>
<mx:FormItem id="confirm" label="Confirm:">
<mx:TextInput/>
</mx:FormItem>
</mx:target>
</mx:AddChild>
<mx:SetProperty target="{loginPanel}" name="title" value="Register"/>
<mx:SetProperty target="{loginButton}" name="label" value="Register"/>
<mx:SetStyle target="{loginButton}"
name="color" value="blue"/>
<mx:RemoveChild target="{registerLink}"/>
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:target>
<mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>
</mx:target>
</mx:AddChild>
</mx:State>
</mx:states>
I haven't been able to find the purpose of mx:target in
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:target>
<mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>
</mx:target>
</mx:AddChild>
Does anyone know what that does and if it is necessary? It seems to be unnecessary.
Looks like I over-thought this one a bit. Turns out target is just the target child you are adding and that is just another way to define it as opposed to defining it as an inline attribute to the AddChild tag.
Related
I'm trying to access the
<chart:guide>
value property from the screen controller, but I can't find any getter to reach it. The xml block is like this:
<chart:valueAxes>
<chart:axis position="LEFT"
stackType="REGULAR"
title="Graph Title">
<chart:guides>
<chart:guide
value="0"
inside="true"
lineAlpha="1"
/>
</chart:guides>
</chart:axis>
</chart:valueAxes>
I need to set the value of the guide at runtime. Any suggestion?
Let's say we have the following SerialChart:
<chart:serialChart id="serialChart"
caption="Serial chart"
height="100%"
width="100%"
categoryField="x">
<chart:graphs>
<chart:graph valueField="y"/>
</chart:graphs>
<chart:valueAxes>
<chart:axis position="LEFT">
<chart:guides>
<chart:guide value="12"
inside="true"
lineAlpha="1"/>
</chart:guides>
</chart:axis>
</chart:valueAxes>
<chart:data>
<chart:item>
<chart:property name="x" value="10"/>
<chart:property name="y" value="12"/>
</chart:item>
<chart:item>
<chart:property name="x" value="11"/>
<chart:property name="y" value="2"/>
</chart:item>
<chart:item>
<chart:property name="x" value="12"/>
<chart:property name="y" value="120"/>
</chart:item>
<chart:item>
<chart:property name="x" value="13"/>
<chart:property name="y" value="16"/>
</chart:item>
</chart:data>
</chart:serialChart>
You can simply get ValueAxis and then get Guide object by index or iterate collection and find by id (optional attribute of Guide):
#Inject
private SerialChart serialChart;
ValueAxis valueAxis = serialChart.getValueAxes().get(0);
Guide guide = valueAxis.getGuides().get(0);
guide.setValue(15);
serialChart.repaint();
Note, if we want to change already displayed chart configuration then we have to call repaint() method.
If you use CUBA 6.4 or older, you have to obtain Configuration object first using getConfiguration() method and cast it to appropriate chart type as shown here: https://doc.cuba-platform.com/charts-6.4/cdp_screen_controller.html
Width this code i can define content:
<flux:flexform.section name="columns">
<flux:flexform.object name="column" label="column">
<flux:flexform.field.input name="demo" label="Demo field" />
</flux:flexform.object>
</flux:flexform.section>
<flux:flexform.grid>
<flux:flexform.grid.row>
<f:for each="{columns}" as="sectionObject" iteration="iteration">
<flux:flexform.grid.column>
<flux:flexform.content name="column{iteration.cycle}" label="Column {iteration.cycle}" />
</flux:flexform.grid.column>
</f:for>
</flux:flexform.grid.row>
</flux:flexform.grid>
This is flexible. I can Add new "Content Areas" through the section. But this is not what I want. I Want to define a very fixed two-column and a three-column FCE. My editor should not have to decide how many columns to use.
I am missing something like:
<flux:flexform.field.contentArea name="col1" label="Column 1" />
<flux:flexform.field.contentArea name="col2" label="Column 2" />
<flux:flexform.grid>
<flux:flexform.grid.row>
<flux:flexform.grid.column>
<flux:flexform.content name="col1" />
</flux:flexform.grid.column>
<flux:flexform.grid.column>
<flux:flexform.content name="col2" />
</flux:flexform.grid.column>
</flux:flexform.grid>
</flux:flexform.grid.row>
Thank you for your hint to the right direction.
You are very close to the solution with the code you already have. In this example I will use the new ViewHelper names - but you can get the same result using the old names as in your example. Which is which, should be easy to spot (note: you had a typo in your code example which I edited, rgid used instead of grid - such a typo would cause Flux to error out):
<flux:grid>
<flux:grid.row>
<flux:grid.column>
<flux:content name="col1" label="Nice name for column 1" />
</flux:grid.column>
<flux:grid.column>
<flux:content name="col2" label="Column 2" />
</flux:grid.column>
</flux:grid>
</flux:grid.row>
And remove the flux:form.section with object inside it - you don't need this when you make a statically defined grid.
Then to render this grid:
<flux:content.render area="col1" /> and so on.
When I create a model I would like to save images for a model. I am using PrimeFaces fileUpload component. When I save pictures I want to know to which model particular image refers to. That's why I need to send id of a model to backing bean.
Is there any possibility to send id of model to fileUploadListener?
<h:form enctype="multipart/form-data">
<p:panelGrid columns="2">
<h:outputLabel for="hotelName" value="#{msg.hotelName}"/>
<p:inputText value="#{apartmentNew.name}" id="hotelName"/>
<h:outputLabel for="hotelDescription" value="#{msg.hotelDescription}"/>
<p:inputText value="#{apartmentNew.description}" id="hotelDescription"/>
<h:outputLabel for="hotelImages" value="#{msg.hotelImages}"/>
<h:form enctype="multipart/form-data">
<p:fileUpload id="hotelImages"
fileUploadListener="#{apartments.handleImageUpload}"
mode="advanced"
sizeLimit="10000000"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/">
</p:fileUpload>
</h:form>
</p:panelGrid>
<p:commandButton id="saveApartmentButton" value="#{msg.save}" action="save"/>
<p:commandButton id="cancelCreationApartmentButton" value="#{msg.cancel}"
action="cancel"/>
</h:form>
Not via request parameters. You can do so via component attributes.
E.g.
<p:fileUpload ...>
<f:attribute name="foo" value="bar" />
</p:fileUpload>
with
String foo = (String) event.getComponent().getAttributes().get("foo"); // bar
I needed to pass a key parameter along with the uploaded file. I found that fileUploadListener executes during the APPLY_REQUEST_VALUES phase, so I could not use an EL expression in the f:attribute tag. I also tried to find the value using event.getComponent().findComponent("id"), but although the component was present, the value was null. I think a #ViewScoped bean would fix the missing value, but I am stubbornly attempting to keep my beans at #RequestScoped until I have absolutely no other option. Ultimately, I had to use FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("id") which I got from http://forum.primefaces.org/viewtopic.php?f=3&t=6432
Error in types:
String foo = event.getComponent().getAttributes().get("foo");
Instead, do it this way:
Object foo = event.getComponent().getAttributes().get("foo");
Integer foo = (Integer) event.getComponent().getAttributes().get("foo");
You can use:
<div onclick="#{myBean.myMethod(myParam)}" >
<p:fileUpload id="fileUpload" fileUploadListener="#{myBean.onFileUplod}" mode="advanced" dragDropSupport="true"
update=":messages" process="#this" >
</p:fileUpload>
</div>
Method in myBean:
public void myMethod(String myParam) {
selectedMyParam = myParam;
}
Then you can use selectedMyParam in onFileUpload method.
I'm trying to use a Checkboxlist in MonoRail to represent a many to many table relationship. There is a Special table, SpecialTag table, and then a SpecialTagging table which is the many to many mapping table between Special and SpecialTag.
Here is an excerpt from the Special model class:
[HasAndBelongsToMany(typeof(SpecialTag),
Table = "SpecialTagging", ColumnKey = "SpecialId", ColumnRef = "SpecialTagId")]
public IList<SpecialTag> Tags { get; set; }
And then in my add/edit special view:
$Form.LabelFor("special.Tags", "Tags")<br/>
#set($items = $FormHelper.CreateCheckboxList("special.Tags", $specialTags))
#foreach($specialTag in $items)
$items.Item("$specialTag.Id") $Form.LabelFor("$specialTag.Id", $specialTag.Name)
#end
The checkboxlist renders correctly, but if I select some and then click Save, it doesn't save the special/tag associations to the SpecialTagging table (the entity passed to the Save controller action has an empty Tags list.) One thing I noticed was that the name and value attributes on the checkboxes are funky:
<label for="special_Tags">Tags</label><br>
<input id="3" name="special.Tags[0]" value="UCampus.Core.Models.SpecialTag" type="checkbox"> <label for="3">Buy 1 Get 1 Free</label>
<input id="1" name="special.Tags[1]" value="UCampus.Core.Models.SpecialTag" type="checkbox"> <label for="1">Free</label>
<input id="2" name="special.Tags[2]" value="UCampus.Core.Models.SpecialTag" type="checkbox"> <label for="2">Half Price</label>
<input id="5" name="special.Tags[3]" value="UCampus.Core.Models.SpecialTag" type="checkbox"> <label for="5">Live Music</label>
<input id="4" name="special.Tags[4]" value="UCampus.Core.Models.SpecialTag" type="checkbox"> <label for="4">Outdoor Seating</label>
Anyone have any ideas?
Thanks!
Justin
The checkboxlist renders correctly
it seems to me that you could also render something like
<input type="checkbox" name="special.Tags" value="1"/>
<input type="checkbox" name="special.Tags" value="2"/>
which make it simpler (no index to output for the name, it will be properly resolved as an array via controller action parameter binding
also, in your sample, the fact that all checkboxes having the same value UCampus.Core.Models.SpecialTag is probably not right, you may want to output actual primary key identifier from the tags (not sure, could you display the class you are binding back on the form handling action?)
I was able to get it working by specifying the id and text attributes...
$Form.LabelFor("special.Tags", "Tags")<br/>
#set($items = $FormHelper.CreateCheckboxList("special.Tags", $specialTags, "%{value='Id', text='Name'}"))
#foreach($specialTag in $items)
$items.Item("$specialTag.Id") $Form.LabelFor("$specialTag.Id", $specialTag.Name)
#end
I have been tearing my hair out now for a week or so, it's time I sought some help...
I am coding a small app to show me the next train leaving the station. Normally only the hour of the next train is shown, but if you click on the prefs button, the application window enlarges and a datagrid is shown with the trains and hours. Clicking on the close button in that state returns you to the 'start' state, or should do so.
The problem is that the datagrid disappears, but the application window stays the same size. It should return to it's original size.
I've been trying lots of different approaches, replacing VBoxes by Canvas or Panels but none worked. In design mode everything work as expected when switching between states.
This is the first time I've been using states, so I might be missing something fundamental.
Here's a code sample - I'm using 2 view states, Start and Prefs.
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init();"
cornerRadius="12"
currentState='Start' width="350" height="250">
<mx:states>
<mx:State name="Start">
<mx:AddChild>
<mx:VBox id="box_parent" width="100%" height="100%" verticalGap="2">
<mx:Label text="Next Train Leaves At" textAlign="center" width="100%"/>
<mx:Label text="--:--" width="100%" height="100" fontSize="64" id="timetext" textAlign="center" fontWeight="bold"/>
<mx:HBox width="100%" height="25" id="hbox1">
<mx:Button label="Prefs"
id="buttonPrefs"
click="currentState='Prefs'"/>
<mx:Spacer width="70%" id="spacer1"/>
<mx:Button
label="Next"
click="findNextTrain()" id="buttonNext"/>
</mx:HBox>
</mx:VBox>
</mx:AddChild>
<mx:SetProperty name="layout" value="vertical"/>
<mx:SetProperty name="width" value="350"/>
<mx:SetProperty name="height" value="220"/>
</mx:State>
<mx:State name="Prefs" basedOn="Start">
<mx:AddChild relativeTo="{box_parent}" position="lastChild">
<mx:DataGrid height="80%" width="100%" dataProvider="{trains}" id="traindata" editable="false">
<mx:columns>
<mx:DataGridColumn headerText="Station" dataField="stationid"/>
<mx:DataGridColumn headerText="Leave" dataField="leave"/>
</mx:columns>
</mx:DataGrid>
</mx:AddChild>
<mx:RemoveChild target="{buttonPrefs}"/>
<mx:SetProperty target="{box_parent}" name="height" value="500"/>
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:Button label="Close" click="currentState='Start'"/>
</mx:AddChild>
<mx:SetProperty name="height" value="570"/>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Resize target="{this}" duration="500"/>
</mx:Transition>
</mx:transitions>
</mx:WindowedApplication>
I have yet to find a way to reset a state in Flex to the values provided in the MXML. You have to reset what values you need your self programmatically. In the case of the provided sample code, you can reset the height of the application when changing back to the start state by adding the following into the WindowedApplication tag
currentStateChange="if(currentState == 'Start') this.height = 220"
This tells the WindowedApplication tag to handle the event dispatched after changing the current state to check if the new current state is Start, and to set the window height if it is.