Writing design code is often tiring work, forcing you to reuse many lines. I came up with a solution: I created a small library called Sem (Screen Element Manipulation). Sem is an AppLab library that provides functions to edit screen elements with profound ease. With Sem, you can edit elements as if they were JavaScript objects. Here are a few examples:
Default setText:
setText("label1","Hello");
Sem alternative:
$("label1").text="Hello";
Default getProperty:
var options=getProperty("dropdown1","options");
Sem alternative:
var options=$("dropdown1").options;
Default onEvent:
onEvent("button1","click",function(){ console.log("clicked!"); });
Sem alternative:
$("button1").click=function(){ console.log("clicked!"); };
Default setSize:
setSize("image1",120,100);
Sem alternative:
$("image1").size=[100,120];
This can be useful when writing design code. Instead of filling the workspace with long lines of setProperty, setText, onEvent etc, use Sem and you can do stuff like this:
$("label").scrollY=true;
for (var i=0; i<255; i++){
textLabel("l"+i,"");
var elt=$("l"+i);
elt.parent="label";
elt.text="RANDOM TEXT LABEL";
elt.textSize=25;
elt.fontFamily="Courier";
elt.backgroundColor = rgb (randomNumber(0,255), randomNumber(0,255), randomNumber(0,255));
elt.CSS="position:absolute";
elt.position=[randomNumber(0,80), i*30];
elt.size=[25,200];
elt.borderRadius=4;
elt.borderColor=rgb(randomNumber(0,255),randomNumber(0,255),randomNumber(0,255));
elt.borderWidth=2;
(function(){
var e=elt.elt;
elt.click=function(){
$(e).delete();
};
})();
}
Sem provides other features, such as drag and drop, design change when cursor hovers over, collision testing, element aligning relative to the screen with simple strings like “top-center” and “left-bottom”, templates and many more.
I made this library four months ago, published it and actually even posted in the forum about it. Sem has become too large to contain in one library, so the recent features are included in a seperate library called SemExtension.
For further information about Sem, please read the Sem documentation, which covers pretty much everything about Sem, plus a few examples of its important features.
Sem ID: lhyKHRJzz-OUiy81rm2PKYenkYT4MAt2l1AS-FuyOWE
SemExtension ID: AU-9njrQE39qWFUOC0M5TZgAr5Mj598By8B9qg1CfQI