Mobile Shakespeare Tutorial Part 1

config.xqy

xquery version "1.0-ml" ;

(:  config.xqy
    This library module holds configuration
    variables for the application
:)

module  namespace cfg = "http://framework/lib/config";

(:  The rewrite library route configuration
    For documentation see: https://github.com/dscape/rewrite
:)
declare variable $ROUTES :=
    <routes>
        <root>home#get</root>
        <get path="play/:id">
          <to>play#get</to></get>
        <get path="play/:id/characters">
          <to>play#characters</to></get>
        <get path="play/:id/act/:act">
          <to>play#get</to></get>
        <get path="play/:id/act/:act/scene/:scene">
          <to>play#get</to></get>
    </routes>;

declare variable $TITLE := "Mobile Shakespeare";

home.xqy

xquery version "1.0-ml";

(: Home.  List all Shakespeare plays :)

import module namespace cfg = "http://framework/lib/config" at "/lib/config.xqy";

import module namespace h = "helper.xqy" at "/lib/rewrite/helper.xqy";
import module namespace v-mob = "http://framework/view/v-mob" at "/view/v-mob.xqy";

(: Don't forget to include this so script
   tags in the VIEW are not collapsed :)
declare option xdmp:output "method=html";

declare function local:get()  {
    v-mob:render(
        $cfg:TITLE,
        <ul data-role="listview" data-inset="true" data-filter="true">
        {
            (: Note this code is inefficient at scale because we
               are effectively retrieving the entire database
               to generate these links.  It's only about 8MB of data
               and it is coming out of cache, but maybe we can speed
               it up later
            :)
            for $play in /PLAY
            return
                <li>
                  <a href="/play/{fn:string($play/@id)}">
                    {$play/TITLE/text()}
                  </a>
                </li>
        }
        </ul>
    )
};

try          { xdmp:apply( h:function() ) }
catch ( $e ) {  h:error( $e ) }

play.xqy

xquery version "1.0-ml";

(: Play detail  :)

import module namespace cfg = "http://framework/lib/config" at "/lib/config.xqy";

import module namespace h =
    "helper.xqy" at "/lib/rewrite/helper.xqy";
import module namespace v-mob =
    "http://framework/view/v-mob" at "/view/v-mob.xqy";

(: Don't forget to include this so script
   tags in the VIEW are not collapsed :)
declare option xdmp:output "method=html";

declare function local:characters()  { 

    let $id := h:id()
    let $play := /PLAY[@id eq $id]
    let $title := fn:string-join((
            $play/TITLE/text(),
            "Characters"
        )," ")
    return
    v-mob:render(
        $cfg:TITLE,
            <p>
                <h2>{$title}</h2>
                <h3>DRAMATIS PERSONAE</h3>
                {
                for $node in $play/PERSONAE/node()
                return
                    typeswitch ($node)
                    case element(TITLE) return
                        ()
                    case element(PGROUP) return
                        <ul data-role="listview"  data-inset="true">
                        {
                            for $p in $node/PERSONA
                            let $name := $p/text()
                            return
                                <li data-theme="d">{$name}</li>,
                            for $d in $node/GRPDESCR
                            return
                                <li data-theme="c">{$d/text()}</li>
                        }
                        </ul>
                    case element(PERSONA) return
                    <ul data-role="listview"  data-inset="true">
                        {
                            let $p := $node
                            let $name := $p/text()
                            return
                                <li data-theme="d">{$name}</li>
                        }
                        </ul>
                    default return
                        ()
                }
            </p>
    )
};

