Viewing Line Widget

  1. Portal Home
  2. Forum
  3. EverWeb
  4. Feature Requests

Line Widget



User: Roddy 13 years ago
A Line WIdget wouldn't be too difficult to comprehend where the user could choose width, thickness, style, color and perhaps horizontal or vertical. This would get rid of yet another image.

These are done in Easy Web...



Typical code...

<div style="margin:0;border-bottom: 2px dashed #0593FF; width: 500px;height: 10px"></div>

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Paul-RAGESW 13 years ago
Sounds like a good idea for a widget at this point. We can publish the specs for widgets so third party users can make them.

-------------------------------
Paul
EverWeb Developer
User: Roddy 13 years ago
How are the widgets made? Are they anything like the plugins in WebDesign?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Paul-RAGESW 13 years ago
Hi Roddy,

If you look in the bundle you'll see the Widgets directory in the Resources directory. Start with the Youtube widget as it is pretty straightforward.

Open the info.xml file for one of the widgets to see how they're made;

This part specifies plugin name and the default height/width when it is dragged into EasyWeb
<item>
<key>Plugin Name</key>
<string>Youtube Video</string>
</item>
<item>
<key>DefaultWidth</key>
<integer>560</integer>
</item>
<item>
<key>DefaultHeight</key>
<integer>315</integer>
</item>

This is HTML code that get's inserted into your document. Notice the text within the {!- and -!} this get automatically replaced by the options below. Note the {!-$Width--!} and {!-$Height-!} (the have the $ in the name). These get replaced with the width and height of the control. You can even get font styling settings by using {!-%. The Contact from widget has a good example of this.
<item>
<key>HTMLCode</key>
<string>...lt;iframe width=...quot;{!-$Width-!}...quot; height=...quot;{!-$Height-!}...quot; src=...quot;http://www.youtube.com/embed/{!-plytVideoURL-!}{!-plytShowRelated(FALSE)//?rel=0//plytShowRelated-!}...quot; frameborder=...quot;0...quot; allowfullscreen...gt;...lt;/iframe...gt;</string>
</item>

The options are what make the actual controls you see in the Inspector for each widget. The optionName is used in the HTMLCode above to replace the variables within the {!- and -} tags.

Notice the special case for the checkbox in the above HTML code;
{!-plytShowRelated(FALSE)//?rel=0//plytShowRelated-!}

This says if plytShowRelated is set to false (ie the checkbox is NOT checked) use the code between the // and //. Otherwise don't put in anything.

controlType specifies the type of control to show. Here are the possible settings;
1 = textfield
2= slider
3 = drop down menu
4 = checkbox
5 = select color
6 = Text Area (multiline text input)
7 = text label. So just putting a description in there (the HTML Widget uses this)

For value put in for all controls;
<Value>**N/A**</Value>


<options>


<option>
<displayName>Video URL</displayName>
<optionName>plytVideoURL</optionName>
<ControlWidth>250</ControlWidth>
<defaultValue></defaultValue>
<OnNewLine>TRUE</OnNewLine>
<optionDescription>Youtube Video URL</optionDescription>
<controlType>1</controlType>
<textFieldMaxLength>0</textFieldMaxLength>
<Value>**N/A**</Value>
<regexMatch>KFw/dj18eW91dHUuYmVcLykoW2EtejAtOVwtX10rKShcJnxcc3wkKQ==</regexMatch>
<regexMatchSubExpression>2</regexMatchSubExpression>
</option>

<option>
<displayName>Show Related Videos</displayName>
<optionName>plytShowRelated</optionName>
<defaultValue>FALSE</defaultValue>
<OnNewLine>TRUE</OnNewLine>
<optionDescription>Show related videos</optionDescription>
<controlType>4</controlType>
<textFieldMaxLength>0</textFieldMaxLength>
<Value>**N/A**</Value>
</option>


<windowOption>
<ApplyButton>TRUE</ApplyButton>
</windowOption>
</options>

-------------------------------
Paul
EverWeb Developer
User: Roddy 13 years ago
OK, thanks. I'll take a look at all that when both my remaining brains cells are working together in perfect harmony.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.