Using cordova for website app - javascript

I'll try to make a my website app, in relaty I need a top menu with some features and on the main frame I would like to see the web site, BUT I have to pharse the code for:
Create the menu in top menu with some other features
Take only the part that interests me
I don't care if I loose the original page format, I would like to parshe the original html code and work it
I tried InAppBrowser but it open the browser....I look some JSON translating but it's just for fun, I would not like spend 30$ :(
The site is made in joomla
Ideas?

Cordova isn't designed to directly load content from a website as a page.
You may be able to build a simple jQuery AJAX request for each page you want to show and then extract pieces of the resulting document.
Alternately, you could use a back-end plugin for Joomla that allows you to interface with the data from the website and then display it in an app you build using Cordova.

You could use Cordova to create a webview based app that builds the menu HTML / CSS / JS in the app on the device then for each section in the menu renders some of the content from your website inside another div in your webview and apply styles to that locally in the Cordova app. This would however make your app dependent the network to get to your website so you may also wish to consider caching content in the Cordova app for a period of time.
Ideally you would use Ajax requests back to the Joomla CMS and get the content through a JSON or XML (if you must) API then render it in the Cordova client using the Javascript framework of your choice.

Related

How to accomplish live preview feature in a web app?

Basically, we are using a headless CMS to edit content on Website A. We are building our own CMS UI based on the headless CMS API (call this Website CMS).
Now, we have this page in Website CMS wherein you can edit the content on the left panel and get a preview of Website A on the right panel (mobile view).
I haven’t done anything like this before and I am wondering what’s the best way to accomplish this and if there any libraries that help with this functionality.
Some ideas:
Embed Website A within Website CMS and any changes done on the left panel basically just refreshes Website A (which is just embedded into the page).
Recreate Website A as a page in Website CMS and call the same APIs so that the changes both happen on Website CMS’s Website A and the actual Website A. (Although I don’t see how this would be more beneficial and will create 2 separate codebases for the exact same page).
Others???
Main framework we are using is ReactJs for this CMS UI.
Option 2 is what I would do and wouldn’t necessarily be duplicative.
You would want users to be able to preview changes without publishing them. So porting the real website wouldn’t be compatible with that goal.
Code duplication would probably be minimal. It would share most of the same code and it would also propagate much faster.
you can establish a communication link between CMS and website A to exchange data.
Options
you can embed website A inside Website CMS using an iframe and then you can use postMessage to exchange data between CMS and Website A.
Or else you can use WebSockets where website A will listen for the changes done at the left panel of the CMS.

Search for text within an Ionic App

I am converting a web application to Mobile App where I have selected Ionic as the framework of my choice. In one particular section, the app loads HTML content (user entered) from backend. Since the content at times is very large client is asking for a search feature within the page. Something similar to the browser's search.
I tried to use window.find but that doesn't work within the mobile app.
Is it possible at all to make such feature ?

HTML5 Mobile Web App

I've just created the required HTML5 Mobile web pages(including the CSS3 and javascript pages). I've got the apk file from build.phonegap.com as well.
But I want it to be dynamic i.e I should be able to add content from my laptop.
I've searched a lot but I'm unable to get the right info on doing this.
I just want to be adding simple text paragraphs from my local server(laptop) to the app on the go. What do I do ?
Sound like you need to set up some type of json / sql web service.
Use your machine's ip to do this.
Suppose your laptop ip is 192.168.1.1
Then from your application just use
http://192.168.1.1/your_appliction/webpage
replace http://localhost/ to http://10.0.2.2/
EDIT:
Treat your laptop as remote server and access the files in it as you normally do in website building.
From another post I think might help...
1- if you are building the whole site from scratch: You can create your site by any CMS like dotNetNuke or joomla which will allow you to login and edit what you want
2- if you are building just this page from scratch : You can build your page with online-editing in mind, in this case I recommend to build two pages one for for viewing content and the other for online-editing you can use any HTML-Editor control like FCKEditor
3- if you are dealing with already built page : it will be easier to build administration page which you can upload the new version of the content page to it, and the administration page take care of replacing the content page
Or maybe even the knockout js plugin could be something to look into http://jsfiddle.net/rniemeyer/LkqTU/

Displaying External Webpages within an Enyo App

I'm new to Enyo and am trying to implement display interface for my website within an Enyo app.
Basically all that I want to display is the app's toolbar on the top of the page, and the rest of the page would simply display the contents of my website.
Considering that my website is already optimized for responsive display, how do I implement this without encountering Cross-Origin issues?
I think you'll want to embed your site's contents within an iFrame. You haven't said whether the app buttons will need to interact with your site's contents so you may run into some issues there.
You don't quite have enough detail for a better answer. What cross-origin problems do you predict? Where will you be deploying? Will you be pulling the site live or will you have a cached copy you distribute with the Enyo app?

Is it possible to make a cross browser extension linked to a Python web app backend?

Current Situation
I am in the early phases of designing a web app that the user will interact with via a browser extension that will be in the form of a horizontal nav bar. I wanted to use Pylons and Python on this project but am unsure how it fits in. As I understand it a browser extension is "just bundled HTML, CSS, JS and image files, plus some metadata".
But what does that mean?
Does that mean that HTML, CSS, JS,
image files and meta data are used to
create just the front end GUI nav
bar part of the browser extension?
Or
Does that mean that HTML, CSS, JS and
image files make up the front end GUI
nav bar and JS and meta data will take
care of the back end logic?
I ask this because I know that one can program web apps in Java Script alone.
Conclusion
Ideally I would like Python/Pylons to be the main brain of the web app and do the heavy lifting in terms of logic. Python/Pylons would basically take in data via JavaScript and give back data to Java Script/AJAX which would then, in real-time, update the GUI nav bar.
Is this possible?
As long as the extension uses HTTP to communicate, you can use whatever server-side technology you like to generate the data passed back to the client.

Categories