GWT Wrap Hyperlink - ajax

The GWT Class Anchor has the method Anchor.wrap() which allows me to wrap an already existing HTML element. The issue is Anchor doesn't keep track of AJAX history and as such I'm using Hyperlink class, but this one doesn't have the wrap() method.
Thus, what is the best way using gwt to make an existing html <a href> an Hyperlink if it doesn't have wrap()?
Please don't tell me implement the history behavior in Anchor click.

Hyperlink has a constructor that takes an Element as parameter. The catch is that this constructor is protected. A workaround would be to create a subclass to access the protected constructor, e.g.:
class MyHyperlink extends Hyperlink {
public MyHyperlink(Element element) {
super(element);
}
}
I did not actually try this, it's just an idea.

Related

Processing child Control Events in Windows Forms Components in C++

I am a noob to Windows Forms so this is likely a remedial question. I have a child component with a button and a text field. I want to use multiple instances of these in a parent component or form. At runtime, when the user clicks one of the buttons, I want the parent to get the event to decide what to do with the associated text.
Coming from the long lost world of Borland C++ Builder, during design time, I would simply double-click on the buttons and handlers in the parent would be created which I could just elaborate the code. With Windows Forms, the component controls are not clickable (at design time) from the parent and are "frozen". It is not obvious to me how to pass any child button clicks to a parent. I've tried things like changing the button modifier from private to public but that doesn't help. How is this best accomplished.
Note I am using C++ as I am sharing header file definitions with an associated C++ embedded app.
-Bob
UPDATE:
My apologies, I thought I was still in my C# search :(
This is slightly complicated if you actually want to bubble up an event, or very easy if you use methods.
Methods:
In your child container, add a constructor or property that takes in and stores the parent. Then in the button handler, call this.Parent.ButtonClicked(this); and of course in the parent, add a ButtonClicked(ChildType child) method. That should get you there that way.
Custom Event:
To use events, you need to add a few things. Firstly, add a custom EventArgs class as such:
class ChildClickedEventArgs : EventArgs
{
// include a ctor and property to store and retrieve the child instance.
}
Then add a public delegate for it:
public delegate void ChildClickedEventHandler(object sender, ChildClickedEventArgs e);
Then to your child class, add a ButtonClicked event:
public event ChildClickedEventHandler ChildClicked;
And finally, a helper method to raise it:
private OnButtonClicked()
{
if (this.ChildClicked != null)
{
this.ChildClicked(this, new ChildClickedEventArgs(this));
}
}
Then when you add the child class to the parent, add an event handler for each, and you can handle your custom event for your custom control.
Alternatively:
If you can expose the Button in your child class, simply do the above but register it to this.child.Button.Clicked, saving adding the event handler yourself.

Update template inside a view rendered from another controller

I am looking for the way to refresh a template inside a view rendered from another controller than the template's controller, I mean:
I got two controllers AdminController & UserController. And two gsps /admin/listUsers & /user/_searchResult.
Then a want to render view listUsers who have inside the template _searchResult and all right.
Now, i want to refresh the template _searchResult, but cant find how. I tryed calling render(view:"/admin/listUsers", template:"/user/_searchResult", model:[searchResult:result])
AdminController.groovy
#Secured(['ROLE_ADMIN'])
def listUsers(){
//...
}
UserController.groovy
#Secured(['ROLE_ADMIN'])
def search(){
//search users for the givven params and send result by chain if there's an action or update a template if it's needed
//in my case this method need to update the template _searchResult
}
#Secured(['ROLE_ADMIN'])
def searchResult(){
//...
[searchResult:result]
}
listUsers.gsp
//...
<formRemote name="searchForm" url="[action:"search", controller:"user"]">
//Some fields for the search
//I need to place here some hidden inputs to send which
//template i want to update or action to redirect
</formRemote>
<g:render template="/user/_searchResult"/>
//...
_searchResult.gsp
//Just itterate and print the search result in a table
I hope I have explained the problem correctly, thanks!
I don't think I entirely understand your question, but I think the source of your confusion is that the way you are naming things doesn't follow regular conventions and you're not using the right tools for the job. Let me explain...
The methods on Controllers are called Actions. They send some data (the Model) to a View to be rendered into HTML. Views can be composed from smaller, reusable fragments called Templates. (sorry if I sound like I'm being condescending here, but I'm just trying to make sure we're all on the same page).
Now, what you've called templateA is actually a View, not a Template. You're correct that templateA (your View) can call templateB to render some markup, but then having the templateB try to call a method on another Controller doesn't make sense. That's not how things flow.
If you have some logic that needs to be executed after you've sent your Model to the View, you want to use a Tag Library (http://grails.org/doc/latest/guide/theWebLayer.html#taglibs).
To summarise, here's a quick recap.
A request should only call one Action, which sends the model to only one view.
If you need to reuse logic between Controllers, move that code to a Service.
If you need to reuse markup between Views, move that markup to a Template.
If you have logic that you want to have executed after you've sent the Model to the View, use a Tag Library.
Hopefully this will point you in the right direction.
--- UPDATE ---
OK, with the real code I can see better what you're trying to achieve. Firstly, as you're using the <g:formRemote> tag, you should have a good read of the docs at http://grails.org/doc/latest/ref/Tags/formRemote.html to understand what it does.
What you will have here is 2 separate requests. The first will be a regular page load by your browser, which is handled by the listUsers() action. Once the page is then finished loading, the user will enter a search term and hit the submit button. This will fire off a second ajax request, which will be handled by the search() action. This action could use the _searchResult.gsp template to render a HTML table to display the search results. When the browser get this, it will insert it into the DOM where you've told it to put it using the "update" attribute of the <g:formRemote> tag.
The important thing here is that from the server's perspective, these are 2 separate requests that are completely independent. They both first call an action, then send a model (a Map containing some data) to a view, which renders/merges the data with HTML and sends it back to the browser.
The difference between the 2 is that the first is a complete page load by the browser, whereas for the second request, the browser only loads a small chunk of HTML (the search results table) and updates the page content without reloading it.
So your code would look more like this...
AdminController.groovy
#Secured(['ROLE_ADMIN'])
def listUsers() {
render(view:"/admin/listUsers")
}
listUsers.gsp
<g:formRemote name="searchForm" update="insertSearchResultsHere"
url="[controller: 'user', action:'search']">
<input name="searchTerm" type="text" />
</g:formRemote>
<div id="insertSearchResultsHere"></div>
UserController.groovy
#Secured(['ROLE_ADMIN'])
def search() {
// use the search term to get a List<User>
render(template: "/user/searchResult", model: [users: users])
}
_searchResult.gsp
<table>
<g:each var="user" in="${users}">
%{-- Iterate through your search results --}%
</g:each>
</table>
I solved it by placing the attribute update and rendering the template alone:
gsp:
<formRemote name="searchForm" url="[action:"search", controller:"user"]" update="divToUpdate">
//Some fields for the search
</formRemote>
<div id="divToUpdate">
<g:render template="/user/_searchResult"/>
</div>
Controller:
def search(){
render(template:"/user/_searchResult", model:[searchResult:result])
}
When i asked this question, i was new on Grails community and i was confused with the use of remoteFunction and tags that use it like remoteForm. But i had this confusion because of i had not read the documentation. So in my case, the solution was search for documentation about how to use remote tags and render. Thanks to #AndrewW for show me the way.

AJAX Page Loader navigation bar

My site is:
http://econrespuestas.com.ar
And i'm having trouble with AJAX page loader integration. When you click on a link in "secondary-menu", it adds it the "current-menu-item" class, but it doesn't remove de "current-menu-item" class from the other ones.
I'm trying to do it with this code:
// highlight the current menu item
jQuery('secondary-menu li').each(function() {
jQuery('thiss').removeClass('current-menu-item');
});
jQuery(thiss).parents('li').addClass('current-menu-item');
but it isn't working. There must be something wrong with the removeClass selector. Could you help me?
Firstly, thiss doesn't exist (unless declared somewhere else). It must be this. In addition try something more like...
jQuery('.current-menu-item').removeClass('current-menu-item');
jQuery(this).parents('li').addClass('current-menu-item');
This is saying "Remove the class current-menu-item from any objects with the class current-menu-item, then add the class current-menu-item to the parent li of the clicked item"
In addition, make sure that in your CSS, .current-menu-item{...} appears after any styling for the non-currently selected item.
See Fiddle: http://jsfiddle.net/6hR9K/2/
Also, unless you have a specific conflict with using the $ sign in place of jQuery, I suggest doing exactly that.
$('.current-menu-item').removeClass('current-menu-item');
$(this).parents('li').addClass('current-menu-item');

How do I add ajax behavior to a dynamically created component in a backing bean?

In respose to Infragile's request in another thread, I am asking this as a separate question rather than a followup.
Here is the problem I am attempting to address:
I'm migrating from JSF1.2 to JSF2. Everything worked fine in JSF1.2.
I have rewritten a critical item to be a composite component which is basically a panel created in my backing bean by adding components in code.
In particular, I have h:inputText and h:selectOneMenu components that I create in code along with an "Apply" h:commandButton.
The "Apply" button has an action listener that checks for the values in the h:inputText and h:selectOneMenu components. All this works fine, but when I fetch the values in the h:inputText or h:selectOneMenu components I get the original values, not the new values that were entered by the user. Like I said, this worked fine in JSF1.2 (i got the new values), but not in JSF2 for some reason.
I have tried several things to get around this that haven't worked, so I figured I would add ajax behavior to the h:inputText and h:selectOneMenu items and when the values in these components change, I could call another backing bean listener for the ajax behavior to fetch the new values.
I am trying to add ajax behavior to a component I create in code (not bound to a page component). I can create the component with no problem. However, the problem that I am having is how to add the ajax behavior to the component.
Could someone post sample code to add an ajax behavior for a value change or blur event? Here is the code I use to create the component in code - how would I need to modify it to add the ajax behavior?
hpg = new HtmlPanelGrid();
children = hpg.getChildren();
children.clear();
....
input = new HtmlInputText();
....
children.add(input);
What code would I have to add to replace the "add ajax behavior here" line, and what would the arguement for the listener method be (arguement for the method to replace the ????? below)?
public void myAjaxListener(?????) { ...... {
I have been trying to get a handle on this for some time now. I feel that I am pretty close, but don't know the syntax I need. I can provide more information on how I am fetching the component Ids and searching for the values in my action listener if that will help.
Thanks
This is how you can add dynamically AjaxBehaviorListener to yor component:
...
HtmlInputText inpuText = new HtmlInputText();
AjaxBehavior blurBehavior = new AjaxBehavior();
blurBehavior.addAjaxBehaviorListener(new BlurListener());
blurBehavior.setTransient(true);
inputText.addClientBehavior("blur", blurBehavior)
...
public class BlurListener implements AjaxBehaviorListener {
public BlurListener() {
}
#Override
public void processAjaxBehavior(AjaxBehaviorEvent event) {
// do your job
HtmlInputText inputText = event.getComponent(); // your input text component
...
}
}
"blur" represents event when this listener will be triggered. Remember that JSF Component must support this event, otherwise it won't work.
(Here you can see under covers and how to build custom AJAX component http://weblogs.java.net/blog/driscoll/archive/2009/10/09/jsf-2-custom-java-components-and-ajax-behaviors?force=670 )
However in your case I think problem is that buttons ActionListener is triggered before actual component values are submited. You can solve it by moving your ActionListener logic to button action, by aformentioned AJAX, maybe by findinng actual values in UIComponents (HtmlInputText, UISelectOne), not sure but immediate attribute can also influence it.

create custom controls mvc3

Just starting to get the hang of MVC3 and want to start building out some custom controls that I can just drop into a view. Specifically I want to be able to drop in some html form controls that will automatically add some javascript for validation.
something like this is what I'd want:
#Html.VTextBox("MyTextBox","",new {#vType="PhoneNumber", #vMessage="You Must Enter a Phone Number" })
when the page is rendered, I'd want it to search for any custom elements I create then drop in the appropriate javascript to validate client side. I did something very similar to this with asp.net web forms for custom controls ie
<ucc:VTextBox ID="MyTextBox" runat="server" message="You must fill this in" />
just wondering if MVC3 offers the same extensibility. Any resources or advice you can provide would be greatly appreciated.
TIA
To start off with, you'll need to look into extension methods and more specifically, how to create extension methods for the HtmlHelper class so you could write code like the example you've shown above.
For the example you've shown above, you could write code like this:
public MvcHtmlString VTextBox(string name, object value, object htmlAttributes)
{
StringBuilder html = new StringBuilder();
// Build your html however you want
// Here's a simple example that doesn't
// take into account your validation needs
html.AppendFormat("input type=\"text\" name=\"{0}\" value=\"{1}\" />", name, value);
return MvcHtmlString(html.ToString());
}
Then in your view you can use the example above like so:
#Html.VTextBox("MyTextBox","",new {#vType="PhoneNumber", #vMessage="You Must Enter a Phone Number" })
NOTE: You'll need to import the namespace the extension method is in to your view. Simplest method, put a #using ExtensionMethodNamespace at the top of your view. You can make the namespace automatically imported to all your views by fiddling with the web.config (and maybe the Global.asax).
ADDENDUM: Please note RPM1984's comment below where he advises to use TagBuilder in place of StringBuilder which is sound advice since this is the exact scenario TagBuilder was designed for. He also mentions strong typing the helper to the model which is also great advice.

Resources