Commit dece4dcc authored by Alessandro Portale's avatar Alessandro Portale

Added (optional) touch optimized navigation of HTML5 apps

Code provided by the Bostoner Browser team.

The HTML5 wizard shows a checkbox "Enable touch optimized navigation"
which enables flicking and enlarged click areas. By default, the
option is turned off.

Task-Number: QTCREATORBUG-3284
parent e48f0870
......@@ -4,6 +4,10 @@ folder_01.source = html
DEPLOYMENTFOLDERS = folder_01
# DEPLOYMENTFOLDERS_END #
# Define TOUCH_OPTIMIZED_NAVIGATION for touch optimization and flicking
# TOUCH_OPTIMIZED_NAVIGATION #
DEFINES += TOUCH_OPTIMIZED_NAVIGATION
# TARGETUID3 #
symbian:TARGET.UID3 = 0xE1111234
......
......@@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { margin: 0; font-size: 2em; }
body { margin: 0; font-size: 2em; background-color: white; }
h1 { text-align: center; color: red; }
h1 + h1 { color: green; }
h1:last-child { color: blue; }
......
......@@ -55,6 +55,7 @@ const QString appViewerOriginsSubDir(appViewerBaseName + QLatin1Char('/'));
Html5App::Html5App()
: AbstractMobileApp()
, m_mainHtmlMode(ModeGenerate)
, m_touchOptimizedNavigationEnabled(false)
{
}
......@@ -74,6 +75,16 @@ Html5App::Mode Html5App::mainHtmlMode() const
return m_mainHtmlMode;
}
void Html5App::setTouchOptimizedNavigationEnabled(bool enabled)
{
m_touchOptimizedNavigationEnabled = enabled;
}
bool Html5App::touchOptimizedNavigationEnabled() const
{
return m_touchOptimizedNavigationEnabled;
}
QString Html5App::pathExtended(int fileType) const
{
const QString appViewerTargetSubDir = appViewerOriginsSubDir;
......@@ -139,9 +150,10 @@ void Html5App::handleCurrentProFileTemplateLine(const QString &line,
bool &commentOutNextLine) const
{
Q_UNUSED(proFile)
Q_UNUSED(commentOutNextLine)
if (line.contains(QLatin1String("# INCLUDE_DEPLOYMENT_PRI"))) {
proFileTemplate.readLine(); // eats 'include(deployment.pri)'
} else if (line.contains(QLatin1String("# TOUCH_OPTIMIZED_NAVIGATION"))) {
commentOutNextLine = !m_touchOptimizedNavigationEnabled;
}
}
......
......@@ -86,6 +86,9 @@ public:
void setMainHtml(Mode mode, const QString &data = QString());
Mode mainHtmlMode() const;
void setTouchOptimizedNavigationEnabled(bool enabled);
bool touchOptimizedNavigationEnabled() const;
#ifndef CREATORLESSTEST
virtual Core::GeneratedFiles generateFiles(QString *errorMessage) const;
#else
......@@ -111,6 +114,7 @@ private:
QFileInfo m_indexHtmlFile;
Mode m_mainHtmlMode;
QString m_mainHtmlData;
bool m_touchOptimizedNavigationEnabled;
};
} // namespace Internal
......
......@@ -54,19 +54,19 @@ public:
explicit Html5AppWizardDialog(QWidget *parent = 0);
private:
class Html5AppWizardSourcesPage *m_htmlSourcesPage;
class Html5AppWizardOptionsPage *m_htmlOptionsPage;
friend class Html5AppWizard;
};
Html5AppWizardDialog::Html5AppWizardDialog(QWidget *parent)
: AbstractMobileAppWizardDialog(parent)
, m_htmlSourcesPage(0)
, m_htmlOptionsPage(0)
{
setWindowTitle(tr("New HTML5 Application"));
setIntroDescription(tr("This wizard generates a HTML5 application project."));
m_htmlSourcesPage = new Html5AppWizardSourcesPage;
addPageWithTitle(m_htmlSourcesPage, tr("HTML Sources"));
m_htmlOptionsPage = new Html5AppWizardOptionsPage;
addPageWithTitle(m_htmlOptionsPage, tr("HTML Options"));
}
......@@ -112,6 +112,8 @@ Core::BaseFileWizardParameters Html5AppWizard::parameters()
AbstractMobileAppWizardDialog *Html5AppWizard::createWizardDialogInternal(QWidget *parent) const
{
m_d->wizardDialog = new Html5AppWizardDialog(parent);
m_d->wizardDialog->m_htmlOptionsPage->setTouchOptimizationEndabled(
m_d->app->touchOptimizedNavigationEnabled());
return m_d->wizardDialog;
}
......@@ -125,8 +127,10 @@ void Html5AppWizard::prepareGenerateFiles(const QWizard *w,
{
Q_UNUSED(errorMessage)
const Html5AppWizardDialog *wizard = qobject_cast<const Html5AppWizardDialog*>(w);
m_d->app->setMainHtml(wizard->m_htmlSourcesPage->mainHtmlMode(),
wizard->m_htmlSourcesPage->mainHtmlData());
m_d->app->setMainHtml(wizard->m_htmlOptionsPage->mainHtmlMode(),
wizard->m_htmlOptionsPage->mainHtmlData());
m_d->app->setTouchOptimizedNavigationEnabled(
wizard->m_htmlOptionsPage->touchOptimizationEndabled());
}
QString Html5AppWizard::fileToOpenPostGeneration() const
......
......@@ -43,15 +43,15 @@
namespace Qt4ProjectManager {
namespace Internal {
class Html5AppWizardSourcesPagePrivate
class Html5AppWizardOptionsPagePrivate
{
Ui::Html5AppWizardSourcesPage ui;
friend class Html5AppWizardSourcesPage;
friend class Html5AppWizardOptionsPage;
};
Html5AppWizardSourcesPage::Html5AppWizardSourcesPage(QWidget *parent)
Html5AppWizardOptionsPage::Html5AppWizardOptionsPage(QWidget *parent)
: QWizardPage(parent)
, m_d(new Html5AppWizardSourcesPagePrivate)
, m_d(new Html5AppWizardOptionsPagePrivate)
{
m_d->ui.setupUi(this);
m_d->ui.importLineEdit->setExpectedKind(Utils::PathChooser::File);
......@@ -66,12 +66,12 @@ Html5AppWizardSourcesPage::Html5AppWizardSourcesPage(QWidget *parent)
m_d->ui.generateRadioButton->setChecked(true);
}
Html5AppWizardSourcesPage::~Html5AppWizardSourcesPage()
Html5AppWizardOptionsPage::~Html5AppWizardOptionsPage()
{
delete m_d;
}
Html5App::Mode Html5AppWizardSourcesPage::mainHtmlMode() const
Html5App::Mode Html5AppWizardOptionsPage::mainHtmlMode() const
{
Html5App::Mode result = Html5App::ModeGenerate;
if (m_d->ui.importRadioButton->isChecked())
......@@ -81,7 +81,7 @@ Html5App::Mode Html5AppWizardSourcesPage::mainHtmlMode() const
return result;
}
QString Html5AppWizardSourcesPage::mainHtmlData() const
QString Html5AppWizardOptionsPage::mainHtmlData() const
{
switch (mainHtmlMode()) {
case Html5App::ModeImport: return m_d->ui.importLineEdit->path();
......@@ -91,12 +91,22 @@ QString Html5AppWizardSourcesPage::mainHtmlData() const
}
}
bool Html5AppWizardSourcesPage::isComplete() const
void Html5AppWizardOptionsPage::setTouchOptimizationEndabled(bool enabled)
{
m_d->ui.touchOptimizationCheckBox->setChecked(enabled);
}
bool Html5AppWizardOptionsPage::touchOptimizationEndabled() const
{
return m_d->ui.touchOptimizationCheckBox->isChecked();
}
bool Html5AppWizardOptionsPage::isComplete() const
{
return mainHtmlMode() != Html5App::ModeImport || m_d->ui.importLineEdit->isValid();
}
void Html5AppWizardSourcesPage::setLineEditsEnabled()
void Html5AppWizardOptionsPage::setLineEditsEnabled()
{
m_d->ui.importLineEdit->setEnabled(m_d->ui.importRadioButton->isChecked());
m_d->ui.urlLineEdit->setEnabled(m_d->ui.urlRadioButton->isChecked());
......
......@@ -40,24 +40,26 @@
namespace Qt4ProjectManager {
namespace Internal {
class Html5AppWizardSourcesPage : public QWizardPage
class Html5AppWizardOptionsPage : public QWizardPage
{
Q_OBJECT
Q_DISABLE_COPY(Html5AppWizardSourcesPage)
Q_DISABLE_COPY(Html5AppWizardOptionsPage)
public:
explicit Html5AppWizardSourcesPage(QWidget *parent = 0);
virtual ~Html5AppWizardSourcesPage();
explicit Html5AppWizardOptionsPage(QWidget *parent = 0);
virtual ~Html5AppWizardOptionsPage();
Html5App::Mode mainHtmlMode() const;
QString mainHtmlData() const;
void setTouchOptimizationEndabled(bool enabled);
bool touchOptimizationEndabled() const;
virtual bool isComplete() const;
private slots:
void setLineEditsEnabled();
private:
class Html5AppWizardSourcesPagePrivate *m_d;
class Html5AppWizardOptionsPagePrivate *m_d;
};
} // namespace Internal
......
......@@ -104,7 +104,7 @@
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Preferred">
<horstretch>0</horstretch>
<verstretch>1</verstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="text">
......@@ -118,6 +118,45 @@
</property>
</widget>
</item>
<item>
<widget class="QGroupBox" name="groupBox">
<property name="title">
<string>Touch optimized navigation</string>
</property>
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QCheckBox" name="touchOptimizationCheckBox">
<property name="text">
<string>Enable touch optimized navigation</string>
</property>
</widget>
</item>
<item>
<widget class="QLabel" name="label">
<property name="text">
<string>Touch optimized navigation will make the HTML page flickable and enlarge the area of touch sensitive elements. If use a JavaScript framework which optimizes the touch interaction, leave the checkbox unchecked.</string>
</property>
<property name="wordWrap">
<bool>true</bool>
</property>
</widget>
</item>
</layout>
</widget>
</item>
<item>
<spacer name="verticalSpacer">
<property name="orientation">
<enum>Qt::Vertical</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>20</width>
<height>40</height>
</size>
</property>
</spacer>
</item>
</layout>
</widget>
<customwidgets>
......
......@@ -94,6 +94,7 @@ int main(int argc, char *argv[])
sAppNew.setProjectPath(projectPath);
sAppNew.setProjectName(QLatin1String("html5_imported_scenario_01"));
sAppNew.setMainHtml(Html5App::ModeImport, QLatin1String("../appwizards/htmlimportscenario_01/themainhtml.html"));
sAppNew.setTouchOptimizedNavigationEnabled(true);
qDebug() << sAppNew.path(Html5App::MainHtml);
if (!sAppNew.generateFiles(&errorMessage))
return 1;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment