web2py jquery mobile plugin

So this year I'm trying to work on mobile development. I realized it's hard for me to learn all the language for the native app for each platform (apple, android, blackberry...etc) and found jQuery Mobile. It's so cool how come I didn't know about it!

I finished reading the book and What?? web2py already has the plugin !! OMG, I love web2py.

You can download it from here.
http://web2py.com/plugins/plugin_jqmobile/about

Thank you, Jason, Timothy, Harkirat and Massimo.


As of today, there is a issue and you will get blank page when you install the plugin.
I already submit a ticket (#1354: jQuery Mobile Plugin layout issue) with the solution.


Yeah! It looks great !!

web2py grid with export dropdown

I just want to share the code that Paolo Caruccio created to show the export dropdown for grid instead of links. It looks very clean and this should be the default for grid layout!

web2py forum link
https://groups.google.com/forum/?fromgroups=#!topic/web2py/HsFWsQmGONM

To test, create new app and add/edit as follows.

Model

db.define_table('Category',
    Field('Code', 'integer'),
    Field('Name'),
    format='%(Name)s')

Controller

def index():
    query = db.Category.id >0
    grid = SQLFORM.grid(query,csv=True,paginate=10)
    return dict(grid=grid)

View


{{extend 'layout.html'}}
{{
if not request.args:

 w2p_grid_tbl = grid.element('table')
 if w2p_grid_tbl:
 original_export_menu = grid.element('div.w2p_export_menu')
 export_menu_links = original_export_menu.elements('a')
 export_menu_items = []
 for link in export_menu_links:
 item = LI(link)
 export_menu_items.append(item)
 pass
 new_export_menu = DIV(
                      A( T('Exports'),
                         SPAN(_class='caret'),
                         _href='#',
                         _class='btn dropdown-toggle',
                         **{'_data-toggle':"dropdown"}
                        ),
                      UL(*export_menu_items,
                         _class='dropdown-menu'
                        ),
                    _class='w2p_export_menu btn-group'
                    )
 export_menu = grid.element('div.w2p_export_menu',replace=new_export_menu)
 pass
pass
}}
{{=grid}}


Before

After

web2py slices: cascading drop down lists with ajax 2

New web2py slice post ! I'm happy because it works perfectly now !!

cascading drop down lists with ajax 2
http://www.web2pyslices.com/slice/show/1526/cascading-drop-down-lists-with-ajax-2

Why it's 2?
because this is improved version of my previous slice.

You can check the working sample on my pythonanywhere site.
http://ochiba.pythonanywhere.com/dropdown/default/index

How to use gmaps.js on web2py

It's easy to handle Google Maps on your website and of course it will be much easier if you use web2py!

1. Create new app called gmap


2. Download gmaps.js
Go to http://hpneo.github.com/gmaps/ and download gmaps.js. Place it under the app folder static/js/gmaps.js

3. controllers/default.py
Replace the def index() with the following.

def index():
    from gluon.tools import geocode
    latitude = longtitude = ''
    form=SQLFORM.factory(Field('search'), _class='form-search')
    form.custom.widget.search['_class'] = 'input-long search-query'
    form.custom.submit['_value'] = 'Search'
    form.custom.submit['_class'] = 'btn'
    if form.accepts(request):
        address=form.vars.search
        (latitude, longitude) = geocode(address)
    else:
        (latitude, longitude) = ('','')
    return dict(form=form, latitude=latitude, longitude=longitude)

Note:  There was an issue #855 and just fixed with the Version 2.0.0 (2012-06-17 23:36:32) dev. If you are using the web2py version older than this, make sure to replace the latitude and longitude as follows.

 (longitude, latitude) = geocode(address)

4. views/default/index.html
Replace it with the following.

{{extend 'layout.html'}}
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="{{=URL('static','js/gmaps.js')}}"></script>
<div>
{{=form.custom.begin}}
{{=form.custom.widget.search}}{{=form.custom.submit}}
{{=form.custom.end}}
</div>
{{if longitude or latitude:}}
<p>latitude, longtitude: {{=latitude}},{{=longitude}}</p>
<div id="map" style="height:400px;width:800px"></div>
<script>
$(document).ready(function(){
  map = new GMaps({
    div: '#map',
    lat: {{=latitude}},
    lng: {{=longitude}}
  });
   map.addMarker({
    lat: {{=latitude}},
    lng: {{=longitude}},
    title: 'Here!',
    infoWindow: {
        content: '<p>{{=request.vars.search}}</p>'
    }
  });
});
</script>
{{pass}}

5. Result

Type "243 S Wabash Ave, Chicago, IL, USA" and see the result.

web2py on PythonAnywhere

It's too bad fluxflex will shut down and will be no longer available on June 30, 2012. It was great service, easy to deploy, I was a little bit frustrated with using git but overall I enjoyed. Especially, I was one of the fun because this company was established by young Japanese guys !

I was looking for new place and introduced PythonAnywhere in the web2py forum.

It's so easy to install. All you have to do is sign up for free account, click web2py icon and Done !
I was running my test app in a few minutes.

Wow! I'm very impressed!!

Maybe I can spend $9 per month to host it under own domain name. The performance should be enough  for the small app !

I'm not familiar with console (I'm windows guy) so I wonder how I can update wen2py when new version is available...

web2py slices: Import CSV file with user information and date

Posted new slice Import CSV file with user information and date

Sometime it's critical to keep tracking who updated the records. Built-in CSV import function is great but doesn't update the field such as updated_on, updated_by fields. Here's how I solved the problem.

1. Sample application image

2. Result

web2py bootstrap in trunk

I'm very excited about bootstrap which is now available in trunk.

This is my web2py app with bootstrap layout. It's really clean and attractive. Now I don't have to worry about layout design which I'm not really good at.

By default, some of css is conflicting with existing web2py.css, so I made the following change to make it more like bootstrap.

In web2py.css, comment out from #2 - #5, #16 - #37 and #100.


You can find more about bootstrap here.