Discussion Forums  >  Plugins, Customizing, Source Code

Replies: 8    Views: 105

Moto110
Aspiring developer
Profile
Posts: 205
Reg: Jul 26, 2011
Orlando, FL
8,700
02/18/14 10:30 PM (11 years ago)

HTML Pro plugin not loading css or images when in subdirectories on webserver

I am using the HTML Pro Plugin and can not get CSS or images to load using the "Load from this URL" unless I have the CSS and image files in the same directory as the html file on the webserver. To keep things clean I like to keep .css files in a subdirectory called "css" and images in an "images" folder. This seems to be standard practice and would think this plugin could accommodate this file structure. If I access the same url from Safari on the mobile device it displays properly with the .css file in a subdirectory and images in a subdirectory. Is this a limitation of the HTML Pro Plugin or am I missing something or doing something wrong? * This is a BT 3.0 project using iOS 7 on an iPhone and Xcode v5.0.2 Thanks!
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
02/19/14 05:11 AM (11 years ago)
Can I see an example of your path code? Cheers! -- Smug
 
EdReyes
Lost but trying
Profile
Posts: 574
Reg: Oct 21, 2013
location unknow...
17,640
like
02/19/14 05:32 AM (11 years ago)
Not sure but have you tried hard coding the url path so you don't have to put everything in the root. ie instead of css/style.css in your index.html you try to link your path via http://yoursite.com/css/style.css in some cases whether it's an iframe embeded or a load url, the way things are coded, it may not recognize the folder structure, hense having to but all the files relative to the root directory and no sub directories. hope that helps Ed
 
Moto110
Aspiring developer
Profile
Posts: 205
Reg: Jul 26, 2011
Orlando, FL
8,700
like
02/19/14 07:21 AM (11 years ago)
@EdReyes - Thanks for the suggestion. When I change the css link to the absolute path of the css file it works. "http://yoursite.com/css/style.css" However, I also noticed that with the HTML Pro plugin every link on a "Load from this URL" site has to have an absolute link or it tries to find the file locally on the device. Since the files do not reside on the device the page does not display properly. This make using the "Load from this URL" option much more difficult to use since changing the URL of your site in the future would be almost impossible since everything is pointing to a domain name "http://yoursite.com/images/photo.jpg". I am using Adobe Muse to create my html website files and by default it uses relative links "/images/photo.jpg" "css/style.css" when exporting the website. Changing all of the links to absolute is a lot of work since Adobe Muse is a WYSIWYG HTML editor and these paths can not be changed until you export the site. This work cause me to have to change these paths on all links every time I make a change to the site and export it . Adobe Muse is extremely powerful and allows someone like me with limited HTML ability to create some amazing websites. Changing these paths every time I make a change would be a LOT of work and make using the HTML Pro plugin not worth the time. With all of that being said I plan on using the "Load from this URL" only during development and would actually prefer to keep these files in the BT_Docs folder so the app works offline once in the app store. However, again I have the problem of the code pointing to subfolders and even though I have them in subfolders in Xcode once they are copied to the device they are stored in the same directory. Does anyone know how to make Xcode\device keep the file structure of the files in the BT_Docs folder when these files are copied to the device so my local HTML code will work once copied to the device? Currently in Xcode the folder structure shows in BT_Docs folder is correct "BT_Docs\index.html, BT_Docs\css\style.css, and BT_Docs\images\photo.jpg" once copied to the device the .html .css and .png files are all in the same directory and the html code is broken. Is there a workaround or solution to this issue? Sorry If I was a little long winded I wanted to try and explain in detail my issue.
 
EdReyes
Lost but trying
Profile
Posts: 574
Reg: Oct 21, 2013
location unknow...
17,640
like
02/19/14 08:17 AM (11 years ago)
@Moto110, are you trying to design first and export as html in Adobe Muse then import the files and structure into buzztouch via the htmlpro plugin? I believe the htmlpro plugin is meant to have links from an html coded file link to an app screen. (The plugin description=The HTML Pro plugin allows you to insert hyperlinks into HTML documents that point to Buzztouch-plugin screens in your app.) I'm not sure that's the right approach. I use the Adobe CC, but haven't had the time to play with Muse yet. If your Muse created site can exist on a website, you can do what I did here and use the Custom Url plugin so your site stays intact. Granted that your Muse site is mobile responsive. Like what I did for my app, I built the mobile bootstrap/wordpress webapp version. Then I integrated the site structure into bt, then added a tab bar to launch native bt plugins. Thus creating a hybrid app in xcode. Just scroll to the post I made here: https://www.buzztouch.com/forum/thread.php?fid=A9908FEEEF52D6029A0DFEE&tid=A9908FEEEF52D6029A0DFEE See if that helps with what you are trying to achieve. or you can reach out to chris1 the plugin developer for the htmlpro plugin. Good Luck Ed
 
