Scrolling through multiple horizontal cells in an xform

classic Classic list List threaded Threaded
12 messages Options
DL
Reply | Threaded
Open this post in threaded view
|

Scrolling through multiple horizontal cells in an xform

DL
I have an xform layout in design with multiple controls one below the other

i.e. a single column, multiple row grid.

With the exception that there is one row where I require to span multiple columns
to be flipped through with left or right navigation buttons .. as in a jQuery gallery.

Can I build this xform layout using Formbuilder?

Or do I have to customise the published xform post publication by adding in jQuery script?

...

See some examples of jQuery galleries here .. but I am scrolling text boxes instead of images.

http://vandelaydesign.com/blog/web-development/jquery-image-galleries/



Reply | Threaded
Open this post in threaded view
|

Re: Scrolling through multiple horizontal cells in an xform

Erik Bruchez
Administrator
The Form Builder grid only has row spans, not column spans. So I guess
yes, that means you will have to do something custom.

If it's just about spanning columns, you can modify the generated grid
to include a colspan attribute. But you mention navigation so I assume
it's more involved?

-Erik

On Wed, May 30, 2012 at 1:35 PM, DL <[hidden email]> wrote:

> I have an xform layout in design with multiple controls one below the other
>
> i.e. a single column, multiple row grid.
>
> With the exception that there is one row where I require to span multiple
> columns
> to be flipped through with left or right navigation buttons .. as in a
> jQuery gallery.
>
> Can I build this xform layout using Formbuilder?
>
> Or do I have to customise the published xform post publication by adding in
> jQuery script?
>
> ...
>
> See some examples of jQuery galleries here .. but I am scrolling text boxes
> instead of images.
>
> http://vandelaydesign.com/blog/web-development/jquery-image-galleries/
>
>
>
>
>
> --
> View this message in context: http://orbeon-forms-ops-users.24843.n4.nabble.com/Scrolling-through-multiple-horizontal-cells-in-an-xform-tp4655163.html
> Sent from the Orbeon Forms (ops-users) mailing list archive at Nabble.com.
>
>
> --
> You receive this message as a subscriber of the [hidden email] mailing list.
> To unsubscribe: mailto:[hidden email]
> For general help: mailto:[hidden email]?subject=help
> OW2 mailing lists service home page: http://www.ow2.org/wws
>


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws
DL
Reply | Threaded
Open this post in threaded view
|

Re: Scrolling through multiple horizontal cells in an xform

DL
If it's just about spanning columns, you can modify the generated grid
to include a colspan attribute. But you mention navigation so I assume
it's more involved?
Thanks for the advice.
I am building a hierarchy of xform submissions in eXist ..

At any time a single node will be viewed (one column span) for ratings to be applied.

but in a section beneath the fixed (parent) node I need to show children nodes
and there could be up to 8 or so sibling controls to navigate through.

At any node I also need to be able to traverse up and down the tree.

So I'll experiment with jQuery scripts in this section.

DL
Reply | Threaded
Open this post in threaded view
|

Re: Scrolling through multiple horizontal cells in an xform

DL
Just one basic question to allow me to customise the test form created in formbuilder  ..

I can go to "edit script" to see the xhtml code.

But how do I retrieve the entire application file structure from eXist?

I've read this http://wiki.orbeon.com/forms/doc/developer-guide/form-runner/persistence-api

which suggests

On eXist, form definitions for an app my-app and form my-form are stored in the /orbeon/fr/your-app/your-form/form collection. If you only want to migrate a subset of the forms, it is often easier to create a backup of the whole database, and then remove from the zip the form or data you don't want to migrate before you import it on the target database.
and this link takes me to the eXist-db website ..

but are there easier instructions for retrieving a test form application created by formbuilder
to allow the app to be dropped into apps folder?

DL
Reply | Threaded
Open this post in threaded view
|

Re: Scrolling through multiple horizontal cells in an xform

DL
This post was updated on .
I'm still playing with a form under development in formbuilder.

After testing in formbuilder I cut and pasted the formbuilder generated source code into a view.xhtml file inside a /my-app/ folder in the /resources/apps/ folder (with a page-flow.xml to accompany view.xhtml).

But when I try to run this new app (as in /orbeon/xforms-hello/) I get this error ..

Undeclared variable in a standalone expression: $form-resources


The xform worked o.k. in formbuilder .. so how can I troubleshoot this error?

==============================================

[Later Edit]

After posting I searched further and found this ..

http://orbeon-forms-ops-users.24843.n4.nabble.com/problem-with-orbeon-form-builder-td45206.html

"but as you noticed, one drawback is that you can't just take a form produced by Form Builder and run it outside of Form Runner".

So I guess I return to my earlier question above .. how to export the prototype xform files created by formbuilder so that I can place this in /orbeon/resources/apps/my-app/?

...

Incidentally I think I've found a jQuery way of panning through control elements in a grid if I can get into the formbuilder generated source code to edit.   I thought I could do this by placing in /resources/apps/ folder as a sandbox.
Reply | Threaded
Open this post in threaded view
|

