How to set xml:space="preserve" from Flex/Actionscript - apache-flex

I am working with ActionScript 3 and I need to add a simple tag to one of my XML nodes.
I am trying to add xml:space=preserve tag to one of my text nodes.
var tSpan : XML = new XML ( "<tspan xml:space=\"preserve\"></tspan>" );
My problem is, the moment I add the tSpan node to my main XML, the tag is automatically converted to something like this:
<tspan aaa:space="preserve" xmlns:aaa="http://www.w3.org/XML/1998/namespace">.....
Any idea on how to add xml:... values to an XML node with Actionscript?
Thanks in advance.

Simply create a namespace definition for xml: within your node. It would look like this.
var tSpan : XML = new XML ( "<tspan xmlns:xml=\"http://www.w3.org/XML/1998/namespace\" xml:space=\"preserve\"></tspan>" );
The xml:space attribute requires the a namespace definition. See this document for more details. http://www.w3.org/XML/1998/namespace

Related

Include specific attribute or child-element text in breadcrumb rendering

Within the author it displays a breadcrumb, and I know you can modify its display to either some other static text or localisation, but I'm wondering if it's possible to dynamically show an attribute, or execute some other context-specific xpath dynamically.
As a test I can change the breadcrumb using the localisation editor variable ${i18n()}.
cc_config.xml
<elementRenderings platform="webapp">
<render element="num" as="${i18n(test)}" annotation="${i18n(test)}"/>
translation-cc.xml
<key value="test">
<comment></comment>
<val lang="en_US">Year</val>
"Year" is actually a num element.
However, trying any other variable, even 'more static' ones like ${cf} or ${tp} simply render the variable text literally, instead of evaluating it.
cc_config.xml
<elementRenderings platform="webapp">
<render element="paragraph" as="${xpath_eval(./#eId)}" annotation="${xpath_eval(./#eId)}"/>
<render element="p" as="${tp}" annotation="${tp}"/>
(paragraphs do have an eId attribute)
As you can see, I tried using annotation; but these tooltips also simply display the variable literally.
I also fiddled and tried a bunch of xpath stuff, like #eId/.#eId//#eId, but I think there's some restriction in using the Content Completion Configuration File with respect to editor variables.
So is the thinking right but I am doing something wrong, or is it not the right way but there is some other way to affect the breadcrumb? Maybe with the schema?
The element display names in cc_config.xml file do not support most of the editor variables. Most of them, like ${cf} (current file) and ${tp} (total number of pages) don't make sense to be used when rendering the name of an element.
The xpath_eval would make sense - the display name of an element may depend on its attributes (e.g. the #id attribute), it's index in the document (e.g. 'Section 3'), etc. We have a feature request registered for this case and I added your vote to it.
As a partial workaround you can use a JS API to compute the display name of the element based on the element original name and its attributes:
goog.events.listen(workspace, sync.api.Workspace.EventType.BEFORE_EDITOR_LOADED, function(e) {
e.options.elementNameEnhancer = function(elemName, attrs) {
var displayString = elemName;
var attr = attrs['id'];
if (attr) {
displayString += ' (#' + attr.attributeValue + ')';
}
return displayString;
};
});

View an image in ASP.NET MVC 5

I can view an image in index file like this :
#*#Html.DisplayFor(modelItem => item.ImagePath)*#//Instead of this, I use the line below
<img src="~/Images/#item.ImagePath" height=100 width=200>
But In details file I have this :
#Html.DisplayFor(model => model.ImagePath)
How can I view the image in details file when there is a model not item? I have done several attempts but failed all of them. Thanks.
You can use custom template and dataannotations
http://msdn.microsoft.com/en-us/library/ee308450(v=VS.100).aspx
http://www.codeproject.com/Tips/720515/Custom-HTML-Helper-for-MVC-Application
The answer should be like :
<img src="~/Images/#Url.Content(Model.ImagePath)" height=100 width=200 />
This razortag string " #Html.DisplayFor(model => model.ImagePath) " is calling the DB, getting the path and then presenting the path string as its output. In the Index view " item.ImagePath " is a variable that has been populated and currently contains the path ready for output. In the Details view, there are no variables, and the ImagePath is empty because the function has not run. Well technically it ran once but since it delivered its output to the view it is again empty by the time you try to use it. To get the ImagePath as your img src call the whole function where you are placing the image and it will run again and its output will be the ImagePath used for the img src.
This also will work in the Index view as well. The codeproject.com link in the above answer provides some relevant ideas.
"<img src="#Html.DisplayFor(model => model.ImagePath)"

z3c.form and Plone - add custom css file to a form without using a custom template

In a project I'm working on we've defined a simple z3c.form, it looks like this.
class IImportCandidateForm(Interface):
csv_file = NamedFile(title=_(u'CSV file'))
class ImportForm(form.Form):
fields = field.Fields(IImportForm)
ignoreContext = True
def updateWidget(self):
super(ImportForm, self).updateWidget()
... snip ...
#button.buttonAndHandler(u'Import')
def handleImport(self, action):
data, errors = self.extractData()
if errors:
self.status = self.formErrorMessage
return
file = data["csv_file"].data
Is there a way to associate a custom css file with this form without first wrapping it in a custom page template with the form?
No, there isn't. Unless you use a form wrapper, the form's template renders only the form and not the entire page.
In you are using this form in a custom view, you have a class style added to the body class (something like template-yourviewname). So you can add you CSS rules to a main CSS resource, loaded in every page, but prefix every rule with .template-yourviewname.

CKEditor.net table class

In a asp.net C# webapp I'm using the CKEditor 3.6.2 and I'm facing the following problem:
In my stylesheet I have a CSS class to use in tables and I'm trying to bring this class already filled in the "Table properties", "Advanced" tab and the "Stylesheet Classes" field.
I want to bring this field filled with the string "blue_table", which is the name of my CSS class. I'm working with the source of the "table" plugin. I have figured out how to change the value of fields like width and height, but the one I want is the "Stylesheet Classes" field.
Do any of you know to to set a default value for this field?
You don't have to edit the ckeditor.js file to customise the editor. You can add the following either to config.js and use it site wide or on any page where you're using CKEditor (inside a script tag as below, after the editor fields you're using).
<script type="text/javascript">
CKEDITOR.on( 'dialogDefinition', function( ev ) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested on (the Table dialog).
if ( dialogName == 'table' ) {
// Set the tab
var advTab = dialogDefinition.getContents( 'advanced');
// Grab the field
var stylesField = advTab.get('advCSSClasses');
// Set the default value
stylesField['default'] = 'blue_table';
}
});
</script>
This is modified from the CKEditor documentation. The hardest part is working out the IDs and names for all the fields used in the dialogs.
Finally I found the answer. This property is in the dialogadvtab, in the property "advCSSClasses". The thing is that this plugin is inside the core js, I mean the ckeditor.js.
I had to do this :
children :
[
{
id : 'advCSSClasses',
att : 'class',
type : 'text',
label : lang.cssClasses,
'default' : 'blue_table',
setup : setupAdvParams,
commit : commitAdvParams
}
]
The "problem" now is that I had to do it in the ckeditor.js, which is not a good practice. The problem is solved, but not int the best way.

Looking for CSS parser written in AS3

I need to load and apply CSS at runtime in my Flex app. I know that the adobe docs say that you need to compile the CSS before loading it but I would like to find a work around.
I know that you can set individual styles like this:
cssStyle = new CSSStyleDeclaration();
cssStyle.setStyle("color", "<valid color>);
FlexGlobals.topLevelApplication.styleManager.setStyleDeclaration("Button", cssStyle, true);
I was planning on parsing a CSS file and appling each attribute as above.
I was wondering if:
Adobe had a CSS parser library that I could use
Someone else had a CSS parser that I could use
If I write my own CSS parser what I should watch out for
I know that the adobe flex.text.StyleSheet class has a CSS parser but I could not find a way to harness that. (Is there a way to get that source code?)
Edit: This solution does not work. All selectors that are taken out of the parser are converted to lowercase. This may work for your application but it will probably not...
I am leaving this answer here because it may help some people looking for a solution and warn others of the limitations of this method.
Although it was not intended for this it is possible to use the StyleSheet class to parse the CSS. I am currently investigating how robust this is currently but for the most part it appears to be working.
public function extractFromStyleSheet(css:String):void {
// Create a StyleSheet Object
var styleSheet:StyleSheet = new StyleSheet();
styleSheet.parseCSS(css);
// Iterate through the selector objects
var selectorNames:Array = styleSheet.styleNames;
for(var i:int=0; i<selectorNames.length; i++){
// Do something with each selector
trace("Selector: "+selelectorNames[i];
var properties:Object = styleSheet.getStyle(selectorNames[i]);
for (var property:String in properties){
// Do something with each property in the selector
trace("\t"+property+" -> "+properties[property]+"\n");
}
}
}
I had similar problem but more precisely i want the completely avoid the compilation because my application is wrapper by ActiveX used by a custom exe file and i let the software distributor to customize their skin.
In practice we put the <fx:Style> outside the application. To avoid low level parsing on the string we had transformed the Style Sheet in an XML:
<styles>
<namespace name="myNs" value="com.myComponent">
<declaration selector="myNS|Button#myselector:over #mysubselector">
color:#ffffff;
font-size:bold
</declaration>
... other styles
</styles>
Beside the security considerations about let the user know your components you can load the XML and create a CSSStydeclaration.
Splitting and parsing only the selector let you create a series of CSSCondition and CSSSelector to add to your CSSStyleDeclaration. To parse the selector we use a little loop which search "#",":" and "." and split the string mantaining the sequence of the found CSS conditions.
var selectors:Array = [];
// first selector
var conditions:Array = [
new CSSCondition(CSSConditionKind.ID, 'myselector');
new CSSCondition(CSSConditionKind.PSEUDO, 'over');
];
// here you have to find and expand the namespace
ancestor:CSSSelector = new CSSSelector('com.myComponent.Button', conditions);
selectors.push(selector);
// second selector
var conditions:Array = [
new CSSCondition(CSSConditionKind.ID, 'mysubselector');
];
selector:CSSSelector = new CSSSelector('', conditions, ancestor);
selectors.push(selector);
// Empty style declaration
new CSSStyleDeclaration(selectors, styleManager, false);
Then you can parse CSS properties by parseCSS() with the function created by #sixtyfootersdude, but using a fake selector:
var myCSS:String = "#fake " + "{" + cssTextReadedFromXML + "}";
var style:StyleSheet = new StyleSheet();
sheet.parseCSS(myCSS);
// here you have your parsed properties
var list:Object = sheet.getStyle('#fake');
Then you can add the properties to the CSSStyleDeclaration and apply them by the setStyle method and apply the declaration as in your example.
Less or more is how I've tryed to resolve this.

Resources