Difference between revisions of "Visual Components"
Yvonne.milne (Talk | contribs) (→Webview Components) |
Yvonne.milne (Talk | contribs) |
||
Line 1: | Line 1: | ||
{{DISPLAYTITLE:Working with Visual Components}} | {{DISPLAYTITLE:Working with Visual Components}} | ||
− | == | + | ==Overview== |
+ | Visual Components allow you to create a Canvas Section or WebView/WebView based Section and save it as a component to be embedded in other UI elements with individually customized 'props': | ||
− | + | * Custom Sections | |
+ | * Custom Gadgets | ||
+ | * WebView Sections | ||
+ | * WebView Gadgets | ||
+ | * FormGrid Section Cells | ||
+ | * Grid Section Cells | ||
+ | * Custom Search Panels | ||
+ | * Custom DialogPanels | ||
− | [[ | + | [[{{ns:file}}:visualcomponents1.png|800px|left|link={{filepath:visualcomponents1.png}}|Visual Components Overview]] |
+ | <br clear=all> | ||
− | + | ==Creating Visual Components== | |
− | + | Canvas Sections, Webview Sections and WebView based Sections (e.g. Report, Charts, CatalogView, DocumentView) can be saved as Visual Components. | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | == | + | ===App Settings=== |
+ | ====Component Library==== | ||
+ | This specifies the Component library for this App. A component that is generated is saved here unless its Component library location is specified in the section attributes. | ||
− | + | A component library can contain one or more visual components. For Canvas Sections it is therefore important that you name your page and section with a unique name specific to that component, since the custom delegate code for the section is included in the component JavaScript file. | |
− | + | It is best practice to make component libraries unique to your organization e.g. com_yourcompany. This will allow them to be used by other developers without causing any name clashes. | |
− | + | ===Canvas Sections=== | |
+ | To save a Canvas Section as a Visual Component, make sure the Canvas Section is selected, then click the '''Sections -> Save As Component...''' menu option. | ||
+ | |||
+ | If the section's [[#Component name|Component name]] attribute is not set and this is the first time this section has been saved as a component, the 'Save As Component' dialog box will appear allowing you to enter a name for the component. | ||
+ | |||
+ | <div style="height:80px;margin-bottom:5px;padding:5px;border:0px solid orange;border-left:5px solid orange;background:#fff8dc;vertical-align:middle;position:relative;"> | ||
+ | [[File:bm-noteicon.png|top|40px|link=]]<div style="position:absolute;top:3px;margin-bottom;bottom:5px;margin-left:50px;"><b> Pro Tip</b> | ||
+ | Alternatively, specify the section's [[#Component name|Component name]] attribute and the component will be created when the App is saved.<br/> | ||
+ | </div> | ||
+ | <span style="height:6px;"> </span> | ||
+ | </div> | ||
+ | |||
+ | [[{{ns:file}}:vc_canvassaveas.png|800px|left|link={{filepath:vc_canvassaveas.png}}|Save Canvas Section As Component]] | ||
+ | <br clear=all> | ||
+ | |||
+ | By default, the component will be saved in a component library with the same name of the App (here 'example_component'). Component libraries are located in the components directory in the library. | ||
+ | |||
+ | So my component above is saved as: | ||
+ | |||
+ | '''Windows''' | ||
+ | <pre>C:\lianja\library\components\example_component\helloworld.js</pre> | ||
+ | |||
+ | '''Linux''' | ||
+ | <pre>/opt/lianja/library/components/example_component/helloworld.js</pre> | ||
+ | |||
+ | Modifying the Canvas Section and clicking the '''Sections -> Save As Component...''' menu option again, overwrites the component with the changes, so the generated code should not be edited directly. | ||
+ | |||
+ | Saving the App will also update any saved components. | ||
+ | |||
+ | Canvas Sections have the following '''Visual Component Details''' attributes for the component library location and component name and additional information about the visual component. These are saved in a .config file with the same basename and location as the component .js file, e.g. | ||
+ | |||
+ | '''Windows''' | ||
+ | <pre>C:\lianja\library\components\example_component\helloworld.config</pre> | ||
+ | |||
+ | '''Linux''' | ||
+ | <pre>/opt/lianja/library/components/example_component/helloworld.config</pre> | ||
+ | |||
+ | ====Component library==== | ||
+ | The component library sub-directory where the component will be stored. The default is the name of the App. | ||
+ | |||
+ | ====Component name==== | ||
+ | The name of the component. This can be specified in the attributes, or will be populated automatically after using the '''Sections -> Save As Component...''' menu option and saving and reloading the App. | ||
+ | |||
+ | ====Component author==== | ||
+ | Optional author details. This will be displayed in the [[#Component Gallery|Component Gallery]]. | ||
+ | |||
+ | ====Component version==== | ||
+ | Optional version details. This will be displayed in the [[#Component Gallery|Component Gallery]]. | ||
+ | |||
+ | ====Component description==== | ||
+ | Optional description details. This will be displayed in the [[#Component Gallery|Component Gallery]]. | ||
+ | |||
+ | ===WebView Sections=== | ||
+ | WebView Sections and WebView based Sections can also be saved as Visual Components. | ||
+ | |||
+ | WebView based Sections are as follows: | ||
+ | * ArticleView | ||
+ | * Calendar | ||
+ | * CarouselView | ||
+ | * CatalogView | ||
+ | * Charts | ||
+ | * CommentsView | ||
+ | * DocumentView | ||
+ | * GalleryView | ||
+ | * Org Chart | ||
+ | * Page Center | ||
+ | * PanelView | ||
+ | * Report | ||
+ | * TreeView | ||
+ | |||
+ | To save a WebView/WebView based Section as a Visual Component, make sure the Section is selected, then click the '''Sections -> Save As Component...''' menu option. | ||
+ | |||
+ | If the section's [[#Component name|Component name]] attribute is not set and this is the first time this section has been saved as a component, the 'Save As Component' dialog box will appear allowing you to enter a name for the component. | ||
+ | |||
+ | <div style="height:80px;margin-bottom:5px;padding:5px;border:0px solid orange;border-left:5px solid orange;background:#fff8dc;vertical-align:middle;position:relative;"> | ||
+ | [[File:bm-noteicon.png|top|40px|link=]]<div style="position:absolute;top:3px;margin-bottom;bottom:5px;margin-left:50px;"><b> Pro Tip</b> | ||
+ | Alternatively, specify the section's [[#Component name|Component name]] attribute and the component will be created when the App is saved.<br/> | ||
+ | </div> | ||
+ | <span style="height:6px;"> </span> | ||
+ | </div> | ||
+ | |||
+ | [[{{ns:file}}:vc_webviewsaveas.png|800px|left|link={{filepath:vc_webviewsaveas.png}}|Save WebView As Component]] | ||
+ | <br clear=all> | ||
+ | |||
+ | By default, the component will be saved in a component library with the same name of the App (here 'example_component'). Component libraries are located in the components directory in the library. | ||
+ | |||
+ | So my component above is saved as: | ||
+ | |||
+ | '''Windows''' | ||
+ | <pre>C:\lianja\library\components\example_galleryview\employeegallery.config</pre> | ||
+ | |||
+ | '''Linux''' | ||
+ | <pre>/opt/lianja/library/components/example_galleryview/employeegallery.config</pre> | ||
+ | |||
+ | Modifying the Section and clicking the '''Sections -> Save As Component...''' menu option again, overwrites the component with the changes, so the generated code should not be edited directly. | ||
+ | |||
+ | Saving the App will also update any saved components. | ||
+ | |||
+ | WebView/WebView based Sections have the following '''Visual Component Details''' attributes for the component library location and component name and additional information about the visual component. These are saved in the .config file along with the URL information for the component. | ||
+ | |||
+ | ====Component library==== | ||
+ | The component library sub-directory where the component will be stored. The default is the name of the App. | ||
+ | |||
+ | ====Component name==== | ||
+ | The name of the component. This can be specified in the attributes, or will be populated automatically after using the '''Sections -> Save As Component...''' menu option and saving and reloading the App. | ||
+ | |||
+ | ====Component author==== | ||
+ | Optional author details. This will be displayed in the [[#Component Gallery|Component Gallery]]. | ||
+ | |||
+ | ====Component version==== | ||
+ | Optional version details. This will be displayed in the [[#Component Gallery|Component Gallery]]. | ||
+ | |||
+ | ====Component description==== | ||
+ | Optional description details. This will be displayed in the [[#Component Gallery|Component Gallery]]. | ||
− | |||
− | |||
− | |||
− | ''' | + | ''UNDER CONSTRUCTION'' |
− | + | ||
==Embedding a Visual Component== | ==Embedding a Visual Component== | ||
Line 84: | Line 198: | ||
==App Settings== | ==App Settings== | ||
− | |||
− | |||
− | |||
− | |||
− | |||
===Components=== | ===Components=== | ||
Line 94: | Line 203: | ||
<pre>example_component.name;example_component.*</pre> | <pre>example_component.name;example_component.*</pre> | ||
− | == | + | ==Deployment== |
− | + | * When generating Web and Mobile Apps, components are included in the index.html file so there is no need to deploy them specifically. | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
[[Category:Lianja v5.0]] | [[Category:Lianja v5.0]] | ||
[[Category:Lianja v5.3]] | [[Category:Lianja v5.3]] |
Revision as of 11:29, 7 February 2020
Contents
Overview
Visual Components allow you to create a Canvas Section or WebView/WebView based Section and save it as a component to be embedded in other UI elements with individually customized 'props':
- Custom Sections
- Custom Gadgets
- WebView Sections
- WebView Gadgets
- FormGrid Section Cells
- Grid Section Cells
- Custom Search Panels
- Custom DialogPanels
Creating Visual Components
Canvas Sections, Webview Sections and WebView based Sections (e.g. Report, Charts, CatalogView, DocumentView) can be saved as Visual Components.
App Settings
Component Library
This specifies the Component library for this App. A component that is generated is saved here unless its Component library location is specified in the section attributes.
A component library can contain one or more visual components. For Canvas Sections it is therefore important that you name your page and section with a unique name specific to that component, since the custom delegate code for the section is included in the component JavaScript file.
It is best practice to make component libraries unique to your organization e.g. com_yourcompany. This will allow them to be used by other developers without causing any name clashes.
Canvas Sections
To save a Canvas Section as a Visual Component, make sure the Canvas Section is selected, then click the Sections -> Save As Component... menu option.
If the section's Component name attribute is not set and this is the first time this section has been saved as a component, the 'Save As Component' dialog box will appear allowing you to enter a name for the component.
Alternatively, specify the section's Component name attribute and the component will be created when the App is saved.
By default, the component will be saved in a component library with the same name of the App (here 'example_component'). Component libraries are located in the components directory in the library.
So my component above is saved as:
Windows
C:\lianja\library\components\example_component\helloworld.js
Linux
/opt/lianja/library/components/example_component/helloworld.js
Modifying the Canvas Section and clicking the Sections -> Save As Component... menu option again, overwrites the component with the changes, so the generated code should not be edited directly.
Saving the App will also update any saved components.
Canvas Sections have the following Visual Component Details attributes for the component library location and component name and additional information about the visual component. These are saved in a .config file with the same basename and location as the component .js file, e.g.
Windows
C:\lianja\library\components\example_component\helloworld.config
Linux
/opt/lianja/library/components/example_component/helloworld.config
Component library
The component library sub-directory where the component will be stored. The default is the name of the App.
Component name
The name of the component. This can be specified in the attributes, or will be populated automatically after using the Sections -> Save As Component... menu option and saving and reloading the App.
Component author
Optional author details. This will be displayed in the Component Gallery.
Component version
Optional version details. This will be displayed in the Component Gallery.
Component description
Optional description details. This will be displayed in the Component Gallery.
WebView Sections
WebView Sections and WebView based Sections can also be saved as Visual Components.
WebView based Sections are as follows:
- ArticleView
- Calendar
- CarouselView
- CatalogView
- Charts
- CommentsView
- DocumentView
- GalleryView
- Org Chart
- Page Center
- PanelView
- Report
- TreeView
To save a WebView/WebView based Section as a Visual Component, make sure the Section is selected, then click the Sections -> Save As Component... menu option.
If the section's Component name attribute is not set and this is the first time this section has been saved as a component, the 'Save As Component' dialog box will appear allowing you to enter a name for the component.
Alternatively, specify the section's Component name attribute and the component will be created when the App is saved.
By default, the component will be saved in a component library with the same name of the App (here 'example_component'). Component libraries are located in the components directory in the library.
So my component above is saved as:
Windows
C:\lianja\library\components\example_galleryview\employeegallery.config
Linux
/opt/lianja/library/components/example_galleryview/employeegallery.config
Modifying the Section and clicking the Sections -> Save As Component... menu option again, overwrites the component with the changes, so the generated code should not be edited directly.
Saving the App will also update any saved components.
WebView/WebView based Sections have the following Visual Component Details attributes for the component library location and component name and additional information about the visual component. These are saved in the .config file along with the URL information for the component.
Component library
The component library sub-directory where the component will be stored. The default is the name of the App.
Component name
The name of the component. This can be specified in the attributes, or will be populated automatically after using the Sections -> Save As Component... menu option and saving and reloading the App.
Component author
Optional author details. This will be displayed in the Component Gallery.
Component version
Optional version details. This will be displayed in the Component Gallery.
Component description
Optional description details. This will be displayed in the Component Gallery.
UNDER CONSTRUCTION
Embedding a Visual Component
Components can be used in custom section and custom gadget code. You simply call the constructor function in JavaScript like this:
mycomponent = yourcomponentlib_componentname();
Customizing a Visual Component at runtime
When a Visual Components is instantiated you can customize the internal attributes and intercept events using delegates.
Arguments (Optional): props -- A string of attribute key/values separated with a ; initFunction -- The init delegate for this component loadFunction -- The load delegate for this component readyFunction -- The ready delegate for this component
Examples:
Using "props"
var cont = example_component_barrytest("field1.table=customers;field3.backcolor=red;") return cont;
In the "init" function
var cont = example_component_barrytest(undefined, function(self) // initFunction -- "self" is a reference to the component { // reference the UI controls of the component by name using self.controls("name") var field3 = self.controls("field3"); // you can reference the attributes and call methods on any of the UI elements in the // canvas section which is now embedded in a "container" field3.backcolor = "red"; // you can hide UI elements in the container like this var field1 = self.controls("field1"); field1.hide(); // you can add new UI elements to the container like this (runtime inheritance) self.addObject('mytextbox','Textbox'); mytextbox.name = 'mytextbox'; mytextbox.top = 19; mytextbox.right = 4; mytextbox.width = 110; mytextbox.controlsource = "customers.customerid"; }); return cont;
So as you can see its quite easy to use components from your component libraries in custom sections and gadgets.
App Settings
Components
This specifies the Components needed for this App. Separate each with a ';' to specify more than one, e.g.
example_component.name;example_component.*
Deployment
- When generating Web and Mobile Apps, components are included in the index.html file so there is no need to deploy them specifically.