Dynamic binding of jsf component to html on client side?

Hi,
I am developing a CRUD JSF page, which would allow user to create (add) rows of data (or delete/cancel the data added) without server hit. I am using some Javascript that would allow to create/delete inputs (right now simple html input text component) all on client side. However, I dont know how do I bind this data to JSF's inputText component. Also I would need to bind this data to an ArrayList of String. I am working on IRAD 7, so I guess that limits some of the open source JSF library, if they are available out there. I would appreciate any help.
THanks.

I think the standard JSF solution would be not to do the create/delete of inputs on the client side, but to do it on the server side.
If that is not your cup of tea, I think that the standard components will not be sufficient. So you are looking at either not binding the inputs to a component and just getting the values via the request parameters or creating a custom component capable of dealing with this.

Similar Messages

  • JSF component inside HTML table -- not rendering properly

    I have a HTML table like the one below. In one of those columns (td) I have a JSF component. When I run the app, the JSF component (even if its a simple inputText or panelGrid or panelGroup) is not getting inside the td. Instead, it forms a seperate table after this td.
    Code I have:
    <table border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td>... ..MULTIPLE Td's here - Deleted for simplicity </td>
    <td class="topNav">
    Blog Directory
    </td>
    <td>
    <img src="./images/top_button_right.gif"/>
    </td>
    <td class="topNav">
    <f:panelGroup>
    <h:inputText value="Username"/>
    <h:inputSecret value="Password"/>
    </f:panelGroup>
    </td>
    </tr>
    </tbody>
    </table>
    What I expected:
    username, passwd field inside the top level HTML table.
    What comes: (as a result of running thsi JSF page )
    <table> -- Original table
    <td> </td> -- -TD that had the inputText - comes empty here
    </table>
    <table>
    <tbody>
    <tr>
    <td><input type="text" name="_id1:header:EasyHeader:_id4" value="Username" /><input type="password" name="_id1:header:EasyHeader:_id5" value="" /></td>
    </tr>
    <tr>
    <td><table>
    I am a newbie to JSF & due to the complexity of the layout & page, I m unable to get rid of the HTML tags totally.
    Thanks in advance.
    Ganesh

    Found the solution to the problem.
    wrapped the entire HTML page till the JSF component ( panelGrid) under <f:verbatim>.
    something like this
    <f:verbatim>
    <table>
    <tr> <td>...</td>
    <td>
    </f:verbatim>
    <h:panelGrid> ... </h:panelGrid>
    <f:verbatim>
    </td>
    </table>
    </f:verbatim>

  • XSL Fragment into HTML via Client-Side Transform

    I am designing a site for a school. I searched and found the
    post here from July 25, and I have also read the Dreamweaver
    help file till I'm blue in the face. They talk all around the
    answer but never definitively say if it's possible to do this.
    Dreamweaver help mentions:
    -- Workflow for performting client-side xsl transformations
    Do one of the following:
    In your Dreamweaver site, create an entire XSLT page. See
    Creating entire XSLT pages.
    Convert an existing HTML page to an entire XSLT page. See
    Converting HTML pages to XSLT pages.
    All the online tutorials show server-side transforms but I'm
    not skilled in that...nor do I know if the hosting entity will
    provide that level of access to their .NET server.
    ---- ok. that's the background of the situation. Now to my
    problem. ---
    We plan to have two mutually exclusive areas on the home
    page, such as news & events, that will be updated by a single
    school employee. The plan is to create two XML text files that one
    teacher can update.
    The XMLfiles will be manually uploaded to the web site and
    the home page will read that data into properly formatted
    information on the home page. I would greatly prefer to keep the
    entire process as a client-side procedure.
    I have created and linked XSL fragments to the XML data.
    If I try to copy and paste code from the XSL fragment into
    the index HTML page, I get nothing.
    Success comes only after converting the home page into an
    XSLT 1.0 file using Dreamweaver and copying and pasting the code
    fromt he XSL file into the newly created XSLT file.
    Hence my questions:
    1 Can I bring these XSL fragments into an HTML home page or
    do I have to convert it to XSLT?
    2. If I must convert the HTML file to an XSLT file, can
    people still type the website address in as www dot site dot com
    and the XSLT file will open without anyone knowing the difference?
    3. Can I even do this with a client-side transform?
    4. Is it possible for one page to reference two separate XSL
    fragments pointing to the two separate respective XML files?
    Thank you very much for your help.

    Hi Eric,
    these are the cache control headers of the request that serves the XSLT:
    GET http://www.carsten-leue.de/test/iframe_xslt/xslt.php HTTP/1.1
    Accept: */*
    Referer: http://www.carsten-leue.de/test/iframe_xslt/xslt.php
    Accept-Encoding: gzip, deflate
    User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
    Host: www.carsten-leue.de
    DNT: 1
    Connection: Keep-Alive
    There does not seem to be a header involved that prevents caching.
    You mention the "legacy ActiveX" control. In which sense is this control involved in the usecase? In my scenario I am pointing the browser to the XML document that has an associated stylesheet and the browser automatically executes the transform.
    I am not explicitly triggering the transform via some script in the page.
    Does the ActiveX control still play a role in this scenario?
    Carsten

  • JSF component to create an html table-like display

    Jdev 11.1.1.4
    I would like to know what is the preferred jsf component to create a display as an HTML table.
    My display needs to have a "column-table-header" and "row table header". It is composed of several rows and columns. In every cell I need to insert a different inputText mapped to different VO attributes. I have a lot of VO attributes.....(one per cell). Something as an MS-Excel crosstab table.
    I'm currently using an actual html table but I'm having some problems when the contents are adjusted inside a panel box (sometimes the right side of the table gets out of the panel box). I'm also having trouble with toolltip help text (shortdesc property) that sometimes doesn't display exactly where the input fileds are located and the shadow of this tooltip apears incorrectly overlapped with its content (in fact the tooltip apperars in one place and it shadow in a different place of the screen as a grey rectangle.
    I don't know if all this strange behaviours could be caused because of the use of html tables.

    Hi,
    I don't know if all this strange behaviours could be caused because of the use of html tables.quote from timo
    Using html is not encouraged in ADF. Try the Trinidad take component. trh:tableLayout is wrapper around html tables, you can use it in adf without harm,,
    try using trinidad table layout instead of core html.
    Regards,
    Edited by: Santosh Vaza on Jul 30, 2012 12:33 PM

  • How to load a class dynamically (via reflection) in a jsf-component

    Hi all,
    I am writing my own jsf component and I would like to do it generically. Therefore I have an attribute, where the developer can pass a fully qualified classname, which I want to use to instantiate. But I have a Problem with the classloaders, everytime I get a ClassNotFound-Exception during debugging.
    Does anybody know how it is possible, to to get the most parent classloader?
    Currently I am even not able to load a class, which is in the same package like all other compontent-classes.
    Thank you very much in advance
    Thomas

    Within web applications, I believe it is recommended to use Thread.getContextClassLoader(). Keep in mind that web applications require different classloader semantics than regular Java applications. The class loader which gets resources from the WAR is favored over others, even when this violates the normal class loading conventions.

  • Dynamic datatable in custom component

    hi all,
    i'm working on a custom jsf component and this component will create a datatable dynamically. (you can see component details from http://www.jroller.com/page/hasant?entry=creating_dynamic_datatable_inside_of AND http://www.jroller.com/page/hasant?entry=jsf_question_for_community_what)
    the question is; when i want to add a selection column(dynamically), how can i handle its selected values?
    i mean, if i have created this datatable in a page with designer, i would bind an Integer[] to that selection column's checkboxes. But i have to add this selection column dynamically from my component. So, how can i GET and SET the selection columns values. Since this is a custom component, there is no backing bean for value binding to this component.
    when i resolve the request param string to get the selected rows, it's working(=i can see the selected rows somehow..) but, i can not set that values again while encoding that column after a submit.
    here is my row selection column encoding code;
         private void addSelectionColumnToTable(FacesContext context, UIData table) {
              UIColumn column = new UIColumn();
              HtmlInputRowSelect rowSelect = new HtmlInputRowSelect();
              rowSelect.setId("rowSelect1");
              rowSelect.setStyleClass("inputRowSelect");
              rowSelect.setValue(m_selectedRows);
              column.getChildren().add(rowSelect);
              table.getChildren().add(column);
         }In the code above, rowSelect.setValue(m_selectedRows); part not effecting anyhing. m_selectedRows variable includes row numbers(in an Integer array) that i want to see as selected.
    any solution/recommendation?

    Well if you are still interested in using a text component
    instead of a Button the way you would go about this is using
    textWidth. Here's how I've done it before using a text / label
    whatever you want that shows text.
    // => Set our text we got from database
    myText.text = "This is the text I got from the DB";
    // => Validate it so that way we make sure we get right
    numbers
    myText.validateNow();
    // => Find out how wide our text really is.
    var textWidth:Number = myText.textWidth
    // => Reset the width of our text component and add 20 for
    a little buffer
    myText.width = textWidth + 20;
    Now my suggestion is if your going to be dynamically creating
    these on the fly from a database call you throw it into a method /
    class and have that do all the work for you so all you have to do
    is pass the text to it and it resizes itself based on the example
    above.

  • Dynamically binding VO Parameter from Context Switcher

    Hi guys,
    I am using ADF JSF and BC, and I have a situation here which is:
    1) My JSF page has a panel page component, inside it is a navigable form referencing a View Object.
    2) In the contextSwitcher facet of this PanelPage, i have a SelectInputText which points to a "Globals" VO, having only one row ever (similar to SRDemo)
    3) When the LOV returns value to this field, i must re-bind the navigable form VO Query to this value, and the form must show the first record of the NEW rowset.
    The solution i am writing uses a ValueChangeListener on the SelectInputText, which runs an Application Module method that gets the value from the Globals VO and re-runs the query using "vo.setWhereClause" and "vo.executeQuery".
    However, even though i debug the application and see the query being executed, the form shows strange behavior, as the page then re-runs the query, but swaps the first row of the new rowset with the row currently displayed. For example, suppose that i am seeing row "X" on the page and select a value from the LOV. The new execution fetches rows "Y" and "Z" from DB. When i scroll the page, i see that the first record is "X" again, followed by "Z"!
    Do you have any idea of what could be the problem? Maybe a form clearance issue with ADF? Or i shouldn't be using dynamic binding with UPDATEABLE fields on the page, only when i use READ-ONLY fields?
    Thanks a lot, and regards!
    Thiago

    Thiago,
    you are not showing any of your code and I can only assume that this is a coding problem of yours.
    Frank

  • Dynamic sizing of a component to fit the content

    Hi All,
    How can I make my component so that it will be dynamically sized to fit the content height?  I would like to create a component that will have a variable height.  It has a serious of user input controls.  Depending on the answers given, more input from the user may be necessary--specifically, they will have to provide an explanation in a textbox.
    So, my thinking is that I don't want to display the textbox unless they answer "yes" to any questions that require additional explanation.  If they do, then I want display the TextArea control along with instructions to enter an additional explanation here.
    However, when I do that, it will cause my component's height to grow.  I don't want to reserve space for that textbox in the component's dimensions--I would prefer it simply grow (pushing anything below it further down) if and when the textbox appears.
    How would I go about doing this?
      -Josh

    I think the standard JSF solution would be not to do the create/delete of inputs on the client side, but to do it on the server side.
    If that is not your cup of tea, I think that the standard components will not be sufficient. So you are looking at either not binding the inputs to a component and just getting the values via the request parameters or creating a custom component capable of dealing with this.

  • GetStyle() of JSF component before render

    Hey guys,
    I'm hoping this is an easy one, here goes...
    For one reason or another, I need to modify the CSS of certain components in a JSF page before it is rendered to the browser. The JSF pages are going to be laid out in Netbeans 6.0 (beta right now) using mostly Woodstock components and will have the 'style' attribute filled in for each component. However, like I said, I want to modify the CSS style value of some components prior to rendering.
    Looking through the Javadocs for Woodstock (javadocs are included with plugin) I see that many components do indeed give you access to this attribute ('style'), com.sun.webui.jsf.component.Field.getStyle() returns "CSS style(s) to be applied to the outermost HTML element when this component is rendered" for example.
    I figured this would be straight forward enough and attempted to retrieve the style using the prerender() method. Unfortunately, getStyle() returned null. After playing around with it for a while, it appears as though the components do not get these properties set (by the Netbeans attribute) until DURING the renderResponse phase. I say this because I tried setStyle() during prerender() and my changes were ignored. I then went back to Netbeans and removed my 'suggested style', now my setStyle() call during prerender() holds showing that somewhere in the renderResponse phase (after prerender()) the style is being set if one is given.
    Obviously making any changes after prerender() [like in afterRenderResponse()] will not cut it.
    To sum up:
    Even as late in the lifecycle as prerender(), the CSS style attribute of a Woodstock component is not yet set (getStyle() returns null and setStyle() ends up being overwritten). Any suggestions on how to modify the style?
    Thanks in advance (and I hope this is an applicable forum),
    Sean

    Solved:
    Once I wrapped my head around the problem I found a much more elegant solution.
    What I wanted to do was relatively position page fragments but was having trouble as the Netbeans IDE positions components within fragments absolutely. To make my page dynamic I was taking the style="position: absolute" attribute out of the <div> tag that was holding the <jsp:directive-include>. The components within the fragments were then being positioned absolutely on the resulting page, ending up strewn all over the place. This led me off on the tangent to reposition the components when the page was called (original post above).
    The weekend did me well I suppose. I came up with the bright idea to CHANGE the style attribute on the <div> tag rather than remove it. Making the <div> component "position: relative" passed its positioning down the the containing components and now my fragments are displayed correctly while being dynamically repositionable.
    Hope this helps anyone coming across the same problem.

  • Getting dynamic id of a component bound to a datatable, using javascript

    Hi....
    I am using Sun Studio Creator to develop a small application.
    I have a problem in getting the dynamic id of a component in Javascript, which is bound to a column of a datatable.
    In the jsp page, I have a datatable and it is bound to a list in the backing bean.The datatable has 2 columns.One column is a checkbox and the other column is a dropdownlist. The values of the checkbox and the dropdown are taken from the list for a button click.The list data are taken from database.Now, I want to enable/disable the dropdownlist according to the check box value(the user checks/unchecks) and I want to do it on the change/onclick of the checkbox.That is, I want to get the dynamic id of the check box in a Javascript. I tried using the j4j idProxy as well. But that also failed to help me.
    In Javascript,
    function changeCheckboxValue() {
    var i = document.getElementById('checkboxStatus').title;
    alert(i);
    This alert message is "undefined".
    In jsp,
    <h:column binding="#{AssignVals.column1}" id="column1">
    <h:selectBooleanCheckbox binding="#{AssignVals.checkbox1}" id="checkbox1"
    onchange="changeCheckboxValue()" value="#{currentRow['status']}">
    <j4j:idProxy id="checkboxStatus" />
    </h:selectBooleanCheckbox>
    </h:column>
    How can I get the dynamic id of the check box in the javascript?
    I don't want to do this in the backing bean, as it causes more server trips.
    Thanks & regards,
    Menaka.

    What about using this in your js script?
    onchange="changeCheckboxValue(this)"
    Names generated by JSF implementation have the format:
    <form>:<component>
    For data table is like:
    <form>:<datatable>:<row #>:<component>
    For example:
    form1:dataTable1:1:outputText1
    You could parse the name of "this" and found what row and form the other component name, for example:
    name = "form1:dataTable1:" + row + outputText1;
    this.form[name].text = "hello";
    Regards.

  • Dynamic binding of items in sap.m.Table using XML views

    Dear SAPUI5 guru's,
    Let's start by saying I'm an ABAP developer who's exploring SAPUI5, so I'm still a rookie at the time of writing. I challenged myself by developing a simple UI5 app that shows information about my colleagues like name, a pic, address data and their skills. The app uses the sap.m library and most of the views are XML based which I prefer.
    The data is stored on an ABAP system and exposed via a gateway service. This service has 2 entities: Employee and Skill. Each employee can have 0..n skills and association/navigation between these 2 entities is set up correctly in the service. The data of this service is fetched from within the app using a sap.ui.model.odata.ODataModel model.
    The app uses the splitApp control which shows the list of employees on the left side (master view). If a user taps an employee, the corresponding details of the employee entity are shown on the right (detail view).
    Up till here everything is fine but I've been struggling with my latest requirement which is: show the skills of the selected employee in a separate XML view when the user performs an action (for the time being, I just created a button on the detail view to perform the action). After some hours I actually got it working but I doubt if my solution is the right way to go. And that's why I'm asking for your opinion here.
    Let's explain how I got things working. First of all I created a new XML view called 'Skills'. The content on this view is currently just a Table with 2 columns:
    <core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
      controllerName="com.pyramid.Skills" xmlns:html="http://www.w3.org/1999/xhtml">
      <Page title="Skills"
           showNavButton="true"
           navButtonPress="handleNavButtonPress">
      <content>
      <Table
       id="skillsTable">
      <columns>
      <Column>
      <Label text="Name"/>
      </Column>
      <Column>
      <Label text="Rating"/>
      </Column>
      </columns>
      </Table>
      </content>
      </Page>
    </core:View>
    The button on the Detail view calls function showSkills:
    showSkills: function(evt) {
      var context = evt.getSource().getBindingContext();
      this.nav.to("Skills", context);
      var skillsController = this.nav.getView().app.getPage("Skills").getController();
      skillsController.updateTableBinding();
    Within 'this.nav.to("Skills", context);' I add the Skills view to the splitApp and set its bindingContext to the current binding context (e.g. "EmployeeSet('000001')"). Then I call function updateTableBinding in the controller of the Skills view which dynamically binds the items in the table based on the selected employee. So, when the ID of the selected employee is '000001', the path of the table's item binding should be "/EmployeeSet('000001')/Skills"
    updateTableBinding: function(){
      var oTemplate = new sap.m.ColumnListItem(
      {cells: [
              new sap.m.Text({text : "{Name}"}),
              new sap.m.Text({text : "{Rating}"})
      var oView = this.getView();
      var oTable = oView.byId("skillsTable");
      var oContext = oView.getBindingContext();
      var path = oContext.sPath + "/Skills";
      oTable.bindItems(path, oTemplate);
    Allthough it works fine, this is where I have my first doubt. Is this the correct way to bind the items? I tried to change the context that is passed to this.nav.to and wanted it to 'drill-down' one level, from Employee to Skills, but I couldn't manage to do that.
    I also tried to bind using the items aggregation of the table within the XML declaration (<Table id="skillsTable" items="{/EmployeeSet('000001')/Skills}">). This works fine if I hard-code the employee ID but off course this ID needs to be dynamic.
    Any better suggestions?
    The second doubt is about the template parameter passed to the bindItems method. This template is declared in the controller via javascript. But I'm using XML views! So why should I declare any content in javascript?? I tried to declare the template in the XML view itself by adding an items tag with a ColumnListItem that has an ID:
                    <items>
                        <ColumnListItem
                        id="defaultItem">
                        <cells>
                            <Text text="{Name}"/>
                            </cells>
                            <cells>
                            <Text text="{Rating}"/>
                            </cells>
                        </ColumnListItem>
                    </items>
    Then, in the updateTableBinding function, I fetched this control (by ID), and passed it as the template parameter to the bindItems method. In this case the table shows a few lines but they don't contain any data and their height is only like 1 mm! Does anyone know where this strange behaviour comes from or what I'm doing wrong?
    I hope I explained my doubts clearly enough. If not, let me know which additional info is required.
    Looking forward to your opinions/suggestions,
    Rudy Clement.

    Hi everybody,
    I found this post by searching for a dynamic binding for well acutally not the same situation but it's similar to it. I'm trying to do the following. I'm having a list where you can create an order. On the bottom of the page you'll find a button with which you're able to create another order. All the fields are set to the same data binding ... so the problem is if you've filled in the values for the first order and you'll press the button you'll get the same values in the second order. Is it possible to generate a dynamic binding?
    I'm going to post you a short code of what I'm meaning:
    <Input type="Text" value="{path: 'MyModel>/Order/0/Field1'}" id="field1">
         <layoutData>
                    <l:GridData span="L11 M7 S3"></l:GridData>
               </layoutData>
    </Input>
    As you can see I need to set the point of "0" to a dynamic number. Is there any possibility to reach this???
    Hope you can help
    Greetings
    Stef

  • How to add properties to a custom JSF component?

    Hello, everybody!
    I've just developed my first custom JSF component. It's a data pager and it is working pretty well. But now I want to be able to use some of it attributes in my backing beans at runtime. I mean, I want to bind it to component in the JSF page. It already has a binding attribute in the tld file, but I want to be able to accesss two values that the renderer of my custom component calculate inside it, which would relieve me from calculating these values manually in the backing beans. So, I would like to know how to make these values external to the component.
    By now this is my custom pager class:
    import javax.faces.component.UICommand;
    public class UIPaginadorDados extends UICommand
    }You can see that it has no logic because all the logic is in the renderer class:
    import javax.faces.render.Renderer;
    public class PaginadorDadosRenderer extends Renderer
        // logic here
    }As I said I want to be able to do the following in my backing beans:
    private UIPaginadorDados pager = new UIPaginadorDados();
    // and later...
    pager.getCurrentPage();
    pager.getPageCount();In the JSF page:
    // I already can do this, because I have a binding attribute
    <urca:paginadorDados binding="#{backingBean.pager}" />I suppose that I'll have to create the properties getCurrentPage() and getPageCount() in the component class, UIPaginadorDados, but I don't know how to get the values to the properties from the renderer class. I don't even know if this is how I should do it.
    So I would appreciate a lot your help about this subject.
    Thank you.
    Marcos

    Marcos_AntonioPS wrote:
    RaymondDeCampo wrote:
    I neglected to mention: do not forget to implement the methods in StateHolder to preserve the properties you added to your component.Hello, Raymond. Could you elaborate a little more on that? If you could give a short example, it would be helpful.
    MarcosNo problem. I have already found out how.
    Thank you very much, Raymond.
    Marcos

  • How to make Javascript access standard JSF component

    Hello all,
    I'm in need of a proper javascript code that access standard jsf component.
    Like we do for html tags;
    if( el.tagName.toLowerCase() != 'select')
    I need to do the same thing for a jsf tag i.e; <h:selectOneMenu>. How to make javascript access <h:selectOneMenu> like it does with <select> tag ? Please let me know asap. Extremely sorry if the question is kind of stupid....cause I'm a beginner for JSF environment.
    Any sort of help, suggestion or advice would highly be appreciated.
    Thanks in advance.

    Ummmm, I may be off the beaten path, but by the time your javascript is called the h:selectOneMenu would be a select tag within the dom. You should be able to reference that tag as you normally would.

  • Can i use one JSF component's value for other component in the same page.

    Can i use one JSF component's value for other component in the same page.
    For example
    I have a <h:selectBooleanCheckbox id="myChk"> in my jsf page, i want to access its value for another component like:
    <h:commandButton disabled="#{myChk.checked}" action="myAction" value="myValue" />
    ** "myChk.checked" >> I am just asuming "checked" property is available...

    Bind the checkbox to a UIInput myChk property. Then you can reference this property from the page, e.g.
    <h:selectBooleanCheckbox binding="#{myBean.myChk}" onchange="submit();" />
    <h:commandButton disabled="#{myBean.myChk.value}" action="myAction" value="myValue" />

  • Dynamically Binding to Dynamically Create View

    I tried to copy the code of “Dynamically Binding to Dynamically Create View object” but something is wrong because when I am debbuging it doesn’t work after the sentence vo.executeQuery();
    I suspect that the reason could be how I created the view..
    Your code is running well but not mine.
    It shows this error
    •     JBO-29000: Unexpected exception caught: java.lang.NullPointerException, msg=null
    •     null
    I don’t know why because the code is the same.
    How did you create the objet view ?
    Could you help me?

    I'd recommend checking out this article on Debugging ADF Applications:
    http://www.oracle.com/technology/products/jdev/tips/muench/debugger/index.html
    and then reporting here the full stack trace using the tips described in that article.

Maybe you are looking for