I need to change substring text from Text Area in JavaFX for example in text below static and void be red.
public static void main(String[] args) {
}
I don't know about CSS is there any simple code or tutorial?
The TextArea does not support anything like rich text different formatting within one component. I would propose you look into directions of
TextFlow - see http://docs.oracle.com/javase/8/javafx/api/javafx/scene/text/TextFlow.html.
It is meant for static display of rich text, but it does not provide editing. The Oracle tutorial may be a viable starting point: http://docs.oracle.com/javase/8/javafx/user-interface-tutorial/text-settings.htm
WebView - see http://docs.oracle.com/javase/8/javafx/api/javafx/scene/web/WebView.html.
WebView can be used to display HTML content. There are several ways to utilize this. You may construct your formatted and colored text as HTML code and set it as WebView content - or you even load one of the popular JavaScript source code formatters/highlighters into the WebView component.
If you are about to create something like a java source code view in JavaFX, you might want to have a look on the 2nd approach. A short sketch (using the ACE Editor libraries, done for JavaScript syntax coloring) might look like this:
First, initialize the WebView with your HTML, here done in an FXML controller:
#Override
public void initialize(URL url, ResourceBundle rb) {
WebEngine engine = this.webView.getEngine();
engine.setJavaScriptEnabled(true);
engine.setOnAlert(new EventHandler<WebEvent<String>>() {
#Override
public void handle(WebEvent<String> t) {
String data = t.getData();
System.out.println("alert: " + data);
textArea.appendText(data);
}
});
engine.load(this.getClass().getResource("content/basics-javascript.html").toExternalForm());
}
Second part: content/basics-javascript.html contains an HTML page that loads the JavaScript libraries necessary for the formatting and highlighting:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 30px;
right: 5px;
bottom: 5px;
left: 5px;
border: 1px solid #ccc;
background-color: #eee;
}
</style>
</head>
<body>
<div>ACE-Editor</div>
<div id="editor">
function foo(items) {
var x = "All this is syntax highlighted";
return x;
</div>
<script type="text/javascript" src="js/libs/ace/ace.js" ></script>
<script type="text/javascript">
var editor = ace.edit('editor');
editor.getSession().setMode("ace/mode/javascript");
</script>
</body>
</html>
Hope that helps!
Related
Is there a specific rule around how class scoped CSS custom properties cascade/are inherited with the shadow root? Let's say I have a default theme with custom properties scoped to :root and a dark theme scoped to a .dark-mode class, I can apply that class to the app-container component and my simple-button text color is set to blue. However, if I apply the dark-mode class directly to the simple-button as demonstrated, it inherits black from :root. It doesn't even pick up .dark-mode. I'm looking for some official docs that might explain this as well.
<!DOCTYPE html>
<head>
<script type="module" src="./app-container.js"></script>
<style>
:root {
--text-color: black;
}
</style>
<style>
.dark-mode {
--text-color: blue;
}
</style>
</head>
<body>
<app-container name="World"></app-container>
</body>
// app-container.js
import {html, css, LitElement} from 'lit';
import './simple-button.js';
export class AppContainer extends LitElement {
static styles = css`p { color: var(--text-color)}`;
static properties = {
};
constructor() {
super();
}
render() {
return html`
<p>App Container</p>
<simple-button class="dark-mode"></simple-button>
`;
}
}
customElements.define('app-container', AppContainer);
// simple-button.js
import {html, css, LitElement} from 'lit';
export class SimpleButton extends LitElement {
static styles = css`button { color: var(--text-color)}`;
static properties = {
};
constructor() {
super();
}
render() {
return html`<button>Button</button>`;
}
}
customElements.define('simple-button', SimpleButton);
How do I get events to fire in a Razor component running in a Razor page?
My Startup:
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
}
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapBlazorHub();
});
}
My Razor Page calling the component:
#page
#model DocketDetail.OrderModel
#{
Layout = null;
}
#using RelationalObjectLayerCore;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="_framework/blazor.server.js"></script>
<script src="~/js/site.js"></script>
<title>Order</title>
</head>
<body>
<component type="typeof(Component.Filedby)" render-mode="ServerPrerendered" />
</body>
Everything displays properly.
My component:
#using Microsoft.AspNetCore.Components
#code {
private void SearchPerson()
{
string x = "TEST";
}
}
<button #onclick="SearchPerson">Search</button>
Obviously this is pared down from my actual code... but I can not figure out how to get "SearchPerson" to fire in the Razor Component.
Found this:
https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1#integrate-razor-components-into-razor-pages-and-mvc-apps
With this little note:
Add a <script> tag for the blazor.server.js script inside of the
closing </body> tag:
HTML
<script src="_framework/blazor.server.js"></script>
Moved my script tag and it now works.
Thanks everyone for your suggestions.
I think I see what you're trying to do. Not sure if that is going to work they way you intend. The component will get rendered using Blazor, but the code attached to the button won't function. Put the #code{} for your button on the page that gets loaded. Or you can do an OnInitialized() overload if you want that code to run each time the page is loaded.
Also, make sure that the Blazor is rendering properly in the browser. Use F12 and make sure it says connected.
https://learn.microsoft.com/en-us/aspnet/core/blazor/lifecycle?view=aspnetcore-3.1
I am starting an adventure with Apache Tapestry5. I am trying to make simple component (for tests), consisting of pair of Textfields. Component is named "TestComp". I have following elements:
testComp.tml
<t:container
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
<p>
<input t:type="TextField" t:id="testOne" t:value="testOne.input"/><br/>
<input t:type="TextField" t:id="testTwo" t:value="testTwo.input"/><br/>
</p>
</t:container>
TestComp.java
public class TestComp {
private DataContainer testOne;
private DataContainer testTwo;
#SetupRender
public void setup(){
testOne = new DataContainer();
testTwo = new DataContainer();
}
public String getContentOfTestOne() {
return testOne.getInput();
}
public String getContentOfTestTwo() {
return testTwo.getInput();
}
public DataContainer getTestOne() {
return testOne;
}
public void setTestOne(DataContainer testOne) {
this.testOne = testOne;
}
public DataContainer getTestTwo() {
return testTwo;
}
public void setTestTwo(DataContainer testTwo) {
this.testTwo = testTwo;
}
}
And then I am trying to use it in other place, for example in index.tml:
<form t:type="form" t:id="out">
<t:testComp />
<br/><input type="submit" value="Component"/>
</form>
According to dozens of materials and examples I've found (to be honest non of it refereed to case similar to mine) such implementation should result of showing testComp element in the form, but unfotrunately there is nothing rendered above the button (though tapestry is not crashing). What am I missing? And will I be able to put in Index.java property of TestComp type and bind it with my
<t:testComp />
in Index.tml by id (or it requires something more to implement in my custom component?)
Did you provide the full index.tml file? If so, you are missing the tapestry namespace as well as a correctly setup html document. Try the following:
Index.tml
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
<head>
<title>My page</title>
</head>
<body>
<form t:type="form" t:id="out">
<div t:id="testComp" />
<br/><input type="submit" value="Component"/>
</form>
</body>
</html>
In your Index.java you can use this to access your component.
#component(id="testComp")
private TestComp testComp;
If this does not work there is probably something wrong in your configuration or setup and you might just be looking at a static tml file not handled by tapestry at all. In this case follow the step-by-step guide on the Getting Started page.
I have form in which there is AutoCompleteTextField and two combo boxes (DropDowns in wicket).
When drop down for autocomplete is shown, combo boxes are hidden in IE6.
My test page code is:
package net.betlista;
import java.util.Iterator;
import java.util.LinkedList;
import java.util.List;
import java.util.Locale;
import org.apache.wicket.Session;
import org.apache.wicket.extensions.ajax.markup.html.autocomplete.AutoCompleteTextField;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.DropDownChoice;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.model.Model;
public class AutoCompleteAndDropDownTestPage extends WebPage {
public AutoCompleteAndDropDownTestPage() {
final DropDownChoice<Integer> drop1 = new DropDownChoice<Integer>("drop1", getNewList(15));
drop1.setOutputMarkupId(true);
final DropDownChoice<Integer> drop2 = new DropDownChoice<Integer>("drop2", getNewList(10));
drop2.setOutputMarkupId(true);
Session.get().setLocale(Locale.ENGLISH);
final AutoCompleteTextField<Integer> auto = new AutoCompleteTextField<Integer>("auto", new Model<Integer>(null)) {
#Override
protected Iterator<Integer> getChoices(final String input) {
return getNewList(20).iterator();
}
};
add(auto);
add(drop1);
add(drop2);
add(new TextField<String>("text"));
}
private static List<Integer> getNewList(final int upTo) {
final LinkedList<Integer> list = new LinkedList<Integer>();
for (int i = 0; i < upTo; i++) {
list.add(i);
}
return list;
}
}
test page markup is
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<input type="text" wicket:id="auto"/><br>
<select wicket:id="drop1"></select><br>
<select wicket:id="drop2"></select><br>
<input type="text" wicket:id="text"/><br>
</form>
</body>
</html>
Wicket does NOT support IE6, so I'm looking for a workaround.
You should try to upgrade to 6.7.0, this issue sees fixed : https://issues.apache.org/jira/browse/WICKET-4893
If I want to use my regular master page for a new page layout, except I don't want the main navigation menu control (a 3rd party control) to be visible, how can I let the page layout hide it? In asp.net I would expose a public property or method on the master page and then call it from the child page, but not sure what can be done in SharePoint since there is no code behind or discernible master page class.
I got it working like this but I'm not in love with the implementation.
On Master Page:
...
<c:Menu id="myMenu" runat="server" />
...
</form>
</body>
</html>
<script runat="server">
public bool IsConsumerNavVisible
{
set
{
myMenu.Visible = value;
}
}
</script>
On PageLayout:
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
System.Reflection.PropertyInfo pi = Page.Master.GetType().GetProperty("IsConsumerNavVisible");
pi.SetValue(Page.Master, false, null);
}
</script>
So I exposed a public property on the master page to set the visibility and then used reflection on the PageLayout to find & set that property. I tried putting the PageLayout code in just a <% %> script block and it executed but the menu would end up visible anyway. Putting it in a Page_Load event handler fixed that. If there is a better way I'm all ears.