Re: Re: Scrolling through multiple horizontal cells in an xform

Erik Bruchez
Administrator
> I can go to "edit script" to see the xhtml code.
>
> But how do I retrieve the entire application file structure from eXist?

> but are there easier instructions for retrieving a test form application
> created by formbuilder

Form Builder creates a filed called form.xhtml, along with attachments
if any. If you want to get everything, use the eXist client and do an
export, that's probably still the best way at this time.

If you just need form.xhtml, you can use a direct URL to the
persistence layer, for example:

http://localhost:8080/orbeon/fr/service/persistence/crud/orbeon/bookshelf/form/form.xhtml

> After testing in formbuilder I cut and pasted the formbuilder generated
> source code into a view.xhtml file inside the /resources/apps/ folder (with
> a page-flow.xml to accompany).
>
> But when I try to run this new app (as in /orbeon/xforms-hello/) I get this
> error ..
> *
> Undeclared variable in a standalone expression: $form-resources*
>
> The xform worked o.k. in formbuilder .. so how can I troubleshoot this
> error?
Short answer: don't do that. Forms created by Form Builder must be run
by Form Runner, they are not standalone XForms documents. And if you
just place a form under the "apps" directory, Form Runner does not
kick in. That could possibly be supported in the future, but at this
point it won't work.

Longer answer: you can run forms created by Form Builder outside of
eXist, but instead of placing them under the "apps" folder, place them
under the "forms" folder. You have to follow the exact same file
hierarchy as you have in eXist. We do this for the built-in DMV-14 and
Bookshelf forms, in particular. See this and subdirectories:

https://github.com/orbeon/orbeon-forms/tree/master/src/resources/forms

So say you have a form with app/form name foo/bar. You would do the following:

- publish the form with Form Builder
- retrieve the form definition with:
  http://localhost:8080/orbeon/fr/service/persistence/crud/foo/bar/form/form.xhtml
- store form.xhtml under:
  RESOURCES/forms/foo/bar/form/form.xhtml
- set a property telling Form Runner to retrieve the form definition
from the resources:
  <property as="xs:string"
name="oxf.fr.persistence.provider.foo.bar.form" value="resource"/>

-Erik


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws
DL
Reply | Threaded
Open this post in threaded view
|

Re: Re: Scrolling through multiple horizontal cells in an xform

DL
This post was updated on .
Erik .. that advice on paths will help me greatly if and when I can get it to work .. I can then access the code and integrate jQuery into form.xhtml.

The steps I took ...

I created a new very basic one element test form in Form Builder
I previewed and published the test form and could view the form source code
from Toolbar > Advanced.

I then tried to access form.xhtml in browser using the path you suggested ...

http://localhost:8080/orbeon/fr/service/persistence/crud/[app-name]/[form-name]/form/form.xhtml

or ..

http://localhost:8080/orbeon/fr/service/persistence/crud/foo/bar/form/form.xhtml

But I get an orbeon error message

"Not Found"
Oops, the page requested was not found!

...

I can access dmv-14 form .. http://localhost:8080/orbeon/fr/orbeon/dmv-14/edit

But accessing its form.xhtml doesn't work .. same error message "Not Found"

http://localhost:8080/orbeon/fr/service/persistence/crud/orbeon/dmv-14/form/form.xhtml

...

Am I using the correct path?

I'm running on Orbeon Forms 3.9.0.201105152046 CE

=======================================

[Later Edit]

To add to my confusion I tried ..

http://localhost:8080/orbeon/fr/service/exist/crud/[app-name]/[form-name]/form/form.xhtml

e.g. if the [app-name]/[form-name] is foo/bar in metatags

http://localhost:8080/orbeon/fr/service/exist/crud/foo/bar/form/form.xhtml

and in my browser blank view .. right click .. "View Page Source" (to see form.xhtml)

I seem to get the my test form.xhtml merged with the Form Builder Toolbox form (a form within a form?).   e.g. references to Tool Bar components etc.

So I'm still experimenting to find the correct path to get to the basic form.xhtml


DL
Reply | Threaded
Open this post in threaded view
|

Re: Re: Scrolling through multiple horizontal cells in an xform

DL
This post was updated on .
Finally .. I found the correct path to form.xhtml   (right click browser to view xhtml source)

http://localhost:8080/orbeon/fr/service/resource/crud/[app-name]/[form-name]/form/form.xhtml

http://localhost:8080/orbeon/fr/service/resource/crud/orbeon/dmv-14/form/form.xhtml

So it is /orbeon/fr/service/resource/crud/[app-name]/[form-name]/form/form.xhtml

and not /orbeon/fr/service/persistence/crud/[app-name]/[form-name]/form/form.xhtml

as suggested by Erik earlier.

...

for example .. I can now view dmv-14 form.xhtml here ..

http://localhost:8080/orbeon/fr/service/resource/crud/orbeon/dmv-14/form/form.xhtml

