CN102737106B - 表单布局方法和系统 - Google Patents

表单布局方法和系统 Download PDF

Info

Publication number
CN102737106B
CN102737106B CN201210098780.9A CN201210098780A CN102737106B CN 102737106 B CN102737106 B CN 102737106B CN 201210098780 A CN201210098780 A CN 201210098780A CN 102737106 B CN102737106 B CN 102737106B
Authority
CN
China
Prior art keywords
layout
page
pattern
row
application
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201210098780.9A
Other languages
English (en)
Other versions
CN102737106A (zh
Inventor
J·E·彼得斯
M·R·弗斯特
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Accenture Global Services GmbH
Original Assignee
Accenture Global Services GmbH
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Accenture Global Services GmbH filed Critical Accenture Global Services GmbH
Publication of CN102737106A publication Critical patent/CN102737106A/zh
Application granted granted Critical
Publication of CN102737106B publication Critical patent/CN102737106B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/174—Form filling; Merging
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/117—Tagging; Marking up; Designating a block; Setting of attributes
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本发明涉及一种表单布局方法和系统。所述系统包括提供了在web页面上对表单进行布局的灵活方式的表单布局工具。所述表单布局工具利用表单布局样式的位置对web配置文件进行配置，并且使用表单布局样式、列数量、字段数量以及每个字段的“大小”来包括在页面布局的组件之中以创建针对目标应用的页面布局。所述表单布局工具通过将所述表单布局样式应用于所创建的页面布局而生成具有所创建页面布局的经修正的应用页面。

Description

表单布局方法和系统
相关申请
本申请要求于2011年3月31日提交的序列号为61/470,439的美国临时专利申请的优先权，其整体也通过引用结合于此。
技术领域
说明书总体上涉及一种用于在web页面上对表单进行布局的系统和方法。更具体而言，说明书涉及一种灵活的表单布局方法，其大幅促进了例如在新web页面的新主题中所使用的表的创建。
背景技术
web表单传统上使用HTML表来对表单进行布局。由于每个研发人员都需要理解页面上所使用的嵌套表结构，所以使用HTML的老式页面布局很慢，难以维护并且易于出现错误。
老式页面布局使用基于表的页面布局，该布局包括七层嵌套DIV和表以创建用于表单的区域。在一些情况下，所述表单包括至少5层嵌套DIV和表来创建表单(3层DIV以及至少两层嵌套表)，并且需要至少12层嵌套HTML要素以在页面上创建表单。由于该老式的页面布局架构，对网页进行维护是耗时、昂贵且困难的工作。
需要解决该问题以及之前随web表单中传统使用的HTML表的嵌套表结构所经历的其它问题。
发明内容
所述表单布局系统可在计算机系统中实现，所述计算机系统包括可操作以存储表单布局工具指令的计算机存储器，以及可操作以存储多个表单布局样式的数据库。所述表单布局系统包括与所述存储器和所述数据库进行通信的处理器。通过执行所述表单布局工具指令，所述处理器可操作以接收目标应用标识符，其中所述目标应用包括多个包含组件的应用页面，所述组件包含分节，所述分节包括位于其上的数据字段。所述表单布局工具指令利用表单布局样式的位置对web配置文件进行配置，并且使用来自多个表单布局样式的表单布局样式并且接收列数量、字段数量以及每个字段的“大小”以包括在页面布局的组件中而从多个页面为目标应用创建页面布局。所述表单布局工具指令通过应用来自多个表单布局样式的、如所创建的页面布局所指定的表单布局样式而生成具有所创建页面布局的经修正的应用页面，从而可以利用所创建的页面布局来执行所述目标应用。
基于考察以下附图和详细描述，其它系统、方法、特征和优势对于本领域技术人员将是显而易见的或者将变得显而易见。旨在将所有这样的附加系统、方法、特征和优势都包括在该描述之内，处于本发明的范围之内，并且被以下权利要求所保护。
附图说明
通过参考以下附图和描述将更好地理解所述系统和/或方法。参考以下附图进行非限制且非穷举的描述。图中的组成部分未必依比例绘制，相反其重点在于强调对原理的例示。在附图中，除非另外指出，否则相同的附图标记可以贯穿不同附图地指代相同部分。
图1示出了基于表的老式页面布局与新的无表设计布局相对比的图示。
图2示出了老式页面布局的图示。
图3图示了无表的表单布局技术。
图4示出了表单布局样式示例。
图5示出了表单布局样式示例。
图6示出了表单布局样式示例。
图7图示了浏览器中的示例Default.aspx。
图8图示了在页面文件夹中名为labPage的示例页面。
图9图示了示例表单。
图10使用分节和listContainer创建以下的跳出面板(Jump Panel)。
图11图示了使用formLayout和listContainer创建布局。
图12示出了示例“索赔树(Claim Tree)”分组框(groupBox)。
图13示出了列B分组框中的listTable的示例。
图14示出了列B分组框中的RadGrid的示例。
图15图示了基本页面布局。
图16示出了垂直空间有限的左边或右边列中所使用的示例折叠样式。
图17示出了示例分节样式。
图18图示了横向列表样本(metaphor)。
图19图示了用来在页面上对控件进行布局的示例表单。
图20图示了列表类型-addressDetails。
图21图示了TABLE.listTable样式。
图22图示了TABLE样式。
图23图示了TABLE.dashboardTable样式。
图24图示了分节布局样式的列表。
图25图示了表单布局的列表。
图26图示了示例系统图。
图27图示了表单创建逻辑。
具体实施方式
关于以下描述，在不同附图中示出的具有相同参考标号的组件基本上执行相同的功能。这里所描述的原则可以以许多不同形式来实现。然而，并非要求所有所描绘的组件，并且一些实施方式可以包括附加的组件。组件的排列和类型可以有所变化而并不背离如这里所阐述的权利要求的精神和范围。此外，可以提供不同组件或更少的组件。
表单布局系统可在如下计算机系统中实现，所述计算机系统包括可操作以存储表单布局工具指令的计算机存储器，以及可操作以存储多个表单布局样式的数据库。所述表单布局系统包括与所述存储器和数据库进行通信的处理器。通过执行所述表单布局工具指令，所述处理器可操作以接收目标应用标识符，其中所述目标应用包括多个包含组件的应用页面，所述组件包含分节，所述分节包括位于其上的数据字段。所述表单布局工具指令利用表单布局样式的位置对web配置文件进行配置，并且使用来自多个表单布局样式的表单布局样式以及接收列数量、字段数量以及每个字段的“大小”以包括在页面布局的组件中而从多个页面为目标应用创建页面布局。所述表单布局工具指令通过应用来自多个表单布局样式的、如所创建的页面布局所指定的表单布局样式而生成具有所创建页面布局的经修正的应用页面，从而可以利用所创建的页面布局来执行所述目标应用。
图1示出了基于表的老式页面布局102与新的无表设计布局104相对比的图示。所述表单布局方法和系统可以针对web站点使用级联样式单(cascading style sheets，CSS)，其使得样式单具体化以使得所述样式单可以跨应用进行共享，并且提供了允许主题化和应用级别定制的机制。新的无表布局104的一个好处在于，将开始使用老式页面布局102的表单130与开始使用新的无表设计布局104的表单114进行比较，布局104需要传统HTML表布局(116，118，120，122，124，126，128)上一半数量的嵌套页面元素(106，108，110，112，114)。表单布局方法和系统使用CSS框模型和样式表来设定表单字段的大小并且使其“漂入”web页面上的位置。所述表单布局方法和系统提供了支持宽度从2列至5列的表单布局的样式。每个字段可以被放置在类型为小(1列)、中(2列)或大(多达3列)的DIV中。
分区(DIV)是基本上将页面上出现的任意内容的矩形与类型的名称进行绑定的html协定。样式涉及与三列布局的页面上作为左侧列的列A、作为主站点的列B、作为第三列的列C。该样式非常特定于构建页面的方式，并且在样式单内，该样式单非常特定于可以在页面上使用的样式。所述表单布局工具使用若干种不同的布局。例如，用户web站点通常使用应用特定的样式，但是研发人员决定针对特定主题紫色而不是蓝色跨板面制作所有列B。相应地，存在覆盖图像的与列B相关的特定样式集合以及与该样式相关的任意特定颜色。
具有附加或较少列的其它实施方式也是有可能的。在表单级别，包括样式以指示该表单中所需列的数量。样式的宽度包括小、中和大尺寸，并且根据表单中所需的列数进行调节。表单布局是指字段和控件在组件内或组件中的分节之内的拼版或排列。表单的视觉布局取决于(a)组件中的列数量，以及(b)每个字段的“大小”。例如，在确定在布局中使用哪种字段大小时，可以考虑页面将如何在1024像素的水平分辨率屏幕上进行呈现。字段和控件可以在若干种格式的组件内进行布局。在3列(33-33-33)表单布局中，(在减去边缘之后)每一列大致占据可用空间的三分之一。表单布局设置了框架，但是实际的布局则取决于字段的大小，所述字段的大小可以被指定为小、中或大。在“自动大小”设置中，字段展开以填充可用空间。在3列格式中，一行可以包含这些组合的三个小字段、一个中字段和一个小字段，或者一个大字段。与之前字段并不在同一行相适应的字段被自动放入下一行，这会引起不适宜的显示，但是为了防止不合逻辑的分组，存在覆盖(override)；字段也可以进行手工缩放(例如日期)，并且字段可以以“成对”集合(例如货币)保持在一起。注意，在较大(80％)组件中，标准的小、中和大字段在物理上大于正常60％的组件。中型列组件也可以容纳2列(50-50)字段布局，其在数据数值较长时可能是有用的。还存在针对4列和5列字段布局的格式，其可以在80％和100％的面板中可用。
新的无表设计包括4层嵌套DIV以创建表单的区域，而表单则由2级嵌套DIV所构成以对表单进行布局，并且包括6层嵌套HTML元素以在页面上创建表单。新的无表设计需要一半数量的嵌套页面元素等级。无表web设计针对页面布局使用CSS(级联样式表)而不是嵌套HTML表。新的无表设计的优点包括降低的HTML编码模式的复杂度，更少的HTML标签，减小的页面大小，允许针对不同设备的布局变化，支持主题化，以及改进的页面可维护性。样式项目组织提供了平台和架构独立性，支持多个版本的样式，支持多个版本的样式。样式配置包括位于可寻址位置的ASW.Style样式虚拟目录。研发人员可以创建被称作ASW.Style的、指向样式分布目录的的IIS虚拟目录。为了使用表单布局，使用web.config页面主题对主题进行控制，定制应用设置，并且向CSS添加动态链接。到ASW样式的主集合的路径在web.config中进行配置。动态呈现对CSS文件的引用，执行样式相关的清除，并且将应用特定的CSS文件或图像移动到允许的位置。
图2示出了之前样式的页面布局200的图示。旧样式200的一个问题在于旧样式200是固定布局。为了添加、去除或加长字段，研发人员必须在12个(或更多)嵌套表(204)和DIV(202)的级别中找出正确位置(页面中的每个单元是表或表单元)，并且对HTML编码进行正确编辑以改变表布局。使用旧样式对HTML编码进行正确编辑是编辑页面时主要的维护事件以及主要问题的来源。新配置所驱使的架构在布局中要求更多的灵活性。以每个顾客为基础，针对字段可见性建立规则。利用基于表的布局200，具有可见性规则的页面最终将看上去很差，原因在于在没有针对给定用户显示字段时，不存在改变页面布局的简单方式(例如，重新组织表是复杂的)。在布局的样式是限定因素时，定位是布局所考虑的另一个问题，原因在于页面布局没有改变表单的列数的简单方式。更宽或更少的列的一个原因在于，对于诸如德语之类的通常比英语更长的语言而言，需要用于更长的字段标签和字段数值的更多空间。因此，列动态适配于可用空间。
图3图示了无表表单的布局技术300。该表单布局技术使用漂入位置的DIV(302，304，306，308，310，312，314，316)，这大幅简化了页面布局并且允许容易地改变表单。如果需要改变表单中的列数，则改变用于列计数的样式。表单布局工具支持具有2列至5列的表单。列计数能够在页面设计人员工具中进行配置。无需进行研发来改变列数。所有表单字段都处于类型为小、中或大的DIV(302，304，306，308，310，312，314，316)内。为了使得字段更长，将DIV变为更大的尺寸。字段宽度可在该工具中进行配置。在表布局中，字段所处的列和行是指定的，在该表单布局技术中，页面的最终组成是动态的。字段漂入位置中，并且基于表单中的列数以及字段的宽度，页面自动进行组合。表单的自动组成有助于构建在字段上具有可见性规则的页面。如果字段不可见，则样式允许表单在没有间隙(gap)的情况下进行组成，并且无需编程人员清除页面布局。
表1图示了三列表单布局的逻辑。
图4至图6示出了表单布局样式示例的图示。表单布局方法使用级联样式表(CSS)框模型和样式单来设定表单字段的大小并且使其“漂入”web页面上的位置。所述表单布局方法系统提供了支持宽度从2列至5列的表单布局的样式。每个字段被置入类型为小(1列)、中(2列402、404)或大(3列502、4列504以及5列602)的DIV元素中。在表单级别，包括样式以指示表单中所需的列数。与小、中和大相关联的样式宽度根据表单中所需的列数进行调整。在不使用表的情况下创建页面时最为困难的一个方面在于了解如何控制换行符。CSS被用来在使用元素并且去除随一些元素(例如，页眉、列表元素、段落等)自动出现的换行符之后仿真<br/>。研发html编码模式和样式单，从而使得所述页可以跨若干应用地宽泛应用，以在应用之间施加以一致性外观和可共享字段，研发了将所有应用作为新主题裁减(crop)的编码模式和样式单，可用站点的新外观，所述新外观可以跨应用套件进行应用而无需对应用进行附加编码。
表2图示了准备使用应用软件(ASW)样式的应用，其中样式设置被添加到web.config文件。
表3图示了引用示例性主页面的逻辑。
图7图示了浏览器中的示例Default.aspx。图7示出了列A 702、列B 704和列C 706的布局。
图8图示了页面文件夹中被称作labPage的示例性页面。图8示出了列“索赔树”802、“编辑格式”804以及“何处使用过”806。
表4图示了用于使用标准的20-60-20列布局创建3个列的示例逻辑。
图9图示了多个行(902、904、906)以及在每一行中所使用的变化的列(906、908、910)的示例表单900。
表5图示了用于连同“保存”和“取消”按钮一起添加分隔符的逻辑。
图10图示了使用用来创建跳出面板1006的listContainer1002、1004和分节。“分节2”默认为跳出面板中最为接近的分节。
表6图示了用于在列A中对跳出面板分组框进行编码的逻辑。
图11图示了使用formLayout 1100and listContainers 1102来创建布局。
表7示出了用于在列C中创建“何处使用过”分组框的示例逻辑。
图12示出了示例性的“索赔树”分组框1200。
表8图示了用于创建“索赔树”分组框的逻辑。分组框被添加在列A顶端并且使用动作表(action Table)来创建所述索赔树。
图13示出了列B的分组框1300中的listTable的示例。
表9图示了如何在列B的分组框中添加listTable并且创建三列的表，以及对一行进行设置以作为选定行显示的逻辑。
图14示出了列B分组框1400中RadGrid的示例。
表10图示了列B分组框中添加的RadGrid，添加在表下方的titleColumn，将titleColumn命名为“RadGrid example”。RadGrid的数据源是XML文件(/pages/xml/basicGridData.xml)。
图15图示了基本页面布局1500。基本页面布局1500包括页面分节、页眉、内容区顶端、站点Nav、主内容区、列、分组框、内容区域底部和页脚。
表11图示了分组框样式的示例性逻辑。
应用使用单个应用主CSS。所述主CSS包含跨多个页面应用的样式。位于名为“styles”的文件夹中的是应用的根文件夹(例如，/<myapp>/styles)的子文件夹。图像可以位于/myapp/styles/images文件夹中。多个图像可以被组合为子画面(sprite)。每幅图像包括相关联的样式。页面使用所述样式而不是直接引用图像。页面样式可以被应用于单个页面。页面样式可以被置于页面的pageStyles asp：Content分节中。
表12图示了页面的示例pageStyles asp：Content分节。
可选地，虽然有时需要，但尽可能避免内联(inline)样式。研发人员可以确定样式是否应当保留内联，变为页面样式，或者是否将样式添加到应用的主CSS。使用内联样式由于样式在先的规则而防止了CSS样式的使用。示例：<td style＝″padding-left：10px；font-size：14px；″>2package(s)</td>。当应用包括以每个主题为基础改变外观的项目时，对于每个主题可以存在应用主题CSS(例如，用于Claims.BlueBerry.css的<app name>.<theme name>.css)。主题CSS仅包含以每个主题为基础有所改变的那些样式元素的覆盖。应用主题CSS存在于每个主题文件夹中(例如，/App_Themes/<theme name>)。图像可以位于/App_Themes/<theme name>/images文件夹中。
图16示出了垂直空间受限的左侧列1602或右侧列1604中所使用的示例性折叠样式1600。使用折叠、分节、标题栏-折叠、分节和标题栏来组织页面内容，并且仅可以在分组框内使用。折叠样式在具有表单的页面上被用来对类似的控件进行分组。折叠(1602、1604)和分节(1606、1608、1610、1612)是页面的可收展区域。折叠允许一次打开单个区域。分节允许一次打开多个区域。该样式支持多达2级(主和次)的嵌套折叠/分节。标题栏被用来对相同分节或折叠内的类似控件进行分组。
表13图示了示例折叠样式的逻辑。
图17示出了示例分节样式1700，包括列A 1702、列B 1704和列C 1706。
表14图示了“分节”样式的示例实现。
表15示出了示例标题栏样式。使用标题栏样式来对表单中类似的控件进行分组，利用灰色背景显示加粗文本。
图18图示了横向列表样本1800。横向列表样本是分组框和分节外观上的小幅扭曲(twist)。横向列表样本支持单个分节级别以及主颜色模式，并且使用groupBoxColumnWrapper来创建嵌套分组框的外观。按钮逻辑包括页面级别按钮、动作按钮、分节级别按钮和页眉按钮。页面级别按钮可以包括.buttonBlueOnBlue和.buttonBlueOnWhite。动作按钮示例包括.buttonOrangeOnWhite。分节级别按钮示例包括.buttonGrayOnWhite和.buttonGreyOnGray。页眉按钮可以包括.helpButton和.printButton。按钮可以使用各种部署样式在DIV内部被分组在一起。.buttonClear部署样式可以随打印和帮助按钮使用。.buttonClear_topRight部署样式可以随分组框标题中的主按钮使用。.buttonClear_bottomLeft部署样式可以被用于分节级别按钮，并且右下侧的DIV应当使用“buttonClear bottomRight w50”样式对。.buttonClear_bottomRight部署样式可以随位于分组框右下侧上的任意类型的按钮使用。
图19图示了被用来对页面上的控件进行布局的示例表单1900。当前样式允许为每个formLayout DIV指定列数。表单样式.formLayout应当包含在DIV之内，并且.twoColumn至.fiveColumn可以被用来修改formLayout样式以支持不同的列布局(类型＝“formLayoutthreeColumn”)。.small样式在布局中支持1列，.medium在布局中支持2列，.large在布局中支持3列。.fullrow布局跨完整的行，并且由于.fullrow布局可能打破流畅的(liquid)布局所以可能要小心使用。.pairedControl布局可以随中和大DIV使用以允许多个控件被置于相同的控件DIV之内。HTML无序列表可以利用CSS容易地操控，并且被用于菜单、安装向导和链接列表。
表16图示了示例listContainer列表类型。listContainer是ASW样式中使用的主要列表类型。complete状态指示任务完成，.selected状态指示项目被选定，.label标识出列表项目为标签。
表17图示了示例列表类型-wizard。列表类型wizard使用嵌套的无序列表来创建安装向导布局。针对安装向导中的2至6个步骤存在安装向导中布局样式。列表类型wizard包括Step和Title。建议但并不要求Description。
图20图示了列表类型-addressDetails样式2000。.addressDetails样式可以在客户端360的分组框2002上使用。
表18图示了列表类型-addressDetails样式的示例实现。
表19图示了被用来显示需要在多列多行布局中进行组织的信息的HTML表样式。表不应当被用于页面布局。 RadGrid作为HTML表呈现，并且其样式被设定为与ASWlistTable的外观相匹配。
图21图示了TABLE.listTable样式2100。listTable样式是内容表的主外观，其随表页眉(TH)以及具有翻转(roll-over)和选定行处理的行(TR)一起使用。listTable样式支持表的子页眉以及可收展的行处理。
图22图示了TABLE样式2200。在搜索预览2202上使用标准表，并且阴影行处理并不在翻转上有所改变。
表20图示了示例TABLE样式。
在索赔树以及需要菜单的其它位置上使用Table.actionTable样式。actionTable和shadedRow处理在翻转上有所改变。
图23图示了示例TABLE.dashboardTable样式2302。在仪表板2304上使用仪表板表。
表21图示了用来实现TABLE.dashboardTable样式的示例逻辑。
表22图示了TABL E.plainTable样式的示例实现。plainTable被用于简单的标签/数值布局。
表23图示了用于Basic RadGrid的示例实现逻辑。
所述表单布局系统包括四个主题(例如，蓝莓、黄瓜、葡萄和马铃薯)。默认主题设置在web.config文件中。通过改变Page.Theme设置而动态改变主题。定制主题可以位于App_Themes文件夹之下。
图24图示了分节布局样式2400和描述2402的列表。
图25图示了表单布局2500和描述2502的列表。
图26示出了表单布局系统2602配置2600的框图，其可以利用图形用户界面显示2606实现表单布局工具2604。在系统2602中可以实现以上所描述的任意逻辑(例如，表单布局工具指令2608和目标应用逻辑2610)并且例如可以作为供处理器2616、控制器或其它处理设备执行的指令而被编码或存储在诸如紧致盘只读存储器(CDROM)、磁盘或光盘、闪存、随机访问存储器(RAM)2614或只读存储器(ROM)、可擦除可编程只读存储器(EPROM)之类的机器可读或计算机可读介质2612或者其它机器可读介质中。在执行所述表单布局工具的过程中，处理器2616生成经修正的布局。所述机器可读介质可以被实现为包含、存储、传达2618、传播或传送2620可执行指令2608以便由指令可执行系统2602、装置或设备2622、2624使用供与之相结合的任意设备或有形组件。备选的或附加，指令和逻辑2608、2610可以使用硬件(诸如一个或多个集成电路，或者执行指令的一个或多个处理器)，或者在应用编程界面(API)或动态链接库(DLL)中以软件来实现，其中其功能在共享存储器中获得或者被定义为本地或远程的过程调用，或者作为硬件或软件的组合来实现。
图27图示了表单创建逻辑2700。用户使用表单布局工具查看旨在接收表单布局变化的目标应用(2702)。所述表单布局工具被配置为使用来自内部研发或第三方的研发人员可用的各种表单布局样式。所述表单布局工具利用表单布局样式的位置对web配置文件进行配置(2704)。用户指定列数、字段数以及每个字段的“大小”以包括在页面布局的组件中(2706)。使用所述表单布局工具，用户包括所述逻辑以在目标应用中实现所述样式(2708)，并且对所述应用进行编译以使用所实现的样式(2710)。
对web站点使用层叠样式单使得样本单具体化从而使得样式单在能够跨多个应用进行共享时，还提供了允许进行主题化和应用级别定制的机制。所述方法和系统使用DIV来对表单进行布局。每个字段以研发人员希望字段在页面上显现的顺序而处于其自己的DIV中。字段根据表单所要求的列类型而将其自身堆叠至行中。研发人员不再需要将字段放入页面上的行中。通过为表单指定字段大小和列数，字段自动将其自身布置到行中。所述方法和系统简化了web表单布局的复杂性，并且节省了大量研发时间。所述方法和系统允许用户由于客户端对于语言文本长度需求的要求而使用样式来改变表单布局。例如，在网站以英语或德语提供的情况下，表单布局可以有利地从英语的“3列”变为德语的“2列”以容纳该语言中更长的文本长度。对使用这种创新的web站点进行访问的任何人都将能够查看到样式单(CSS)。理解样式单需要一些技术培训。这些样式与利用所述样式所需的HTML编码模式紧密结合。使用CSS来断定多层样式单方法工作所必须遵循的HTML编码模式是相当困难的。表单布局样式和HTML编码模式的组合大大简化了web表单的构建。任何web应用或web站点都能够使用这种创新。其已经被研发为独立技术。使用这些创新建立的站点在所有当前浏览器上都得到支持。针对表单布局的灵活样式单驱动方法的需求来自于应用团队。
分区(DIV)是基本上将页面上出现的任意内容的矩形与类型的名称进行绑定的html协定。样式涉及与三列布局的页面上作为左侧列的列A、作为主站点的列B、作为第三列的列C。该样式非常特定于构建页面的方式，并且在样式单内，该样式单非常特定于可以在页面上使用的样式。所述表单布局工具使用若干种不同的布局。例如，用户web站点通常使用应用特定的样式，但是研发人员决定针对特定主题紫色而不是蓝色跨板面制作所有列B。相应地，存在覆盖图像的与列B相关的特定样式集合以及与该样式相关的任意特定颜色。
主样式针对于应用，并且包括所有标准样式母板(master)。应用可以包括一些母板样式，所述母板样式包括主题样式和web配置，并且应用母板级别包括页眉标志的样式、应用标志图像，应用母板样式将利用用于该应用的适当图像覆盖该应用标志图像。图像文件(例如，图标和按钮)并非被直接引用，从而使得可以改变与特定样式单中的图标相关的图像以显现得与其余应用更加无缝。所述表单布局工具提供了单列、两列和三列的布局。一列布局可以使用20％，而三列布局则包括20％、50％、20％。两列布局包括左侧的20％、右侧的80％，并且另一个两列布局则包括30％和70％。仪表板使用三列布局，其中列可以均匀间隔。用户可以使用应用的母板样式单来实现跨板面的变化。所述表单布局工具不鼓励实现与其余应用不一致的布局。样式指南指示页面需要看上去如何(例如，实现该样式所需的html编码模式)。所述表单布局工具提供了编码模式以允许研发人员快速且准确地构建页面，因为研发人员不必了解与设计表相关的任何内容。许多研发人员尝试利用一系列嵌套表对页面进行布局，这实际上成为了维护的负担。使用分区(DIV)来布局页面，通过改变分区宽度的百分比使得列得以重新计算以适合于指定区域而无需其它的代码变化。
应用和客户端特定的样式与不同层的定制放置在一起。大多数应用构建了该应用的样式单。只要是HTML，所述表单布局工具跨包括ASP站点、JSP、融合在内的多个平台进行工作，并且样式可以跨板面使用。随表单布局工具使用的样式和剪切模式支持范围非常宽泛的web浏览器。消除了研发人员通常所面对的标准问题。例如，由于样式的灵活性，并没有以每个应用为基础引发跨浏览器地实现改变所引发的成本。
表单布局分区被用来控制表单内信息从2列至5列的表单布局。表单布局是研发人员传统上使用嵌套表来创建布局的领域之一。使用嵌套表来创建布局是非常成问题的且易于出现错误，而且实际上难以进行调试。页面上的每个控件被置于标识为小、中或大的分区内。在宽度上，小针对一列，中针对两列，而大则针对三列。通过覆盖特定于列数的样式，对小、中或大表现为多宽有所影响。所述样式在页面中进行分层(layer out)，并且根据字段宽度，字段漂入页面上的适当位置。例如，如果旨在将四个小(字段)用于三列布局，则结果将是三个在一行上而第四个则在第二行上。
备选地或除此之外，可以构造诸如专用集成电路、可编程逻辑阵列以及其他硬件设备之类的专用硬件实现来实施这里所描述的一种或多种方法。可以包括各个实施例的装置和系统的应用可以宽泛地包括各种电子和计算机系统。这里所描述的实施例可以使用两个或多个特定互连硬件模块或设备来实现功能，或者作为专用集成电路的一部分来实现，所述硬件模块或设备具有可以在模块之间并通过模块进行通信的相关控制和数据信号。因此，本系统可以涵盖软件、固件和硬件实现。
这里所描述的方法可以通过可由计算机系统执行的软件程序来实现。此外，实施方式可以包括分布式处理、组件/对象分布处理以及并行处理。备选地或除此之外，可以构建虚拟计算机系统处理以实现这里所描述的一种或多种方法或功能。
虽然组件和功能被描述为可以在特定实施例中参考特定标准和协议来实现，但是组件和功能并不局限于这样的标准和协议。例如，用于互联网和其它分组交换网络传输的标准(例如，TCP/IP、UDP/IP、HTML、HTTP)表示现有技术的示例。这样的标准周期性地被实质上具有相同功能的更快或更高效的等同形式所取代。因此，与这里所描述的那些具有相同或相似功能的替代标准和协议被视为其等同形式。系统可以使用IIS版本7、InternetExplorer版本8和Visual Studio 2008进行操作。
这里所描述的图示旨在提供对各个实施例的结构的总体理解。所述图示并非旨在作为利用这里所描述的结构或方法的装置、处理器和系统的所有部件和特征的完整描述。通过回顾该公开，许多其它实施例对于本领域技术人员可能是显而易见的。可以从该公开导出其它实施例并加以利用，以使得可以进行结构和逻辑的替换和变化而并不背离公开的范围。此外，所述图示仅是表示性的并且可以不依比例绘制。图示内的特定比例可能被放大，而其它比例则可能被缩小。因此，本公开和附图要被视为是说明性而非限制性的。
以上所公开的主题要被认为是说明性而非限制性的，并且所附权利要求旨在覆盖所有这样的修改、提升以及落入本发明实际精神和范围的其它实施例。因此，对于法律所允许的最大程度，范围要由以下权利要求及其等同形式最为宽泛的可允许解释来确定，并且不应当受之前的详细描述所约束或限制。

Claims (6)

1.一种计算机系统，包括：
可操作以存储表单布局工具指令的计算机存储器；
可操作以存储多个表单布局样式的数据库；以及
与所述存储器和所述数据库进行通信的处理器，通过执行所述表单布局工具指令，所述处理器可操作以：
接收目标应用标识符，其中所述目标应用包括多个应用页面，所述应用页面包括位于其上的数据字段；
利用所述表单布局样式的位置对web配置文件进行配置；
使用来自所述多个表单布局样式的表单布局样式，并且接收布局参数以包括在所述页面布局上，从所述多个页面对所述目标应用创建页面布局，其中来自所述多个表单布局样式的所述表单布局样式标识了要用来实现所述表单布局样式的代码模式；
使用所述表单布局工具指令，生成具有所创建页面布局的经修正的应用页面，应用来自所述多个表单布局样式的、如所创建的页面布局所指定的表单布局样式；以及
执行具有所创建页面布局的所述目标应用；
其中每个所述多个应用页面包括超文本标记语言(HTML)，其中所述HTML包括具有小的类型、中的类型或大的类型的至少一个分区(DIV)标签，其中所述小的类型对应于1列，所述中的类型对应于2列，以及所述大的类型对应于3列、4列和5列，其中至少一个表单字段位于所述DIV标签内部，以及其中每个表单字段以所述表单字段期望的顺序位于其自身的DIV标签中，以显示在所述应用页面上；
其中所述布局参数包括列数量和每个字段的“大小”；
其中应用来自所述多个表单布局样式的表单布局样式包括使用级联样式单(CSS)框模型和样式单将位于所述DIV标签内部的所述至少一个表单字段提供进入位置以及基于由小、中或大的类型指定的至少一个表单字段的宽度和所述列数量自动且动态地组合所述经修正的应用页面；
其中所述至少一个表单字段展开以填充可用空间；以及
其中，当所述至少一个表单字段与之前表单字段并不在同一行相适应时，所述至少一个表单字段被自动放入下一行，
其中所述处理器还可操作以：基于所述页面布局上的所述列数量确定预定的字段大小相对于所述数据字段的结合，并且根据所述页面布局上的所述列数量应用所述预定的字段大小的结合。
2.根据权利要求1所述的系统，其中所述布局参数包括：
字段数量。
3.根据权利要求1所述的系统，其中所述系统从第三方接收所述多个表单布局样式的表单布局样式子集。
4.一种用于在显示设备上显示的页面上生成表单的方法，所述方法包括：
将表单布局工具指令存储在计算机存储器中；
在数据库中存储表单布局样式；以及
利用处理器执行所述表单布局工具指令，所述指令被配置为使得所述处理器：
接收目标应用标识符，其中所述目标应用包括多个应用页面，所述应用页面包括位于其上的数据字段；
利用所述表单布局样式的位置对web配置文件进行配置；
使用来自所述多个表单布局样式的表单布局样式，并且接收布局参数以包括在所述页面布局上，从所述多个页面对所述目标应用创建页面布局，其中来自所述多个表单布局样式的所述表单布局样式标识了要用来实现所述表单布局样式的代码模式；
使用所述表单布局工具指令，生成具有所创建页面布局的经修正的应用页面，应用来自所述多个表单布局样式的、如所创建的页面布局所指定的表单布局样式；
执行具有所创建页面布局的所述目标应用；
其中每个所述多个应用页面包括超文本标记语言(HTML)，其中所述HTML包括具有小的类型、中的类型或大的类型的至少一个分区(DIV)标签，其中所述小的类型对应于1列，所述中的类型对应于2列，以及所述大的类型对应于3列、4列和5列，其中至少一个表单字段位于所述DIV标签内部，以及其中每个表单字段以所述表单字段期望的顺序位于其自身的DIV标签中，以显示在所述应用页面上；
其中所述布局参数包括列数量和每个字段的“大小”；
其中应用来自所述多个表单布局样式的表单布局样式包括使用级联样式单(CSS)框模型和样式单将位于所述DIV标签内部的所述至少一个表单字段提供进入位置以及基于由小、中或大的类型指定的至少一个表单字段的宽度和所述列数量自动且动态地组合所述经修正的应用页面；
其中所述至少一个表单字段展开以填充可用空间；以及
其中，当所述至少一个表单字段与之前表单字段并不在同一行相适应时，所述至少一个表单字段被自动放入下一行，
其中所述指令还被配置为使得所述处理器：基于所述页面布局上的所述列数量确定预定的字段大小相对于所述数据字段的结合，并且根据所述页面布局上的所述列数量应用所述预定的字段大小的结合。
5.根据权利要求4所述的方法，其中所述布局参数包括：
字段数量。
6.根据权利要求4所述的方法，进一步包括从第三方接收所述多个表单布局样式的表单布局样式子集。
CN201210098780.9A 2011-03-31 2012-03-31 表单布局方法和系统 Active CN102737106B (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
US201161470439P 2011-03-31 2011-03-31
US61/470,439 2011-03-31

Publications (2)

Publication Number Publication Date
CN102737106A CN102737106A (zh) 2012-10-17
CN102737106B true CN102737106B (zh) 2018-10-23

Family

ID=45976616

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201210098780.9A Active CN102737106B (zh) 2011-03-31 2012-03-31 表单布局方法和系统

Country Status (5)

Country Link
US (2) US9003279B2 (zh)
EP (1) EP2506156B1 (zh)
CN (1) CN102737106B (zh)
AU (1) AU2012201880B2 (zh)
CA (1) CA2772747C (zh)

Families Citing this family (24)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9572614B2 (en) * 2012-04-03 2017-02-21 Salesforce.Com, Inc. Mechanism for facilitating user-controlled management of webpage elements for dynamic customization of information
US20140215308A1 (en) * 2013-01-31 2014-07-31 Adobe Systems Incorporated Web Page Reflowed Text
US9971468B2 (en) * 2013-02-21 2018-05-15 Atlassian Pty Ltd Automatically generating column layouts in electronic documents
US9892097B2 (en) * 2013-04-01 2018-02-13 Adobe Systems Incorporated Enabling absolute positioning with publishable HTML code
GB2519113A (en) 2013-10-10 2015-04-15 Ibm Generation of combined documents from content and layout documents based on semantically neutral elements
DE102014013943A1 (de) * 2014-09-19 2016-03-24 Abb Technology Ag Einrichtung zur Verwaltung und Konfiguration von Feldgeräten einer Automatisierungsanlage
US20160092404A1 (en) * 2014-09-30 2016-03-31 Microsoft Technology Licensing, Llc Intent Based Feedback
CN105653246B (zh) * 2014-11-14 2019-03-19 Tcl集团股份有限公司 一种在Android系统中横向列表的实现方法及装置
CN105718451A (zh) * 2014-12-01 2016-06-29 上海斐讯数据通信技术有限公司 浏览器多个页面公用弹出模块的方法
CN107153544A (zh) * 2017-05-09 2017-09-12 合肥汉腾信息技术有限公司 一种表单自定义方法和装置
US10614145B2 (en) * 2017-06-14 2020-04-07 International Business Machines Corporation Presenting content on a webpage in a desired format
CN108415985B (zh) * 2018-02-11 2021-09-03 西安西点信息技术有限公司 一种用户设备上html网页的适配方法
US11609963B2 (en) * 2018-10-24 2023-03-21 Citrix Systems, Inc. Dynamically change user interfaces for web applications and associated methods
CN109783555B (zh) * 2018-12-13 2021-07-30 东软集团股份有限公司 表单模板存储方法、装置、存储介质及电子设备
US10678600B1 (en) 2019-03-01 2020-06-09 Capital One Services, Llc Systems and methods for developing a web application using micro frontends
CN110377281A (zh) * 2019-05-31 2019-10-25 江苏联盟信息工程有限公司 一种动态生成html+css布局的方法及装置
US11093118B2 (en) 2019-06-05 2021-08-17 International Business Machines Corporation Generating user interface previews
CN112579855A (zh) * 2019-09-30 2021-03-30 北京国双科技有限公司 微信文章的特征码提取方法及装置
US11087079B1 (en) 2020-02-03 2021-08-10 ZenPayroll, Inc. Collision avoidance for document field placement
CN111401018A (zh) * 2020-03-17 2020-07-10 中国邮政储蓄银行股份有限公司 邮件报表生成方法、装置及系统
US11023659B1 (en) 2020-07-09 2021-06-01 Jamison HILL Systems and methods for generating a style configuration file with and without parameters
CN114327188B (zh) * 2021-12-30 2023-10-24 北京字跳网络技术有限公司 表单布局方法、装置、电子设备及计算机可读介质
CN114936059A (zh) * 2022-05-23 2022-08-23 北京达佳互联信息技术有限公司 媒介资源的展示方法、装置、电子设备及存储介质
CN115099206B (zh) * 2022-08-23 2022-12-06 佰墨思(成都)数字技术有限公司 一种生物制药生产全周期过程动态表单生成方法及系统

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6026433A (en) * 1997-03-17 2000-02-15 Silicon Graphics, Inc. Method of creating and editing a web site in a client-server environment using customizable web site templates
US6308188B1 (en) * 1997-06-19 2001-10-23 International Business Machines Corporation System and method for building a web site with automated workflow
CN101025738A (zh) * 2006-02-21 2007-08-29 广州保税区天懋数码电子商务有限公司 一种免模板动态网站生成方法

Family Cites Families (28)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2579397B2 (ja) * 1991-12-18 1997-02-05 インターナショナル・ビジネス・マシーンズ・コーポレイション 文書画像のレイアウトモデルを作成する方法及び装置
JPH06236367A (ja) * 1992-11-12 1994-08-23 Ricoh Co Ltd 文書作成装置の制御方法
IL106297A (en) * 1993-07-09 1997-11-20 Indigo C O C O Indigo Ltd Page make-up system
JPH0765002A (ja) * 1993-08-31 1995-03-10 Fuji Xerox Co Ltd 文書処理装置
US5809266A (en) * 1994-07-29 1998-09-15 Oracle Corporation Method and apparatus for generating reports using declarative tools
JP3970357B2 (ja) * 1996-08-13 2007-09-05 富士ゼロックス株式会社 表割付装置及び表割付方法
US6081816A (en) * 1998-03-18 2000-06-27 Microsoft Corporation Method for placing text around polygons and other constraints
US6178417B1 (en) * 1998-06-29 2001-01-23 Xerox Corporation Method and means of matching documents based on text genre
JP2003528358A (ja) * 1998-08-24 2003-09-24 富士通株式会社 ワークフローシステムおよび方法
US6668354B1 (en) * 1999-01-05 2003-12-23 International Business Machines Corporation Automatic display script and style sheet generation
JP3916124B2 (ja) * 2001-02-15 2007-05-16 インターナショナル・ビジネス・マシーンズ・コーポレーション デジタル文書閲覧システム、ブラウザ、デジタル文書表示方法、プログラム及び記憶媒体
US20030007014A1 (en) * 2001-06-25 2003-01-09 Suppan Scott John User interface system for composing an image page layout
US7032170B2 (en) * 2002-06-03 2006-04-18 General Electric Company Creating data structures from a form file and creating a web page in conjunction with corresponding data structures
JP4247138B2 (ja) * 2004-02-25 2009-04-02 株式会社リコー ネットワーク複合機
US7802182B2 (en) * 2004-05-21 2010-09-21 Bea Systems Inc. System and method for performing visual property updates
US7398472B2 (en) * 2004-07-09 2008-07-08 Microsoft Corporation Defining the visual appearance of user-interface controls
US20090083617A1 (en) * 2005-05-02 2009-03-26 Masakazu Hironiwa Input form design device and input form design method
US8335799B2 (en) 2005-08-17 2012-12-18 Site Technologies Inc. Automatic website generator
US8689137B2 (en) * 2005-09-07 2014-04-01 Microsoft Corporation Command user interface for displaying selectable functionality controls in a database application
US7505977B2 (en) * 2005-09-27 2009-03-17 International Business Machines Corporation Method for dynamically updating a websheet configuration
US7770106B2 (en) * 2006-03-17 2010-08-03 Microsoft Corporation Dynamic generation of compliant style sheets from non-compliant style sheets
US7996869B2 (en) * 2006-08-18 2011-08-09 Sony Corporation Automatically reconfigurable multimedia system with interchangeable personality adapters
US20080250071A1 (en) 2007-04-06 2008-10-09 Synerg Software Corporation Systems and methods for business applications
US7941746B2 (en) * 2007-07-11 2011-05-10 Microsoft Corporation Extended cascading style sheets
US8595634B2 (en) * 2007-11-30 2013-11-26 Red Hat, Inc. Distributed hosting of web application styles
US20090216661A1 (en) * 2008-02-25 2009-08-27 Warner Scott J Systems and methods for online garden design
US8332746B2 (en) * 2008-06-26 2012-12-11 Microsoft Corporation Transformation of physical and logical layout forms to logical layout pages
US8660976B2 (en) * 2010-01-20 2014-02-25 Microsoft Corporation Web content rewriting, including responses

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6026433A (en) * 1997-03-17 2000-02-15 Silicon Graphics, Inc. Method of creating and editing a web site in a client-server environment using customizable web site templates
US6308188B1 (en) * 1997-06-19 2001-10-23 International Business Machines Corporation System and method for building a web site with automated workflow
CN101025738A (zh) * 2006-02-21 2007-08-29 广州保税区天懋数码电子商务有限公司 一种免模板动态网站生成方法

Also Published As

Publication number Publication date
US9665552B2 (en) 2017-05-30
CA2772747A1 (en) 2012-09-30
US9003279B2 (en) 2015-04-07
CN102737106A (zh) 2012-10-17
US20120254714A1 (en) 2012-10-04
EP2506156A2 (en) 2012-10-03
AU2012201880A1 (en) 2012-10-18
AU2012201880B2 (en) 2014-07-17
US20150278184A1 (en) 2015-10-01
CA2772747C (en) 2015-10-27
EP2506156B1 (en) 2016-07-27
EP2506156A3 (en) 2012-12-26

Similar Documents

Publication Publication Date Title
CN102737106B (zh) 表单布局方法和系统
US8924847B2 (en) Multilayer style sheet approach and system
CN102663126B (zh) 一种在移动终端中显示网页的方法及装置
US9063740B2 (en) Web widget component for a rapid application development tool
JP2008198217A (ja) テーブルレイアウトを行うブラウザプログラム、方法および装置
US20120212501A1 (en) Automated method for customizing theme colors in a styling system
CN104217037A (zh) 一种在移动终端中显示网页的方法及装置
CN107562455B (zh) 一种html列表自适应布局方法及装置
CN108897889A (zh) 一种网页优化方法、网页优化装置以及计算机设备
CN110020291A (zh) 网页布局的处理方法及装置
AU2012201890B2 (en) Multilayer style sheet approach and system
Lambert Bootstrap Site Blueprints Volume II
Subramanian et al. React-bootstrap
JP7198495B2 (ja) Ｗｅｂページ作成装置、ｗｅｂページ作成方法、コンピュータプログラム
JP5346872B2 (ja) 情報表示システム、サーバ装置、クライアント装置及びプログラム
Freeman et al. HTML and Bootstrap CSS Primer
Dowden et al. Layouts
Washington Modern Practices for Responsive Web Design and Web Accessibility
Ghoda et al. Creating User Interfaces
Zammetti et al. Getting to Know Webix
Freeman et al. An HTML and CSS Primer
KR20240081588A (ko) 가상공간 플랫폼 연동장치 및 가상공간 플랫폼 연동 방법
McCombs et al. Customizing Magento’s Appearance
Vesterli et al. Layout and Skins
Blocks Creating User Interfaces

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant