py4web has now a grid ...

[Massimo Di Pierro]

... it is incomplete. It is experimental. The API is subject to change. But I could use some community feedback:

from py4web.utils.publisher import Publisher, ALLOW_ALL_POLICY

# exposes services necessary to access the db via ajax

publisher = Publisher(db, policy=ALLOW_ALL_POLICY)

# expose as /examples/grid

@action('grid')

@action.uses('grid.html')

def example_grid():

     return dict(grid=publisher.grid(db.person))

embed in template with [[=grid]] in templates/grid.html as in web2py. The difference from web2py is that the grid communicate with the server via ajax and the style is in static/components/mtable.html Still does not access authentication based access control but will add it very soon.

You can try it.

https://github.com/web2py/py4web/blob/master/apps/examples/__init__.py#L41

[Carlos Costa]

I liked it.

Much more faster and responsive.

I didn't get how use search properly.

I have on suggestion for letting grid more mobile friendly.

Take a look at this snippet https://codepen.io/andornagy/pen/EVXpbR

It is pure CSS.

It transform columns into rows in a card style table.

I have used it, it is very cool, and I think at least the grid should be mobile friendly.

The only problem is that you must have a data-column attribute.

I have used to manipulate the w2p grid in order to inject this attribute but this is very slow.

The ideal is it to be generated with this attribute already.

Maybe I can do a PR with this feature.

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/cc53051f-104c-4b20-97a6-c32f8220d052%40googlegroups.com.

--

At.

Carlos J. Costa

--------------------------------------------------------------

Cientista da Computação - Esp. Gestão em Telecom

[Carlos Costa]

It's done.

But I have a question: where will we put component styling?

I add an table.css file and linked in layout.html but I think it belongs to the component.

I wish we would use Vue SFC format. 

Now  is possible to use SFC components without using bundlers.

[John Bannister]

Hi Massimo,

 

Some feedback for you on the new grid (which is looking very cool) and which I played with  a bit today.

Basically I  connected  to a  MySQL db and loaded some existing medium sized tables (~400K records) and sort of compared it with web2py grid (standard web2py)  and also datatables (using server side processing on py4web which is still at an experimental stage) .

 

Assuming that any grid component should  be able to load, display, paginate, search, filter, import, export and have CRUD functionality, I ran a small comparison.   

 

Main things I was looking for were:-

1:  Initial load times (crucial for larger tables)

2:  End user experience (look and feel, filtering, useablitly etc.)

3: Functionality

 

(1)    For initial  load times (and I haven’t put in any timing stats) for sure the new py4web grid wins hands down followed closely by datatables and finally web2py grid. As the web2py grid doesn’t run on py4web we cannot really compare apples and pears but all tests were run on same machine using same database.

(2)    This is slightly subjective but for now I would go with datatables followed by web2py.grid and finally py4web.grid for the following reasons:-

a.       Datatables (to me) looks a lot better than the web2py.grid even after restyling it to get is as close (looks wise) to datatables.

b.      Web2py.grid filtering/extended search (to me) is streaks ahead of the other two. It is probably one of the most usefull tools when working with big tables (even though the load time if you have a table with many referenced fields is a bit tedious). Datatable search(ing) is pretty good though a bit hungry when doing the searching server side and I still haven’t managed get the server side to filter properly on referenced fields but in general it works pretty much okay.  The filtering on the new grid is very unintuitive by comparison and I was not able to build any sort of query (but that could just be me).

c.        Pagination/Load More doesn’t work for me particularly for larger tables where it is much easier (in my opinion) to use standard pagination with first and last etc unless there is a query builder similar to web2py.grid available to filter out a set of records. Even then first and last are still very useful for larger sets

(3)       Here web2py.grid has to win hands down J followed closely by datatables (after a lot of hair pulling). Whilst I understand this is v1.0 of the py4web.grid, there are a few (in my opinion) fundamental things that need addressing.

a.       Referenced fields in the grid are displayed as [linked id’s]. Clicking on them does nothing. Would be good to show the referenced records _format and clicking on the link should display the record (either in view or edit mode). This is semi-working in the _dashboard app but there is no way (apart from the back arrow) to get back to the original table/record.

b.      Adding a new record that has referenced fields does not work yet (certainly there is no dropdown list to chose from)

c.       Similarly changing a record with a referenced field needs a bit of work.

d.      Import/Export functionality

 

Conclusion:-

I think for a v1.0  the grid is very cool and shows a huge amount  of potential.

Having said that (for me) the ideal grid for py4web would be something that has the following :-

1: Web2py.grid type extended search form.

2: Look and feel of (slightly extended) datatables

3: Speed of py4web.grid as is currently is.

 

Disclaimer:-

 

Please note that the above is purely my opinion and is intended purely to provide my own feedback on the py4web new grid.

 

(bucket list is running over) J

 

Best Regards

John

--

[Massimo Di Pierro]

Thank you. very valuable feedback. The point of the new grid is that it comes with a mtable.html template. We can change it to make it look more datatable.

To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscribe@googlegroups.com.

[Massimo Di Pierro]

This is really cool. I will make a version of mtable.html that uses it.

To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscribe@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/cc53051f-104c-4b20-97a6-c32f8220d052%40googlegroups.com.

[Massimo Di Pierro]

To clarify.

I do not like SFC because I do not think js and html belong to the same file. py4web has a utils.js which implements a TFC Two-File-Components (I claim copyright). This is undocumented and you will not see it in other vue apps.

Basically each component has on js and one html file. In the case of the grid one mtable.js and one mtable.html. You can customize the html as you see fit without need to touch the JS. The JS is not done and I will be adding some functionality. In particular I need to handle events to allow to save the grid state in the url.

To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscribe@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/cc53051f-104c-4b20-97a6-c32f8220d052%40googlegroups.com.

--

At.

Carlos J. Costa

--------------------------------------------------------------

Cientista da Computação - Esp. Gestão em Telecom

[Carlos Costa]

I like the idea of loading components dynamically.

My only point about SFC is about being a standard. 

And what about css? Could it be a TFC Three-File-Components?

To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/cc53051f-104c-4b20-97a6-c32f8220d052%40googlegroups.com.

--

At.

Carlos J. Costa

--------------------------------------------------------------

Cientista da Computação - Esp. Gestão em Telecom

--

At.

Carlos J. Costa

--------------------------------------------------------------

Cientista da Computação - Esp. Gestão em Telecom

--

Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/31e01207-4fbe-4d8e-9cd8-8bcfc53ac06f%40googlegroups.com.

[Massimo Di Pierro]

Nothing prevents you from including css into the .html of linking a css file from html.

Not sure that is a good idea because pages look nicer when there is one single css style.

To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscribe@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/cc53051f-104c-4b20-97a6-c32f8220d052%40googlegroups.com.

--

At.

Carlos J. Costa

--------------------------------------------------------------

Cientista da Computação - Esp. Gestão em Telecom

--

At.

Carlos J. Costa

--------------------------------------------------------------

Cientista da Computação - Esp. Gestão em Telecom

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscribe@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/31e01207-4fbe-4d8e-9cd8-8bcfc53ac06f%40googlegroups.com.

[isi_jca]

Hi Massimo:

When I try the example I only watch a page blank. Why?

Best Regards

[Massimo Di Pierro]

what bowser? any console error? what do you see in the page source?

[isi_jca]

Hi!

This is output from console and the browser is Google Chrome Versión 66.0.3359.181 (Build oficial) (64 bits)

[jalbornoz@QuoVadis ~]$ ./py4web.sh 

██████╗ ██╗   ██╗██╗  ██╗██╗    ██╗███████╗██████╗ 

██╔══██╗╚██╗ ██╔╝██║  ██║██║    ██║██╔════╝██╔══██╗

██████╔╝ ╚████╔╝ ███████║██║ █╗ ██║█████╗  ██████╔╝

██╔═══╝   ╚██╔╝  ╚════██║██║███╗██║██╔══╝  ██╔══██╗

██║        ██║        ██║╚███╔███╔╝███████╗██████╔╝

╚═╝        ╚═╝        ╚═╝ ╚══╝╚══╝ ╚══════╝╚═════╝ 

It is still experimental...

assets-folder: /home/jalbornoz/py4web-env/lib64/python3.7/site-packages/py4web/assets

Choose a one-time dashboad password: 

Dashboard is at: http://127.0.0.1:8000/_dashboard

[X] loaded _dashboard     

[X] loaded _default     

[X] loaded MyFirstApp     

Bottle v0.12.17 server starting up (using TornadoServer())...

Listening on http://127.0.0.1:8000/

Hit Ctrl-C to quit.

WARNING:tornado.access:404 GET /favicon.ico (127.0.0.1) 1.93ms

WARNING:tornado.access:404 GET /_dashboard/static/favicon.ico (127.0.0.1) 1.59ms

WARNING:tornado.access:404 GET /MyFirstApp/static/favicon.ico (127.0.0.1) 1.18ms

WARNING:tornado.access:404 GET /_default/static/favicon.ico (127.0.0.1) 0.92ms

Titulo Grilla

[sandeep patel]

@Massimo,

Grid not working properly, Only seeing a blank page. 

Please, Give me some direction.

Thanks

Sandeep

 

--

Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/ae5df04c-e27a-4a94-b2e8-6c8158c01107%40googlegroups.com.

[Massimo Di Pierro]

I do not know. Try check the JS console for errors. Maybe it is missing the js components.

[isi_jca]

Dear Massimo:

I was playing with grid, but I only have a blank page. from debugger I get this code html

<div id="vue11d10e4d">

<mtable url="/CuentaFacil/service/8c27c2fc-19eb-4c63-8b44-9e03b16f3d7b/tcliente" filter="" order="" :editable="true" :deletable="true" :create="true" :render="{}"></mtable>

<script src="/CuentaFacil/static/js/axios.min.js"></script>

<script src="/CuentaFacil/static/js/vue.min.js"></script>

<script src="/CuentaFacil/static/js/utils.js"></script>

<script src="/CuentaFacil/static/components/mtable.js">

</script><script>var app=utils.app("vue11d10e4d"); app.start()</script>

</div>

/*---Model ---*/

db.define_table('tcliente',

Field('nombre','string',length=70,label = T('Custom')),

Field('nrodoc','string',length=11,label = T('Id Number')))

db.commit()

/*---Controller ---*/

@action("cliente")

@action.uses("cliente.html")

def example_grid():

    return dict(grid=publisher.grid(db.tcliente))

/*--Template (cliente.html) --*/

[[extend 'layout.html']]

<h2 class="title">Clientes</h2>

[[=grid]]

What is the problem?

Thanks in advanced, regards.