1

我有一个正在构建的移动应用程序，它有一个简单的预先输入字段。

    <xp:inputText id="inputText1"
                value="#{contact.AlwaysAccess}">
                <xp:typeAhead mode="partial" minChars="1">
                    <xp:this.valueList><![CDATA[one
two
three
four
five
six]]></xp:this.valueList>
                </xp:typeAhead>
            </xp:inputText>

我已将以下主题和规则应用于 db，以便为移动设备呈现任何以 m 前缀开头的 xpage。

    xsp.ajax.renderwholetree=false
    xsp.error.page.default=true
    xsp.html.doctype=HTML\ PUBLIC\ "-//W3C//DTD\ HTML\ 4.01//EN"\     "http\://www.w3.org/TR/html4/strict.dtd"
    xsp.library.depends=com.ibm.xsp.extlib.library
    xsp.persistence.mode=file
    xsp.resources.aggregate=true
    xsp.theme=oneuiv2.1
    xsp.theme.mobile.pagePrefix=m
    xsp.theme.mobile.android=iphone

一旦我指定 xpage 是一个移动 xpage，类型提前字段的格式就会搞砸。

我在移动示例应用程序上查看它，同样的事情发生了。有没有其他人发现这个？除了放弃主题并从头开始造型之外，最简单的修复方法是什么？有任何想法吗？

4

3 回答 3

0

这是 XPages 移动应用程序 (LAMY8ZVRG2) 上的 Ajax Type Ahead 的一个已知问题，我们希望在 Domino 9.0 之后解决这个问题。
解决方法是在 tundra.css 中包含类型的样式，如下所示...

  <xp:this.resources>
    <xp:styleSheet
        href="/.ibmxspres/dojoroot-1.8.0-u/dijit/themes/tundra/tundra.css">
    </xp:styleSheet>
</xp:this.resources>


或者更好的是从 tundra.css 复制仅适用于 Type Ahead 控件的样式

但目前这是非常冒险的，因为它可能会破坏移动设备上某些 dojo 表单控件的视觉外观。
因此建议不要使用此解决方法，除非它不会影响 XPages 移动应用程序上其他控件和 UI 的显示。

于 2013-02-18T20:39:07.490 回答
0

对于我开发的移动应用程序，我在预输入方面遇到了严重问题。最后，我放弃了使用 Ext.lib 和 Dojo。我为移动 XPage 禁用了 Dojo，并将其替换为 jQuery Mobile。尽管重新编码应用程序需要一些时间，但事实证明它是值得的。“应用程序”最终运行得更好 - 样式比 XPages/Dojo 设置更简单。并且控件按预期运行。简而言之，我从反复试验转变为我在控制中:-)

只是为了让您快速了解如何包含 jQuery Mobile 而不是 Dojo，我使用带有以下代码的自定义控件：

    <xp:this.resources>
    <xp:script src="/xpUtil.jss" clientSide="false"></xp:script>
    <xp:linkResource rel="apple-touch-icon">
        <xp:this.href><![CDATA[${javascript:getDbPath() + "mobileHomeLogo.png"}]]></xp:this.href>
    </xp:linkResource>
    <xp:script src="/jquery-1.8.2.min.js" clientSide="true"></xp:script>
    <xp:script src="/jquery.mobile-1.2.0.min.js" clientSide="true"></xp:script>
    <xp:styleSheet href="/jquery.mobile-1.2.0.min.css"></xp:styleSheet>
    <xp:metaData name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"></xp:metaData>
    <xp:metaData name="apple-mobile-web-app-capable" content="yes"></xp:metaData>
    <xp:styleSheet href="/km2012j.css"></xp:styleSheet>
    <xp:script src="/local.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:this.beforePageLoad><![CDATA[#{javascript:facesContext.getRequestParameters().setJsLibrary(0);}]]></xp:this.beforePageLoad>

如您所见，代码还包括一些我自己的 JS 库。但是你明白了....

它可能对您来说不是一个可行的解决方案，但是，它可能值得一看。

/约翰

于 2013-02-20T08:52:16.620 回答
0

下面的 CSS 应该使 typeahead 在移动设备上可读......

.dijitReset.dijitValidationContainer {
  display:none;
}
.dijitComboBoxMenuPopup {
  background-color: white;
  padding-left: 5px;
}
于 2013-08-03T22:09:59.470 回答