Module - 7.x.1x-dev
Development Kit - 7.x-1.x-alpha

Now that I have the process of building pages down...I'm moving into the world of theming.

I love the Theme Roller interface and have setup a theme,downloaded, and extracted it to /apps/themes/mytheme.

I setup my theme per http://www.drupalgap.org/node/122 however I have a couple of issues:

  1. There is no jquery.mobile.structure*.css file included with the Theme Roller theme.
  2. After updating my settings.js and index.html, clearing cache, and reloading Ripple I get this error: The theme's js file does not eixst

Comments

tyler.frankenstein’s picture

tyler.frankenstein commented
Status: Active » Needs review

The structure CSS is included with DrupalGap, it will be located in your app's www directory. Here's an example index.html file:

https://github.com/signalpoint/miativity/blob/master/app/themes/miativit...

Please describe your theme's directory structure, it should be in app/themes/my_theme, NOT themes/my_theme

mastermindg’s picture

mastermindg commented

Sorry it took me so long to respond, busy week. My theme is in app/themes/my_theme.

mastermindg’s picture

mastermindg commented

I'm using Ripple so I modified the index.html in the root drupalgap directory to this:

<head>
    <title>DrupalGap</title>
    <link rel="stylesheet" href="app/themes/my_theme/devour.css" /><!-- this is the theme roller css file -->
    <link rel="stylesheet" href="app/themes/devour/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="jquery.mobile.structure-1.4.0.min.css" />
    <script src="jquery-1.9.1.min.js"></script>
    <script src="jquery.mobile-1.4.0.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="drupalgap.js"></script>
  </head>

After setting this and clearing cache I'm getting this error:
drupalgap_theme_load - Failed to load theme! The theme's JS file does not exist: app/themes/my_theme/my_theme.js)

tyler.frankenstein’s picture

tyler.frankenstein commented

FYI, a new version of the module and mobile app dev kit were released yesterday, be sure to update before going any further...

As for this issue, I see the 'my_theme' and the 'devour' directories. There really should only be one directory.

Here's my index.html file on a recent project with a custom theme:

...
<link rel="stylesheet" href="app/themes/custom_theme/custom_theme.css" />
<link rel="stylesheet" href="app/themes/custom_theme/jquery.mobile.icons.min.css" />
...

The custom_theme.css is provided by the theme roller. The 'custom_theme' is the name of the theme that is set in the settings.js file.

The actual theme directory should be here:

app/themes/custom_theme

And should have these files and directories in it:

  • images/*
  • jquery.mobile.icons.min.css
  • custom_theme.css
  • custom_theme.js
  • custom_theme.min.css
  • page.tpl.html
tyler.frankenstein’s picture

tyler.frankenstein commented

Also, if the theme fails to load, it "most likely" means there is a JavaScript syntax error in the theme's JS file.

mastermindg’s picture

mastermindg commented

I think the disconnect here is that there is no config js file included in the theme roller zip. The only js file that is included is the jquery js file.

How is the design of the page conveyed to drupalgap along with the context of the images?

tyler.frankenstein’s picture

tyler.frankenstein commented

Well your theme needs its own JS file (created by you) which indicates the regions available in the theme. Your theme also needs the page.tpl.html file to specify the general layout of the page template and its regions.

The icons/images are all controlled by jQueryMobile. Check out the example theme:

https://github.com/signalpoint/drupalgap_demo/tree/master/themes/my_them...

tyler.frankenstein’s picture

tyler.frankenstein commented

I just helped out someone else with this same problem. We resolved it by going to "Settings" in Ripple, and changing the "Cross Domain Proxy" to "disabled".

tyler.frankenstein’s picture

tyler.frankenstein commented

Also, do not use the "URL text field" provided on emulate.phonegap.com to load your app. Navigate directly to www.example.com/mobile-application, then click the Ripple icon in Chrome to enable it.

tyler.frankenstein’s picture

tyler.frankenstein commented
Title: Theme Roller Themes - Theme Missing .js » drupalgap_theme_load - Failed to load theme! The theme's JS file does not exist
jamesJonas’s picture

jamesJonas commented

Comment #8: changing the "Cross Domain Proxy" to "disable"

If it is a Cross Domain issue then other browser will also throw this error. I'm showing a similar problem when running xcode (cannot find .js file) - both in the simulator and iphone. Has anyone tried to implement the CORS module ( https://drupal.org/project/cors )? Rather than turning off the security, perhaps we can uncover which domain hops are throwing the error and add it to the list of domains inside the CORS module. Just an idea.

CORS Module
"Cross-origin resource sharing (CORS) is a mechanism that allows a web page to make XMLHttpRequests to another domain. Such "cross-domain" requests would otherwise be forbidden by web browsers, per the same origin security policy."

James

tyler.frankenstein’s picture

tyler.frankenstein commented

FYI. I had a client who was using Pantheon as a host, and CORS wasn't supported at all, so DrupalGap was pretty much useless on that host (unless I'm totally misunderstanding CORS).

I was unaware of the CORS module, I wonder it that can be used on a Pantheon host to get around this.

@jamesJonas, please stop by #drupal-drupalgap on IRC sometime, and I can help you debug the theme problem, then we can report the solution(s) back here.

jamesJonas’s picture

jamesJonas commented

Tyler,

Thank you for the offer.

Let me refresh my helloworld install and chk that everything in current. I'll then ping/drop by IRC sometime over the next couple of days (another project is taking my time). My goal is just DruaplGap helloworld install at this moment (baby steps) for IOS for Cordova 3.3 (last drupalgap update).

For those of you debugging IOS, I just came across the Remote Web Inspector for Safari ( http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers ) - Most likely old news for you masters, but big improvement over setting up the other alternatives ( iWebInspector or Weinre ).

Working IOS Stack:
Does anyone have a working IOS stack for DrupalGap/Cordova 3.3? (ex: Cordova 3.3.0, XCODE 5.02 - target IOS 7, Safari 7.01, DrupalGap Drupal 7.x-1.5, DrupalGap IOS ( https://github.com/signalpoint/DrupalGap as of 2/5/14). ]I'm building my helloworld based on this stack, but some local (my computer) issues have an edge case of impacting my build.]

James

jamesJonas’s picture

jamesJonas commented

Success

Issue: blank screen on iPhone simulator.
Solution: 'cordova build' or 'cordova build ios' - I was executing the first build inside of xcode. Inside the project folder (ex: /helloworld) execute 'cordova build ios' as per Tyler's instructions.

Other issues still persist, but progress is being made.. ; )

JJ

chicodasilva’s picture

chicodasilva commented

Hi JJ,

I am having the same issue: "blank screen"

Have you done any extra steps? The only diference from your setup is Cordova (my version is 3.4.0-0.1.3).

Thanks,
Francisco

tyler.frankenstein’s picture

tyler.frankenstein commented
Status: Needs review » Closed (fixed)

This should be fixed up now. Grab the latest version of the DrupalGap module and SDK for the fix. Now, DG core is not trying to load a contrib/custom theme in the core theme directory (before looking to the custom theme directory), which appears to have been causing 404 problems on certain platforms.

UPDATE: Even with the latest release, this problem may still occur in Ripple. To resolve it, change the "Cross Domain Proxy" to disabled under Ripple's Settings.