- Introduction to WorkXpress
- Building Your Application
- Examples and Best Practices
- Technical Manual
This shows you the differences between two versions of the page.
|
presentation layer [2016/09/14 18:19] |
presentation layer [2016/09/14 18:19] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ====== The Presentation Layer: Forms and Fields ====== | ||
| + | The presentation layer allows you to interact with the visual elements of your application. You can arrange [[Form|forms]] and [[Field|fields]] on the [[Form Type - Page|page]]. Forms contain fields, which allow you to display data to or gather information from users. You can also choose to hide or show certain visual elements, such as the [[Form Setting - Hide Title Bar|title bar of a form]] or the [[Field Setting - Display Alternate Label|displayed label of a field]]. The presentation layer displays control points with which to add fields and forms. Once a field or form is added, the control point will vary depending on the type of form or field it is used to access. | ||
| + | |||
| + | ^ To toggle the Presentation Layer ^^ | ||
| + | | On the [[Block Creator]], use the toggles for the layers || | ||
| + | | {{:blockcreator.png?direct&400|}} | {{:presentationlayer.png?direct|}} | | ||
| + | |||
| + | |< 50% 25% >| | ||
| + | ^ Control Points in the Presentation Layer ^^^^ | ||
| + | | Add a form | {{:interface-layer:form-plus.png?nolink|}} | Example of form control point for existing form \\ [[Form Type - List|List Form]] | {{:list.png?direct|}} | | ||
| + | | Add a field | {{:presentation-layer:field-plus.png?direct|}} | Example of field control point for existing field \\ [[Field Type - Short Text|Short Text Field]] | {{:shorttext.png?direct|}} | | ||
| + | |||
| + | |||
| + | |||
| + | ^ Page in [[Application Lifecycle Management#Application Roles|Development Role]] ^^ | ||
| + | | **No Layers Displayed** | **Presentation Layer Displayed** \\ Control points are shown | | ||
| + | | {{:presentationlayer:nolayer.png?direct&500|}}|{{:presentationlayer:presentationdisplayed.png?direct&500|}}| | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | ===== Forms ===== | ||
| + | [[Form|Forms]] on a webpage take a variety of shapes and sizes, and as such there are a variety of forms types to choose from. The most basic form is a [[Form Type - Page|page]]. Within a page, you can nest other form types including [[Form Type - Field Grid|field grids]], [[Form Type - List|lists]], [[Form Type - Calendar|calendars]], and much more. | ||
| + | ===== Fields ===== | ||
| + | [[Field|Fields]] are nested inside forms and serve a primary purpose of displaying or capturing information. WorkXpress fields are also able serve more dynamic purposes, such as providing a [[Form Type - Calendar|calendar date picker]] or displaying information based on an [[Field Type - Evaluated|evaluation]]. | ||
| + | |||
| + | |||
| + | ===== Nesting ===== | ||
| + | |||
| + | The most fundamental form type in WorkXpress is the [[Form Type - Page|page]]]. Every form you create will be presented to your users from somewhere within a page. | ||
| + | |||
| + | A page is part of a class of form types that does not contain any fields directly. Instead, a page contains only other forms. All forms may either contain other forms or fields. | ||
| + | |||
| + | The process of adding a form or a field inside another form is called nesting. Technically, there's no limit to the number of forms or fields you may nest, but you're practically limited by the quality of the resulting interface. | ||
| + | |||
| + | The image below shows an example where Layout B is nested inside of Layout A. | ||
| + | {{:layouts1.png?direct|}} | ||
| + | |||
| + | |||
| + | ====Field Nesting==== | ||
| + | |||
| + | You'll need to add Fields to your interface to display data. Fields are always nested inside of Layouts. | ||
| + | |||
| + | In this first image, we have nested six fields inside a Field Grid (Layout B from our example above). Fields Grids and other Layout Types are explained later in this lesson. | ||
| + | |||
| + | {{:layoutb.png?direct|}} | ||
| + | |||
| + | |||
| + | In this second image, we show three Fields nested inside a List Layout (Layout C). Nesting Fields inside a List Layout actually makes those Fields into column headers for the list that display a range of values for those Fields from your data layer below. | ||
| + | |||
| + | {{:layoutc.png?direct|}} | ||
| + | |||
| + | Finally, we take Layouts B and C and nest them back into Layout A. This final image shows the results of nesting Layouts inside other Layouts and of Fields nested inside those Layouts. As you can see, the basic look of an application's interface begins to emerge. | ||
| + | |||
| + | {{:layoutabc.png?direct|}} | ||
