AppxHTMLClient < Main

Tags: view all tags
---+ APPX HTML Client

_This page gives installation instructions and an overview of the Appx HTML client._

<br /><span><span>%TOC%</span></span>
---++ Overview

The Appx HTML client is designed to allow you to connect to an Appx server and run Appx applications using a browser, either on the desktop, a tablet or a smartphone. When running the client in a browser, no software is required on the desktop, tablet or smart phone. When the user logs on, the necessary code is downloaded to their device as required.

In this release, you can only run the applications, you cannot design them. Specifically, the ILF editor, old ILF Debugger and Image Editor are not supported. You may be able to work in Application Design so long as you avoid those.

The client will support SSL connections if your web server is configured appropriately. If not, the client will use its own built in AES encryption *but be aware that this is not sufficient to protect sensitive data*.

The Appx HTML client consists of two modules:
   * Web Server Files. These are the javascript libraries and style sheets that make up the HTML client. These must be installed in your web server's document directory. These files are platform independent.
   * APPX Server connector. This is a small javascript library that connects the client running in your browser to the actual Appx engine. The Appx Server Connector is platform specific, you will need the one that matches the O/S under which your web server is running.
Note that Appx does not have to be running on the same server as your web server, and the APPX Server Connector does not have be on the same server as either Appx or your web server. This gives you maximum flexibility in configuring your installation.

Once the HTML client is working, you can connect to any Appx 5.4+ server, just as you can with the Appx Desktop Client. Due to the engine changes that were made in 5.4 to support the HTML client, you cannot connect to an earlier Appx engine.
---+++ Local Connector

Because of the tighter security in web browsers, it is not possible for HTML 5/javascript to seamlessly upload, download or open files on the users desktop the way it can be done with the Appx Desktop Client. To address this, the HTML client includes a small 'helper' program that supports this. This is called the 'LocalConnector'. By default, the HTML client will check to see if the local connector program is running when the user logs in. If it is not running, it will offer to install it, and if the user cancels they will be nagged the next time they log in.

If your application does not require the ability to upload/download/open files on the desktop, you can turn this off (see Installation below).

There is a 'Connectivity' indicator in the lower right corner of the browser window with the words 'Remote' and 'Local'. If 'Local' is in green with a "+", it means the local connector is installed & running. Red means the connector is not installed. The 'Remote' connector refers to the connection to the Appx Server Connector. This must be green with a "+" for any connection to work.
---+++ Differences between ADC and HTML Clients

The HTML client has a different presentation for most non-Appx elements such as Date Choosers, File Upload/download dialog boxes, Tables, etc. The goal of the HTML client was to replicate the presentation of your screens as accurately as possible as far as the Appx elements are concerned (i.e., the widgets and fields you use in the Image Editor). Since we use different 3rd party tools and runtimes for other elements, they will look different compared to the Appx Desktop Client.
---++ Requirements

You will need a web server, either Linux or Windows based. If you are going to use the Apache web server and you want to use a forwarding proxy, it must be version 2.4 or higher. We have tested IIS on Win 7 with success, earlier versions of IIS have not been tested.

The web server does not have to be on the same server as Appx.

If you plan to use an SSL connection, your web server must be configured to accept both SSL and non-SSL connections.

We have tested the HTML client on current versions of IE, Chrome, Firefox and Safari.
---++ Installation

First extract the Web Server File (webhost.zip) into the document folder for your web server. Depending on your web site layout, you may want to put this in its own folder within the web server documents, i.e., /var/www/html/appx.

Next, extract the Appx Server Connector to a location of your choice. This is the software that will connect your browser client to the Appx Login Manager. A folder in the /opt directory would be a good choice on a Linux server. Once the software is extracted, you must manually start the connector running. For example, if you installed the connector in /opt/appxConnector, then you would (as root):

# cd /opt/appxConnector<br /># nohup ./node appxConnector.js &

If you are running on Windows, then extract the Appx Server Connector to a folder of your choice and invoke it. For example, if you installed it a folder called "C:\AppxConnector", then you would:

cd \appxConnector<br />node appxConnector.js

Note that this will appear to 'hang', but it is actually running and waiting for connections. Just minimize the DOS box and leave it running.

Eventually this will be a service, but for now you must manually start the connector upon first installation and after every reboot.

Finally, you need to set the name of the host running the Appx Server Connector in the 'client.html' web page:

&lt;meta name="appx-proxy-host" content="HOSTNAME"&gt; &lt;!-- Server Connector hostname or web server if tunneling --&gt;

Change HOSTNAME to the name or IP address of the server running the Appx Server Connector. Do _not_ use localhost.

Assuming the web server to which we installed the client is 192.168.0.15, and that we installed everything into an 'appx' folder on the web server, then we should be able to get a client login dialog box via:

http://192.168.0.15/appx/client.html

You must open port 3014 on your web server for this connection to work. If you do not want to open any new ports on your web server, see the section on 'Tunneling/Forwarding'. *NOTE: You cannot use 'localhost' for the host name here, you must use the IP address or the actual host name.*
---+++ LocalConnector

As mentioned above, you can suppress the requirement for the LocalConnector by changing the following line in "client.html":

&lt;meta name="appx-local-required" content="true" &gt;

Change the "true" to "false" to supress the requirement.
---+++ [[LocalConnector][LocalConnector Installation]]

If you do not turn off the LocalConnector requirement as above, then when the 'client.html' page is loaded it will check to see if the local connector is running on the users desktop. If not, they will get a dialog box offering to download the local connector. The actual installation of the local connector varies by the O/S on the user's desktop:
   * Windows: Once the download is complete, run the installer. The local connector will be installed, started and Windows will be configured to automatically start on a reboot. No further action is required.
   * Mac O/S: Once the download is complete, open the disk image and double click the installer. The local connector will be installed and started. The local connector will have to manually started after each login by opening a terminal window and entering the command "cd AppxLocalConnector;open node-webkit.app". Alternatively, the user can add 'node-webkit.app' in their AppxLocalConnector folder to their Login Items in System Preferences.
   * Linux: Once the download is complete, open a terminal window and enter:
      * cd Downloads (or wherever the file was saved to)
      * sh localConnector_linux32.sh or sh localConnector_linux64.sh, depending on whether you have 32 or 64 bit Linux. The connector will be installed.
      * Start the connector running by:
         * cd $HOME/AppxLocalConnector
         * sh ./start-nw.sh
      * The user has to manually start the local connector every time they log in, or they can add the script to their programs that start automatically when they log in. The steps vary by Linux distribution, consult your documentation.
---++ Tunneling/Forwarding

If you do not want to open port 3014 and would rather use port 80, you can use forwarding instead. For example, to configure Apache 2.4 on Linux you would do the following:
   * <p>In /etc/httpd/conf.modules.d/00-proxy.conf, add (if not already loaded):<br />LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so</p>
   * <p>Create the /etc/httpd/conf.d/appx.conf file with the following lines (or just add these to httpd.conf)<br /> ProxyPass /appxws/ ws://localhost:3014<br /> ProxyPass /appxwss/ wss://localhost:3014</p>
   * <p>Change 'client.html' settings to:</p> <p>appx-proxy-host = hostname of httpd server (i.e., 192.168.1.11)<br /> appx-proxy-port = “80" <br /> appx-proxy-path = /appxws/ <br /> appx-encryption = “aes”</p>
   * <p>Restart your web server</p>
---++ SSL

If you are running a secure web server (https), you can configure the Appx HTML client to use your SSL connection. Your web server must to configured to accept both SSL (https:) and non-SSL (http:) connections.

Change your "client.html" settings as follows:

appx-proxy-host = hostname of httpd server (i.e., 192.168.1.11)<br />appx-proxy-port = “443" <br />appx-proxy-path = /appxwss/ <br />appx-encryption = “ssl”

In 'appxConnector.js' change:

var sslEnabled = *true*;

var sslPrivateKey = "<b>/etc/pki/tls/private/example.key</b>";<br />var sslCertificate = "<b>/etc/pki/tls/certs/example.com.crt</b>";<br />var sslCertAuthority = "<b>/etc/pki/tls/certs/gd_bundle.crt</b>";

The SSL key values above are examples, you will need to change the file paths to point to your own SSL certificates.

Once you have made the above changes, restart the Server Connector and refresh the Appx Login page in your browser (if it was still loaded when you made these changes).

*NOTE:* You still use 'http://' to connect to the client page. The client will switch to the SSL connection once the page is loaded.
---++ Styles

Many aspects of the presentation of the Appx Client are controlled by the APPX.css style sheet in the 'css' folder. If you are familiar with working with style sheets, feel free to experiment with different settings.

You can also add a CUSTOM.css style sheet with your own settings. This will override the standard settings in the HTML client.
---++ Troubleshooting
   * If the client login dialog box does not display, check your web server error logs for any error messages & correct as required.
   * If you are getting "[proxy:error] [pid xxxx] (13)Permission denied:" errors, you might have a selinux security issue that prevents apache from initiating any outgoing network connections to the web socket server port. In that case, try the following command:<br /> # setsebool -P httpd_can_network_connect 1
   * Some browsers (like IE) will not run the client successfully if you double click the 'client.html' file. You should always access the web page via http://servername/client.html, even if the page is installed on your local system.
   * Check to make sure your Appx Server Connector is still running. If not, restart it via 'nohup ./node appxConnector.js &' for Linux or 'node appxConnector.js' for Windows.
---++ Known Issues

The following are the known problems with the HTML client. We are continuing to enhance the client, watch the download page for updates!

   * [[http://bugtracker.appx.com/view_bug.jsp?sid=e76e6a6ef228689a&bugid=3067][File Chooser input field missing icon]] (#3067)
   * [[http://bugtracker.appx.com/view_bug.jsp?bugid=3073][Review Preferences]] [[http://bugtracker.appx.com/view_bug.jsp?bugid=3070][ (#3073)]]
   * [[http://bugtracker.appx.com/view_bug.jsp?bugid=3108][Monitor Screen has some garbage in scrolling area]] [[http://bugtracker.appx.com/view_bug.jsp?bugid=3081][ (#3108)]]
   * [[http://bugtracker.appx.com/view_bug.jsp?bugid=3147][Reconnect doesn't ever time out?]] [[http://bugtracker.appx.com/view_bug.jsp?bugid=3125][ (#3147)]]
   * [[http://bugtracker.appx.com/view_bug.jsp?bugid=3156][Some buttons are trimmed]] (#3156)
   * [[http://bugtracker.appx.com/view_bug.jsp?bugid=3166][Some missplacement of items in WorkFLow screen]] (#3166)
   * [[http://bugtracker.appx.com/view_bug.jsp?bugid=3187][Scrolling screens missing column separators]] [[http://bugtracker.appx.com/view_bug.jsp?bugid=3183][ (#3187)]]
   * [[http://bugtracker.appx.com/view_bug.jsp?bugid=3188][Alert Box in MDI app on krokus looks different than Java Client]] (#3188)
   * [[http://bugtracker.appx.com/view_bug.jsp?bugid=3189][MDI HTML widget on notes doesn't look right for both Java and HTML5 client]] (#3189)
   * [[http://bugtracker.appx.com/view_bug.jsp?bugid=3190][Final Action Inquiry Button not aligned(text)]] (#3190)
   * [[http://bugtracker.appx.com/view_bug.jsp?bugid=3191][Application Journal Button text alignment wrong]] (#3191)
   * [[http://bugtracker.appx.com/view_bug.jsp?sid=5ab4aa2596d37093&bugid=3211][Shortcut not underlined if button text contains HTML]] (#3211)
   * [[http://bugtracker.appx.com/view_bug.jsp?sid=5ab4aa2596d37093&bugid=3218]['Fill' attribute for tables not honoured]] (#3218)
   * [[http://bugtracker.appx.com/view_bug.jsp?sid=5ab4aa2596d37093&bugid=3222][2nd level menu drawn incorrectly]] (#3222)
   * [[http://bugtracker.appx.com/view_bug.jsp?sid=5ab4aa2596d37093&bugid=3223][@SLL macro not supported properly (different results on different browsers)]] (#3223)
   * [[http://bugtracker.appx.com/view_bug.jsp?sid=5ab4aa2596d37093&bugid=3229][Links in HTML Viewer don't work in Firefox]] (#3229)
   * [[http://bugtracker.appx.com/view_bug.jsp?sid=5ab4aa2596d37093&bugid=3233][Slider Control doesn't work.]] [[http://bugtracker.appx.com/view_bug.jsp?sid=5ab4aa2596d37093&bugid=3231][ (#3233)]]
   * [[http://bugtracker.appx.com/view_bug.jsp?sid=5ab4aa2596d37093&bugid=3236][Image display is really, really slow]] (#3236)
   * [[http://bugtracker.appx.com/view_bug.jsp?sid=5ab4aa2596d37093&bugid=3240][File Chooser does't allow selecting a folder name]] [[http://bugtracker.appx.com/view_bug.jsp?sid=5ab4aa2596d37093&bugid=3237][ (#3240)]]
   * [[http://bugtracker.appx.com/view_bug.jsp?sid=5ab4aa2596d37093&bugid=3241][Data Missing from PDF Print on Screen Dialog]] (#3241)
   * [[http://bugtracker.appx.com/view_bug.jsp?sid=5ab4aa2596d37093&bugid=3249][Auto Select doesn't work if GET/LOST FOCUS or KEY PAUSE set]] (#3249)
   * [[http://bugtracker.appx.com/view_bug.jsp?sid=e76e6a6ef228689a&bugid=3077][Debugger does not display properly]] (#3077)
   * [[http://bugtracker.appx.com/view_bug.jsp?sid=e76e6a6ef228689a&bugid=3146][Line Widget doesn't draw lines properly]] (#3146)
   * [[http://bugtracker.appx.com/view_bug.jsp?sid=e76e6a6ef228689a&bugid=3238][Drag & Drop Doesn't work - Part 2]] (#3238)

---++ Comments:

_Read what other users have said about this page or add your own comments._
---

<br />%COMMENT%

-- Main.JeanNeron - 2014-11-10
Topic revision: r18 - 2015-02-13 - JeanNeron