First of all I am completely new into both XAML and C#, so please forgive me for some stupid errors. An explanation is much more appreciated.
I've been struggling this last hours trying to figure out one of the simplest things: how to add text to a RichTextBlock when a button is pressed. I've tried some solutions that I found on Internet but none of them actually worked.
In particular it seems like there aren't the necessary references. For instance VS does not recognize the following code : Run myrun = new Run(); nor Paragraph mypar = new Paragraph(); or myrichtextblock.document.
What am I missing?
Check this example:
Taken from MSDN documentation
https://msdn.microsoft.com/library/windows/apps/br227565
// Create a RichTextBlock, a Paragraph and a Run.
RichTextBlock richTextBlock = new RichTextBlock();
Paragraph paragraph = new Paragraph();
Run run = new Run();
// Customize some properties on the RichTextBlock.
richTextBlock.IsTextSelectionEnabled = true;
richTextBlock.TextWrapping = TextWrapping.Wrap;
run.Text = "This is some sample text to show the wrapping behavior.";
richTextBlock.Width = 200;
// Add the Run to the Paragraph, the Paragraph to the RichTextBlock.
paragraph.Inlines.Add(run);
richTextBlock.Blocks.Add(paragraph);
// Add the RichTextBlock to the visual tree (assumes stackPanel is decalred in XAML).
stackPanel.Children.Add(richTextBlock);
Just see how to add text in this example and modify the code to put inside of your click event of your button
Please mark this answer if it's useful for you!
Best Regards!
Related
There are many examples of doing this in axml, but I would like to have a complete binding using code behind. To be honest, I would like to have NO axml, but seems like creating all the controls programmatically is a nightmare.
I first tried the suggestions at:
MvxListView create binding for template layout from code
I have my list binding from code-behind, and I get six rows (so source binding is working); but the cells itself does not bind.
Then at the following url:
Odd issue with MvvmCross, MvxListViewItem on Android
Stuart has the following comment: Have looked through. In this case, I don't think you want to use DelayBind. DelayBind is used to delay the binding action until next time the DataContext is set. In Android's MvxAdapter/MvxListItemView case, the DataContext is passed in the ctor - so DataContext isn't set again until the cell is reused. (This is different to iOS MvxTableDataSource).
So in essence, the only example I see shows DelayBind, which shouldn't work.
Can someone please show me some examples... thanks in advance.
Added reply to Comments:
Cheesebaron, first of all, a huge thank you and respect for all your contributions;
Now, why not use axml? Well, as programmers, we all have our own preferences and way of doing stuff - I guess I am old school where we didn't have any gui designer (not really true).
Real reasons:
Common Style: I have a setup where Core has all the style details, including what all the colors would be. My idea is, each platform would get the style details from core and update accordingly. It's easy for me to create controls with the correct style this way.
Copy-Paste across platform (which then I can even have as linked files if I wanted). For example, I have a login screen with web-like verification, where a red error text appears under a control; overall on that screen I have around 10 items that needs binding. I have already got iOS version working - so starting on Droid, I copied the whole binding section from ios, and it worked perfectly. So, the whole binding, I can make it same across all platform... Any possible error in my way will stop at building, which I think is a major advantage over axml binding. Even the control creation is extremely similar, where I have helpers with same method name.
Ofcourse I understand all the additional layout that has to be handled; to be honest, it's not that bad if one really think it through; I have created a StackPanel for Droid which is based on WP - that internally handles all the layouts for child views; so for LinearLayout, all I do is setup some custom parameters, and let my panel deal with it. Relative is a different story; so far, I have only one screen that's relative, and I can even make it Linear to reduce my additional layout code.
So, from my humble point of view, for my style, code-behind creation allows me to completely copy all my bindings (I do have some custom binding factories to allow that), copy all my control create lines; then only adding those controls to the view is the only part that is different (then again, droid and WP are almost identical). So there is no way I can miss something on one platform and all are forced to be the same. It also allows me to change all the styles for every platform just by changing the core. Finally, any binding error is detected during compile - and I love that.
My original question wasn't about NOT using axml... it was on how to use MvxListView where all the binding is done in code-behind; as I have explained, I got the list binding, but not the item/cell binding working.
Thanks again in advance.
Here is part of my LoginScreen from droid; I think it's acceptable amount of code for being without axml file.
//======================================================================================================
// create and add all controls
//======================================================================================================
var usernameEntry = ControlHelper.GetUITextFieldCustom(this, "Username.", maxLength: 20);
var usernameError = AddErrorLabel<UserAuthorization, string>(vm => ViewModel.Authorization.Username);
var passwordEntry = ControlHelper.GetUITextFieldCustom(this, "Password.", maxLength: 40, secureTextEntry: true);
var passwordError = AddErrorLabel<UserAuthorization, string>(vm => ViewModel.Authorization.Password);
var loginButton = ControlHelper.GetUIButtonMain(this);
var rememberMe = new UISwitch(this);
var joinLink = ControlHelper.GetUIButtonHyperLink(this, textAlignment: UITextAlignment.Center);
var copyRightText = ControlHelper.GetUILabel(this, textAlignment: UITextAlignment.Center);
var copyRightSite = ControlHelper.GetUIButtonHyperLink(this, textAlignment: UITextAlignment.Center);
var layout = new StackPanel(this, Orientation.Vertical)
{
Spacing = 15,
SubViews = new View[]
{
ControlHelper.GetUIImageView(this, Resource.Drawable.logo),
usernameEntry,
usernameError,
passwordEntry,
passwordError,
loginButton,
rememberMe,
joinLink,
ControlHelper.GetSpacer(this, ViewGroup.LayoutParams.MatchParent, weight: 2),
copyRightText,
copyRightSite
}
};
I just came across a similar situation myself using Mvx4.
The first link you mentioned had it almost correct AND when you combine it from Staurts comment in the second link and just remove the surrounding DelayBind call, everything should work out ok -
public class CustomListItemView
: MvxListItemView
{
public MvxListItemView(Context context,
IMvxLayoutInflater layoutInflater,
object dataContext,
int templateId)
: base(context, layoutInflater, dataContext, templateId)
{
var control = this.FindViewById<TextView>(Resource.Id.list_complex_title);
var set = this.CreateBindingSet<CustomListViewItem, YourThing>();
set.Bind(control).To(vm => vm.Title);
set.Apply();
}
}
p.s. I have asked for an Edit to the original link to help others.
I have with me the canvas speedometer zip file. My intent is to read, from a text file a single number, and accordingly move the needle on the canvas speedometer as per the number read.
I have tried a few things and all I have managed to do is clunk up things a bit further. Any simple way to get around this, please? Preferably, editing the speedometer.html file such and adding a single button that reads the number from the text file and populates it in the text area provided on the speedometer web page?
Please help.
Edit 1: My bad. I should have included the piece of code I fidgeted around with for a brief while. Here goes the javascript snippet:
function func1()
{
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("maxvalue").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
And here's the bit about the 'Extract Value' button:
<input type="file" id="fileToLoad">
<button onclick="func1()">Extract Value</button>
The issue is I am getting sort of a clunky page. One which has a choose file button, and the 'Extract Value' button. And then, there are the begin and start buttons defined in the canvas speedometer API. All I am asking is this: is there a way by which I can have a single button on the page on clicking which the data (a single number) present in the text file gets populated on the ext field in the speedometer web page. This is all I want.
And in case anybody is wondering what the speedometer thingy is, please look here:
{http://www.uibox.in/item/68}
Apologies again for leaving a clearly vague question.
Please note the remark mentioned WORKAROUND at the end of this question.
Based on a Dictionary based specification, one of my classes creates a Form programmatically.
Adding TextInput or DatePicker to FormItemss works as expected.
Unfortunately, the following code just creates a colored rectangle, not the actual picker:
ti = new ColorPicker();
ColorPicker( ti ).selectedColor = TAColor( _spec[ key ].value ).color;
and later on
formItem.addElement( ti );
The Form is embedded in a TitleWindow component presented using
PopUpManager.addPopUp(...);
When added to TitleWindow, it shows up correctly, within Form->FormItem not:
I can't image, why the picker doesn't appear. Do you?
WORKAROUND:
If I wrap the ColorPicker inside a Group things work:
ti = new Group();
Group( ti ).addElement( new ColorPicker() );
In this case, the ColorPicker appears as editable.
Still, I'd be too happy to learn what the problem with my initial solution. Bug?
A DateField (which extends ComboBase like ColorPicker) behaves properly in a spark Form. But in the ColorPicker, the mouse down handler of the button never gets called. I think that maybe the skin part that handles the mouse clicks (it must be a button) is not properly dimensionned, and the result is it is not shown. I've come to this conclusion because within an mx Form, the ColorPicker doesn't display as it does when it is added to the regular displaylist...
Hope this helps...
In the code you've provided, you never add the colorPicker as a child to any parent container; as such it will never show up anywhere.
You probably need to do something like:
formItem.addChild(ti );
[or for a Spark formItem]:
formItem.addElement(ti );
I'm confused as to why you're seeing a rectangle.
My code is simply looping through an xml file and creating 'pages' (which are later animated).
This has all worked fine but now I want to add a sprite over the entire contents of the page if the contents of the xml contain a URL.
At run-time I can see that the checks for the URL are being processed correctly and that the overlay is being generated, but I cannot "see" it on the page.
The following code is located in a for loop for every page in the xml file:
var page:Page = new Page(); //MovieClip in my library
// ... other stuff
var textMC:FadeText = new FadeText(xml); //load the text from the xml fragment for this page
//if the text contains a URL (using RegExp)
if(textMC.hasLink())
{
var button:Sprite = new Sprite();
button.graphics.beginFill(0x000000);
button.graphics.drawRect(0, 0, 1, 1);
button.name= textMC.getLink();
button.x = button.y = button.alpha = 0;
button.width = rectangle.width;
button.height = rectangle.height;
button.buttonMode = true;
button.addEventListener(MouseEvent.CLICK, goToUrl, false, 0, true);
page.addChildAt(button, page.numChildren);
}
//... more code - such as add page to stage.
From the console (using FireBug and FlashBug) the button is being created, but I cannot see it on screen so I am guessing the addChild bit is at fault.
What is wrong and how do I fix it?
[edit]
Having set the alpha to 1 I can see that the overlay IS being added to the page, but it is not changing my cursor or responding to mouse clicks.
I now believe it is something wrong with the XML. It is correctly parsed XML (otherwise FlashPlayer would throw exceptions in my face) and it appears that this code works on every page except the second. Further more, if the second page is set as visible (a flag in the XML determins if the page is created or not) then none of the other pages overlay works.
Sorry to necro this thread but one thing I can think of is that because you specify a z-position to place your page it might be that the z-position generated by (i+1) is not the next one in line. AS3 doesn't allow display-objects to be placed on 'layers' with empty 'layers' between them which was allowed in AS2.
My guess is that during the loop at one point or another the loop doesn't generate a page which leaves an empty layer. The reason why the stage.addChild(page) actually works is because it simply searches for the next empty layer in that stack because you don't specify it.
button.x = button.y = button.alpha = 0;
set alpha to 1
button.alpha = 1;
and check for rectangle.width , rectangle.height
last thing, check for textMC.hasLink() if its true or not. If its true, there is another problem with your code that is not related to this sample code.
Illogical answer:
Replaced stage.addChildAt(page,i+1); with stage.addChild(page);.
I was clutching at straws. Have spent FAR too long working on this blip, but it works! I don't know WHY it works, and at this point I don't care; IT WORKS!!! (sorry for the unprofessionalism however I have spent two and a half days working on this and have just got it working!)
If someone wants to explain why it works, feel free. I would VERY much prefer to learn why this occurs that struggle to work around it.
I have a scenario that I get an string with html data, this is not just html data it's an email (outlook) saved as an html file and dropped in the string.
Now this string needs to be formatted to an html document and should be a clickable link in a datagrid. So when I click on the link, the HTML document should pop-up and should gave me a nice HTML page that is readable for the normal users. I hope it's a bit clear what I want o_0.
I don't know where to start.
You can download the example html from here: http://www.mediafire.com/?b2gfwymw70ynxir
Thanks!
---edit
Hopefully I can explain it a little bit better. I need to create an link and when they click on it they get an HTML page.
The string variable has HTML data in it, to be precise, the source data of the HTML example above.
example:
public var html:String = source_code_of_example_file;
The entire source code of the HTML page is in my variable html. Now I need to make this an link and when they click on it, they will get the html page (as pop-up) on the fly.
You can use the htmlText property and then specify a CSS to perform the proper formatting:
<mx:TextArea id="resourceText" height="100%" width="100%"
styleName="resourceText" editable="false"
styleSheet="{resourceStyleSheet}" htmlText="{html}"/>
To read in the style sheet I declare it in the model:
public var resourceStyleSheet : StyleSheet;
It gets read in from an external file:
private function loadCSS():void {
var urlLoader:URLLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, cssCompleteHandler);
urlLoader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
try {
urlLoader.load(new URLRequest("folder/base-html.css"));
} catch (error:Error) {
Alert.show("Unable to load requested document.");
}
}
private function cssCompleteHandler(event:Event):void {
// Convert text to style sheet.
var styleSheet:StyleSheet = new StyleSheet();
styleSheet.parseCSS(URLLoader(event.currentTarget).data);
// Set the style sheet.
model.resourceStyleSheet = styleSheet;
}
private function ioErrorHandler(event:IOErrorEvent):void {
trace("ioErrorHandler: " + event);
}
This will get it into the model, but then make sure resourceStyleSheet is bindable when you use it (I actually set a bindable variable on the view that I set to the model value.
It's not really clear what you want to do.
If your problem is you need to show HTML formatted text in flex there is a component which can do this
http://code.google.com/p/flex-iframe/
-- update after edit
If your intention is to open a html popup once the user clicks on the link you could use ExternalInterface to call a javascript function to do this.
Hope it Helps
There is no easy way to display HTML in a flex web application(this is a web application, right?). Like Xavi Colomer said you can use the Flex Iframe but is terribly slow, it requires you to change the display mode for your swf to opaque and this can cause more problems, depending on your application.
You could open a new page in the browser that will be used to display the HTML. Something like:
http://www.yourcooldomain.com/bla/displayTheHtml.php?oneTimeId=jhsfg765437gro734
More info on how to do this from flex here.
On the other side(server) I assume that you keep this html messages on a database(?) so displaying them using php(or whatever you are using :P) should be easy.
If you are gonna choose this path be careful about the security: oneTimeId in
displayTheHtml.php?oneTimeId=jhsfg765437gro734
should really be an one tyme only id.