From wiki.ginstr.com
Jump to: navigation, search
(horizonal layout)
 
(111 intermediate revisions by 3 users not shown)
Line 3: Line 3:
 
|}
 
|}
  
=Number=
+
=Number integer=
Widget is used for numerical input of data by user. Value will be stored as datatype NUMBER.<br>
+
Widget is used for numerical input of data by user. Value will be stored in couchdb as datatype NUMBER.<br>
Back to [[ginstr app composer reference]]
 
  
== Predefined user data ==
+
Widget id, <code>${gbamID}</code>:<br>
 +
see <code>[[Number#GENERAL|alignment]]</code>
  
To read specification and understand it better we will assume that
+
Back to [[ginstr_app_composer_reference#Widgets_table|GBAM widgets table]]
* name of the page to which widgets are added = "page one"
 
* user entered the following data for the widget:<br>- label name = "number"<br>- hint for input field = "please enter number"<br>- table name = "users"
 
  
== Widget internal composition ==
+
== Datatypes ==
Internal elements of the widget
 
* [[TextView]]
 
* [[GnEditText]]
 
  
== Widget references ==
+
Value is stored from widget to database as [[:Category:Datatypes#number|<code>number</code>]] datatype.
If widget is added via app composer autogenerated ids will be created according to table below.<br>
 
Each new widget of this type with identical label added to screen will generate identical ids with increment number +1 at end of id;<br>
 
id of first widget will have no number at the end, 2nd widget with same label will have "2" at the end, i.e. @+id/pageOneNumberLabel on first widget will be @+id/pageOneNumberLabel2 on 2nd widget with identical label
 
  
{| class="wikitable sortable" style="font-size: 85%; text-align: left;"
+
== Predefined user data ==
|-
 
! scope="col" | Control
 
! scope="col" | Attribute
 
! scope="col" | Value
 
|-
 
| title="Widget" | TextView
 
| title="Attribute" | android:id
 
| title="Value" | @+id/pageOneNumberLabel
 
|-
 
| title="Widget" | TextView
 
| title="Attribute" | android:text
 
| title="Value" | @string/pageOneNumberLabel
 
|-
 
| title="Widget" | GnEditText
 
| title="Attribute" | android:id
 
| title="Value" | @+id/pageOneNumber
 
|-
 
| title="Widget" | GnEditText
 
| title="Attribute" | ek:s_hint
 
| title="Value" | @string/pageOneNumberHint
 
|-
 
| title="Widget" | TextView
 
| title="Attribute" | ek:style
 
| title="Value" | @style/numberTextView
 
|-
 
| title="Widget" | GnEditText
 
| title="Attribute" | ek:style
 
| title="Value" | @style/numberGnEditText
 
|}
 
  
== Attributes configuration ==
+
==== PreLoaded ====
 +
* [[GBAMRulesForIDGeneration#.24.7BscreenLabel.7D|<code>${screenLabel}</code>]]
  
=== TextView ===
+
==== Properties panel ====
 +
User will configure this data in properties panels of selected widget:
  
'''Preset attributes:'''
+
=====GENERAL=====
{| class="wikitable sortable" style="font-size: 85%; text-align: left;"
+
* "label", [[GBAMRulesForIDGeneration#.24.7BwidgetLabel.7D|<code>${widgetLabel}</code>]]
|-
+
* "hint", [[GBAMRulesForIDGeneration#STRING_RESOURCE_ID.27S_.40string.2F|<code>${widgetHint}</code>]]
! scope="col" | Attribute
+
* "alignment", represented by dropdown with two options
! scope="col" | Value
+
** "vertical", <code>${gbamID}</code>:<code>numberInteger</code> when selected UI should show label above the input field, <code>[[Number#vertical_layout|vertical]]</code> xml should be used
|-
+
** "horizontal", <code>${gbamID}</code>:<code>numberIntegerHorizontal</code> when selected UI should show label to right of input field in same line, <code>[[Number#horizonal_layout|horizontal]]</code> xml should be used
| title="Attribute" | android:id
+
* "initial value" value which is set into widget on screen load. Attribute is added only if user types initial value and the input can be only valid integer. ${initialValue}=
| title="Value" | @+id/pageOneNumberLabel
+
<syntaxhighlight lang="xml">
|-
+
gn:s_text="${userValue}"
| title="Attribute" | android:layout_width
+
</syntaxhighlight>
| title="Value" | match_parent
+
* "is masked" checkbox if selected,  the value in input field is masked, by default it's unchecked. If checkbox is selected following code is added to widget. ${isMasked}=
|-
+
<syntaxhighlight lang="xml">
| title="Attribute" | android:layout_height
+
gn:isMasked="true"
| title="Value" | wrap_content
+
</syntaxhighlight>
|-
+
=====VALIDATIONS=====
| title="Attribute" | ek:style
+
* "required", [[RequiredValidator]], add to configuration.xml:
| title="Value" | @style/numberTextView
+
<syntaxhighlight lang="xml">
|}
+
    <columnNumber required="true|false"></columnNumber>
 +
</syntaxhighlight>
 +
* "unique", check uniqueness when widget gets saved into db, having "is part of database" checked, add to configuration.xml:
 +
<syntaxhighlight lang="xml">
 +
    <columnNumber unique="true|false"></columnNumber>
 +
</syntaxhighlight>
 +
* "compare with", compares current widget with target selected in the validator. Validator has a dropdown to select widget which will be target and also has dropdown to select comparison type <code>${comparator}</code>. Validated target has to be of same datatype as current widget, in this case <code>number</code><br>
 +
** allowed comparison types are described here [[ComparatorValidator#Comparator_types]]
 +
** only comparator types that are allowed for certain datatype should be shown in dropdown selection where user chooses comparison type
 +
** comparison types should need to have user friendly translations
 +
**Following line should be added to widget:
 +
<syntaxhighlight lang="xml">
 +
gn:act_validate="[name:ComparatorValidator],[message=@string/$comparatorValidatorMessage],[targetWidget=@+id/${widgetID}_suffix],[comparator=${comparator}]"
 +
gn:act_setOnFocusLost="[gn:act_validateScreen]|[@+id/${widgetID}_suffix]"
 +
gn:actionSetOnFocusLost="true"
 +
</syntaxhighlight>
  
'''User defined attributes:'''
+
======internal validators======
{| class="wikitable sortable" style="font-size: 85%; text-align: left;"
+
Validators not visible to user.
|-
 
! scope="col" | Attribute
 
! scope="col" | Value
 
|-
 
| title="Attribute" | android:text
 
| title="Value" | @string/pageOneNumber
 
|}
 
  
=== GnEditText ===
+
* "max length", [[TextValidator#maxLength]] set to 15
  
Represents the internal organization of a widget:
+
=====ACTION=====
* [[control/GnEditText]]
+
* -
  
'''Preset attributes:'''
+
======ACTION MESSAGES======
{| class="wikitable sortable" style="font-size: 85%; text-align: left;"
+
* -
|-
 
! scope="col" | Attribute
 
! scope="col" | Value
 
|-
 
| title="Attribute" | android:id
 
| title="Value" | @+id/pageOneNumber
 
|-
 
| title="Attribute" | android:layout_width
 
| title="Value" | match_parent
 
|-
 
| title="Attribute" | android:layout_height
 
| title="Value" | wrap_content
 
|-
 
| title="Attribute" | ek:s_sourceType
 
| title="Value" | input
 
|-
 
| title="Attribute" | ek:data_type
 
| title="Value" | number
 
|}
 
  
'''User defined attributes:'''
+
=====DATABASE=====
{| class="wikitable sortable" style="font-size: 85%; text-align: left;"
+
* "is part of database", checkbox option by default is set as checked. When checked database column is created for this widget.
|-
+
* "additional ginstr web column settings":
! scope="col" | Attribute
+
:* "percentage %", add to configuration.xml:
! scope="col" | Value
+
<syntaxhighlight lang="xml">
|-
+
<columnNumber>
| title="Attribute" | ek:s_hint
+
    <percentage>true|false</percentage>
| title="Value" | @string/pageOneNumberHint
+
</columnNumber>
|}
+
</syntaxhighlight>
 +
:* "horizontal alignment", add to configuration.xml:
 +
<syntaxhighlight lang="xml">
 +
<columnNumber>
 +
    <horizontalAlignment>left|center|right</horizontalAlignment>
 +
</columnNumber>
 +
</syntaxhighlight>
 +
:* "list of allowed values", add to configuration.xml:
 +
<syntaxhighlight lang="xml">
 +
<columnNumber>
 +
    <valuesList>
 +
    <value>1</value>
 +
    <value>2</value>
 +
  </valuesList>
 +
</columnNumber>
 +
</syntaxhighlight>
 +
:* "related unique columns", add to configuration.xml:
 +
<syntaxhighlight lang="xml">
 +
<columnNumber>
 +
    <uniqueInsideList>
 +
        <reference>
 +
          <table>refTableId1</table>
 +
          <column>refColumnField1</column>
 +
        </reference>
 +
        <reference>
 +
          <table>refTableId2</table>
 +
          <column>refColumnField2</column>
 +
        </reference>
 +
    </uniqueInsideList>
 +
</columnNumber>
 +
</syntaxhighlight>
 +
* "hidden ginstr web column settings":
 +
:* "decimal places", 0 for integer, add to configuration.xml:
 +
<syntaxhighlight lang="xml">
 +
<columnNumber>
 +
    <decimalPlaces>0</decimalPlaces>
 +
</columnNumber>
 +
</syntaxhighlight>
 +
:* "number signs", for positive number add: "equalToZero" and "greaterThanZero", add to configuration.xml:
 +
<syntaxhighlight lang="xml">
 +
<numberSigns>
 +
    <numberSign>lessThanZero</numberSign>
 +
    <numberSign>equalToZero</numberSign>
 +
    <numberSign>greaterThanZero</numberSign>
 +
</numberSigns>
 +
</syntaxhighlight>
  
== Changes to other files ==
+
== Code snippets ==
When widget is dropped from toolbox to the composer screen in app composer the following file changes will be performed.
+
=== GBAM Code Variables ===
 
 
=== strings.xml ===
 
Lines to be added for all languages.
 
 
 
<source lang="xml">
 
<string name="pageOneNumberLabel">number</string>
 
<string name="pageOneNumberHint">please enter number</string>
 
<string name="valitedateNumberLenghtLimit">the number you have entered is too long (15 chars max)</string>
 
 
 
</source>
 
 
 
== When dropping widget to screen from toolbox actions ==
 
 
 
=== Prompts ===
 
 
 
* User will be prompted to write "label" for TextView (label).
 
* User will be prompted to write "hint" for GnEditText (input).
 
 
 
=== Post prompt events ===
 
  
* Value that user provided for label and page will be used as identifier of widget "pageOne" + "Number" + "Label" (+ "2" in case this is 2nd widget with same label)
+
Variables which are used in code snippet below but not defined in user modifiable inputs.
* Value that user provided for label and page "pageOne" + "label" will be used as identifier for label string in strings.xml (user entered input will be transformed to adapt to camel case convention, blanks will be removed)
 
* Value that user provided for label will and page be added to strings.xml under the identifier as value; leading, trailing and duplicate blanks will be removed;
 
* Value that user provided for label will and page be used as identifier of widget "pageOne" + "Number" (+ "2" in case this is 2nd widget with same label)
 
* value that user provided for label and page + "hint" will be used as identifier for hint string in strings.xml (user entered input will be transformed to adapt to camel case convention)
 
* Value that user provided for hint will be added to strings.xml under the identifier as value
 
  
 +
* <code>[[GBAMRulesForIDGeneration#WIDGET_ID.27S_.24.7BwidgetID.7D|${widgetID}]]</code>
  
== Validators ==
+
=== Available layouts ===
Contains no validators
+
==== vertical layout ====
 
+
<syntaxhighlight lang="xml">
== Logic ==
+
<com.ginstr.widgets.GnTextView
Contains no logic
+
     android:id="@+id/${widgetID}_label"
 
 
== Code snippets ==
 
=== Common widget code:===
 
<source lang="xml">
 
<TextView
 
     android:id="@+id/pageOneNumberLabel"
 
 
     android:layout_width="match_parent"
 
     android:layout_width="match_parent"
 
     android:layout_height="wrap_content"
 
     android:layout_height="wrap_content"
     android:text="@string/pageOneNumber"
+
     android:text="@string/${widgetID}"
     ek:style="@style/numberTextView"/>
+
     gn:style="@style/numberInteger_label"/>
  
 
<com.ginstr.widgets.GnEditText   
 
<com.ginstr.widgets.GnEditText   
     android:id="@+id/pageOneNumber"
+
     android:id="@+id/${widgetID}_input"
 
     android:layout_width="match_parent"  
 
     android:layout_width="match_parent"  
 
     android:layout_height="wrap_content"
 
     android:layout_height="wrap_content"
     ek:s_hint="@string/pageOneNumberHint"
+
     gn:s_hint="@string/${widgetID}Hint"
     ek:s_sourceType="input"
+
     gn:s_sourceType="input"
     ek:data_type="number"
+
     gn:dataType="number"
     ek:act_validate="[name:TextValidator],[maxLength=15],[maxLengthErrMsg=@string/valitedateNumberLenghtLimit]"
+
     gn:inputType="TYPE_CLASS_NUMBER|TYPE_NUMBER_FLAG_SIGNED"
    --variant content goes here--/>
+
    gn:s_decimalFormat="#"
</source>
+
    gn:autoAdjustHeight="true"
 +
    ${initialValue}
 +
    ${isMasked}
 +
    gn:style="@style/numberInteger_input" />
 +
</syntaxhighlight>
  
==== <span id="integer">Integer</span> variant:====
+
==== horizonal layout ====
===== Widget code =====
 
<source lang="xml"><
 
    ek:style="@style/numberIntegerGnEditText"
 
    ek:inputType="NUMBER"
 
    ek:s_decimalFormat="#"
 
</source>
 
  
==== <span id="decimal">Decimal</span> variant:====
+
<syntaxhighlight lang="xml">
===== Widget code =====
+
<LinearLayout
<source lang="xml"><
+
     android:layout_width="match_parent"
     ek:style="@style/numberDecimalGnEditText"  
+
     android:layout_height="wrap_content"
     ek:inputType="TYPE_NUMBER_FLAG_DECIMAL"
+
     android:weightSum="100"
     ek:s_decimalFormat="0.00"
+
     android:orientation="horizontal">
     ek:act_validate2="[name:TextValidator],[inputType=REGEX],[REGEXErrMsg=@string/validateDecimalNumber],[pattern=@string/decimalNumberPattern]"
 
</source>
 
  
===== strings.xml =====
+
    <com.ginstr.widgets.GnTextView
Lines to be added for <b>EN</b> language.
+
        android:id="@+id/${widgetID}_label"
<source lang="xml">
+
        android:layout_width="0dp"
<string name="decimalNumberPattern">^[-+]?[0-9]*(\.)?[0-9]+\b$</string>
+
        android:layout_weight="66"
</source>
+
        android:layout_height="wrap_content"
 +
        android:text="@string/${widgetID}"
 +
        gn:style="@style/numberIntegerHorizontal_label"/>
  
Lines to be added for <b>DE</b> language.
+
    <com.ginstr.widgets.GnEditText 
<source lang="xml">
+
        android:id="@+id/${widgetID}_input"
<string name="decimalNumberPattern">^[-+]?[0-9]*(\,)?[0-9]+\b$</string>
+
        android:layout_width="0dp"
</source>
+
        android:layout_weight="34"
 +
        android:layout_height="wrap_content"
 +
        gn:s_hint="@string/${widgetID}Hint"
 +
        gn:s_sourceType="input"
 +
        gn:dataType="number"
 +
        gn:inputType="TYPE_CLASS_NUMBER|TYPE_NUMBER_FLAG_SIGNED"
 +
        gn:s_decimalFormat="#"
 +
        gn:autoAdjustHeight="true"
 +
        ${initialValue}
 +
        ${isMasked}
 +
        gn:style="@style/numberIntegerHorizontal_input" />
 +
</LinearLayout>
 +
</syntaxhighlight>
  
==== <span id="currency ">Currency </span>variant:====
+
=== strings.xml ===
===== Widget code =====
+
Lines to be added for each language.
<source lang="xml"><
+
<syntaxhighlight lang="xml">
    ek:style="@style/numberCurrencyGnEditText"
+
<string name="${widgetID}">${widgetLabel}</string>
    ek:inputType="TYPE_NUMBER_FLAG_DECIMAL"
+
<string name="${widgetID}Hint">${widgetHint}</string>
    ek:s_decimalFormat="0.00000"
+
</syntaxhighlight>
    ek:act_validate2="[name:TextValidator],[REGEXErrMsg=@string/validateCurrencyNumber],[pattern=@string/currencyNumberPattern]"
 
</source>
 
 
 
===== strings.xml =====
 
Lines to be added for <b>EN</b> language.
 
<source lang="xml">
 
<string name="currencyNumberPattern">^[-+]?(([1-9][0-9]{0,2}(,[0-9]{3})*)|0)?(\.[0-9]{1,4})?$</string>
 
</source>
 
 
 
Lines to be added for <b>DE</b> language.
 
<source lang="xml">
 
<string name="currencyNumberPattern">^[-+]?(([1-9][0-9]{0,2}(.[0-9]{3})*)|0)?(\,[0-9]{1,4})?$</string>
 
</source>
 
 
 
=== NOTE! ===
 
<b>Validator strings will be soon included in $defaultApp string resources, for now they are only documented here. After implementation, specific strings.xml for validators won't be needed to add into each app.</b>
 

Latest revision as of 18:32, 23 March 2020

Number integer

Widget is used for numerical input of data by user. Value will be stored in couchdb as datatype NUMBER.

Widget id, ${gbamID}:
see alignment

Back to GBAM widgets table

Datatypes

Value is stored from widget to database as number datatype.

Predefined user data

PreLoaded

Properties panel

User will configure this data in properties panels of selected widget:

GENERAL
  • "label", ${widgetLabel}
  • "hint", ${widgetHint}
  • "alignment", represented by dropdown with two options
    • "vertical", ${gbamID}:numberInteger when selected UI should show label above the input field, vertical xml should be used
    • "horizontal", ${gbamID}:numberIntegerHorizontal when selected UI should show label to right of input field in same line, horizontal xml should be used
  • "initial value" value which is set into widget on screen load. Attribute is added only if user types initial value and the input can be only valid integer. ${initialValue}=
gn:s_text="${userValue}"
  • "is masked" checkbox if selected, the value in input field is masked, by default it's unchecked. If checkbox is selected following code is added to widget. ${isMasked}=
gn:isMasked="true"
VALIDATIONS
    <columnNumber required="true|false"></columnNumber>
  • "unique", check uniqueness when widget gets saved into db, having "is part of database" checked, add to configuration.xml:
    <columnNumber unique="true|false"></columnNumber>
  • "compare with", compares current widget with target selected in the validator. Validator has a dropdown to select widget which will be target and also has dropdown to select comparison type ${comparator}. Validated target has to be of same datatype as current widget, in this case number
    • allowed comparison types are described here ComparatorValidator#Comparator_types
    • only comparator types that are allowed for certain datatype should be shown in dropdown selection where user chooses comparison type
    • comparison types should need to have user friendly translations
    • Following line should be added to widget:
gn:act_validate="[name:ComparatorValidator],[message=@string/$comparatorValidatorMessage],[targetWidget=@+id/${widgetID}_suffix],[comparator=${comparator}]"
gn:act_setOnFocusLost="[gn:act_validateScreen]|[@+id/${widgetID}_suffix]" 
gn:actionSetOnFocusLost="true" 
internal validators

Validators not visible to user.

ACTION
  • -
ACTION MESSAGES
  • -
DATABASE
  • "is part of database", checkbox option by default is set as checked. When checked database column is created for this widget.
  • "additional ginstr web column settings":
  • "percentage %", add to configuration.xml:
<columnNumber>
    <percentage>true|false</percentage>
</columnNumber>
  • "horizontal alignment", add to configuration.xml:
<columnNumber>
    <horizontalAlignment>left|center|right</horizontalAlignment>
</columnNumber>
  • "list of allowed values", add to configuration.xml:
<columnNumber>
    <valuesList>
    <value>1</value>
    <value>2</value>
  </valuesList>
</columnNumber>
  • "related unique columns", add to configuration.xml:
<columnNumber>
    <uniqueInsideList>
        <reference>
          <table>refTableId1</table>
          <column>refColumnField1</column>
        </reference>
        <reference>
          <table>refTableId2</table>
          <column>refColumnField2</column>
        </reference>
    </uniqueInsideList>
</columnNumber>
  • "hidden ginstr web column settings":
  • "decimal places", 0 for integer, add to configuration.xml:
<columnNumber>
    <decimalPlaces>0</decimalPlaces>
</columnNumber>
  • "number signs", for positive number add: "equalToZero" and "greaterThanZero", add to configuration.xml:
<numberSigns>
    <numberSign>lessThanZero</numberSign>
    <numberSign>equalToZero</numberSign>
    <numberSign>greaterThanZero</numberSign>
</numberSigns>

Code snippets

GBAM Code Variables

Variables which are used in code snippet below but not defined in user modifiable inputs.

Available layouts

vertical layout

<com.ginstr.widgets.GnTextView
    android:id="@+id/${widgetID}_label"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/${widgetID}"
    gn:style="@style/numberInteger_label"/>

<com.ginstr.widgets.GnEditText   
    android:id="@+id/${widgetID}_input"
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"
    gn:s_hint="@string/${widgetID}Hint"
    gn:s_sourceType="input"
    gn:dataType="number"
    gn:inputType="TYPE_CLASS_NUMBER|TYPE_NUMBER_FLAG_SIGNED"
    gn:s_decimalFormat="#"
    gn:autoAdjustHeight="true"
    ${initialValue}
    ${isMasked}
    gn:style="@style/numberInteger_input" />

horizonal layout

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="100"
    android:orientation="horizontal">

    <com.ginstr.widgets.GnTextView
        android:id="@+id/${widgetID}_label"
        android:layout_width="0dp"
        android:layout_weight="66"
        android:layout_height="wrap_content"
        android:text="@string/${widgetID}"
        gn:style="@style/numberIntegerHorizontal_label"/>

    <com.ginstr.widgets.GnEditText   
        android:id="@+id/${widgetID}_input"
        android:layout_width="0dp" 
        android:layout_weight="34"
        android:layout_height="wrap_content"
        gn:s_hint="@string/${widgetID}Hint"
        gn:s_sourceType="input"
        gn:dataType="number"
        gn:inputType="TYPE_CLASS_NUMBER|TYPE_NUMBER_FLAG_SIGNED"
        gn:s_decimalFormat="#"
        gn:autoAdjustHeight="true"
        ${initialValue}
        ${isMasked}
        gn:style="@style/numberIntegerHorizontal_input" />
</LinearLayout>

strings.xml

Lines to be added for each language.

<string name="${widgetID}">${widgetLabel}</string>
<string name="${widgetID}Hint">${widgetHint}</string>