fitems.md

Famcy Items

This goes through how to develop your customized famcy items and the natively provided famcy item templates.
Famcy provides multiple FBlock and FCard templates for the development of the front end web. The following is the chart of different type of FBlock which Famcy provides and the items that Famcy includes as well as some examples of the usage of these Famcy items. This documentation also includes the examples of adding FBlock into FCard layout in code.

FBlock

FBlock templates

Class Name	Parent Class	Definition
FBlock	FamcyWidget	This is the parent class of a item that is a combination of FElements and can be placed in FCard
FInputBlock	FBlock	This is the parent class of a item that the user can edit or get the value of it. The child class of FInputBlock requires the user to provide "action_after_post" and "mandatory" keys
FUploadBlock	FBlock	This is the parent class of a item when the user needs to upload of download file

Create a custom FBlock

To create a custom FBlock item, make sure each element inherits Famcy.FamcyBlock and contains init_block, generate_template_content and render_inner which returns FElement. The following is an example of a custom FBlock item:

import Famcy
class fblock_item(Famcy.FamcyBlock):
	def __init__(self):
    	self.value = fblock_item.generate_template_content()
    	super(fblock_item, self).__init__()
    	self.init_block()

	@classmethod
	def generate_template_content(cls):
		"""
		This function returns values that the user can edit in Famcy.
		"""
    	return {
        	"h1": "",
        	"h2": ""
    	}

	def init_block(self):
		"""
		This function create the html structure of the item by using FElements
		"""
    	self.body = Famcy.div()
    	self.body["id"] = self.id
    	self.body["className"] = "fblock_item"

    	h1_temp = Famcy.h1()
    	h2_temp = Famcy.h2()

    	self.body.addElement(h1_temp)
    	self.body.addElement(h2_temp)

	def render_inner(self):
		"""
		This function updates values that the user edited
		"""
		self.body.children[0].innerHTML = self.value["h1"]
		self.body.children[1].innerHTML = self.value["h2"]

    	return self.body

FBlock items provided by Famcy

Class Name	Submittable Item	Values
bar_chart	x	values labels title xy_axis_title size
line_chart	x	values labels title
pie_chart	x	values labels size
event_calendar	x	language events
with_btn_calendar	v	title mandatory action_after_post weekdays months week_avail special_avail_dict
table_block	v	input_button input_value_col_field page_detail page_detail_content toolbar page_footer page_footer_detail column data
video_stream	x	refreash_stream stop_stream title desc rtsp_address video_timeout holder_width holder_height img_path
displayImage	x	title img_name img_size border_radius
displayLight	x	title status light_size
displayParagraph	x	title content
displayPicWord	x	title content img_src
displayStepLoader	x	title steps steps_status
displayTag	x	title content
inputBlockSec	v	title content img_src btn_name
inputBtn	v	title desc input_type num_range placeholder mandatory button_name action_after_post
inputList	v	title desc mandatory value action_after_post
inputParagraph	v	title desc height placeholder mandatory action_after_post
inputPassword	v	title desc mandatory action_after_post
multipleChoicesRadioInput	v	title desc mandatory value action_after_post
pureInput	v	title desc defaultValue input_type num_range placeholder mandatory action_after_post
singleChoiceRadioInput	v	title desc mandatory value action_after_post
submitBtn	v	title mandatory action_after_post
urlBtn	v	title style url desc mandatory button_name action_after_post
downloadFile	v	title file_path file_name mandatory action_after_post
uploadFile	v	title file_num accept_type file_path mandatory action_after_post

Create a New FBlock

This is a example of creating a FBlock item and setting some details of the block.

block = Famcy.displayTag()
block.update({
            "title": "Title",
            "content": "Content"
        })

The following shows the example of creating a FInputBlock item and connect the block item with a submission function.

iblock = Famcy.pureInput()
iblock.update({"title": "Input Block"})
iblock.connect(python_action, target=card)

FCard

FCard templates

Class Name	Parent Class	Definition
FCard	FamcyWidget	This is a card holder that can place a lot of FBlock(widget) in it
FPromptCard	FCard	This is a pop up card holder
input_form	FCard	This is a input form holder that can submit input information
upload_form	FCard	This is a upload form holder that can upload the file and get value of it

Create a New FCard

This is a example of creating a FCard and setting the title of the card.

card = Famcy.FamcyCard()
card.title = "FCard Example"

The following shows the example of adding multiple FBlocks in FCard. Using the action `addWidget` to add fblock into the card layout. `addWidget` needs parameter `addWidget(row number, column number, height [default=1], width [default=1])`

card = Famcy.FamcyCard()
card.layout.addWidget(fblock1, 0, 0)

The followings are the example of creating FPromptCard, input_form and upload_form.

pcard = Famcy.FamcyPromptCard()
pcard.layout.addWidget(fblock1, 0, 0)

icard = Famcy.input_form()
icard.layout.addWidget(fblock2, 0, 0)

ucard = Famcy.upload_form()
ucard.layout.addWidget(fblock3, 0, 0)