Difference between revisions of "Image Strip Options"

Latest revision as of 11:19, 3 March 2022

Overview

ImageStrip Sections display a horizontal 'strip' of data-bound images. They can optionally include a text notes panel.

The Lianja Tablet Web UI Demo App (example_webapp1) includes an ImageStrip Section:

In web/mobile Apps, the images are touch-friendly - here calling the Double Click event delegate.

Which uses the Lianja.showDialogPanel() method to display the information in a slide-in panel.

Lianja.showDialogPanel("EMPLOYEE INFORMATION", "lib:/showdialogpanel_employee.rsp?employeeid={employees.employeeid}", 500);

Touch or click on the text notes panel to edit...

In a slide-in dialog panel:

example_imagestrip App

From v7.1, the Lianja App Builder distribution includes the example_imagestrip App. This demonstrates the new Image Viewer functionality.

When the Image viewer visible attribute is set to True, clicking on an image in the ImageStrip displays that image in the Image viewer.

Clicking (or touching) the details panel now slides in the editor - either Text or HTML depending on the Image notes format attribute setting.

Clicking (or touching) the '-' button in the section header allows images to be deleted.

Clicking (or touching) the '+' button in the section header or the big '+' after the last ImageStrip image allows images to be added.

This provides you with a powerful No-Code section in Lianja 7.1

You can of course customize its operation using Low-Code delegates e.g. handle double click of an image.

Image notes visible

Show the image notes panel (True | False)

Image notes editable

Allow the image notes to be edited (True | False). From v6.0.

Image notes format

The format of the image notes to be edited (Text | Html). From v6.0.

Image notes caption

Image notes caption to display

Image notes data source

Image notes data source (column name)

Image notes backcolor

Image notes background color

See Colors

Image notes forecolor

Image notes foreground color

See Colors

Image viewer visible

Show the image viewer panel (True | False). From v7.1.

See the example_imagestrip App as shown above.

@@ Line 1: / Line 1: @@
-''Under construction''
+==Overview==
+ImageStrip Sections display a horizontal 'strip' of data-bound images. They can optionally include a text notes panel.
+The Lianja Tablet Web UI Demo App (example_webapp1) includes an ImageStrip Section:
+[[{{ns:file}}:ImageStripOptions1.png|800px|left|border|link={{filepath:ImageStripOptions1.png}}|Image Strip Options]]
+<br clear=all>
+In web/mobile Apps, the images are touch-friendly - here calling the Double Click event [[Custom Delegates|delegate]].
+[[{{ns:file}}:ImageStripOptions2.png|800px|left|border|link={{filepath:ImageStripOptions2.png}}|Image Strip Options]]
+<br clear=all>
+Which uses the [[Lianja]].showDialogPanel() method to display the information in a slide-in panel.
+[[{{ns:file}}:ImageStripOptions3.png|800px|left|border|link={{filepath:ImageStripOptions3.png}}|Image Strip Options]]
+<br clear=all>
+<code lang="javascript">
+Lianja.showDialogPanel("EMPLOYEE INFORMATION", "lib:/showdialogpanel_employee.rsp?employeeid={employees.employeeid}", 500);
+</code>
+Touch or click on the text notes panel to edit...
+[[{{ns:file}}:ImageStripOptions4.png|800px|left|border|link={{filepath:ImageStripOptions4.png}}|Image Strip Options]]
+<br clear=all>
+In a slide-in dialog panel:
+[[{{ns:file}}:ImageStripOptions5.png|800px|left|border|link={{filepath:ImageStripOptions5.png}}|Image Strip Options]]
+<br clear=all>
+==example_imagestrip App==
+From v7.1, the Lianja App Builder distribution includes the example_imagestrip App.  This demonstrates the new Image Viewer functionality.
+When the [[#Image viewer visible|Image viewer visible]] attribute is set to True, clicking on an image in the ImageStrip displays that image in the Image viewer.
+[[{{ns:file}}:example_imagestrip1.png|800px|left|border|link={{filepath:example_imagestrip1.png}}|Image Strip Options]]
+<br clear=all>
+Clicking (or touching) the details panel now slides in the editor - either Text or HTML depending on the [[#Image notes format|Image notes format]] attribute setting.
+[[{{ns:file}}:example_imagestrip3.png|800px|left|border|link={{filepath:example_imagestrip3.png}}|Image Strip Options]]
+<br clear=all>
+[[{{ns:file}}:example_imagestrip4.png|800px|left|border|link={{filepath:example_imagestrip4.png}}|Image Strip Options]]
+<br clear=all>
+Clicking (or touching) the '-' button in the section header allows images to be deleted.
+Clicking (or touching) the '+' button in the section header or the big '+' after the last ImageStrip image allows images to be added.
+[[{{ns:file}}:example_imagestrip2.png|800px|left|border|link={{filepath:example_imagestrip2.png}}|Image Strip Options]]
+<br clear=all>
+This provides you with a powerful No-Code section in Lianja 7.1
+You can of course customize its operation using Low-Code delegates e.g. handle double click of an image.
 ==See Also==
@@ Line 8: / Line 65: @@
 ==Image notes editable==
-Allow the image notes to be edited (True | False)
+Allow the image notes to be edited (True | False).  From v6.0.
+==Image notes format==
+The format of the image notes to be edited (Text | Html).  From v6.0.
 ==Image notes caption==
@@ Line 23: / Line 83: @@
 Image notes foreground color
 * See [[Colors]]
+==Image viewer visible==
+Show the image viewer panel (True | False). From v7.1.
+* See the example_imagestrip App [[#example_imagestrip_App|as shown above]].
+[[Category:Sections]]
+[[Category:Lianja v7.1]]