Moto110
Aspiring developer
Profile
Posts: 205
Reg: Jul 26, 2011
Orlando, FL
8,700
like
02/19/14 08:45 AM (11 years ago)
@EdReyes, Notice app that is a creative us of BT plugins. My plan was to use the HTML Pro plugin to create my main menu and then link those menu buttons to another HTML Pro plugin that would have 25-30 menu buttons that would link to BT Location Map plugin screens. The reason I need to link from a HTML Pro screen to another and not just link to an HTML file in the app is so the BT Location Map plugin will back up to the correct screen and not to the top level HTML Pro screen "main menu". My reason for wanting to use the HTML Pro plugin was to make the app Android and iOS compatible at the same time. I can basically get the same UI design for iOS using the BTA Design Menu plugin, but that will not work on Android. It is starting to get more complicated then it needs to be and I think I might just have to give up on Android and focus on iOS and just use the BTA Design Menu plugin to get the results I want.
 
EdReyes
Lost but trying
Profile
Posts: 574
Reg: Oct 21, 2013
location unknow...
17,640
like
02/19/14 09:32 AM (11 years ago)
Yes I agree designing UI for both iOS and Android is quite a daunting task and challenge for a lot of us buzztouchers. Maybe some of our other senior BT developers here has a solution for your cross platform UI/htmlpro issues. Keep us posted.
 
Moto110
Aspiring developer
Profile
Posts: 205
Reg: Jul 26, 2011
Orlando, FL
8,700
like
02/20/14 08:00 AM (11 years ago)
I was able to create a few different "hacks" to get the HTML Pro plugin to work properly with an Adobe Muse created website. This works for storing the website in the BT_Docs folder of the app. 1. I created an Automator Folder Action that monitors the folder that I export the Muse HTML into. The Folder Action then copies the contents of these folders into another folder. (All files are flat no subfolders) 2. I found a utility on the Mac App Store call Araxis Replace In Files. This utility will scan a directory of files and "find and replace" text within those files. I used it to scan only the .css and .html files that were exported from Muse. I created this REGEX expression (images/|css/|\.\./images/|scripts/) it looks for following words and remove them "images css/ ../images scripts/". The end result is that all links to images, scripts, and css files are now pointing to a file in the same directory as the html files. That is what the Buzztouch app likes when embedding html in an app. Now that I have explained how it works this is how I use it. I build the website in Adobe Muse and export it to a folder that an Automator Folder Action then copies all of the files into another folder in a flat file structure. I then open the "Araxis Replace In Files" utility and select replace all. These files are now ready for my BT app. I also have these files linked to my Xcode project and not embedded, so at this point I am ready to build the app with all of my html changes that I was just working on in Adobe Muse 2 minutes prior. I realize that this is a very specific scenario since most people do not use Adobe Muse. However, maybe the method I described with help others that have a similar situation. Also, I would like to note that the only way to get Adobe Muse is by subscribing to Adobe Creative Cloud. If you are someone that is already a member it's worth checking out. There are a lot of inexpensive Muse templates sites that provide high quality templates with mobile ready designs. www.Muse-Themes.com and www.Musegrid.com are two of the best I have found.
 
EdReyes
Lost but trying
Profile
Posts: 574
Reg: Oct 21, 2013
location unknow...
17,640
like
02/20/14 09:31 AM (11 years ago)
congrats on finding a solution for your bt issues. For those that are more designer than developer, Adobe Muse is a great way to get your feet wet in responsive web site creation. Thanks for the themes share, I'm sure those will come in handy for those with Adobe Creative Cloud and Muse. Ed
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.