So I have a seaside application. The first component just render a subcomponent:
MCRootComponent>>initialize
super initialize.
self main: MCMainComponent new.
MCRootComponent>>renderComponentOn:html
renderContentOn: html
html render: main
Now the subcomponent being rendered looks like:
MCMainComponent>>renderContentOn: html
html tbsForm:[
html tbsContainerFluid: [
html anchor
callback: [ self call: (MCServiceOrderComponent from: MCServiceOrder new)];
with: 'New Service Order' ]]
and the MCServiceOrderComponent:
MCServiceOrderComponent>>initialize
super initialize.
customerComponent := MCClienteComponent new.
vehicleComponent := MCVehicleComponent new.
vehicleComponent lookupCallback: [
self show:(MCVehicleLookupComponent new) onAnswer:[:vehicle|
vehicle ifNotNil: [
serviceOrder vehicle: vehicle.
vehicleComponent objectToRender: vehicle.
customerComponent objectToRender: vehicle customer ]]]
MCServiceOrderComponent>>renderContentOn: html
html heading level1 with: 'ServiceOrder'.
html tbsForm with: [
html render: vehicleComponent.
html render: customerComponent.
]
So far this renders allright. Notice the lookup callback being passed to the MCVehicleComponent. This block is passed to the callback on a button rendered inside the MCVehicleComponent.
MCVehicleComponent>>renderContentOn: html
self renderContainer: 'Vehicle' on: html with: [
self renderSearchFor: #id on: html with: self lookupCallback.
self renderInputFor: #maker on: html.
self renderInputFor: #model on: html.
self renderInputFor: #color on: html ]
MCVehicleComponent>>renderSearchFor: aSymbol on: html with: aBlock
html tbsFormGroup: [
html label: aSymbol asCapitalizedPhrase.
html tbsInputGroup: [
html textInput tbsFormControl on: aSymbol of: self objectToRender.
html tbsInputGroupButton: [
html tbsButton callback: aBlock;
with: [ html tbsGlyphIcon iconSearch ] ] ]]
It should #call: to a MCVehicleLookupComponent and return the result back. However the reality is that as soon as the #call: it's made, the page content goes blank. I have tried calling the MCVehicleLookupComponent directly from the MCMainComponent and it works fine, so I know the problem isn't there. Do you have any idea what could be causing this behavior?
I'm fairly new at smalltalk so please be patient with the stupid questions and horrible code (this is my first application. Any suggestions are welcome).
Turns out I was calling out the wrong component. Everything works as a charm. Sorry.
Related
I have an AMP-LIST which includes a few items, each item has some properties. One of these properties is an array of Images that is supposed to be used inside an AMP-CAROUSEL. Something like this scheme:
<amp-list src="A/JSON/URL">
<h2>{{somthing}}</h2>
<p>{{somthing}}</p>
<amp-carousel>
** AN ARRAY IS NEEDED TO BE RENDERED INSIDE HERE**
</amp-carousel>
</amp-list>
How can I render the IMAGES array which is part of ITEMS array inside the carousel for every item
{
items: [
{
prop:value1,
images:['image1URL','image2URL','image3URL',....],
},
{
prop:value2,
images:['image4URL','image5URL',....],
},
]
}
*** Problem Solved :
It's an AMP-HTML project by the way.
And I managed to get the results by changing the html code to this:
<amp-list src="A/JSON/URL">
<h2>{{somthing}}</h2>
<p>{{somthing}}</p>
<amp-carousel>
{{#TheImageArray}}
<img src={{theURL}} />
{{/TheImageArray}}
</amp-carousel>
</amp-list>
I'm writing a basic web application (begin with seaside) but the callback never runs...any ideas?
renderContentOn: html
| group |
html form: [
html text: 'Gender: '.
group := html radioGroup.
group radioButton
selected: self contact isMale;
callback: [ self contact beMale ].
html text: 'Male'.
group radioButton
selected: self contact isFemale;
callback: [ self contact beFemale ].
html text: 'Female'.
html break.
html anchor
callback: [ mmpiItems setAnswer: (self option) ];
with: 'Next'.
]
An anchor inside the form does not submit the form, only a submitbutton does. This is not defined by Seaside but by HTML.
You can find more information in the seaside book on writing forms with Seaside: http://book.seaside.st/book/fundamentals/forms
You must use submitButton instead of an anchor or any other button.
Your code would look like this:
renderContentOn: html
| group |
html form: [
html text: 'Gender: '.
group := html radioGroup.
group radioButton
selected: self contact isMale;
callback: [ self contact beMale ].
html text: 'Male'.
group radioButton
selected: self contact isFemale;
callback: [ self contact beFemale ].
html text: 'Female'.
html break.
"Use a submitButton instead of a regular anchor/button"
html submitButton
callback: [ mmpiItems setAnswer: (self option) ];
with: 'Next'.
]
I have created a very simple templated widget. Something like this:
function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, ..., ...) {
return declare("widgets.some.Widget", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {..
...
templateString: template,
widgetsInTemplate: true,
...
}
This widgets loads and works just fine. However, when I want to use it in another templated widget like this:
<div style="width: 400px" data-dojo-type="widgets.some.Widget" ... >
</div>
.. I end up with 2 errors:
Cannot read property 'nodeType' of null"
and
widgets.somewidgetusing.SomeWidget: parser returned unfilled promise
(probably waiting for module auto-load), unsupported by
_WidgetsInTemplateMixin. Must pre-load all supporting widgets before instantiation."
Both widgets works great stand alone, but when I use widgets.some.Widget in another widget the errors occur.
I was getting this same message. The culprit turned out to be non-unique html ids. I was nesting some.Widget inside of two different widgets. Some.Widget's template html has a textbox with id="Text1". I removed the id and problem resolved.
Is something like the following valid?
TransactionReport := WATableReport new
rows: SpendingManager instance entriesForPosting asArray;
columns: (OrderedCollection new
add: (WAReportColumn
renderBlock: [ :each :html | (html submitButton
callback: [ SpendingManager removeTransaction: each. self renderReport ];
text: 'Backout Transaction')]
title: '');
It does actually render the submit button with each row, but clicking it doesn't appear to do anything.
I've been able to kinda of accomplish this, though it's not as pretty as a button:
add: (WAReportColumn new
title: '';
valueBlock: [:anEvent | 'delete'];
clickBlock: [ :each | SpendingManager instance removeTransaction: each]);
yourself);
Would still love some feedback.
Submit Buttons that do nothing are most likely not inside a form tag. So can you check if your report works if you embed it into a html form: [] block?
If a form is not an option, you can replace the submit buttons with anchors. You can use css to make anchors look like buttons if that aspect is important.
I can't get this to work at all:
renderContentOn: html
html form: [
html textInput
on: #newEmp of: self.
html submitButton
callback: [ self addEmployee: newEmp ];
text: 'Add Employee'.
self employeeNames do: [ :eachEmp | html text: Character cr asString. html text: eachEmp.]
]
I just keep getting my output on one line. Am I missing something? I've tried several variations of cr but none have worked thus far.
Don't rely on carriage returns to display your data in the browser. The employee names obviously belong either in a list or a table (you are providing a list of names):
html unorderedList: [
self employeeNames do: [ :eachEmp |
html listItem: [
html text: eachEmp ] ] ]
You most certainly want html break instead of html text: Character cr or any variation thereof. HTML intentionally treats newlines in text as simple spaces.
Other than that, the idea of max-leske to use item lists is much to be preferred.