初次接触Drupalgap

1，创建自己的module
在/mobile/app/modules/下创建custom文件夹，在custom文件夹下再创建以你的module名称命名的文件夹，比如  my_module,然后在这个文件夹里创建 'my_module.js'，然后就是按照API在 'my_module.js'中写一些JS代码，例如：

function gt_first_test_menu() {
  var items = {
     page_one:{
      title:'欢迎光临',
      page_callback:'gt_first_test_page_one',
      title_callback:'gt_first_test_custom_page_title_callback',
      title_arguments:['My Cool Title']
    },
     page_two:{
      title:'Page Two',
      page_callback:'gt_first_test_page_two'
    }
  };
  return items;
}
/**
 * Callback function for page one.
 */
function gt_first_test_page_one() {
  var content = {
    page_two_button:{
      path:"page_two",
      text:"Go to Page Two",
      theme:"button_link"
    }
  };
  return content;
}
/**
 * Callback function for page two.
 */
function gt_first_test_page_two() {
  var content = {
    page_two_button:{
      path:"page_one",
      text:"Go to Page One",
      theme:"button_link"
    }
  };
  return content;
}
/**
 * Page callback function for custom_page title_callback.
 */
function gt_first_test_custom_page_title_callback(title) {
  try {

    return title.replace("Cool", "Great");
    //drupalgap_set_title('Fast Food Friday');

  }
  catch (error) { drupalgap_error(error); }
}

这样我们就创建好了一些静态的module，动态调用后端数据我们后面再说，先把架子搭起来。然后当然是要告诉drupalgap启用我们自己写的module，在settings.js里

// Custom Modules - www/app/modules/custom
    drupalgap.modules.custom = [
      {name:'my_module'},
    ];

2，创建自己的theme
Drupalgap的theme机制和Drupal本身的theme机制是一致的，都是在mobile/app/themes/下建立一个名称和你的theme名字一样的文件夹来放置所有和你的自定义theme相关的文件。 然后就是具体的执行渲染方法不大一样，Drupalgap是放置一个page.tpl.html来放置你的region placeholder，

<div id="{:drupalgap_page_id:}" data-role="page">
  {:header:}
  {:navigation:}
  {:content:}
  {:footer:}
</div>

教程里提到至少应放置的region为：header, content 和 footer.然后在这个theme文件夹里继续添加一个 ‘my_theme.js’去设置regions：

/**
 * Implements DrupalGap's template_info() hook.
 */
function medicine_info() {
  try {
    var theme = {
      "name":"medicine",
      "regions":{
        "header":{
          "attributes":{
            "data-role":"header"
          }
        },
        "navigation":{
          "attributes":{
            "data-role":"navbar"
          }
        },

        "content":{
          "attributes":{
            "data-role":"content"
          }
        },
        "footer":{
          "attributes":{
            "data-role":"footer"
          }
        }
      }
    };
    return theme;
  }
  catch (error) { drupalgap_error(error); }
}

设置完region，就应该把blocks添加到你的region里，这一步我们是在 mobiles/app/settings.js里的 '//Theme blocks里完成的，代码像这样

//my_theme Theme blocks
drupalgap.settings.blocks.my_theme = {
  top:{
    logo:{} /* drupalgap's logo system block */
  },
  header:{
    title:{} /* drupalgap's title system block */
  },
  navigation:{
    main_menu:{} /* drupalgap's main menu system block */
  },
  content:{
    main:{} /* drupalgap's main system block, used to display page content */
  },
  footer:{
    powered_by:{} /* drupalgap's 'powered by' block */
  }
};

这样就设置好了我们的theme，最后，为了启用我们的新theme，在settings.js里这样

// Theme
drupalgap.settings.theme = 'my_theme';

然后是使用jQuery mobile theme roller定制样式，这里要注意jQuery mobile的版本，记得随时关注更新，然后把解压的css文件放置到app根目录下的index.html中