Integrate web component to webkit #116
+184
−7
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| use ::WebKit/demo/Showcase/ShowcaseWidget/ShowcaseWidget.bbj::ShowcaseWidget | ||
| use ::WebKit/widgets/InputField/InputField.bbj::InputField | ||
| use ::WebKit/framework/DialogPanel/DialogPanel.bbj::DialogPanel | ||
| use ::WebKit/util/ClientUtil.bbj::ClientUtil | ||
| use ::WebKit/widgets/WebComponents/WebComponents.bbj::WebComponents | ||
| use ::WebKit/widgets/WebComponents/AvatarIcon/AvatarIcon.bbj::AvatarIcon | ||
|
|
||
| class public AvatarInital extends ShowcaseWidget | ||
|
There was a problem hiding this comment. Typo in class name: It should probably say "AvatarInitial" or "AvatarInitials" |
||
|
|
||
| field private BBjChildWindow window! | ||
| field private BBjHtmlView avatarWnd! | ||
| field private InputField avatarWidth! | ||
| field private InputField avatarHeight! | ||
| field private InputField AvatarName! | ||
| field private BBjCheckBox CbModal! | ||
| field private BBjCheckBox CbCloseIcon! | ||
| field private BBjCheckBox CbCloseOutside! | ||
| field private BBjChildWindow panel! | ||
|
|
||
| method public AvatarInital(BBjWindow wnd!) | ||
| #super!(wnd!) | ||
|
|
||
| #setTitle("Avatar Initail Demo") | ||
|
There was a problem hiding this comment. Typo: It should probably say "Avatar Initial Demo" |
||
| #setIntro("This demo shows the Avatar initail stuff") | ||
|
There was a problem hiding this comment. Typo + We should refrain from writing "stuff" as this seems unprofessional |
||
| methodend | ||
| method public void redraw(Boolean init!) | ||
| #super!.redraw(init!) | ||
|
|
||
| if init! then | ||
|
|
||
| #panel! = #getContentWindow() | ||
| #panel!.setStyle("display","flex") | ||
| #panel!.setStyle("flex-direction","column") | ||
| #panel!.setStyle("row-gap","10px") | ||
|
|
||
| #AvatarName! = new InputField(#panel!) | ||
| #AvatarName!.setLabel("Avatar Name") | ||
| #AvatarName!.setInput("Stephan Wald") | ||
|
|
||
| #avatarHeight! = new InputField(#panel!) | ||
| #avatarHeight!.setLabel("Height") | ||
| #avatarHeight!.setInput("50") | ||
|
|
||
| #avatarWidth! = new InputField(#panel!) | ||
| #avatarWidth!.setLabel("Width") | ||
| #avatarWidth!.setInput("50") | ||
|
|
||
| BtnShow! = #panel!.addButton(#panel!.getAvailableControlID(),0,0,0,0,"Create Avatar") | ||
| BtnShow!.setStyle("display","flex") | ||
| BtnShow!.setStyle("justify-content","flex-end") | ||
| BtnShow!.setAttribute("theme","primary") | ||
| BtnShow!.setAttribute("expanse","l") | ||
| BtnShow!.setCallback(BBjAPI().ON_BUTTON_PUSH,#this!,"onShowDialog") | ||
|
|
||
| endif | ||
| methodend | ||
|
|
||
| method public void onShowDialog(BBjButtonPushEvent ev!) | ||
|
|
||
| if #avatarWnd! <> null() then | ||
| #avatarWnd!.destroy() | ||
| endif | ||
|
|
||
| webComponents! = new AvatarIcon() | ||
| #avatarWnd! = CAST(BBjHtmlView, webComponents!.drawAvatarIcon(#panel!, #avatarHeight!.getInput(), #avatarWidth!.getInput(), #AvatarName!.getInput() )) | ||
|
|
||
| #avatarWnd!.setStyle("margin","auto") | ||
|
|
||
| methodend | ||
|
|
||
| classend | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| use ::WebKit/widgets/WebComponents/WebComponents.bbj::WebComponents | ||
| use ::WebKit/util/ClientUtil.bbj::ClientUtil | ||
|
|
||
| class public AvatarIcon extends WebComponents | ||
|
There was a problem hiding this comment. This class should follow the BBjWidget pattern and not use some custom methods to use the widget (drawAvatarIcon) There was a problem hiding this comment. This class is missing some setters to update the avatar values - See BBjWidget pattern |
||
| field private static BBjTopLevelWindow Wnd! | ||
| field public static BBjNumber ON_AVATAR_INITIAL_CLICK = 1234 | ||
|
|
||
| method public AvatarIcon() | ||
|
|
||
| methodend | ||
|
|
||
| method public BBjHtmlView drawAvatarIcon(BBjWindow wnd!,BBjInt height%, BBjInt width%, BBjString name$) | ||
|
There was a problem hiding this comment. Hi, it's not duplicate, one function takes integer and other take string (width and height) There was a problem hiding this comment. We don't need two methods performing the exact same task and executing basically the same thing. The method with the int parameters converts the ints into strings and executes the exact same code as the method with the string parameters, making it duplicate code There was a problem hiding this comment. ah you're right. Got it. Fixing now. Thanks. |
||
| htmlView! = wnd!.addHtmlView(wnd!.getAvailableControlID(),0,0,300,300,"<avatar-initial height="""+str(height%)+""" width="""+str(width%)+""" name="""+name$+"""></avatar-initial>") | ||
| htmlView! = #configureAvatarView(htmlView!) | ||
| methodret htmlView! | ||
| methodend | ||
|
|
||
| method public BBjHtmlView drawAvatarIcon(BBjWindow wnd!,BBjString height$, BBjString width$, BBjString name$) | ||
| htmlView! = wnd!.addHtmlView(wnd!.getAvailableControlID(),0,0,300,300,"<avatar-initial height="""+height$+""" width="""+width$+""" name="""+name$+"""></avatar-initial>") | ||
|
There was a problem hiding this comment. The properties should not be passed using inline css |
||
| htmlView! = #configureAvatarView(htmlView!) | ||
| methodret htmlView! | ||
| methodend | ||
|
|
||
| method public BBjHtmlView drawAvatarIcon(BBjString height$, BBjString width$, BBjString name$) | ||
|
There was a problem hiding this comment. The class should be a widget meaning that the BBjHtmlView should not be returned. The class might use the BBjHtmlView internally but for external usage it should always be treated as BBjWidget |
||
| sg! = BBjAPI().openSysGui("X0") | ||
| #Wnd! =sg!.addWindow(95501,0,0,0,0,"",$01101083$) | ||
|
|
||
| sg!.setContext(sg!.getAvailableContext()) | ||
| htmlView! = #Wnd!.addHtmlView(wnd!.getAvailableControlID(),0,0,300,300,"<avatar-initial height="""+height$+""" width="""+width$+""" name="""+name$+"""></avatar-initial>") | ||
|
|
||
| htmlView! = #configureAvatarView(htmlView!) | ||
| methodret htmlView! | ||
|
There was a problem hiding this comment. Syntax Error: missing methodend |
||
|
|
||
| method private BBjHtmlView configureAvatarView(BBjHtmlView htmlView!) | ||
| htmlView!.setCallback(BBjAPI.ON_NATIVE_JAVASCRIPT, #this!,"onClickAvatarInitial") | ||
| htmlView!.setStyle("border","none") | ||
| htmlView!.executeScript(#script$) | ||
| methodret htmlView! | ||
| methodend | ||
|
|
||
| method public void onClickAvatarInitial(BBjNativeJavaScriptEvent ev!) | ||
| ClientUtil.consoleLog("catched the webcomponent event from BBj :)") | ||
|
|
||
| #fireEvent(#ON_AVATAR_INITIAL_CLICK, ev!) | ||
| methodend | ||
|
|
||
| methodend | ||
|
There was a problem hiding this comment. Remove this methodend |
||
|
|
||
| classend | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| use ::BBjWidget/BBjWidget.bbj::BBjWidget | ||
|
|
||
| class public WebComponents extends BBjWidget | ||
|
|
||
| field public BBjString script$ | ||
|
|
||
| method public WebComponents() | ||
|
|
||
| webComponentLibaryURL$ = STBL("web-component-library-url", err=*next) | ||
| if webComponentLibaryURL$ = "" THEN | ||
| webComponentLibaryURL$ = "https://cdn.jsdelivr.net/npm/webkit-web-components@latest/dist/web-component/web-component.esm.js" | ||
| endif | ||
|
|
||
| #script$ = "var script = document.createElement(""script"");" | ||
|
|
||
| #script$ = #script$ + "script.setAttribute(""src"",""" + webComponentLibaryURL$ + """);" | ||
|
|
||
| #script$ = #script$ + "script.setAttribute(""type"",""module"");" | ||
|
|
||
| #script$ = #script$ + "document.head.appendChild(script)" | ||
| methodend | ||
|
|
||
| classend |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Typo in file name
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code indentation in the whole file is bad