HTML Apps As Standalone Linux Apps

Linux tutorials and code.
1 post Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Screenshot:
htmlonlivedebugger-on-linux.jpg
The TideSDK is made to run HTML applications as Windows, Mac, or Linux apps. However one of the downsides to it is that it requires you to have that operating system in order to compile the app. It may work fine for you, but not for the other person. I've came across this a few times using TideSDK. TideSDK basically relies on a web browser for your application which is what I decided to do. I'll use Webkit as my browser and run the app in the browser, but make it look like a desktop application.

TideSDK requires you to set the default size in CSS, but unfortunately I couldn't figureout how to do that in python so I specified it in python.

That's all that would need to be modified in this app besides the name, and disabling the right click menu. Which means you can spend more time developing your HTML application for Linux. This will make developing Linux applications significalty easier.

Here's one done in WebKitGTK+ C
Code: Select all
/*
  Save this file as main.c and compile it using this command
  (those are backticks, not single quotes):
    gcc -Wall -g -o main main.c `pkg-config --cflags --libs gtk+-2.0 webkit-1.0` -export-dynamic

  Then execute it using:
  ./main
*/

#include <limits.h>
#include <gtk/gtk.h>
#include <webkit/webkit.h>

static GtkWidget* window;
static WebKitWebView* web_view;

static void destroy_cb (GtkWidget* widget, gpointer data) {
  gtk_main_quit();
}

static GtkWidget* create_browser() {
  GtkWidget* scrolled_window = gtk_scrolled_window_new (NULL, NULL);
  gtk_scrolled_window_set_policy (GTK_SCROLLED_WINDOW (scrolled_window), GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC);

  web_view = WEBKIT_WEB_VIEW (webkit_web_view_new ());
  gtk_container_add (GTK_CONTAINER (scrolled_window), GTK_WIDGET (web_view));

  return scrolled_window;
}

int main (int argc, char* argv[]) {
  gtk_init (&argc, &argv);

  GtkWidget* vbox = gtk_vbox_new (FALSE, 0);
  gtk_box_pack_start (GTK_BOX (vbox), create_browser(), TRUE, TRUE, 0);

  GtkWidget* window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_window_set_default_size (GTK_WINDOW (window), 800, 560);
  gtk_widget_set_name (window, "kodeWeave");
  gtk_window_set_icon_from_file(window, "app/logo.png", NULL);
  g_signal_connect (G_OBJECT (window), "destroy", G_CALLBACK (destroy_cb), NULL);
  gtk_container_add (GTK_CONTAINER (window), vbox);
  
  char uri[PATH_MAX];
  char cwd[PATH_MAX];

  getcwd(cwd, sizeof(cwd));

  if (argc > 1)
      snprintf(uri, sizeof(uri), "%s", argv[1]);
  else
      snprintf(uri, sizeof(uri), "file://%s/app/index.html", cwd);
  
  webkit_web_view_open (web_view, uri);

  gtk_widget_grab_focus (GTK_WIDGET (web_view));
  gtk_widget_show_all (window);
  gtk_main ();

  return 0;
}
This one below is done in PyGTK and it's more of a mimic, and requires you to run './nameofapp.py' or "python nameofapp.py" in the terminal, but hey your running an html application as a standalone 'linux' app. So enjoy!
Code: Select all
#!/usr/bin/env python

import webkit, gtk, os

win = gtk.Window()
win.set_title('My Mobile Design')
gtk.window_set_default_icon_from_file('logo.png')
win.resize(800,600)
win.connect('destroy', lambda w: gtk.main_quit())
scroller = gtk.ScrolledWindow()
win.add(scroller)
web = webkit.WebView()
path=os.getcwd()
print path
web.open("file://" + path + "/index.html")
web.props.settings.props.enable_default_context_menu = True
scroller.add(web)
win.show_all()
gtk.main()
You can download the HTML OnLive Debugger, or My Mobile Design in which I use this exact script to make these apps available for Linux users like myself :)
You do not have the required permissions to view the files attached to this post.
1 post Page 1 of 1
Return to “Programming”