declare function local:get()  {
    let $id := h:id()
    let $act := xdmp:get-request-field("act",())[1]
    let $scene := xdmp:get-request-field("scene",())[1]

    let $act := if($act castable as xs:int) then
                  xs:int($act)
                else ()
    let $scene := if($scene castable as xs:int) then
                    xs:int($scene)
                  else ()

    let $play := /PLAY[@id eq $id]

    return
    v-mob:render(
        $cfg:TITLE,
        (
            <p>
                <h2>{$play/TITLE/text()}</h2>
                {
                    if($act) then
                      <h3>{($play/ACT)[$act]/TITLE/text()}</h3>
                    else (),

                    if($act and $scene) then
                      <h3>
                        {(($play/ACT)[$act]/SCENE)[$scene]/TITLE/text()}
                      </h3>
                    else (),

                    if(fn:not( $act or $scene )) then
                        <ul data-role="listview" data-inset="true" >
                          <li>
                            <a href="/play/{$id}/characters">
                              Characters
                              <span class="ui-li-count">
                                {fn:count($play/PERSONAE/PERSONA)}
                              </span>
                            </a>
                          </li>
                        </ul>
                    else
                      ()
                }
            </p>,

            if($act and $scene) then (
                let $paging :=
                    <div data-role="controlgroup" data-type="horizontal">
                    {
                        if($scene eq 1 and $act eq 1) then
                            ()
                        else if( $scene eq 1 and fn:exists( ($play/ACT)[$act -1] )) then
                            <a data-icon="arrow-l" href="/play/{$id}/act/{$act -1}/scene/{ fn:count(($play/ACT)[$act -1]/SCENE) }" data-role="button">Previous Scene</a>
                        else
                            <a data-icon="arrow-l"   href="/play/{$id}/act/{$act}/scene/{$scene -1}" data-role="button">Previous Scene</a>,

                        <a  data-icon="grid" href="/play/{$id}" data-role="button">Back to Scene Selection</a>,    

                        if( fn:count(($play/ACT)[$act]/SCENE) gt $scene ) then
                            <a  data-icon="arrow-r"  href="/play/{$id}/act/{$act}/scene/{$scene +1}" data-role="button">Next Scene</a>
                        else if( fn:exists( ($play/ACT)[$act +1] )) then
                            <a  data-icon="arrow-r"  href="/play/{$id}/act/{$act +1}/scene/1" data-role="button">Next Scene</a>
                        else
                            ()
                    }
                    </div>
                return (

                    $paging,

                    for $node in (($play/ACT)[$act]/SCENE)[$scene]/node()
                    return
                        typeswitch ($node)
                        case element(TITLE) return
                            <p><strong>{$node/text()}</strong></p>
                        case element(STAGEDIR) return
                            <p><em>{$node/text()}</em></p>
                        case element(SPEECH) return
                            <div class="ui-body ui-body-b"
                                 style="margin:20px 0px;">
                            {
                                $node/SPEAKER/text(),
                                <div style="margin-left:20px;">{
                                    for $line in $node/LINE/text()
                                    return
                                        <div>{$line}</div>
                                }
                                </div>
                            }

                            </div>
                        default return
                            ()

                    ,

                    $paging
                )

            )
            else
                <ul data-role="listview"  data-inset="true" >
                {
                    for $act at $a in $play/ACT
                    return
                    (
                        <li data-role="list-divider">{$act/TITLE/text()}</li>,

                        for $scene at $s in $act/SCENE
                        return
                            <li data-theme="c">
                                <a href="/play/{$id}/act/{$a}/scene/{$s}">
                                    {$scene/TITLE/text()}
                                </a>
                            </li>
                    )
                }
                </ul>
        )
    )
};

try          { xdmp:apply( h:function() ) }
catch ( $e ) {  h:error( $e ) }

rewrite.xqy

xquery version "1.0-ml" ;

import module namespace shake-r =
    "routes.xqy" at "/lib/rewrite/routes.xqy";
import module namespace shake =
    "http://framework/lib/config" at "/lib/config.xqy";

    (: let rewrite library determine destination URL,
       use routes configuration in config lib :)
    let $selected-url    :=
            shake-r:selectedRoute( $shake:ROUTES )
    return
            $selected-url

setIds.xqy

for $p at $id in /PLAY
let $at := attribute id {$id}
return
xdmp:node-insert-child($p,$at)

v-mob.xqy

xquery version "1.0-ml";

module namespace v-mob = "http://framework/view/v-mob";

(:  Stick this at the top of any module that generates HTML so that
    empty tags don't get truncated to non-empty tags :)
declare option xdmp:output "method=html";

(:
    HTML5 Template using JQuery Mobile
    @author Dave http://www.front2backdev.com
    XQuery adaptation Public Domain.
        jQuery and jQuery Mobile: MIT/GPL license
:)

(:
    JQuery Mobile Output Template
    $title -- The html head title of the page
    $html  -- HTML5 nodes to put in the body
:)
declare function v-mob:render(
    $title as xs:string,
    $html as node()*
) {

xdmp:set-response-content-type("text/html"),
'<!DOCTYPE html>',
<html>
    <head>
        <title>{$title}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    </head>
    <body> 

        <div data-role="page" data-theme="b">

            <div data-role="header">
                <a data-rel="back"
                   data-icon="back"
                   data-iconpos="notext"
                   data-transition="slide"
                   data-direction="reverse">Back</a>
                <h1>{$title}</h1>
                <a href="/"
                   data-icon="home"
                   data-iconpos="notext"
                   data-transition="fade">Home</a>
            </div><!-- /header -->

            <div data-role="content">
                {$html}
            </div><!-- /content -->

        </div><!-- /page -->

    </body>
</html>
};