By: Dawei Cheng Dawei (Intel) (10 articles) date: October 11, 2010 at AM
This article describes how to use web development tools in QT WebKit to develop local content containing web content.
Note: this series of articles focuses on the development process. For details about how WebKit explains html dom tree and how to use rendering HTML and JavaScript, refer
Http://webkit.org /.
Before sharing the development process, let's take a look at the web application architecture.
1. Development Environment:
-
- Based on qtwebkit Browser Engine
- Developed with HTML, CSS and JavaScript
- Used by QT Creator for Windows
- Other ides, such as Visual Studio or eclipse, as well.
2. Create a project:
-
- Start the QT creator IDE.
- Select File> New file or project...> projects> qt4 GUI application.
- Give the project a name and set its location.
- Check the qtwebkit module and click Next.
- Click Finish.
3. modify the code: the source code of the Project is displayed in the edit column on the left of the Creator. Open the header file widgetwindow. h and make the following changes:
-
- # Ifndef widgetwindow_h
- # Define widgetwindow_h
- # Include <qtcore/qpointer>
- # Include <qtgui/qmainwindow>
- Class qwebview;
- Class widgetwindow: Public qmainwindow
- {
- Q_object
- Public:
- Widgetwindow (qwidget * parent = 0 );
- ~ Widgetwindow ();
- PRIVATE:
- Void setupui ();
- // Declare the function used to display the Web Application
- Qwebview * createwebview ();
- PRIVATE:
- Qpointer <qwebview> webview;
- };
- # Endif // widgetwindow_h
4. display web content
-
- Create the HTML, CSS, and JavaScript files required by the web application in the QT project, and assume they are in the HTML/, style/, and scripe/folders respectively. The folder view is as follows: if you want to learn more about web development, click here to enter: http://zh.html.net/tutorials/html/
-
-
-
- Html/(HTML files)
- Style/(CSS files)
- Script/(JavaScript files)
- Create the resource file. In QT, the link to the web content file is implemented through the qrc file. Here is the content of the qrc file helloqtwebkit. qrc.
-
- <? XML version = "1.0" encoding = "UTF-8"?>
- <RCC version = "1.0">
- <Qresource>
- <! -- HTML files -->
- <File> html/index.html </File>
- <! -- CSS files -->
- <File> style/general.css </File>
- <! -- JavaScript files -->
- <File> script/basic. js </File>
- </RCC>
- Open the HTML file and paste the HTML file code as follows: This is a very simple hellodemo.
-
- <Head>
- <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
- /* Add 'qrc:/'in the front of CSS/JS files address */
- <LINK rel = "stylesheet" href = "qrc:/style/general.css" type = "text/CSS"/>
- <SCRIPT type = "text/JavaScript" src = "qrc:/script/basic. js" charset = "UTF-8"> </SCRIPT>
- <Title> Hello QT WebKit </title>
- </Head>
- <Body onload = "javascript: Init ();">
- <Input type = submit value = "Hello QT WebKit! "
- <Div id = "output">
- </Div>
- </Body>
5. function implementation. Open the function file widgetwindow. cpp to implement the previously declared createwebview function.
-
-
-
- /* Display the web application by rendering HTML file */
- Qwebview * widgetwindow: createwebview ()
- {
- Qwebview * view = new qwebview (this );
- /* Load the HTML file location to qurl */
- View-> load (qurl ("qrc:/html/index.html "));
- Return view;
- }
6. Now, all work has been done. Build the application. the long-awaited JavaScript Hello button will appear.
This article mainly explains how to use html css and JavaScript to develop Web applications on the qt WebKit engine.
The source code of this article can be downloaded here: 1qtwebhello.zip http://software.intel.com/file/28104
Next we will learn how to interact QT local objects with JavaScript. This is very useful for web development.
Category:
Others,
Mobile technology,
Intel software network 2.0
Tags: QT,
Qtwebkit,
WebKit,
Web Development
