EDITOR - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki
<EDITOR/> : Widget
The <EDITOR/> widget is a specialty widget and is rarely used.
Example #1 : Here is the entire fmlpad template
<EDITOR id="editor" language="xml" theme="={theme} ?? solarized-light" value=""/>
<FML linkable="true" onstart="theme('{brightness}','{colorscheme}'); noe('{example}') ? p2.set('{STASH.example}') : p2.set('{example}');" title="FmlPad">
<CONST id="splash" value="templates/examples/about.xml"/>
<!-- root url of fmlpad -->
<VAR id="root" value="https://pad.fml.dev/" />
<!-- theme -->
<VAR id="brightness" value="=toStr({STASH.brightness} ?? {THEME.brightness})" onchange="stash('brightness',{this}); theme({brightness},{colorscheme});"/>
<VAR id="colorscheme" value="=toStr({STASH.colorscheme} ?? {THEME.colorscheme})" onchange="stash('colorscheme',{this}); theme({brightness},{colorscheme});"/>
<VAR id="xml" onchange="{r1} ? rightpane.fmlpad.replaceChildren({xml},false) : null" value="{editor}" />
<GET id="dbWidgets" root="WIDGETS.WIDGET" ttl="1h" url="=join({root},'templates/widgets.xml?refresh={SYSTEM.uuid}')" />
<GET id="dbStyles" root="STYLES.STYLE" ttl="1d" url="=join({root},'templates/styles.xml?refresh={SYSTEM.uuid}')" />
<GET id="dbExamples" root="EXAMPLES.EXAMPLE" url="=join({root},'api/examples')"/>
<VAR id="p2" onchange="p1.set(nvl({this},'templates/examples/about.xml'))"/>
<VAR id="p1" onchange="noe({this}) ? null : dbExample.url.set(join({root},{p1},'?refresh={SYSTEM.uuid}'))" />
<GET id="dbExample" onsuccess="editor.set({this.response})" url="=noe({p1}) ? '' : '{p1}?refresh={SYSTEM.uuid}'" />
<HEADER height="75" color="{THEME.oninversesurface}" valign="center" halign="left" layout="row">
<!-- logo -->
<PAD left="12"/>
<IMAGE url="/images/fml.png" height="30"/>
<PAD left="8"/>
<TEXT value="fmlpad" size="22" color="{THEME.onBackground}"/>
<PAD left="12"/>
<FILEPICKER id="fp1" onsuccess="editor.set({fp1.data.text})" allow=".xml"/>
<POPOVER icon="smart_button" label="Actions" visible="={SYSTEM.screenwidth} < 1000">
<ITEM label="Import" onclick="fp1.start()" />
<ITEM label="Save" onclick="saveas({editor},'{examples.data.title}')" />
<ITEM label="Copy" onclick="copy({editor});" />
<ITEM label="Clear" onclick="continue('info', 'Are you sure?', 'Clicking Yes will clear the editor text');editor.set('');examples.set(null);" />
</POPOVER>
<PAD left="20"/>
<!-- examples -->
<ROW expand="false" bordercolor="{THEME.primary}" borderlabel="Examples" radius="5">
<TYPEAHEAD id="examples" value="{p2}" border="none" data="dbExamples" width="300"
onchange="p1.set(nvl({this},{splash})); stash('example',{this.value});" addempty="false" rows="25">
<OPTION value="{data.url}" label="{data.title}">
<!-- Tags are used in the typeahead -->
<TAG value="{data.title}"/>
<TAG value="{data.keywords}"/>
<TAG value="{data.category}" type="equal"/>
<ROW expand="false" valign="center">
<ICON color="{data.color}" icon="{data.icon}" size="16" />
<PAD left="10" />
<TEXT value="{data.title}" />
</ROW>
</OPTION>
</TYPEAHEAD>
</ROW>
<ROW halign="end" valign="center">
<ROW bordercolor="{THEME.primary}" borderlabel="Controls" halign="between" expand="true" maxwidth="200" margin="10" padding="10" radius="5">
<!-- Import button -->
<LINK onclick="fp1.start()" >
<ICON icon="upload_file_rounded" color="{THEME.primary}" size="36"/>
<TIP position="bottom">
<TEXT value="Import from File"/>
</TIP>
</LINK>
<!-- Save button -->
<LINK onclick="saveas({editor},'{examples.data.title}')">
<ICON icon="save" size="36" color="{THEME.primary}"/>
<TIP position="bottom">
<TEXT value="Save to File"/>
</TIP>
</LINK>
<!-- Copy button -->
<LINK onclick="copy({editor});">
<ICON icon="file_copy" size="36" color="{THEME.primary}"/>
<TIP position="bottom">
<TEXT value="Copy Edit Window"/>
</TIP>
</LINK>
<!-- Clear button -->
<LINK onclick="continue('info', 'Are you sure?', 'Clicking Yes will clear the editor text'); editor.set('');examples.set(null);">
<ICON icon="content_cut" size="36" color="{THEME.primary}"/>
<TIP position="bottom">
<TEXT value="Clear Edit Window"/>
</TIP>
</LINK>
</ROW>
<!-- Theme -->
<ROW border="all" margin="10" padding="10,5,5,5" radius="5" expand="false" bordercolor="{THEME.primary}" borderlabel="Theme ({brightness})" valign="center">
<!-- brightness -->
<ROW expand="false" valign="center">
<ICON color="={brightness} == 'light' ? '#e6cc00' : 'grey'" icon="light_mode"/>
<SWITCH value="={brightness} == 'dark'" onchange="brightness.set({this} ? 'dark' : 'light');" margin="0,10,0,10"/>
<ICON color="={brightness} == 'dark' ? '{THEME.primary}' : 'grey'" icon="dark_mode"/>
</ROW>
<!-- primary color -->
<ROW expand="false" valign="center">
<COLORPICKER id="cp1" value="toStr({colorscheme})" onchange="colorscheme.set(toStr({this}));"/>
<PAD left="20"/>
<LINK onclick="cp1.start()">
<ICON icon="palette_sharp" color="{THEME.primary}" type="outline" size="36">
<TIP position="leftbottom">
<TEXT value="Change Theme Color"/>
</TIP>
</ICON>
</LINK>
</ROW>
</ROW>
</ROW>
</HEADER>
<FOOTER height="75" color="{THEME.oninversesurface}" layout="row" valign="center" padding="10">
<ROW expand="false" radius="5" borderlabel="Editor Theme" bordercolor="{THEME.primary}">
<TYPEAHEAD id="theme" bordercolor="transparent" icon="theme" width="180" height="75" data="dbStyles"
onchange="stash('editortheme',{this.value})" value="=nvl('{STASH.editortheme}','solarized-dark')">
<OPTION label="{data.label}" />
</TYPEAHEAD>
</ROW>
<PAD left="20"/>
<!-- Realtime Parsing button -->
<ROW expand="false" valign="center" borderlabel="Parsing" bordercolor="{THEME.primary}" radius="5" padding="10">
<ICON icon="bolt" color="={r1} ? 'amber' : {THEME.outline}" size="28" />
<PAD right="5" />
<SWITCH id="r1" value="true" onchange="{this} ? rightpane.fmlpad.replaceChildren({xml},false) : null"/>
<PAD left="20"/>
<TIP position="top">
<TEXT value="={r1} ? 'Turn Off Parsing' : 'Turn On Parsing'" size="14" />
</TIP>
</ROW>
<PAD left="20"/>
<COL expand="true" borderlabel=" " valign="center" bordercolor="{THEME.primary}" radius="5" padding="10">
<LINK onclick="open('https://scheduler.zoom.us/fml/book-a-demo')">
<ROW expand="false" valign="center">
<ICON value="calendar_month_outlined" color="#7069BF" size="36"/>
<PAD left="10"/>
<TXT value="Book Demo" size="16"/>
<PAD left="5"/>
</ROW>
</LINK>
</COL>
</FOOTER>
<SPLITVIEW dividercolor="" dividerhandlecolor="{THEME.primary}" ratio=".50" direction="horizontal" dividerwidth="={SYSTEM.mouse} ? 6 : 20">
<VIEW>
<STACK expand="true">
<SCROLLER color="{THEME.background}" height="100%" id="flipbox" layout="stack" width="100%">
<EDITOR id="editor" language="xml" theme="={theme} ?? solarized-light" value=""/>
</SCROLLER>
<POSITIONED right="15" top="5">
<COL expand="false">
<!-- Parse Code Button -->
<BUTTON onclick="rightpane.fmlpad.replaceChildren({xml},false)" visible="=!{r1}" type="outlined" color="{THEME.primary}" >
<ICON icon="play_arrow" size="20" />
<PAD left="5" />
<TEXT bold="true" value="Parse" />
<PAD left="5" />
</BUTTON>
</COL>
</POSITIONED>
</STACK>
</VIEW>
<VIEW id="fmlpad" scope="rightpane"/>
</SPLITVIEW>
</FML>