How to debug Canvas LMS mobile app customization - canvas-lms

After customized the Canvas LMS desktop webpage with CSS and JS files we need to do the same on the mobile app.
Given the mobile app for both Android and iPhone is a Webview, how can i inspect html tags classes and ids to apply changes through the CSS or JS files?
Thanks!

Given no one knows about it, I proceeded as following:
I've cloned Canvas mobile app from public github repo available at: https://github.com/instructure/instructure-android
I've compiled the project and executed it on my own device, for which i needed a demo license of PSPDF to satisfy it dependence.
I've debugged the app, specifically i've set a breakpoint at: instructure-android/pandautils/src/main/java/com/instructure/pandautils/views/CanvasWebView.java line 396 or somewhere containg a variable with HTML code to show in the app.
Navigate between screens and wait for breakpoint triggers.
I have to say I expected most of the app was a webview, but i were wrong. In fact, is the opposite: this is an Android native app, and just allows a few customizations on few screens through uploadable CSS and JS files.

Related

resize images for cordova mobile application based on detected device

I'v built a cordova mobile application which i intend to deploy for several platforms. The problem i'm facing is images and thumbnails within the app. how to make the application detect which device is being used and based on that resize all images thumbnails and background (not only icon and splash screen) inside the application to be displayed properly?
I'v read about how this is done for native apps but if i'm gonna follow the same approach for example in android declaring a res folder for different sizes, how can i access them in my html file and pick the right size for the right mobile device? i want this to be tested in emulator how can i automate the process?
take it easy on me it's my first app :)

Run single page HTML and JavaScript page offline in iPad 1 safari

I am coaching my son's flag football team this winter and I'd like to make a little one pager app with jquery which will display and animate for the team some plays during huddles. I have been researching this quite a bit and it seems there is no way for safari to load local files. Some have suggested using goodreader, the app, but according to their manual they use a simplified browser rather than safari.
Not sure what else to try. The iPad is wifi only using ios5.
Safari is not capable of loading local files.
You have a few different options. You can:
Upload the file to Dropbox, and use it's offline mode to view it.
Use a native / hybrid container (like Appcelerator, PhoneGap, etc)
to bundle your HTML/Javascript into a "native" app.
No Safari can not load local files. You can't run local applications from there. What you can do is develop an actual app for your iphone using dreamweaver/jQuery. You could make pre-recorded videos and play them on your iPad as well. Goodreader, from what I can tell, is for reading local PDFs, which has nothing to do with apps... (but I don't really know)
This page should give you a general idea of using JQuery (mobile) to develop and actual app:
http://jquerymobile.com/
Edit: I just thought of a simpler approach that should work. Open a drop-box account at dropbox.com and put the website/Jquery in the public folder. Get the URL for the public folder and use that. Open the website on your iPad and then don't close the window. Even when the network connections stops it should still work.
I ended up using HTML5 built in APPCACHE: http://www.html5rocks.com/en/tutorials/appcache/beginner/
We went undefeated BTW :)

Scene2dUI in Libgdx and html5

I can't normally launch html5 the version of application in which there are scene2d ui elements. After transition to the Screen with Scene2dUI it turns out here
To look as application "works" it is possible.
The last version of a plug-in of gwt for Eclipse is set.
Why so occurs? The android and a desktop of the version work good.
In archive a test project. The source code from this example
The project was developed in Intellij Idea, html5 the version was compiled in Eclipse. Version Libgdx libgdx-nightly-20121213.zip. In http:// of compiled html5 isn't present.
In game where there are screens from use of Scene2d and screens with Scene2dUI screens without Scene2dUI work very well. If I switch to the screen from Scene2dUI there is an error as now on http://
Edit:
Issue 1169
This issue is now fixed. just get a pull the sources from github to update.
related post: http://www.badlogicgames.com/wordpress/?p=2704

Difference between jQuery Mobile and PhoneGap

jQuery Mobile and PhoneGap both appear to be targeting cross-browser mobile development based on HTML5, but what are the major differences between the two?
What are the Pros and Cons of each framework?
Why would you choose one over the over?
Simply put jQuery Mobile is a UI toolkit for building mobile web applicaitons.
PhoneGap is a JavaScript framework which allows you to access native device functionality like the camera, contacts, file system, etc. PhoneGap does not provide UI elements.
If you want to create a hybrid mobile app, one which is built using HTML5 but runs on a device like a native app, you would not choose one over the other. You'd use both.
JQuery mobile is a javascript library for mobile broswing (mostly adapt the user-interface for better user experience on mobile devices)
Phonegap is a cross-platform development framework that provides core mobile device features to web-based mobile apps (Extracted from here)
Basically, you cannot use phonegape to take pictures from a website, but you can build an app with HTML and javascript (Phonegap) that access to some features in the mobile.
By the way you can use both in the same application: link
JQM is just a javascript framework, gives you some UI controls, animations and manages page navigation for you.
It's still a javascript webpage, so you don't actually have anything compiled in the end. Because of this your users access it using their BROWSER pointing to a URL, just like a normal website (only those are called Web-Apps in iOS language).
PhoneGap is just a Native project (written for all major Mobile hardware, like iOS, Android, BB, WP7, etc...) that wraps a WebView control (basically a browser window) inside an app. You could include your .js/.html files, and those would be loaded LOCALLY. Another feature of PhoneGap is a jscript bridge between your code and the phone's native capabilities (like for example taking a picture from javascript!).
You end up with a NATIVE APPLICATION that you can then post to the AppStore/AndroidMarket.
Hope this helps clarifying the difference.
The jQuery Mobile documentation has a page about making an app with PhoneGap and jQuery Mobile: http://jquerymobile.com/demos/1.0/docs/pages/phonegap.html

How to make an HTML5 that does not require the blackberry browser component?

I used the latest and greatest jQuery Mobile (RC1) to develop an app for the client. I used the latest Webworks version from RIM and packaged the app in a Cod file.
The app works great if accessed through the web browser ETC however when I installed the actual generated JAD/Cod files onto a blackberry device, performance was horrible even with minimum number of jQuery libraries.
Since I have Googled this everywhere and it is apparent that one cannot have a meaningful app experience if Webworks is used, I want to be able to just create something that just places the app icon on the phone. Once clicked, it open the browser and takes the user to the web server where the HTML files are parked.
Is this possible?
You can do that, with a very simple Java-application.
The following code:
Browser.getDefaultSession().displayPage("http://www.yourserver.com");
It will open browser and open page: http://www.yourserver.com
Browser class javadoc is here: http://www.blackberry.com/developers/docs/5.0.0api/net/rim/blackberry/api/browser/Browser.html