private var _product:Product;
[Bindable]
public function get product():Product
{
return _product;
}
public function set product(p:Product):void
{
_product = p;
tn.selectedIndex = 0;
}
<mx:Label text="{product.name}" fontSize="11" fontWeight="bold"/>
How are they getting the product.name value which is inside product class.
package samples.flexstore
{
[Bindable]
public class Product
{
public var productId:int;
public var name:String;
public var description:String;
public var price:Number;
public var image:String;
public var series:String;
public var triband:Boolean;
public var camera:Boolean;
public var video:Boolean;
public var highlight1:String;
public var highlight2:String;
public var qty:int;
public function Product()
{
}
public function fill(obj:Object):void
{
for (var i:String in obj)
{
this[i] = obj[i];
}
}
[Bindable(event="propertyChange")]
public function get featureString():String
{
var str:String = "";
if (triband)
str += "Tri-band ";
if (camera)
str += "Camera ";
if (video)
str += "Video";
return str;
}
}
}
"{product.name}" , the product refers to the getter method!
That's the trick of Flex/ActionScript 3's getter and setter methods
http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=ascomponents_147_08.html
"name" is a public var on the Product class. By definition, "name" will be accessible to any other class. That's what "public" means.
_product is a private instance of the Product class. They are supplying the set product method with a Product value, which sets the _product private variable to an instance of the Product class.
The bracket notation in the text="{product.name}" portion of the above code is shorthand notation for binding the contained variable, in this case the name property of the product instance, to the component property (text). When the set product method is supplied a Product instance, Flex fires events internally that update the components that have that property bound.
Defining Data Models - Flex Quickstarts
Related
This is the simplified model :
public class Person {
public int Id;
public string Name;
}
public class Task {
public int Id;
public int PersonId;
public DateTime StartDate;
[GreaterThan("StartDate")]
public DateTime EndDate;
}
To validate the EndDate >= StartDate, i write general GreaterThanAttribute. The server side is trivial, but i have problem on client side validation.
My GreaterThanAttribute got the other property (ex: "StartDate") from constructor, then i pass this other property name to javascript as validation rule. But it won't work, because the JS will not found this element, because MVC will render & named it as "Task.StartDate", not "StartDate".
My question is, how i can get the prefix which will be used by the controller to render my model inside IClientValidatable.GetClientValidationRules() ?
Thanks
Here's how you could implement it:
public class GreaterThanAttribute : ValidationAttribute, IClientValidatable
{
private readonly string _otherProperty;
public GreaterThanAttribute(string otherProperty)
{
_otherProperty = otherProperty;
}
public override string FormatErrorMessage(string name)
{
return string.Format(CultureInfo.CurrentCulture, ErrorMessageString, name, _otherProperty);
}
protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{
var property = validationContext.ObjectType.GetProperty(_otherProperty);
if (property == null)
{
return new ValidationResult(
string.Format(
CultureInfo.CurrentCulture,
"unknown property {0}",
_otherProperty
)
);
}
var otherValue = (DateTime)property.GetValue(validationContext.ObjectInstance, null);
var thisValue = (DateTime)value;
if (thisValue <= otherValue)
{
return new ValidationResult(FormatErrorMessage(validationContext.DisplayName));
}
return null;
}
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
var rule = new ModelClientValidationRule();
rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName());
rule.ValidationType = "greaterthandate";
rule.ValidationParameters["other"] = "*." + _otherProperty;
yield return rule;
}
}
and on the client side:
(function ($) {
var getModelPrefix = function (fieldName) {
return fieldName.substr(0, fieldName.lastIndexOf('.') + 1);
};
var appendModelPrefix = function (value, prefix) {
if (value.indexOf('*.') === 0) {
value = value.replace('*.', prefix);
}
return value;
};
$.validator.unobtrusive.adapters.add('greaterthandate', ['other'], function (options) {
var prefix = getModelPrefix(options.element.name),
other = options.params.other,
fullOtherName = appendModelPrefix(other, prefix),
element = $(options.form).find(':input[name=' + fullOtherName + ']')[0];
options.rules['greaterThanDate'] = element;
if (options.message) {
options.messages['greaterThanDate'] = options.message;
}
});
$.validator.addMethod('greaterThanDate', function (value, element, params) {
var otherDate = $(params).val();
var thisDate = value;
// TODO: put your custom date comparison implementation here between
// the 2 values. Be careful here. Javascript date handling is culture dependent
// so you might need to account for that when building your js Date instances
return false;
}, '');
})(jQuery);
This has already been done. I suggest you use FoolProof validation. If you do not want to, you can at least check out their soure code. Here's a link
I have a Flex Spark dropdownList in which I need to show the Provider FirstName,LastName:
<s:DropDownList id="providerList"
dataProvider="{model.practiceProviderList.practiceProviders}"
labelField="provider.providerName.firstName"/>
But the output shows only [object Object] & [object Object] as there are 2 providers in the DB and does not show the actual values.
The PracticeProviderList.as:
[Bindable]
[RemoteClass(alias="model.PracticeProviderList")]
public class PracticeProviderList extends PracticeProviderListBase {
private var _practiceProviderList:ArrayCollection;
public function get practiceProviders():ArrayCollection
{
return _practiceProviderList;
}
public function set practiceProviders(value:ArrayCollection):void
{
_practiceProviderList = value;
}
The PracticeProvider Object:
public class PracticeProvider {
private var _practiceId:Number;
private var _practiceProviderId:Number;
private var _provider:Provider;
public function set practiceId(value:Number):void {
_practiceId = value;
}
public function get practiceId():Number {
return _practiceId;
}
public function set practiceProviderId(value:Number):void {
_practiceProviderId = value;
}
public function get practiceProviderId():Number {
return _practiceProviderId;
}
public function set provider(value:Provider):void {
_provider = value;
}
public function get provider():Provider {
return _provider;
}
The Provider has providerName:PersonName as one of it's fields & PersonName has firstName:String & lastName:String
I need to show the First Name, Last Name in the dropdownlist. I would appreciate if someone can help in this regard.
Thanks
Harish
The labelField can't concatenate 2 values. Use a labelFunction instead.
If I understand your data model, Something like this:
public function myLabelFunction(item:Object):String{
return item['providerName']['PersonName']['firstName'] + ' ' + item['providerName']['PersonName']['lastName']
}
There are 3 properties (example 1):
[Bindable] public var name:String;
[Bindable] public var email:Number;
[Bindable] public var address:Boolean;
I needed to have 3 helper methods that will be bindable too (example 2):
[Bindable] public var name:String;
[Bindable] public var email:Number;
[Bindable] public var address:Boolean;
public function get nameIsOk():Boolean { return !Strings.isEmpty(name) }
public function get emailIsOk():Boolean { return email == 3 }
public function get addressIsOk():Boolean { return address }
Sure, the code above doesn't work. I made it work by doing this (example 3):
private var _name:String
[Bindable("nameChanged")]
public function get name():String { return _name }
public function set name(v:String):void { _name = v; dispatchEvent(new Event("nameChanged")) }
[Bindable("nameChanged")]
public function get nameIsOk():Boolean { return !Strings.isEmpty(name) }
private var _email:Number
[Bindable("emailChanged")]
public function get email():Number { return _email }
public function set email(v:Number):void { _email = v; dispatchEvent(new Event("emailChanged")) }
[Bindable("emailChanged")]
public function get emailIsOk():Boolean { return email == 3 }
private var _address:Boolean
[Bindable("addressChanged")]
public function get address():Boolean { return _address }
public function set address(v:Boolean):void { _address = v; dispatchEvent(new Event("addressChanged")) }
[Bindable("addressChanged")]
public function get addressIsOk():Boolean { return address }
It does work, but now it is bloated.
Is there a way to reduce this code (example 3) to something smaller (like example 2)?
UPDATE:
Kudos to just_a_dude for nice answer. Here is the final version:
[Bindable] public var name:String;
[Bindable] public var email:Number;
[Bindable] public var address:Boolean;
public function Remixer() {
for each (var f:String in Strings.split("name email address")) {
ChangeWatcher.watch(this, f, onChange)
}
}
private function onChange(e:PropertyChangeEvent):void {
dispatchEvent(new Event(e.property + "Changed"))
}
[Bindable("nameChanged")]
public function get nameIsOk():Boolean { return !Strings.isEmpty(name) }
[Bindable("emailChanged")]
public function get emailIsOk():Boolean { return email == 3 }
[Bindable("addressChanged")]
public function get addressIsOk():Boolean { return address }
Not sure if this is what you're looking for but you can use mx.binding.utils.ChangeWatcher to "watch" for property changes
<?xml version="1.0" encoding="utf-8"?>
<mx:Script>
<![CDATA[
import mx.events.PropertyChangeEvent;
import mx.binding.utils.ChangeWatcher;
[Bindable] public var firstName:String;
[Bindable] public var email:Number;
[Bindable] public var address:Boolean;
private var _watcher:ChangeWatcher;
private function init():void {
ChangeWatcher.watch(this, "firstName", propertyChangeHandler);
ChangeWatcher.watch(this, "email", propertyChangeHandler);
ChangeWatcher.watch(this, "address", propertyChangeHandler);
firstName = "foo";
email = 0;
address = true;
firstName = "bar";
email = 1;
address = false;
}
protected function propertyChangeHandler(event:PropertyChangeEvent):void {
var prop:Object = event.property;
var name:String = prop.toString() + "Changed";
// trace(name); // displays firstNameChanged or emailChanged or addressChanged
dispatchEvent(new Event(name));
}
]]>
</mx:Script>
Let me know if this helps
Cheers
I'm not sure if you need getters, but if not, a nice way to do it, is to just use a single function, and put your bindable strings as arguments.
if you put this in your object:
public function isOk(s:String):Boolean
{
return !Strings.isEmpty(s)
}
You would use it like this:
<mx:CheckBox selected="{yourObject.isOk(yourObject.name)}" />
Generally, if you put a function inside the "{}" with parameters which are bindable, it will be called each time that parameter changes.
I would encapsulate your functionality in a class. Do not repeat yourself :)
i'm creating an html.helper for a 3rd party javascript grid component. i'm passing my gridextension my viewmodel.
in my viewmodel class i've got custom attributes on my properties describing how each column is displayed.
in my gridextension, i want to then serialize my class of T. in my CreateSerializedRow method i'd like to be able to do something like row. <- and get intellisense for my class. but how to i get intellisense for the members of class T without an explicit cast?
public class GridData<T>
{
#region Fields
private List<Dictionary<string, object[]>> _attributes;
private static IList<T> _dataSource;
#endregion
#region Properties
public string Align { get; set; }
public string Header { get; set; }
public string JsonData { get; set; }
public string Sorting { get; set; }
public string Width { get; set; }
#endregion
#region Public Methods
public void Serialize(IList<T> dataSource, List<Dictionary<string, object[]>> attributes)
{
_dataSource = dataSource;
_attributes = attributes;
JsonData = _dataSource.Count == 0 ? string.Empty : BuildJson();
}
#endregion
#region Private Methods
private static string BuildJson()
{
var sbJson = new StringBuilder();
var listCount = _dataSource.Count;
sbJson.Append("{page: 1, total:" + listCount + ", rows: [");
for (var i = 0; i < listCount; i++)
{
var serialized = CreateSerializedRow(i);
sbJson.Append(serialized);
if (i < listCount - 1)
sbJson.Append(",");
}
sbJson.Append("]}");
return sbJson.ToString();
}
private static string CreateSerializedRow(int index)
{
var row = _dataSource[index];
var sb = new StringBuilder();
//sb.Append("{id:'" + Id + "',data:[");
//sb.Append(String.Format("'{0}',", GroupName.RemoveSpecialChars()));
//sb.Append(String.Format("'{0}',", Description));
//sb.Append(String.Format("'{0}',", CreatedBy));
//sb.Append(String.Format("'{0}',", CreatedDate.ToShortDateString()));
//sb.Append(String.Format("'{0}',", EmailSubject.RemoveSpecialChars()));
//sb.Append(String.Format("'{0}',", EmailBody));
//sb.Append(String.Format("'{0}',", UpdatedBy));
//sb.Append(String.Format("'{0}'", UpdatedDate.ToShortDateString()));
//sb.Append("]}");
return sb.ToString();
}
#endregion
}
The best you can do is use Generic constraints, which specify that T must be castable to a specific type. See http://msdn.microsoft.com/en-us/library/ms379564(VS.80).aspx#csharp_generics_topic4 for more information.
The syntax is more or less the following:
public class MyClass<T> where T : ISomethingOrOther
{
}
At least this way, you can limit T to an interface type and code against that abstraction with Intellisense support.
With what you're trying to do you'd probably have to use reflection to cycle through the properties and output the values. You might be better off making GridData an abstract class and override a method which outputs the row of data for each data class.
Or create a generic interface which has a Serialize() method that outputs a string of the objects values in the expected format. Have each model class implement this interface and then have the GridData class constrained to this interface. Assuming these are ViewModel classes, it should be a reasonable design.
If T is always a known interface or class you can do:
public class GridData<T>
where T:MyClass
{
...
}
I have a collection of objects and each object throws an event every time its value gets updated. Im trying to capture that event by adding a listener to the arraycollection that holds it (see main class) but its not working. Honestly I'm not sure this is the correct approach.
I'm avoiding using Collection.CHANGE because it fells into an infinite recursion ultimately ends in a stack overflow. Any ideas?
[Bindable]
public class NamesVO {
public var steveList:ArrayCollection; // array of SteveVO objects
public function NamesVO() {
steveList = new ArrayCollection();
}
public function rename():void {
for each(var steve:SteveVO in steveList) {
steve.rename();
}
}
}
[Bindable]
public class SteveVO extends EventDispatcher {
public static const VALUE_CHANGED:String = "VALUE_CHANGED";
public var code:String;
public var name:String;
public var _quantity:Number;
public function SteveVO() {
this.code = "";
this.name = "";
_quantity = 0;
}
public function get quantity():Number {
return _quantity;
}
public function set quantity(quantity:Number):void {
_quantity = quantity;
dispatchEvent(new Event(VALUE_CHANGED));
}
public function rename():void {
name = code + " - " + _quantity;
}
}
Main class:
names = new NamesVO();
names.steveList.addEventListener(SteveVO.VALUE_CHANGED, function():void {
names.rename(); // this anon function is not being executed!!
});
var steve:SteveVO = new SteveVO();
names.steveList.addItem(steve);
// names is bound on a datagrid and uses itemeditor for each SteveVO object
The VALUE_CHANGED event is not dispatched by the steveList array Collection so won't be detected by your listener. You could encapsulate the functionality you want inside the NamesVO class by detecting when an item is added to the array collection and adding a listener to the new steveVO object that dispatches the same event from NamesVO. Then just listen for that event in your main class.
Is there a reason to change all the names when one quantity is changed. Would it be better simply to call rename inside the set function of the steveVO class?
To implement the change:
import flash.events.Event;
import mx.collections.ArrayCollection;
import mx.events.CollectionEvent;
import mx.events.CollectionEventKind;
[Bindable]
public class namesVO
{
public var steveList:ArrayCollection; // array of SteveVO objects
public function namesVO()
{
steveList = new ArrayCollection();
steveList.addEventListener(CollectionEvent.COLLECTION_CHANGE,collChanged);
}
private function collChanged(e:CollectionEvent):void
{
if (e.kind == CollectionEventKind.ADD)
e.items[0].addEventListener(steveVO.VALUE_CHANGED,valueChanged);
}
private function valueChanged(e:Event):void
{
dispatchEvent(new Event(steveVO.VALUE_CHANGED));
}
public function rename():void
{
for each(var steve:steveVO in steveList)
{
steve.rename();
}
}
}
In the main class use:
names = new namesVO();
names.addEventListener(steveVO.VALUE_CHANGED, function():void
{
names.rename();
});
steve = new steveVO();
names.steveList.addItem(steve);
steve.quantity = 12;
Of course this is only an example and only includes the case where one item is added at a time.