I'd like to force the consumer of a control to give a property a value when placing the control on a page.
In VisualStudio when you create an < img > tag without attributes SRC or ALT on a user control, it gets underlined saying that SRC and ALT are required attributes. I assume this is just a special handling of the tag by the editor, but is there a way to define a similar behavior for controls?
If the control had a property defined like this:
public object AProperty
{
get
{
if (ViewState["AProperty"] == null)
{
throw new Exception("AProperty is a required property of this control");
}
return ViewState["AProperty"];
}
set { ViewState["AProperty"] = value; }
}
Is there a way to use a Custom Attribute or something else that would flag in the designer?
You could use the Microsoft.Build.Framework.Required attribute. This would require a value to be set at build time or the build will fail with a message which indicates that the property does not have a value.
I don't believe there is an attribute to indicate that a specific tag must be included in a server control (or at least I don't see any such attribute on the System.Web.UI.HtmlControl.Image class). I believe that the litle underlines are part of the HTML validation of the IDE.
You could always create a custom attribute which throws a warning if a property is missing
While Microsoft.Build.Framework.Required is probably the best answer here, for others who stumble upon this and can't use .NET 4.0, you can also use this method:
http://forums.asp.net/t/1238319.aspx
Related
I have this form with ~170 individual text boxes with values in a session scoped bean. There is a requirement to only submit values when the component has a certain CSS class.
The way I originally approached this was to create a PhaseListener at the UPDATE_MODEL_VALUES and test the CSS class there. If the class was the affected class I set the value of the component to null. Then on the front end, I switched the class on focus using a generic JavaScript method. This meant in terms of changes to each componenet I only needed to add:
... styleClass="examfieldgrey" onfocus="whiteField(this);"
which is kind of nice given how many components I need to change.
This was working fine until I re-factored my e form to use multiple h form tags. Now the CSSclass is switching on the front end, but this change is not being saved. The phase listener is getting the old class.
I'm thinking this is obviously related to me switching the class in jQuery/javascript. What I am wondering is:
Is there a better way to do this arachatectually? One that preferably means I don't have to modify 170+ componenets?
If I do have to continue with using Javascript to switch the class, is there a way I can post that change back from javascript?
Sorry if this is an obvious question, I'm still a little green with the JSF lifecycle.
I'm using JSF 2.0 MyFaces
For reference here is an example of a component on my form that needs to be filtered:
<h:inputTextarea
id="inputVal"
styleClass="midTextArea examfieldgrey"
onfocus="whiteField(this);"
value="#{bean.form.val}"/>
where "examfieldgrey" is the class I test for when determining if I'm going to block a component.
And the whiteField method:
function whiteField(field){
if(! jQuery(field).hasClass("examfieldgrey")){
return;
}
jQuery(field).removeClass("examfieldgrey");
jQuery(field).addClass("examfieldwhite");
}
And my phase listener before phase method where I filter:
// TODO: make whatever mode allows ghosting to be configurable outside of
// the system (perhaps in the config file)
/**
* Before the model is updated, test each component's CSS on the form. If the
* CSS style is 'examfieldgrey' set the value to null so it doesn't get submitted
*/
#Override
public void beforePhase(PhaseEvent arg0) {
//We need the session to get the backing bean
if (arg0.getFacesContext().getExternalContext().getSessionMap() == null) {
return;
}
//get the measurements bean so we can determine the form mode
if (arg0.getFacesContext().getExternalContext().getSessionMap()
.get("measurements") == null) {
return;
}
//ensure the bean is the expected data type, it should always be this type. I'm just paranoid ;)
if (!(arg0.getFacesContext().getExternalContext().getSessionMap()
.get("measurements") instanceof MeasurementsController)) {
return;
}
//get, convert and check the backing bean's mode. We only filter if the mode is COPY
if (((MeasurementsController) arg0.getFacesContext()
.getExternalContext().getSessionMap().get("measurements"))
.getMode() != FormMode.COPY) {
return;
}
//recursivly traverse the componenets and filter the ones who have the CSS class
traverseChildren(arg0.getFacesContext().getViewRoot().getChildren());
}
/**
* Traverse a List of UIComponenets and check the CSS. If it's the 'examfieldgrey' class
* and the component is a UIInput component, set the value to null.
* #param children a List of the componenets to filter on the form.
*/
private void traverseChildren(List<UIComponent> children) {
debugLevelCount++;
if (children == null || children.size() == 0) {
debugLevelCount--;
return;
}
for (UIComponent component : children) {
if (component instanceof UIInput) {
if (component.getAttributes() != null
&& component.getAttributes().get("styleClass") != null
&& component.getAttributes().get("styleClass")
.toString().contains("examfieldgrey")) {
((UIInput) component).setValue(null);
} else {
debugPrintAllow(component);
}
continue;
}
traverseChildren(component.getChildren());
}
debugLevelCount--;
}
Ignore the print functions, they don't do anything ;)
Thanks guys!
Edit
This is a copy operation so the backing bean has values in it after construction of the bean. The option of using the primefaces selector is great if I hit submit and the backing bean is not already populated. But I'm not sure if it will be able to actually clear out those values.
One other thing to note is that I am referencing values inside an instance of my form object. I don't know if that helps but it wasn't present in my original post.
There is a requirement to only submit values when the component has a certain CSS class.
If you happen to use PrimeFaces already or are open to use it, since the latest 3.3 version you can use the new #() selector syntax which accepts jQuery based CSS selectors in process and update attributes of PrimeFaces ajax components (which are equivalent to execute and render attributes of JSF standard <f:ajax> component).
For example
<p:commandButton ... process="#(.foo)" />
or
<p:ajax ... process="#(.foo)" />
will instruct JSF to process only the HTML input elements having classname of foo.
Now the CSSclass is switching on the front end, but this change is not being saved. The phase listener is getting the old class.
That's because you didn't keep JSF component tree in the server side in sync with the HTML DOM tree in the client side. You're making changes in the client side only without notifying JSF about this. CSS classes are not been sent as a request parameter to the server side, only the HTML form input values are. You basically need to change the CSS classes by JSF instead of by JS/jQuery so that the change is also reflected in the JSF component tree.
Implementing this is however not exactly trivial and potentially wasteful. Easiest is thus to use PrimeFaces with its #() selector support. This selector is evaluated in the client side and converted to a string of JSF-understandable component client IDs matching the selector. This thus takes client side changes fully into account.
I was able to get this one solved by creating a map of boolean values for each field on the form with string keys that are the ids of the fields. Each value represented weather or not to copy the field. I update this value using ajax on blur. And I set the CSS class to be based on the boolean value in the map for that field.
Rendering didn't work out so well. Originally I was doing this all on focus but it quickly became apparent that attempting to rendering a textbox on focus would actually lose focus to the textbox. So, on focus I just call a quick js function to switch the class as I had been doing originally.
Since the css class is chosen based on the map on the front end, it gets updated before the phase listener is called and the components get filtered properly.
Thanks for the help BalusC!
This would seem to be very simple, but it's not working for me. I desparately need to know how to override the "Text" property of a server control I created, which inherits from "Label". When the control is dropped into an ASP Web form, I want the text property to already be set to a certain value. I tried:
[Browsable(true), Bindable(true), Category("Behavior"), Localizable(true)]
[DefaultValue("00:00:00")]
public override string Text{get; set;}
But it doesnt work; the "Text" property shows up blank - and when I try to edit it, I can change it to anything except the value specified in the "DefaultValue" attrib. This property is supposed to be overridable.
I also need to be able to set the "ID" property so it's set to a specific value when dropped on the form. Is this possible?
Any suggestions would be greatly appreciated!
For this you can use the ToolBoxDataAttribute:
Specifies the default tag generated for a custom control when it is
dragged from a toolbox in a tool such as Microsoft Visual Studio.
By default, the visual designer of a tool such as Visual Studio,
creates an empty tag. This is a tag representing a control in its
default state, when the control is dropped from the toolbox of a
visual designer onto the design surface. To specify initial default
values, a control can make use of this attribute. You can use this
attribute to customize the initial HTML content that is placed in the
designer when the control is dragged from the toolbox onto the form.
It would look something like this for your control:
[ToolBoxData("<{0}:TimeLabel ID='TL1' Text='00:00:00' runat='server' />")]
public class TimeLabel : System.Web.UI.WebControls.Label
{
[DefaultValue("00:00:00")]
public override string Text
{
get { return ViewState["Text"] != null ? (string)ViewState["Text"] : "00:00:00"; }
set { ViewState["Text"] = value; }
}
}
The DefaultValue attribute is intended to display a default value in Properties Tab.
So when you launch website without specify a value for your Text property .net uses this one.
IMHO you have not chance to do that. Sorry!
As my title says, I have a set property crash problem.
Here's the scenario:
I have created a simple custom ASP.Net server control that generates some text.
I wanted to give design-time property for that text so its style can be accessed by developers from the properties window.
All the properties in the properties window are working except the ones with the type System.Web.UI.WebControls.Style that I have created.
Here is my property:
[Bindable(true)]
[Category("Appearance")]
[Description("The style for the header")]
[Localizable(true)]
public Style HeaderTextStyle
{
get
{
Style s = (Style)(ViewState["HeaderTextStyle"] == null ? Styles.defaultHeaderStyle : ViewState["HeaderTextStyle"]);
return s;
}
set
{
ViewState["HeaderTextStyle"] = value;
}
}
Oh and Styles.defaultHeaderStyle is just a property from an internal class that returns a new Style.
Let me point that the hanging/crashing occurs only when I CHANGE the property, so it cannot be from the getter.
I won't paste my render control because the error occurs even when I'm not rendering anything.
What is it that causes this?
Thank you.
I found the answer to my problem.
You see, the Style class is a property that has sub-properties and it is called a complex property. Complex properties ( a property that has subproperties) need custom state management to use view state. The Style class need design-time attributes to enable persistence within the control's tags. So what I wrote in my original post will not work.
For complete explanation visit: Server Control Properties Example from MSDN
I managed to implement it using that example. I hope this will be useful to others out there.
Hi I have some controls on an asp.net modal which I show manually via code behind. Now I am trying to attach a selector on one of the controls inside pageLoad(), problem being is that the modal container is initially set to visible=false.
I tried checking for length but it still throws exception
if ($('#<%= myControl.ClientId %>').length > 0)
{
$('#<%= myControl.ClientID %>').click(function() {
// Do work
});
}
Compiler Error Message: CS0103: The name 'myControl' does not exist in the current context
A few things here, the first/main issue is that myControl isn't defined in the current scope, wherever you are in ASP.Net, that's entirely a .Net side problem.
For the Script, there are more issues, .ClientID, not .ClientId. Also, there's no need to check for it's existence, you can just do:
$('#<%=myControl.ClientID%>').click(function(){
// Do work
});
...if the control isn't there, it just won't find/bind anything. There's also an easier way to go about it in ASP.Net, if there's a unique class you can give it, just give add that class, e.g. CssClass="MyClass", then use that as your selector; like this:
$('.MyClass').click(function(){
// Do work
});
This allows you to put the script in an external file instead of the page as well, another benefit to the user.
Ok, please understand the architecture here first.
OurMasterPage.aspx has user control Header.ascx
Header.ascx has a user control in it called LandingPageTopNav
LandingPageTopNav.ascx has a public property named "LandingPage" that is there to be able to set by the user using this control.
And I have a Third.aspx page in which I need to set the LandingPageTopNav property to a LandingPage object
The problem is that I can't get this to work in my ThirdPage.aspx.cs:
Master.LandingPageTopNav.LandingPage = this.landingPage;
Master.LandingPageTopNav.Visible = true;
And that is, I can't get the first line to work where I'm trying to reference the LandingPage property. The second line is fine. My Third.aspx definitely can reference my master page objects otherwise from code-behind.
I'd venture to guess that the LandingPageTopNav property of OurMasterPage doesn't return a value typed as LandingPageTopNav. It probably returns the correct control typed as something more generic (e.g. Control); which is why setting the Visible property works but not the LandingPage property.