Is there a cross-OS GUI framework that supports embedding HTML pages?
Asked Answered
P

9

9

I want to develop a desktop app to be used cross-system (win, mac, linux), is there a GUI framework that would allow me to write code once for all 3 platforms and have a fully-scriptable embedded web component?

I need it to have an API to communicate between app and webpage javascript.

I know C#, JavaScript and a little bit of python.

Pehlevi answered 24/8, 2012 at 12:54 Comment(0)
C
4

Qt has such a thing with QWebView.

Caseycash answered 24/8, 2012 at 12:57 Comment(1)
Wouldn't hurt to name the component.Neille
G
24

There is also TideSDK formally known as Titanium. This provides a WebKit HTML/JavaScript widget that does pretty much everything you could want, including running the Chrome developer tools.


EDIT below. Consolidating my update with feedback from the TideSDK developers:

TideSDK, formerly Titanium Desktop, is an open source software development kit for creating multi-platform desktop apps using HTML5, CSS3, JavaScript and other common scripting languages. The project is hosted on Github. The main web site has comprehensive documentation and hosts an active developer community. Thousands of developers have used the former Titanium Desktop to develop deskop applications. Perhaps the most recognized applications is Wunderlist

TideSDK allows you to use your web development skills to create desktop apps and provides wide range of privileged APIs. You can easily extend the functionality of your app using mature libraries in python, php or ruby.

The heart of TideSDK is an object bridge compiled into the WebKit component. The bridge allows other scripting languages - python, php or ruby - to run on the HTML page using script tags in the DOM, just like JavaScript. You can also directly call .py, .rb or .php files from within your application.

TideSDK can be used with no more than a basic text editor - it does not need any special tools or an IDE although many developers prefer richer tools. TideSDK includes command-line tools for running your application locally (for development and debugging) and also to package it into an installer for the OS that you are developing on (Windows, Mac OSX and Linux are supported). To get all the needed installers, a typical TideSDK development environment will include a physical or virtual machine for each OS. The TideSDK team is looking to implement a different and better way soon.

The TideSDK team is currently developing a TideSDK Builder app. It will provide a GUI for creating, running and packaging TideSDK apps. To get developers started faster, TideSDK Builder introduces a new feature - Scaffolds. Scaffolds generate all the boiler plate to instantiate a projects with specific patterns of development such as Backbone MVC. Developers can use TideSDK Builder to create, import and share scaffolds.

The roadmap for TideSDK includes the implementation of CommonJS for 1.4 which aims to provide developers with a more modular development experience using JavaScript.

Hello World

A TideSDK project consists of some boilerplate code with a Resources folder that contains the core project files. The following illustrates the stucture of a simple hello world app that will run on all supported plaforms:

├── CHANGELOG.txt
├── LICENSE.txt
├── README.md
├── Resources
│   ├── app.js
│   ├── default_app_logo.png
│   └── index.html
├── manifest
└── tiapp.xml

The manifest contains information about the runtime modules used by the project. tiapp.xml provides configuration and default_app_logo.png is the image that will appear by default in the dock, system tray or in the windows of your app.

The following is the contents of the app.js file for the hello world example (as it will appear in TideSDK 1.3.0). Previous versions will have used the Titanium namespace which has been discontinued.

// create and set menu
var menu = Ti.UI.createMenu(),
fileItem = Ti.UI.createMenuItem('File'),
exitItem = fileItem.addItem('Exit', function() {
  if (confirm('Are you sure you want to quit?')) {
    Ti.App.exit();
  }
});

menu.appendItem(fileItem);
Ti.UI.setMenu(menu);

Here is the HTML for the same app. It calls the script above.

<!DOCTYPE html>
<html>
<head>
  <title>Hello World</title>
  <style type="text/css">
    body {background: #fff;}
  </style>
</head>
<body>
  <h1>Hello World</h1>
  <script type="text/javascript" src="app.js"></script> 
</body>
</html>

In less than 10 lines of JavaScript code, we create a menu, adding 'File' and 'Exit' menu items, and set it to the main window. A simple callback method is used to pop open a exit confirmation dialog. If the user confirms, the app will exit.

Background

Titanium was developed by Appcelerator and made available under the Apache 2 Licence. Originally Appcelerator provided the open source Titanium Developer to create projects. Later Appcelerator introduced the closed source Titanium Studio, an IDE on top of Aptana. While it currently remains possible to develop TideSDK in Titanium Studio, a plugin may be required in the future. [Andrew: sorry, this is not clear to me. A plugin to Titanium Studio? Or Aptana? Or the TideSDK?]

Appcelerator has supplied an TiStudio SDK to use to use that might assist us in creating a plugin to TiStudio to allow TideSDK to be used through TiStudio

Greasewood answered 27/8, 2012 at 1:20 Comment(7)
I vouch that TideSDK is a full solution to being able to develop desktop applications without the painful mess of leaning Objective C and C etc...Corolla
I've heard of titanium, but it looks like they've made great progress, it looks promising, I'm going to try it, thanksPehlevi
This looks great. How in the world do you compile it?? I cannot find any information on how to get it from a directory structure to an application.Zo
@preahkumpii: The TideSDK contains a build/package script called tibuild.py. On Mac this is under (not in) ~/Library/Application Support/Titanium/sdk. For Windows, see developer.appcelerator.com/question/73271/…. Run this script (no args gives you the command line parameters and help). My command line is: tibuild.py -r -d build appnameGreasewood
@AndrewAlcock Wow, thanks for the explanation. I was using Ti Dev Community with some success for the moment. I am looking forward to when they get a GUI version of TideSDK compiler available.Zo
@preahkumpii: The guys now running TideSDK are really approachable. They can be reached at IRC (#TideSDK) and also on Google Groups at TideSDK.Greasewood
However, 6Wunderkind abandoned Titanium: christianreber.com/blog/…Stigmasterol
E
8

as cited, TideSDK (http://www.tidesdk.org/) is an option (the better at the moment for me) you could also go with the same idea XUL Runner (https://developer.mozilla.org/en-US/docs/XULRunner), Adobe AIR (http://www.adobe.com/devnet/air/air-sdk-download.html) ( here: http://www.adobe.com/devnet/air.html is the tutorials with "how to" in other ways than besides flash and dreamweaver, AppJS (http://appjs.org/) or Node Qt (https://github.com/arturadib/node-qt) with more work there is cef (http://code.google.com/p/chromiumembedded/), berkelium (http://berkelium.org/), awesomium (http://awesomium.com) or How can I embed firefox in a GUI application? which says how to embed gecko (firefox's engine) in applications.

ok, now my opinions on all: the first options will offer you a better way to go, as they are basically a "browser" that works cross platform, you will deploy a html + js + css app (with air you can deploy flash/action script apps too); the other options you have to build a app and then put the "browser" in it, it offers more flexibility, but may be counterproductive.

my experience with all is: tidesdk - is good and stable but is still growing, so some advanced features may be missing out, but you can compile it and the dev team is very active

xulrunner - stable, impossible to do complex things, you will need a good C knowledge to make your own components as it offers you basic stuff only. it's very flexible in what you can do, but have a rigid structure of content, your app will not run unless it's organized in such a way, and has a ugly syntax in my opinion (lol), it's a mix between java and javascript styles of programming

adobe air - easy to use and deploy, but is flash which gives me that weird itching sensations of unoptimized stuff

appjs - is nodejs, the example works, i couldn't get my custom app running, i think it's not refined yet, it works, for me, in a quirky way

nodeqt - is qt + nodejs, you need to compile your own version of qt, i haven't tested but looks simple to deploy

the others embedding ways - haven't tested, looks good and all, but i don't know, may be too work for nothing

Exfoliation answered 30/8, 2012 at 5:38 Comment(0)
C
4

Qt has such a thing with QWebView.

Caseycash answered 24/8, 2012 at 12:57 Comment(1)
Wouldn't hurt to name the component.Neille
C
3

What about using the Chromium Embedded Framework.

It's open-source (BSD License) and comes with bindings for C, C++, .NET(1 or 2), Java, Delphi and Python.

This .NET binding is also fully compatible with Mono which will be helpful to have a cross-platform app.

Note: AppJS, which is mentionned in another answer, is build on top of CEF (using node.js).

Correction answered 31/8, 2012 at 6:35 Comment(0)
D
2

I'm going to throw this one out:

AppJS: http://appjs.org/

Disappear answered 30/8, 2012 at 20:2 Comment(0)
D
1

wxWidgets too.

PS: Qt interests me more for cross-platform GUI purposes.

Dip answered 24/8, 2012 at 13:7 Comment(0)
D
0

Since my first answer was for wxWidgets and you feel Qt is not for you...
You mentioned not javascript - note that PyQt "provides [python] bindings for Qt 2 and Qt 3". PySide is Nokia's official Python bindings for Qt. A "PyQt vs PySide" search provides interesting results:

There's also PythonQt but I haven't looked into it at all.

FYI,

  • Qt Networking examples
  • Qt WebKit examples:

    Qt provides an integrated Web browser component based on WebKit, the popular open source browser engine.

    These examples and demonstrations show a range of different uses for WebKit, from displaying Web pages within a Qt user interface to an implementation of a basic function Web browser.

  • Qt also supports C#
  • and many other languages.
  • KDE (Linux Desktop Environment) uses and develops Qt

Anything specific about Qt that makes it 'not a great fit' for you?

Dip answered 29/8, 2012 at 12:3 Comment(1)
I went through the Qt site and it seemed like you can do anything with C++ and some things with JavaScript. I don't know C++ at all. I also saw Qyoto (that supports C#), but also read that it is not supported anymore. I'll look further into PyQt.Pehlevi
I
0

What's wrong with Mono and WinForms

Iamb answered 29/8, 2012 at 13:55 Comment(3)
@AlexanderN well it makes sense when you know c# and JS to use something familiar rather than a totally different framework and language, doesn't it?Iamb
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post.Broomrape
@MartijnPieters so you want to change the words "What's wrong with" with "Go for" and it'll be fine. Your definition of an answer is what's wrong - I'm neither criticizing nor requesting clarification - I'm giving the author exactly what he needs.Iamb
C
0
  1. It is strange that Qt is not for you. You may be surprised to hear Sencha's Architect and Animator products use Qt and QWebView for cross platform JavaScript applications with full menus and icons and executables and system dialog boxes and file I/O.

    It currently works Windows, OSX, and Linux.

    They use an in-house developed library called ion to load and interact a JavaScript application. They provide some helper classes for JS to use.

    A simple skeleton c++ application which uses Qt to create and load a window and create a web view in that window and load html and other content from file into that view.

  2. Another solution is Adobe's Air which is like a browser with native support. It also provides deployment.

Coachwhip answered 31/8, 2012 at 8:37 Comment(2)
I don't like having code in my projects that I can't work with, I've read about javascript in Qt and it looks like it can't do everything that C++ can (I don't know C++), if everything was possible with only javascript - I'd have no problemsPehlevi
"I don't like having code in my projects that I can't work with". Deal with it since you work with browser, JS runtime, OS and many other components. Try Adobe AIR, which is a runtime environment as your browser. All JS. provides native support. Supports Windows, Linux, Mac, Android, iOS, even BlackBerry PlayBookCoachwhip

© 2022 - 2024 — McMap. All rights reserved.