...

Now I can get get down to integrating jQuery into form.xhtml.  

My first observation is that I will need to parse form.xhtml to add id's
in the containers of controls in each grid cell
so that they can be targeted by jQuery.

...

Thanks for the pointers.


[Later Edit]

Actually I would like to read (scrape) the form.xhtml source code instead of right clicking and "view source".   This would make it easier to apply some parsing logic.

So far the closest I can get to this is in Firefox is using prefix "view-source:" before the url ..

e.g.  

view-source:http://localhost:8080/orbeon/fr/service/resource/crud/[app-name]/[form-name]/form/form.xhtml

view-source:http://localhost:8080/orbeon/fr/service/resource/crud/orbeon/dmv-14/form/form.xhtml




Reply | Threaded
Open this post in threaded view
|

Re: Re: Re: Scrolling through multiple horizontal cells in an xform

Erik Bruchez
Administrator
> So it is
> /orbeon/fr/service/*resource*/crud/[app-name]/[form-name]/form/form.xhtml
>
> and not
> /orbeon/fr/service/*persistence*/crud/[app-name]/[form-name]/form/form.xhtml

I checked and we made the change to /persistence post-3.9, which explains that.

-Erik


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws
DL
Reply | Threaded
Open this post in threaded view
|

Re: Re: Re: Scrolling through multiple horizontal cells in an xform

DL
This post was updated on .
I'm revisiting this thread I started and I'm now focusing on /xforms-bookcast/ as a test case.

I'm using /xforms-bookcast/  as a template to try horizontal scrolling ..
i.e. scrolling through horizontal book instances instead of vertical.   Unlimited width of
.

In the bookcast xform I can click on "load sample data" to populate a number of book instances which by default appear in a vertical column.

The simple question is where in the orbeon code can I change this loading of sample-data.xml to position the book instances horizontally instead of vertically?   I have read that the grid width is constrained in YUI-grid and this grid width (doc4 ?) will need to be ignored.

When I can do this I hope to then target the
 for each book instance and position these horizontal instances dynamically (perhaps by targetting visibility or position attributes in css).

i.e. panning through book instances.

It would be easier if there was a target id per book instance (there is only an id in each span around each control) but I suspect I will have to inject an id attribute into each
 using jQuery script.  

I can target each of the individual controls with id's .. like so ..

<span id="xf-31" .. Title
<span id="xf-34" .. Author
<span id="xf-37" .. Language
<span id="xf-45" .. Link
<span id="xf-48" .. Rating
<span id="xf-56" .. Notes

I found these id's by using DOM Inspector and Inspect in Firefox.

But it is the group of controls in each book instance which I need to position using css.  

Perhaps editing form-runner-base.css ?

DL
Reply | Threaded
Open this post in threaded view
|

Re: Re: Re: Scrolling through multiple horizontal cells in an xform

DL
This post was updated on .
I've found this old thread which refers to a similar requirement for horizontal repeat of instances.

http://orbeon-forms-ops-users.24843.n4.nabble.com/horizontal-format-for-an-xforms-repeat-td42177.html

To quote from this thread:  "At the moment, CSS is your best bet".

Since there is nothing available "out of the box" I'm now exploring wrapping the nodeset table in a div container (with id) so that I can apply css and jQuery to convert from vertical repeat (as in default application) to horizontal repeat (which can be scrolled through left to right).
Reply | Threaded
Open this post in threaded view
|

Re: Re: Re: Re: Scrolling through multiple horizontal cells in an xform

Erik Bruchez
Administrator
DL,

This is no different form doing it in plain HTML.

You could:

- repeat over table <td> instead of <tr>
- repeat over <div> and write CSS to lay them out horizontally

There is no special XForms magic here.

-Erik

On Mon, Jun 11, 2012 at 12:26 PM, DL <[hidden email]> wrote:

> I;ve found this old thread which refers to a similar requirement for
> horizontal repeat of instances.
>
> http://orbeon-forms-ops-users.24843.n4.nabble.com/horizontal-format-for-an-xforms-repeat-td42177.html
>
> To quote from this thread:  /"At the moment, CSS is your best bet". /
>
> Since there is nothing available "out of the box" I'm now exploring wrapping
> the nodeset table in a div container (with id) so that I can apply css and
> jQuery to convert from vertical repeat (as in default application) to
> horizontal repeat (which can be scrolled through left to right).
>
>
> --
> View this message in context: http://orbeon-forms-ops-users.24843.n4.nabble.com/Scrolling-through-multiple-horizontal-cells-in-an-xform-tp4655163p4655232.html
> Sent from the Orbeon Forms (ops-users) mailing list archive at Nabble.com.
>
>
> --
> You receive this message as a subscriber of the [hidden email] mailing list.
> To unsubscribe: mailto:[hidden email]
> For general help: mailto:[hidden email]?subject=help
> OW2 mailing lists service home page: http://www.ow2.org/wws
>


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws