feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Doc: Add info about building apps for the web

Browse Source 
Users have to install Qt for WebAssembly and the tool chain,
as well as add a kit.

Fixes: QTCREATORBUG-22927
Change-Id: Id22d5fb5e7d9e676d77f3f80880030cb9c1f61c7
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
This commit is contained in:
Leena Miettinen
2019-09-11 15:27:34 +02:00
parent eb2691bd91
commit 99c0d3332e
11 changed files with 147 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
doc/images/qtcreator-kit-webassembly.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
doc/images/qtcreator-settings-run-webassembly.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

11
doc/src/overview/creator-only/creator-mobile-targets.qdoc
View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2018 The Qt Company Ltd.
** Copyright (C) 2019 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
@@ -47,6 +47,9 @@
Additionally, you can connect Linux-based devices by using a WLAN
connection.
The experimental WebAssembly plugin enables you to build your applications
in WebAssembly format, to deploy them, and to run them in a web browser.
\list
\li \l{Connecting Android Devices}
@@ -95,6 +98,12 @@
\list
\li \l{Building Applications for the Web}
You can use the experimental Qt WebAssembly plugin to build
applications in WebAssembly format, to deploy them, and to
run them in a web browser.
\li \l{http://doc.qt.io/qtcreator/creator-overview-qtasam.html}
{Qt Application Manager}

3
doc/src/overview/creator-only/creator-overview.qdoc
View File

@@ -40,7 +40,8 @@
\QC is an integrated development environment (IDE) that provides you with
tools to design and develop applications with the Qt application framework.
Qt is designed for developing applications and user interfaces once and
deploying them to several desktop, embedded, and mobile operating systems. \QC
deploying them to several desktop, embedded, and mobile operating systems or
web browsers (experimental). \QC
provides you with tools for accomplishing your tasks throughout the whole
application development life-cycle, from creating a project to deploying the
application to the target platforms.

3
doc/src/overview/creator-only/creator-supported-platforms.qdoc
View File

@@ -39,7 +39,8 @@
\title Supported Platforms
You can install and run \QC on several operating systems to create
applications for multiple desktop, embedded, and mobile device platforms.
applications for multiple desktop, embedded, and mobile device platforms,
as well as web browsers (experimental).
\QC automatically runs scheduled checks for updates based on the settings
specified in \uicontrol Tools > \uicontrol Options \uicontrol Environment >

7
doc/src/overview/creator-only/creator-target-platforms.qdocinc
View File

@@ -46,6 +46,8 @@
\li Universal Windows Platform (UWP)
\li WebAssembly
\endlist
\section2 Embedded Devices
@@ -104,6 +106,11 @@
\li
\li
\li \image ok
\row
\li WebAssembly
\li \image ok
\li \image ok
\li \image ok
\endtable
* See \l{Running on QNX Devices} for limitations.

4
doc/src/projects/creator-only/creator-projects-builds-customizing.qdoc
View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2018 The Qt Company Ltd.
** Copyright (C) 2019 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
@@ -36,7 +36,7 @@
\previouspage creator-developing-generic-linux.html
\nextpage studio-advanced.html
\else
\previouspage creator-developing-qnx.html
\previouspage creator-setup-webassembly.html
\nextpage creator-testing.html
\endif

2
doc/src/qnx/creator-developing-qnx.qdoc
View File

@@ -32,7 +32,7 @@
\contentspage index.html
\previouspage creator-developing-ios.html
\page creator-developing-qnx.html
\nextpage creator-build-process-customizing.html
\nextpage creator-setup-webassembly.html
\title Connecting QNX Devices

1
doc/src/qtcreator-toc.qdoc
View File

@@ -176,6 +176,7 @@
\li \l{Connecting Embedded Linux Devices}
\li \l{Connecting iOS Devices}
\li \l{Connecting QNX Devices}
\li \l{Building Applications for the Web}
\endlist
\li \l{Customizing the Build Process}
\endlist

7
doc/src/qtcreator.qdoc
View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Copyright (C) 2019 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
@@ -45,6 +45,11 @@
Windows
operating systems. For more information, see \l{Supported Platforms}.
In addition, you can use the experimental
\l{Building Applications for the Web}{WebAssembly plugin}
to build applications in web format and run them in web
browsers.
This manual also describes features that are only available if you have the
appropriate \l{http://qt.io/licensing/}{Qt license}. For more information,
see \l{Commercial Features}.

116
doc/src/webassembly/creator-webassembly.qdoc Normal file
View File

@@ -0,0 +1,116 @@
/****************************************************************************
**
** Copyright (C) 2019 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/
/*!
\contentspage index.html
\previouspage creator-developing-qnx.html
\page creator-setup-webassembly.html
\nextpage creator-build-process-customizing.html
\title Building Applications for the Web
WebAssembly is a binary format that allows sand-boxed executable code in
web pages. This format is nearly as fast as native machine code, and is
now supported by all major web browsers.
\l {Qt for WebAssembly} enables building Qt applications so that they can be
integrated into web pages. It doesn't require any client-side installations
and reduces the use of server-side resources.
The experimental WebAssembly plugin enables you to build your applications
in WebAssembly format and deploy and run them in the local web browser.
You can change the web browser in the project run settings.
To build applications for the web and run them in a web browser, you need to
install Qt for WebAssembly and the tool chain for compiling to WebAssembly,
as well as add a build and run kit in \QC.
\section1 Requirements
You need the following software to build Qt applications for the web and run
them in a browser:
\list
\li Qt for WebAssembly 5.13.1, or later
\li On Windows: \l{http://mingw.org/}{MinGW} 7.3.0, or later
\li \l{https://emscripten.org/docs/introducing_emscripten/index.html}
{emscripten} tool chain for compiling to WebAssembly
\li \c sed stream editor
\endlist
\note You need to add the location of the \MinGW and \c sed installation
folders to the system path, either globally or for the Qt for WebAssembly
kit.
\section1 Setting Up the Development Environment
To configure \QC for building Qt apps for the web and running them in a
web browser:
\list 1
\li Use the Qt maintenance tool to install Qt for WebAssembly and, on
Windows, \MinGW (found in \uicontrol {Developer and Designer Tools}).
\li Check out \c emsdk and install and activate \c emscripten, as
instructed in \l {Qt for WebAssembly}.
\li On Windows, you have to download and install \c sed, as instructed
in \l{http://gnuwin32.sourceforge.net/packages/sed.htm}
{sed for Windows}, and add its location to the system PATH.
\li In \QC, select \uicontrol Help > \uicontrol {About Plugins} >
\uicontrol {Device Support} > \uicontrol {WebAssembly} to enable
the plugin.
\li Restart \QC to be able to use the plugin.
\li Select \uicontrol Tools > \uicontrol Options > \uicontrol Kits >
\uicontrol {Qt Versions} > \uicontrol Add to add Qt for WebAssembly
(wasm_32).
\li Select \uicontrol Tools > \uicontrol Options > \uicontrol Kits >
\uicontrol Add to add a kit for building applications for the web:
\image qtcreator-kit-webassembly.png "Qt for WebAssembly kit"
\list 1
\li In the \uicontrol Name field, specify a name for the kit.
\li In the \uicontrol {Device type} field, select
\uicontrol {WebAssembly Runtime}.
The value of the \uicontrol Device field is automatically
set to \uicontrol {Web Browser}.
\li In the \uicontrol Compiler field, select
\uicontrol {Emscripten Compiler} for both C and C++.
\li Select \uicontrol Change next to the \uicontrol Environment
field to append the locations where you installed \MinGW and
\c sed to the PATH variable. For example, on Windows:
\c {PATH=C:\Qt\Tools\mingw730_64\bin;C:\Program Files (x86)\GnuWin32\bin;${PATH}}
\li Select \uicontrol Apply to add the kit.
\endlist
\li Open a project for an application you want to run in a web browser.
\li Select \uicontrol Projects > \uicontrol {Build & Run}, and then
select the WebAssembly kit as the build and run kit for the project.
\li Select \uicontrol Run to specify run settings.
\li In the \uicontrol Browser field, select the browser to run the
application in.
\image qtcreator-settings-run-webassembly.png "Selecting the browser to run in"
\endlist
You can now build Qt applications in WebAssembly format and run them in
a web browser as described in \l {Building for Multiple Platforms} and
\l{Running on Multiple Platforms}.
*/