I have a main.mxml application that lays out my application, it contains a "browse and upload" button. And contains an image to view the users uploaded image like so:
<mx:Application
<mx:Script>
<![CDATA[
import model.myModel;
import control.myControl;
// Create data model
public var model:myModel = new myModel();
//[Bindable]
//private var scld_img:Bitmap;
// Create control
public var mycontrol:myControl = new myControl(mymodel);
</mx:Script>
<!-- Upload and view -->
<mx:Canvas id="upload" label="1: Upload Image">
<mx:VBox>
<mx:HBox>
<mx:Label text="Upload an image: "/>
<mx:Button id="btn"
label="Browse and preview..."
click="mycontrol.browseAndUpload();"
buttonMode="true"
useHandCursor="true"/>
</mx:HBox>
<mx:Image id="mximg_upld"
verticalCenter="0"
horizontalCenter="0"
source="mymodel.img_scld_bm"/>
</mx:VBox>
</mx:Canvas>
......
In my myModel class I have a img_scld_bm that the browseAndUpload() function draws into after scaling it.
My intent is that my mx:Image will display the image. As shown here I'm assigning the image source="mymodel.img_scld_bm", this ends up just showing a broken image icon.
I also tried data binding, where in my myModel class I have [Bindable] var img_scld_bm. And then tried setting my mx:Image source="{myModel.img_scld_bm}" .. that didn't seem to do anything either. All this compiles fine, no warnings. I think in this case, I'm not setting a trigger or propertyChange event to update the binding?
Can someone help me understand, or provide an example of how to correctly bind an mx:Image source to some bitmap??
From the code you've given, it looks like you need to do two things:
Wrap the source with curly brackets.
Set the property img_scld_bm in the model class. Bindings will only execute if you set the property; it looks like you may be drawing into the img_scld_bm that currently exists, but this won't cause the image to update.
Convert this:
<mx:Image id="mximg_upld" verticalCenter="0" horizontalCenter="0" source="mymodel.img_scld_bm"/>
To this:
<mx:Image id="mximg_upld" verticalCenter="0" horizontalCenter="0" source="{mymodel.img_scld_bm}"/>
Then any time you make changes to the img_scld_bm in the model, reset the image.source.
Does that work?
Related
How can I place a promotional label layer on top of images in Magento 2. The image I am including is from the out of the box Magento 2 theme and it has a text " New Luma Yoga Collection ...." and a button "Shop New Yoga" that was somehow placed on top of the image in the editor .
This is how it looks in the editor
There are various ways on how you can achieve this. One way is to add a HTML element directly into the WYSIWYG editor and mark it up with HTML. This is also how the Luma theme has done this. If you look at your editor, you see the content in small blue below the image. If you switch from WYSIWYG to HTML, you can see the HTML markup of this element:
<span class="content bg-white">
<span class="info">New Luma Yoga Collection</span>
<strong class="title">Get fit and look fab in new seasonal styles</strong>
<span class="action more button">Shop New Yoga</span>
</span>
You can simply use CSS to style this element.
However...
Although this is a very widely uses approach to do such a thing (and it's easy and fast to do so), it's not the most elegant solution. After all, it's not clear from the WYSIWYG-editor that the 'blue link' is actually a special element. If your client starts messing with it, he will break the layout and call you because 'you made the site, so it's your fault'. Trust me, I've been there...
A more elegant solution would be to use widgets. A widget is very simple to create in Magento 2. First you have to create a file called widget.xml in the etc-folder of your module, and put something like this in it:
<?xml version="1.0"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget id="example_widget" class="Vendor\Module\Block\Widget\Example">
<label translate="true">Example widget</label>
<description translate="true">This is an example widget</description>
</widget>
</widgets>
Now you can create a Block in the Block-folder of your module:
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Example extends Template implements BlockInterface
{
/**
* #return string
*/
public function _toHtml()
{
return '<p class="hello">Hello world!</p>';
}
}
Now if you click the widget-button in the WYSIWYG-editor, the widget will be there in the list of widgets to choose from:
Now, if you insert this widget in your WYSIWYG editor, you're sure about the HTML it will output (since that is handled with PHP), and your client cannot 'break it'.
In your scenario you most likely want to add parameters so you can make your widget reusable. This is very simple. Edit your widget.xml:
<widget id="example_widget" class="Vendor\Module\Block\Widget\Example">
<label translate="true">Example widget</label>
<description translate="true">This is an example widget</description>
<parameters>
<parameter name="name" xsi:type="text" visible="true" sort_order="0">
<label translate="true">Name</label>
<description translate="true">Please enter a name</description>
</parameter>
</parameters>
</widget>
And to use it in your Block Class:
public function _toHtml()
{
return '<p class="hello">Hello ' . $this->getName() . '</p>';
}
It's really that simple.
In your specific case I would suggest creating a widget with 4 parameters:
Header
Content
Button Text
Button Link
I try to include an HTML-View in a XML-View which actually shouldn't be a problem. Unfortunately the content of the HTML-View is not added to the site. An error is not thrown.
In the XML-View I have a placeholder for the HTML-View:
<html:div
id="helptext">
</html:div>
In the controller of the XML-View I instantiate the HTML-View and add it to the placeholder:
var oController = sap.ui.controller("dividendgrowthtools.view.textviews.dividendcomparehelpDE");
var oTextView = sap.ui.view({
viewName: "dividendgrowthtools.view.textviews.dividendcomparehelpDE",
controller: oController,
type: sap.ui.core.mvc.ViewType.HTML
});
var oHelpText = this.getView().byId("helptext");
oTextView.placeAt(oHelpTextDiv.sId);
That's the content of the HTML-View:
<template data-controller-name="dividendgrowthtools.view.textviews.dividendcomparehelpDE">
<p>This is a test.</p>
</template>
Does anybody have an idea what the problem could be?
you need to be aware of the functionality of this.getView().byId();
SAPUI5 generates another ID then the one you specified in the XML-View("helptext") see:
So you need to pass the right ID. You need to be aware that these ID could possibily change, when you refactor the XML structure.
I would recommend you, not to use HTML elements in SAPUI5.
Some helpful links:
https://scn.sap.com/thread/3551589
https://plnkr.co/edit/wDBpQuxIWd0WGOoyulN0?p=preview (made by me)PLnkr Link
I have implemented a module where i m trying to generate a PDF.PDF is generated successfully using MVCRAZORtppdf.
But now I want to add a image on PDF as well.How to add a image on PDF. And I want to add image on controller level.
Here is my solution done completely inside view:
#{
Layout = null;
var imagePath = Server.MapPath("~/Content/images");
....
}
<body>
....
<img src="#imagePath\Cert_back.bmp" />
....
</body>
If you want to set an image in Controller, I guess you can use ViewBag to set value in imagePath variable.
However, keep in mind that you can use Razor's if-then-else statement and set value dynamically in View.
EDIT: Heres the example: https://github.com/prakash-anubavam/alloypreloadedsqlitedb/tree/master/app
And sumarizing, how does the view details.xml know which model is it taking the data from?
Coming from asp.net mvc, im having some issues understanding this MVC.
I can understand how to use tables and such on the view like:
<TableView id="table" dataCollection="fighters" onClick="showId" dataTransform="transformData">
And fetch the data in the controller, i know it will use the global (singleton) collection of fighters and that will bind the model to the view.
But i have come across an example (i cant really find now) where it had a View, with no table, just some labels and text='{variableName}', which i assume it gets from the model.
However the controller, did not assign the model (coming from an args[0] because it was always called from another controller which had the actual table), but it never assigned the model instance to the view in any way... so the question is how did it work? Is alloy smart enough to detect the actual model instance and use it? How would i do it? Something like $model = ...; or $.details.model = ...; or something like that? How did the view know where to take '{variableName}' from if the model was never assigned with a table or something.
This is actually a carryover hack, that may not work in the future, according to this thread.
If you take a look at index.js in your example (the controller), the model is assigned by the onClick event of the TableView:
function showId(e) {
if (e.row.model) {
var detailObj=fighters.get(e.row.model);
// Assigning to the $model actually sets this model as the one to bind too
var win=Alloy.createController('detail',{"$model":detailObj});
win.getView().open();
}
}
This is a "specai" variable that is automagically assigned for databinding, and is how it works underneath the covers (or did work under the covers).
This is undocumented and NOT ideal or recommended.
I've found Tony Lukasavage answer the cleaner aproach to bind a existing model to view:
You can find it here Josiah Hester answer is based on it (yeah, beware it's kind of a hack).
Although, Fokke Zandbergen gave an alternative worth looking at, maybe less hackish, don't know.
Expanding Josiah answer, you could do as follows:
On Master view:
<Alloy>
<Collection src="modelName" />
<View id="topview" class="container">
<TableView id="tblModels" dataCollection="modelName" dataTransform="transformModel">
<Require src="rowModel"/>
</TableView>
</View>
</Alloy>
Then, on master controller:
//retrieve the id of the model
var thisId = e.row.thisIndex;
//pass special key $model
var detailController = Alloy.createController("detail", { "$model": Alloy.Collections.detail.get(thisId) });
detailController.getView().open();
Then, on detail view:
<Alloy>
<View class="container" >
<Label text="{id}"/>
<Label text="{fullName}"/>
</View>
</Alloy>
On detail controller: do nothing special.
If you have a transform function on master controller, it returns a object and you can use its properties inside detail view like "{fullName}".
In a flex application, i want to display formatted tweets in a spark textarea but it is showing html elements (with tags) 'as it is' rather parsing it and converting into rich html text, i was following this example from flex official site
<s:TextArea width="400" height="100">
<s:content>This is <s:span color="#FF0000">HTML text</s:span>
in an <s:span fontWeight="bold">Spark TextArea control</s:span>.
Use the <s:span textDecoration="underline">content</s:span> property
of the <s:span color="#008800">Spark TextArea control</s:span>
to include basic HTML markup in your text, including
<s:a href="http://www.adobe.com" target="_blank">links</s:a>.
</s:content>
</s:TextArea>
but passing my data like this
<s:TextArea>
<s:content>{TwitterString.parseTweet(data.text)}</s:content>
</s:TextArea>
and the result to it for a tweet is,
<s:a href='http://t.co/a7bQnmLRGy' target='_blank'>http://t.co/a7bQnmLRGy</s:a> I'll be there
which means it has not been formatted as expected.
Any idea how to make <s:content> work for dynamic content pass to it?
Please no answers of TextConverter this would be my last resort, i would love to use <s:content> working
Check out the documentation for TextArea's content property. In particular, it states this about the content property:
This property is typed as Object because you can set it to to a String, a FlowElement, or an Array of Strings and FlowElements. In the example above, the content is a 2-element array. The first array element is the String "Hello". The second array element is a SpanElement object with the text "World" in boldface.
So the key here is that your TwitterString.parseTweet() function is returning a String. As such, the TextArea is displaying it as a String and not bothering to convert the elements found in the text.
Instead, if you wish to continue down this path, your TwitterString.parseTweet() function should return an Array. Each element in the array is either a String (represents normal text) or some sort of FlowElement object (a SpanElement, LinkElement, ParagraphElement, etc.). If you return an array that contains the structure you want, it will render your content properly. See below for a simple example, it will get very tedious for real content.
So you're really better off using TextConverter ... because by writing the code like you want, you are doing the exact same thing that TextConverter does.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
<fx:Script>
<![CDATA[
import flashx.textLayout.elements.LinkElement;
import flashx.textLayout.elements.SpanElement;
[Bindable("contentChanged")]
private function getTheContent():Array
{
var temp:Array = [];
var link:LinkElement = new LinkElement();
link.href = "http://google.com";
var span:SpanElement = new SpanElement();
span.text = "Google";
link.addChild(span);
temp.push(link);
// continue building your structure...(so tedious)
return temp;
}
]]>
</fx:Script>
<s:TextArea width="400" height="100">
<s:content>{getTheContent()}</s:content>
</s:TextArea>
</s:Application>