You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@isis.apache.org by da...@apache.org on 2015/05/28 15:03:43 UTC
[17/29] isis git commit: ISIS-1133: working on anchors and
cross-references.
http://git-wip-us.apache.org/repos/asf/isis/blob/7db616ea/adocs/documentation/src/main/asciidoc/user-guide/_ug_wicket-viewer_customisation_tweaking-css-classes.adoc
----------------------------------------------------------------------
diff --git a/adocs/documentation/src/main/asciidoc/user-guide/_ug_wicket-viewer_customisation_tweaking-css-classes.adoc b/adocs/documentation/src/main/asciidoc/user-guide/_ug_wicket-viewer_customisation_tweaking-css-classes.adoc
new file mode 100644
index 0000000..19959ce
--- /dev/null
+++ b/adocs/documentation/src/main/asciidoc/user-guide/_ug_wicket-viewer_customisation_tweaking-css-classes.adoc
@@ -0,0 +1,109 @@
+[[_ug_wicket-viewer_customisation_tweaking-css-classes]]
+= Tweaking CSS classes
+:Notice: Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at. http://www.apache.org/licenses/LICENSE-2.0 . Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+:_basedir: ../
+:_imagesdir: images/
+
+
+
+The HTML generated by the Wicket viewer include plenty of CSS classes so that you can easily target the required elements as required. For example, you could use CSS to suppress the entity's icon alongside its title. This would be done using:
+
+[source,css]
+----
+.entityIconAndTitlePanel a img {
+ display: none;
+}
+----
+
+These customizations should generally be added to `src/main/webapp/css/application.css`; this file is included by default in every webpage served up by the Wicket viewer.
+
+
+
+== Targeting individual members
+
+For example, the `ToDoItem` object of the Isis addons example https://github.com/isisaddons/isis-app-todoapp/[todoapp] (not ASF) has a `notes` property. The HTML for this will be something like:
+
+[source,html]
+----
+<div>
+ <div class="property ToDoItem-notes">
+ <div class="multiLineStringPanel scalarNameAndValueComponentType">
+ <label for="id83" title="">
+ <span class="scalarName">Notes</span>
+ <span class="scalarValue">
+ <textarea
+ name="middleColumn:memberGroup:1:properties:4:property:scalarIfRegular:scalarValue"
+ disabled="disabled"
+ id="id83" rows="5" maxlength="400" size="125"
+ title="">
+ </textarea>
+ <span>
+ </span>
+ </span>
+ </label>
+ </div>
+ </div>
+</div>
+----
+
+The `src/main/webapp/css/application.css` file is the place to add application-specific styles. By way of an example, if (for some reason) we wanted to completely hide the notes value, we could do so using:
+
+[source,css]
+----
+div.ToDoItem-notes span.scalarValue {
+ display: none;
+}
+----
+
+You can use a similar approach for collections and actions.
+
+
+
+
+== Targeting members through a custom CSS style
+
+The above technique works well if you know the class member to target, but you might instead want to apply a custom style to a set of members. For this, you can use the `@CssClass`.
+
+For example, in the `ToDoItem` class the following annotation (indicating that this is a key, important, property) :
+
+[source,java]
+----
+@PropertyLayout(cssClass="x-myapp-highlight")
+public LocalDate getDueBy() {
+ return dueBy;
+}
+----
+
+would generate the HTML:
+
+[source,html]
+----
+<div>
+ <div class="property ToDoItem-dueBy x-myapp-highlight">
+ ...
+ </div>
+</div>
+----
+
+This can then be targeted, for example using:
+
+[source,css]
+----
+div.x-myapp-highlight span.scalarName {
+ color: red;
+}
+----
+
+Note also that instead of using `@PropertyLayout(cssClass=...)` annotation, you can also specify the CSS style using a xref:_dynamic_layouts[dynamic layout] JSON file:
+
+[source,javascript]
+----
+"dueBy": {
+ "propertyLayout": {
+ "cssClass": "x-myapp-important"
+ }
+},
+----
+
+
+
http://git-wip-us.apache.org/repos/asf/isis/blob/7db616ea/adocs/documentation/src/main/asciidoc/user-guide/_ug_wicket-viewer_customisation_using-different-css-file.adoc
----------------------------------------------------------------------
diff --git a/adocs/documentation/src/main/asciidoc/user-guide/_ug_wicket-viewer_customisation_using-different-css-file.adoc b/adocs/documentation/src/main/asciidoc/user-guide/_ug_wicket-viewer_customisation_using-different-css-file.adoc
new file mode 100644
index 0000000..118d831
--- /dev/null
+++ b/adocs/documentation/src/main/asciidoc/user-guide/_ug_wicket-viewer_customisation_using-different-css-file.adoc
@@ -0,0 +1,36 @@
+[[_ug_wicket-viewer_customisation_using-different-css-file]]
+= Using a different CSS file
+:Notice: Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at. http://www.apache.org/licenses/LICENSE-2.0 . Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+:_basedir: ../
+:_imagesdir: images/
+
+
+
+If for some reason you wanted to name the CSS file differently (eg `stylesheets/myapp.css`), then adjust the Guice bindings (part of Isis' bootstrapping) in your custom subclass of `IsisWicketApplication`:
+
+[source,java]
+----
+public class MyAppApplication extends IsisWicketApplication {
+ @Override
+ protected Module newIsisWicketModule() {
+ final Module isisDefaults = super.newIsisWicketModule();
+ final Module myAppOverrides = new AbstractModule() {
+ @Override
+ protected void configure() {
+ ...
+ bind(String.class)
+ .annotatedWith(Names.named("applicationCss"))
+ .toInstance("stylesheets/myapp.css");
+ ...
+ }
+ };
+
+ return Modules.override(isisDefaults).with(myAppOverrides);
+ }
+}
+----
+
+As indicated above, this file is resolved relative to `src/main/webapp`.
+
+
+
http://git-wip-us.apache.org/repos/asf/isis/blob/7db616ea/adocs/documentation/src/main/asciidoc/user-guide/_ug_wicket-viewer_customisation_welcome-page.adoc
----------------------------------------------------------------------
diff --git a/adocs/documentation/src/main/asciidoc/user-guide/_ug_wicket-viewer_customisation_welcome-page.adoc b/adocs/documentation/src/main/asciidoc/user-guide/_ug_wicket-viewer_customisation_welcome-page.adoc
new file mode 100644
index 0000000..bb3d26c
--- /dev/null
+++ b/adocs/documentation/src/main/asciidoc/user-guide/_ug_wicket-viewer_customisation_welcome-page.adoc
@@ -0,0 +1,42 @@
+[[_ug_wicket-viewer_customisation_welcome-page]]
+= Welcome page
+:Notice: Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at. http://www.apache.org/licenses/LICENSE-2.0 . Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+:_basedir: ../
+:_imagesdir: images/
+
+
+
+It's possible to customize the application name, welcome message and about message can also be customized. This is done by adjusting the Guice bindings (part of Isis' bootstrapping) in your custom subclass of `IsisWicketApplication`:
+
+[source,java]
+----
+public class MyAppApplication extends IsisWicketApplication {
+ @Override
+ protected Module newIsisWicketModule() {
+ final Module isisDefaults = super.newIsisWicketModule();
+ final Module myAppOverrides = new AbstractModule() {
+ @Override
+ protected void configure() {
+ ...
+ bind(String.class)
+ .annotatedWith(Names.named("applicationName"))
+ .toInstance("My Wonderful App");
+ bind(String.class)
+ .annotatedWith(Names.named("welcomeMessage"))
+ .toInstance(readLines("welcome.html")); // <1>
+ bind(String.class)
+ .annotatedWith(Names.named("aboutMessage"))
+ .toInstance("My Wonderful App v1.0");
+ ...
+ }
+ };
+
+ return Modules.override(isisDefaults).with(myAppOverrides);
+ }
+}
+----
+<1> the `welcome.html` file is resolved relative to `src/main/webapp`.
+
+
+
+