Question

我有一个移动应用程序，我正在构建一个简单的字段类型提前。

    <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>

我已将以下主题和规则应用于数据库，以便为移动设备呈现以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，就会搞砸前面类型字段的格式化。

我在移动示例应用上查看了它并发生了同样的事情。有没有人发现这个？什么是最简单的方法来解决它没有抛弃主题和从头开始样式？任何想法？

Answer 1

这是在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表单控件的视觉外观。
所以建议不要使用此解决方法，除非它没有在XPage移动应用上显示其他控件和用户界面。

Answer 2

我开发的移动应用程序的typeahead存在严重问题。最后，我放弃了使用Ext.lib和Dojo。我为移动XPage禁用了Dojo，并将其替换为jQuery Mobile。虽然重新编写应用程序需要一些时间，但事实证明这是值得的。 “app”最终运行得更好 - 样式比XPages / Dojo设置更简单。并且控件按预期运行。简而言之，我从试错到I-am-in-control： - ）

为了让您快速了解如何包含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库。但是你明白了......

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

/约翰

Answer 3

以下CSS应该使移动设备上的预先输入可读...

.dijitReset.dijitValidationContainer {
  display:none;
}
.dijitComboBoxMenuPopup {
  background-color: white;
  padding-left: 5px;
}

Xpages：类型提前造型完全搞砸了Mobile主题

3 个答案: